feat (test): add UserCard component tests

resources/assets/js/__tests__/components/user/add-form.spec.ts

@@ -1,35 +0,0 @@
-import Component from '@/components/user/UserAddForm.vue'
-import { userStore } from '@/stores'
-import { mock } from '@/__tests__/__helpers__'
-import { shallow, mount } from '@/__tests__/adapter'
-
-describe('components/user/UserAddForm', () => {
-  afterEach(() => {
-    jest.resetModules()
-    jest.clearAllMocks()
-  })
-
-  it('adds a new user', () => {
-    const storeStub = mock(userStore, 'store')
-    const wrapper = shallow(Component)
-    wrapper.find('[name=name]').setValue('Super User').input()
-    wrapper.find('[name=email]').setValue('su@koel.dev').input()
-    wrapper.find('[name=password]').setValue('VerySecure').input()
-    wrapper.submit('form.user-add')
-
-    expect(storeStub).toHaveBeenCalledWith({
-      name: 'Super User',
-      email: 'su@koel.dev',
-      password: 'VerySecure',
-      is_admin: false
-    })
-  })
-
-  it('cancels', async () => {
-    const wrapper = mount(Component)
-
-    await wrapper.vm.$nextTick()
-    wrapper.click('.btn-cancel')
-    expect(wrapper.hasEmitted('close')).toBe(true)
-  })
-})

resources/assets/js/__tests__/components/user/card.spec.ts

@@ -1,76 +0,0 @@
-import Component from '@/components/user/UserCard.vue'
-import { userStore } from '@/stores'
-import { alerts } from '@/utils'
-import factory from '@/__tests__/factory'
-import router from '@/router'
-import { mock } from '@/__tests__/__helpers__'
-import { shallow, mount } from '@/__tests__/adapter'
-
-describe('components/user/UserCard', () => {
-  let user: User
-
-  beforeEach(() => {
-    user = factory<User>('user', {
-      avatar: 'http://foo.bar/baz.jpg'
-    })
-    // make sure the user is not current logged in user
-    userStore.current.id = user.id + 1
-  })
-
-  afterEach(() => {
-    jest.resetModules()
-    jest.clearAllMocks()
-  })
-
-  it('renders properly', () => {
-    const wrapper = shallow(Component, { propsData: { user } })
-    const html = wrapper.html()
-    expect(html).toMatch(user.email)
-    expect(html).toMatch(user.avatar)
-    expect(html).toMatch(user.name)
-    expect(wrapper.find('.btn-edit').text()).toBe('Edit')
-    expect(wrapper.has('.btn-delete')).toBe(true)
-  })
-
-  it('has different behaviors if current user', () => {
-    userStore.current.id = user.id
-    const wrapper = shallow(Component, { propsData: { user } })
-    expect(wrapper.has('.btn-delete')).toBe(false)
-    expect(wrapper.find('.btn-edit').text()).toBe('Update Profile')
-  })
-
-  it('redirects to update profile if attempting to edit current user', async () => {
-    const goStub = mock(router, 'go')
-    userStore.current.id = user.id
-    const wrapper = mount(Component, { propsData: { user } })
-
-    await wrapper.vm.$nextTick()
-    wrapper.click('.btn-edit')
-    expect(goStub).toHaveBeenCalledWith('profile')
-  })
-
-  it('edits user', async () => {
-    const wrapper = mount(Component, { propsData: { user } })
-
-    await wrapper.vm.$nextTick()
-    expect(wrapper.click('.btn-edit').hasEmitted('editUser', user)).toBe(true)
-  })
-
-  it('triggers deleting user', async () => {
-    const confirmStub = mock(alerts, 'confirm')
-    const wrapper = mount(Component, { propsData: { user } })
-
-    await wrapper.vm.$nextTick()
-    wrapper.click('.btn-delete')
-    expect(confirmStub).toHaveBeenCalledWith(
-      `You’re about to unperson ${user.name}. Are you sure?`,
-      (wrapper.vm as any).destroy
-    )
-  })
-
-  it('deletes user', () => {
-    const destroyStub = mock(userStore, 'destroy')
-    ;(shallow(Component, { propsData: { user } }).vm as any).destroy()
-    expect(destroyStub).toHaveBeenCalledWith(user)
-  })
-})

resources/assets/js/__tests__/components/user/edit-form.spec.ts

@@ -1,49 +0,0 @@
-import Component from '@/components/user/UserEditForm.vue'
-import { userStore } from '@/stores'
-import factory from '@/__tests__/factory'
-import { mock } from '@/__tests__/__helpers__'
-import { shallow, mount } from '@/__tests__/adapter'
-
-describe('components/user/UserEditForm', () => {
-  afterEach(() => {
-    jest.resetModules()
-    jest.clearAllMocks()
-  })
-
-  it('saves', () => {
-    const user = factory<User>('user')
-    const updateMock = mock(userStore, 'update')
-    const wrapper = shallow(Component, {
-      propsData: {
-        user
-      }
-    })
-
-    wrapper.find('[name=name]').setValue('Super User').input()
-    wrapper.find('[name=email]').setValue('su@koel.dev').input()
-    wrapper.find('[name=password]').setValue('SuperSecure').input()
-    wrapper.submit('form')
-
-    expect(updateMock).toHaveBeenCalledWith(user, {
-      name: 'Super User',
-      email: 'su@koel.dev',
-      password: 'SuperSecure',
-      is_admin: false
-    })
-  })
-
-  it('cancels', async () => {
-    const user = factory('user')
-    const updateMock = mock(userStore, 'update')
-    const wrapper = mount(Component, {
-      propsData: {
-        user
-      }
-    })
-
-    await wrapper.vm.$nextTick()
-    wrapper.click('.btn-cancel')
-    expect(wrapper.hasEmitted('close')).toBe(true)
-    expect(updateMock).not.toHaveBeenCalled()
-  })
-})

resources/assets/js/components/user/UserCard.spec.ts

@@ -0,0 +1,53 @@
+import { expect, it } from 'vitest'
+import factory from '@/__tests__/factory'
+import ComponentTestCase from '@/__tests__/ComponentTestCase'
+import UserCard from './UserCard.vue'
+import Btn from '@/components/ui/Btn.vue'
+import { fireEvent } from '@testing-library/vue'
+import router from '@/router'
+
+new class extends ComponentTestCase {
+  private renderComponent (user: User) {
+    return this.render(UserCard, {
+      props: {
+        user
+      },
+      global: {
+        stubs: {
+          Btn
+        }
+      }
+    })
+  }
+
+  protected test () {
+    it('has different behaviors for current user', () => {
+      const user = factory<User>('user')
+      const { getByTitle, getByText } = this.actingAs(user).renderComponent(user)
+
+      getByTitle('This is you!')
+      getByText('Update Profile')
+    })
+
+    it('edits user', async () => {
+      const user = factory<User>('user')
+      const { emitted, getByText } = this.renderComponent(user)
+
+      await fireEvent.click(getByText('Edit'))
+
+      expect(emitted().editUser[0]).toEqual([user])
+    })
+
+    it('redirects to Profile screen if edit current user', async () => {
+      const mock = this.mock(router, 'go')
+      const user = factory<User>('user')
+      const { getByText } = this.actingAs(user).renderComponent(user)
+
+      await fireEvent.click(getByText('Update Profile'))
+
+      expect(mock).toHaveBeenCalledWith('profile')
+    })
+
+    // the rest should be handled by E2E
+  }
+}