frontend-apps/users-manage/tests/views/3_organisms/Users/UsersManager.test.js

import { mount} from '@vue/test-utils'
import {createStore} from "vuex"
import { expect, test, describe, vi, beforeEach } from 'vitest'
import UsersManager from '@organisms/UsersManager/UsersManager.vue'
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 UsersManager component", () => {

  const store = createStore({
    plugins: [],
    modules: {
      services,
      users
    },
  })

  vi.mock('tabulator-tables', () => {
    const mockTabulator = vi.fn().mockImplementation(() => ({
      // Mock implementation details
    }));
    return { TabulatorFull: mockTabulator }; // Adjust based on what you're trying to mock
  });

  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)

  const mockData = [
    {
      "id": 1,
      "serviceId": [1, 3],
      "firstName": "Leanne 1",
      "lastName": "Graham",
      "email": "test@mail.ru",
      "role": "admin",
    },
  ]
  axios.get.mockResolvedValue({
    data: mockData,
  })

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


  test('UsersManager mounted with vuex', async () => {
    const wrapper = mount(UsersManager, {
      global: {
        mocks: {
          $store: store
        },
        props: {
          serviceOfUsers
        }
      }
    })

    const userStatus = store.getters['users/userStatus']

    expect(userStatus).toBe('inactive')
    expect(wrapper.html()).toContain('w-full flex justify-between grow gap-4')
    expect(wrapper.text()).toContain('Список пользователей')
  })

  test('View UserEditor component, after click to create user button', async () => {

    await serviceOfUsers.getUsersByService(1, 'dev')

    const wrapper = mount(UsersManager, {
      global: {
        mocks: {
          $store: store
        }
      },
      props: {
        serviceOfUsers
      }
    })

    const buttonCreate = wrapper.find('[test-id="toggle-new-user"]')
    await buttonCreate.trigger('click')

    const userStatus = store.getters['users/userStatus']
    const wrapperHtml = wrapper.html()

    expect(userStatus).toBe('create')
    expect(wrapperHtml).toContain('Создать пользователя')
    expect(wrapperHtml).toContain('Закрыть')
    expect(wrapper.find('[test-id="new-user-container"]'))

  })

  test('View UserEditor component, after click to select user button', async () => {

    await serviceOfUsers.getUsersByService(1, 'dev')
    
    const wrapper = mount(UsersManager, {
      global: {
        mocks: {
          $store: store
        }
      },
      props: {
        serviceOfUsers,
        caseOfUsersInService,
      },
    })

    const buttonSelect = wrapper.find('[test-id="toggle-add-user"]')
    await buttonSelect.trigger('click')

    const userStatus = store.getters['users/userStatus']
    const wrapperHtml = wrapper.html()

    expect(userStatus).toBe('select')
    expect(wrapperHtml).toContain('Выбрать пользователя')
    expect(wrapperHtml).toContain('Закрыть')
    expect(wrapper.find('[action="add"]'))
  })

  test('Close UsersForSelection, after change userStatus', async () => {

    await serviceOfUsers.getUsersByService(1, 'dev')

    await serviceOfUsers.setStatusUser('select')

    const wrapper = mount(UsersManager, {
      global: {
        mocks: {
          $store: store
        }
      },
      props: {
        serviceOfUsers,
        caseOfUsersInService,
      },
    })

    const userStatus = store.getters['users/userStatus']
    const wrapperHtml = wrapper.html()

    expect(userStatus).toBe('select')
    expect(wrapperHtml).toContain('Выбрать пользователя')
    expect(wrapperHtml).toContain('Закрыть')
    expect(wrapper.find('[action="add"]'))

    wrapper.vm.closeUserPanel()

    const userStatusAfterClose = store.getters['users/userStatus']

    expect(userStatusAfterClose).toBe('inactive')
    
  })
  
})