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

import { mount, config} from '@vue/test-utils'
import { expect, test, describe, vi, beforeEach } from 'vitest'
import EditServiceCard from "@organisms/ServicesList/EditServiceCard.vue"
import { createStore } from 'vuex'
import axios from "axios";
import {store as services} from "@/store/modules/services"
import AdapterOfServices    from '@adapters/adapterOfServices/Services'
import ServiceOfServices    from '@services/serviceOfServices/Services.js'

config.showDeprecationWarnings = false

vi.mock('axios')


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

  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,
  })

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

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

  test('EditServiceCard mounted with vuex', async () => {

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

    const wrapper = mount(EditServiceCard, {
      // shallow: true,
      global: {
        plugins: [store]
      },
      props: {
        serviceOfServices,
        id: 1,
      },
    })

    expect(selectedService).not.toBeNull()
    expect(selectedService.id).toBe(1)
    expect(wrapper.html()).toContain('flex justify-between items-center mb-2')
    expect(wrapper.html()).toContain('Онлайн')
    expect(wrapper.html()).toContain('Офлайн')
    expect(wrapper.text()).toContain('Сохранить')
  })

  test("Cancel selected service in EditServiceCard", async () => {

    config.showDeprecationWarnings = false

    await serviceOfServices.fetchServices()

    store.commit('services/setSelectedService', resServices[0])

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

    wrapper.vm.cancelEditService()

    const selectedService = store.getters['services/selectedService']
    
    expect(selectedService).toBeNull()
  })

  test("Editing selected service in EditServiceCard", async () => {

    store.commit('services/setSelectedService', resServices[0])

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

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

    expect(selectedService.is_online).toEqual(true)

    wrapper.vm.editData({key: 'is_online', value: false})

    const selectedServiceAfterEditing = store.getters['services/selectedService']
    
    expect(selectedServiceAfterEditing.is_online).toEqual(false)
  })

  test("Set isSaveData for selected service in EditServiceCard", async () => {

    store.commit('services/setSelectedService', resServices[0])

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

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

    expect(isSaveData).toEqual(false)

    wrapper.vm.saveData()

    const isSaveDataUpdated = store.getters['services/isSaveData']
    
    expect(isSaveDataUpdated).toEqual(true)
  })

})