frontend-apps/users-manage/tests/views/3_organisms/Services/ServiceCard.test.js

import { mount} from '@vue/test-utils'
import { expect, test, describe, vi, beforeEach } from 'vitest'
import ServiceCard from "@organisms/ServicesList/ServiceCard.vue"
import { createStore} from 'vuex'
import axios from "axios";
import {store as services} from "@/store/modules/services"
import {store as users} from "@/store/modules/users"
import AdapterOfServices    from '@adapters/adapterOfServices/Services'
import ServiceOfServices    from '@services/serviceOfServices/Services.js'
import AdapterOfUsers    from '@adapters/adapterOfUsers/Users'
import ServiceOfUsers from '@services/serviceOfUsers/Users.js'
import CaseOfUsersInService from '@useCases/CaseOfUsersInService.js'

vi.mock('axios')


describe("tests Service Card component", () => {
  const store = createStore({
    plugins: [],
    modules: {
      services,
      users
    },
  })

  const defaultServices = [
    {
      "id": 1,
      "created_at": "2024-03-06T17:31:31.948355541+03:00",
      "updated_at": "2024-03-06T17:31:31.948355541+03:00",
      "deleted_at": null,
      "name": "jsonplaceholder.typicode.com",
      "port": 9965,
      "proxy_ip": "172.25.78.153",
      "site_ip": "https://jsonplaceholder.typicode.com/",
      "internet_uri": "localhost",
      "description": "localhost",
      "is_online": true
    },
  ]
  
  const resServices = [
    {
      "id": 1,
      "created_at": "2024-03-06T17:31:31.948355541+03:00",
      "updated_at": "2024-03-06T17:31:31.948355541+03:00",
      "deleted_at": null,
      "name": "jsonplaceholder.typicode.com",
      "port": 9965,
      "proxy_ip": "172.25.78.153",
      "device_ip": "https://jsonplaceholder.typicode.com/",
      "internet_uri": "localhost",
      "description": "localhost",
      "is_online": true
    },
  ]

  axios.get.mockResolvedValue({
    data: defaultServices,
  })

  const adapterOfServices = new AdapterOfServices(import.meta.env.VITE_API_ADDR)
  const serviceOfServices = new ServiceOfServices(adapterOfServices, store)

  const adapterOfUsers    = new AdapterOfUsers(import.meta.env.VITE_API_ADDR)
  const serviceOfUsers =    new ServiceOfUsers(adapterOfUsers, store)
  

  const caseOfUsersInService = new CaseOfUsersInService(serviceOfUsers, serviceOfServices)

  beforeEach(() => {
    store.dispatch('services/resetStore')
  })


  test('Service Card mounted with vuex', async () => {
    const wrapper = mount(ServiceCard, {
      // shallow: true,
      global: {
        plugins: [store]
      },
      props: {
        serviceOfServices,
        caseOfUsersInService,
      },
    })

    // console.log('wrapper.html', wrapper.html())

    await serviceOfServices.fetchServices()

    store.commit('services/setServicesState', 'active')

    const uploadServices = store.getters['services/services']
    // const servicesState = store.getters['services/servicesState']

    expect(uploadServices).toEqual(resServices) // full services array of store

    expect(wrapper.html()).toContain('block w-full p-6 bg-white')
    expect(wrapper.text()).toContain('статус')
    expect(wrapper.text()).toContain('Порт')
  })

  test('View EditCard component after select service', async () => {

    store.commit('services/setSelectedService', resServices[0])
    const selectedService = store.getters['services/selectedService']

    const wrapper = mount(ServiceCard, {
      global: {
        plugins: [store]
      },
      props: {
        serviceOfServices,
        caseOfUsersInService,
        id: 1,
      },
    })

    const wrapperHtml = wrapper.html()

    expect(selectedService).not.toBeNull()
    expect(selectedService.id).toBe(1)
    expect(wrapperHtml).toContain('Сохранить')
    expect(wrapper.find('textarea[name="description"]'))
  })

  test("Renders buttons - 'Отменить' and 'Удалить' in this service, after click to button delete service", async () => {

    beforeEach(() => {
      store.dispatch('services/resetStore')
    })

    const wrapper = mount(ServiceCard, {
      global: {
        plugins: [store]
      },
      props: {
        serviceOfServices,
        caseOfUsersInService,
        id: 1,
      },
      data () {
        return {
          isDelete: false,
        }
      },
    })

    await wrapper.setData({ isDelete: true })

    await wrapper.get('.ri-close-line').trigger('click')
    
    expect(wrapper.html()).toContain('Отменить')
    expect(wrapper.html()).toContain('Удалить')
  })

  test("Cancel Renders buttons - 'Отменить' and 'Удалить' in this service, after click to button cancel delete service", async () => {

    beforeEach(() => {
      store.dispatch('services/resetStore')
    })

    const wrapper = mount(ServiceCard, {
      global: {
        plugins: [store]
      },
      props: {
        serviceOfServices,
        caseOfUsersInService,
        id: 1,
      },
      data () {
        return {
          isDelete: true,
        }
      },
    })

    // console.log('wrapper.html', wrapper.html())

    await wrapper.get('[test-id="canelButton"]').trigger('click')
    
    expect(wrapper.html()).not.toContain('Отменить')
    expect(wrapper.html()).not.toContain('Удалить')
  })

  test('Set setStatus for prop isOnline in ServiceCard', async () => {
    
    const wrapper = mount(ServiceCard, {
      global: {
        plugins: [store]
      },
      props: {
        serviceOfServices,
        isOnline: false
      },
      data () {
        return {
          status: {title: 'disable', color: 'bg-red-700'}
        }
      },
    })

    // console.log('wrapper.html', wrapper.vm.status)

    const defaultStatus = wrapper.vm.status

    expect(defaultStatus.title).toContain('disable')
    expect(defaultStatus.color).toContain('bg-red-700')

    wrapper.vm.setStatus(true)

    expect(wrapper.vm.status.title).toBe('enable')
    expect(wrapper.html()).toContain('bg-green-700')

  })

  test('For Editing selected user in ServiceCard', async () => {

    const forEditService = {
      "id": 1,
      "created_at": "2024-03-06T17:31:31.948355541+03:00",
      "updated_at": "2024-03-06T17:31:31.948355541+03:00",
      "deleted_at": null,
      "name": "jsonplaceholder.typicode.com",
      "port": 9965,
      "proxy_ip": "172.25.78.153",
      "device_ip": "https://jsonplaceholder.typicode.com/",
      "internet_uri": "localhost",
      "description": "localhost",
      "is_online": true
    }


    const wrapper = mount(ServiceCard, {
      global: {
        plugins: [store]
      },
      props: {
        caseOfUsersInService
      },
    })

    const selectedService = store.getters['services/selectedService']

    expect(selectedService).toBeNull()

    await wrapper.vm.editService(forEditService)

    const selectedUserAfterEdit = store.getters['services/selectedService']
    const usersWithService = store.getters['users/usersWithService']

    expect(selectedUserAfterEdit).not.toBeNull()
    expect(selectedUserAfterEdit.id).toBe(1)

    usersWithService.map(user => {
      expect(user.serviceId.include(1)).toBe(true)
    })
    
  })

  test("View buttons - 'Отменить' and 'Удалить' after change isDelete for selected service in ServiceCard", async () => {

    beforeEach(() => {
      store.dispatch('services/resetStore')
    })
  
    const wrapper = mount(ServiceCard, {
      global: {
        plugins: [store]
      },
      props: {
        serviceOfServices,
        id: 1,
      },
      data () {
        return {
          isDelete: false,
        }
      },
    })

    // console.log('wrapper.html', wrapper.html())

    const defaultIsDelete = wrapper.vm.isDelete

    expect(defaultIsDelete).toBe(false)

    await wrapper.get('.ri-close-line').trigger('click') // Рендер отрисовывает только с помощью триггером
    // wrapper.vm.deleteService(true)

    const updatedIsDelete = wrapper.vm.isDelete

    // console.log('wrapper.html', wrapper.html())

    expect(updatedIsDelete).toBe(true)

    expect(wrapper.html()).toContain('Отменить')
    expect(wrapper.html()).toContain('Удалить')

  })

})