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

import { mount} from '@vue/test-utils'
import { expect, test, describe, vi, beforeEach } from 'vitest'
import UserEditor from '@organisms/UsersManager/UserEditor.vue';
import { createStore, mapGetters } from 'vuex'
import axios from "axios"
import {store as users} from "@/store/modules/users"
import {store as services} from "@/store/modules/services"
import AdapterOfUsers    from '@adapters/adapterOfUsers/Users'
import ServiceOfUsers from '@services/serviceOfUsers/Users.js'

vi.mock('axios')

const defaultUsers = [
  {
    "id": 1,
    "serviceId": [1, 3],
    "firstName": "Leanne 1",
    "lastName": "Graham",
    "email": "test@mail.ru",
    "role": "admin",
  },
  {
    "id": 2,
    "serviceId": [1],
    "firstName": "Leanne 2",
    "lastName": "Graham",
    "email": "test@mail.ru",
    "role": "admin",
  },
  {
    "id": 3,
    "serviceId": [2, 3],
    "firstName": "Leanne 3",
    "lastName": "Graham",
    "email": "test@mail.ru",
    "role": "admin",
  },
  {
    "id": 4,
    "serviceId": [3],
    "firstName": "Leanne 4",
    "lastName": "Graham",
    "email": "test@mail.ru",
    "role": "admin",
  },
  {
    "id": 5,
    "serviceId": [4, 5],
    "firstName": "Leanne 5",
    "lastName": "Graham",
    "email": "test@mail.ru",
    "role": "admin",
  },
]

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

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

  })

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

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

  test('UserEditor mounted with vuex', async () => {
    const wrapper = mount(UserEditor, {
      shallow: true,
      global: {
        plugins: [store]
      },
      props: {
        serviceOfUsers
      }
    })

    expect(wrapper.exists()).toBe(true)
  })

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

    store.dispatch('users/updateSelectedUser', defaultUsers[0])

    const wrapper = mount(UserEditor, {
      shallow: true,
      global: {
        plugins: [store]
      },
      props: {
        serviceOfUsers
      },
    })

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

    expect(selectedUser.firstName).toBe('Leanne 1')

    wrapper.vm.editData({key: 'firstName', value: 'test Editing'})

    const selectedUserAfterEdit = store.getters['users/selectedUser']

    expect(selectedUserAfterEdit.firstName).toBe('test Editing')
    
  })

  test('Saving after editing selected user in UserEditor', async () => {

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

    const editedUser = {
      "id": 3,
      "serviceId": [1, 3],
      "firstName": "Leanne 3 edited",
      "lastName": "Graham edited",
      "email": "test@mail.ru",
      "role": "admin",
    }

    await serviceOfUsers.getUsersByService(resServices[0].id, 'dev')

    store.dispatch('services/editSelectedService', resServices)
    store.dispatch('users/updateSelectedUser', editedUser)

    const wrapper = mount(UserEditor, {
      shallow: true,
      global: {
        plugins: [store]
      },
      props: {
        serviceOfUsers
      },
      computed: {
        ...mapGetters('services', ["selectedService"]),
        ...mapGetters('users', ['selectedUser']),
      },
    })

    const selectedUser = store.getters['users/selectedUser']
    wrapper.vm.saveUser()

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

    const updatedUser = updatedUsersWithService.find(user => user.id === selectedUser.id)

    expect(userStatus).toBe('inactive')
    expect(updatedUser.firstName).toBe(editedUser.firstName)
    expect(updatedUser.lastName).toBe(editedUser.lastName)

  })
  
  test('Saving after creating new user in UserEditor', async () => {

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

    const newUser = {
      "id": -1,
      "serviceId": [],
      "firstName": "Leanne 3 new",
      "lastName": "Graham new",
      "email": "test@mail.ru",
      "role": "admin",
    }

    await serviceOfUsers.getUsersByService(resServices[0].id, 'dev')

    store.dispatch('services/editSelectedService', resServices)
    store.dispatch('users/updateSelectedUser', newUser)

    const wrapper = mount(UserEditor, {
      shallow: true,
      global: {
        plugins: [store]
      },
      props: {
        serviceOfUsers
      },
      computed: {
        ...mapGetters('services', ["selectedService"]),
        ...mapGetters('users', ['selectedUser']),
      },
    })

    wrapper.vm.saveUser()

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

    const updatedUser = updatedUsersWithService[0]

    expect(userStatus).toBe('inactive')
    expect(updatedUser.firstName).toBe(newUser.firstName)
    expect(updatedUser.lastName).toBe(newUser.lastName)

  })

  test('Get Password for selected user in UserEditor', async () => {

    const editedUser = {
      "id": 3,
      "serviceId": [1, 3],
      "firstName": "Leanne 3 edited",
      "lastName": "Graham edited",
      "email": "test@mail.ru",
      "role": "admin",
    }

    store.dispatch('users/updateSelectedUser', editedUser)

    const wrapper = mount(UserEditor, {
      shallow: true,
      global: {
        plugins: [store]
      },
      props: {
        serviceOfUsers
      },
    })

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

    expect(selectedUser).not.toHaveProperty('password')

    wrapper.vm.getPassword()

    const selectedUserAfterAddPass = store.getters['users/selectedUser']

    expect(selectedUserAfterAddPass).toHaveProperty('password')
  })

  test('toggle view field Password for selected user in UserEditor', async () => {
    const wrapper = mount(UserEditor, {
      shallow: true,
      global: {
        plugins: [store]
      },
      props: {
        serviceOfUsers
      },
      data() {
        return {
          showNewPassword: false,
          newPasswordType: 'password',
        }
      },
    })

    // await wrapper.setData({ showNewPassword: true })
    // expect(passwordField.attributes().type).toBe(true)

    wrapper.vm.togglePass()
    
    expect(wrapper.vm.showNewPassword).toBe(true)
    expect(wrapper.vm.newPasswordType).toBe('text')

  })

  test('toggle view field RepeatPassword for selected user in UserEditor', async () => {
    const wrapper = mount(UserEditor, {
      shallow: true,
      global: {
        plugins: [store]
      },
      props: {
        serviceOfUsers
      },
      data() {
        return {
          showRepeatPassword: false,
          repeatPasswordType: 'password',
        }
      },
    })

    wrapper.vm.toggleRepeatPass()
    
    expect(wrapper.vm.showRepeatPassword).toBe(true)
    expect(wrapper.vm.repeatPasswordType).toBe('text')

  })

})