Bump @nuxt/test-utils from 3.23.0 to 4.1.0

.nuxtrc

@@ -1 +1 @@
-setups.@nuxt/test-utils="3.23.0"
+setups.@nuxt/test-utils="4.1.0"

app.spec.ts

@@ -5,45 +5,62 @@ import { mockNuxtImport } from '@nuxt/test-utils/runtime';
 import { mount } from '@vue/test-utils';
 
 import MainLoader from '@/components/Atoms/MainLoader.vue';
+import { useRouterMock } from '@/test/useRouterMock';
 
 import App from './app.vue';
 
+mockNuxtImport('useAPI', () => () => ({
+  fetchData: vi.fn(),
+  getImageUrl: vi.fn((path) => path),
+}));
+
 const hookEvents = {} as Record<keyof RuntimeNuxtHooks, () => void>;
 
 const needRefreshMock = ref(false);
-const cancelPromptMock = vi.fn();
-const updateServiceWorkerMock = vi.fn();
+const { cancelPromptMock, updateServiceWorkerMock } = vi.hoisted(() => ({
+  cancelPromptMock: vi.fn(),
+  updateServiceWorkerMock: vi.fn(),
+}));
+
+const { routerMock } = useRouterMock();
 
-mockNuxtImport('useNuxtApp', () => () => ({
+mockNuxtImport('useNuxtApp', (original) => () => ({
+  ...original(),
   $pwa: reactive({
     cancelPrompt: cancelPromptMock,
     needRefresh: needRefreshMock,
     updateServiceWorker: updateServiceWorkerMock,
   }),
+  $router: routerMock,
   hook: vi.fn().mockImplementation((event, cb) => {
     hookEvents[event as keyof RuntimeNuxtHooks] = cb;
   }),
-  payload: {},
   runWithContext: vi.fn(),
 }));
 
-mockNuxtImport('useSidebar', () => () => ({
+mockNuxtImport('useSidebar', (original) => () => ({
+  ...original(),
   width: ref(100),
 }));
 
-mockNuxtImport('useSettings', () => () => ({
+mockNuxtImport('useSettings', (original) => () => ({
+  ...original(),
   isDarkTheme: ref(false),
 }));
 
-const closeModalMock = vi.fn();
-const openModalMock = vi.fn();
+const { closeModalMock, openModalMock } = vi.hoisted(() => ({
+  closeModalMock: vi.fn(),
+  openModalMock: vi.fn(),
+}));
 
-mockNuxtImport('useModal', () => () => ({
+mockNuxtImport('useModal', (original) => () => ({
+  ...original(),
   closeModal: closeModalMock,
   openModal: openModalMock,
 }));
 
-mockNuxtImport('useQueue', () => () => ({
+mockNuxtImport('useQueue', (original) => () => ({
+  ...original(),
   hasQueueTracks: ref(false),
 }));
 
@@ -112,7 +129,9 @@ describe('App', () => {
 
     beforeEach(async () => {
       needRefreshMock.value = true;
+
       await nextTick();
+
       handlers = openModalMock.mock.calls[0][1];
     });
 

components/Atoms/ArtistLinks.spec.ts

@@ -34,6 +34,8 @@ describe('ArtistLinks', () => {
   });
 
   it('shows the correct number of artist content', () => {
-    expect(wrapper.findAll('[data-test-id="artist-list-item"]').length).toBe(2);
+    expect(wrapper.findAll('[data-test-id="artist-list-item"]')).toHaveLength(
+      2,
+    );
   });
 });

components/Atoms/ButtonLink.spec.ts

@@ -4,13 +4,14 @@ import { mount } from '@vue/test-utils';
 
 import ButtonLink from './ButtonLink.vue';
 
-function factory(props = {}) {
+function factory(props = {}, slots = {}) {
   return mount(ButtonLink, {
     props: {
       ...props,
     },
     slots: {
       default: 'Default slot content.',
+      ...slots,
     },
   });
 }
@@ -119,12 +120,12 @@ describe('ButtonLink', () => {
 
   describe('when the icon slot is provided', () => {
     beforeEach(() => {
-      wrapper = mount(ButtonLink, {
-        slots: {
-          default: 'Default slot content.',
+      wrapper = factory(
+        {},
+        {
           icon: '<span>Custom icon</span>',
         },
-      });
+      );
     });
 
     it('matches the snapshot', () => {
@@ -143,15 +144,14 @@ describe('ButtonLink', () => {
 
     describe('when the iconPosition prop is set to right', () => {
       beforeEach(() => {
-        wrapper = mount(ButtonLink, {
-          props: {
+        wrapper = factory(
+          {
             iconPosition: 'right',
           },
-          slots: {
-            default: 'Default slot content.',
+          {
             icon: '<span>Custom icon</span>',
           },
-        });
+        );
       });
 
       it('matches the snapshot', () => {
@@ -221,22 +221,36 @@ describe('ButtonLink', () => {
   });
 
   describe('when component is clicked', () => {
-    beforeEach(() => {
-      wrapper.vm.$emit('click');
+    const clickMock = vi.fn();
+
+    beforeEach(async () => {
+      wrapper = factory({
+        onClick: clickMock,
+      });
+
+      await wrapper.trigger('click');
     });
 
-    it('emits the click event', () => {
-      expect(wrapper.emitted('click')).toEqual([[]]);
+    it('calls the click listener', () => {
+      expect(clickMock).toHaveBeenCalledWith(expect.any(MouseEvent));
     });
   });
 
-  describe('when component emits a keydown.down event', () => {
-    beforeEach(() => {
-      wrapper.vm.$emit('keydown.down');
+  describe('when component receives a keydown event', () => {
+    const keydownMock = vi.fn();
+
+    beforeEach(async () => {
+      wrapper = factory({
+        onKeydown: keydownMock,
+      });
+
+      await wrapper.trigger('keydown', {
+        key: 'ArrowDown',
+      });
     });
 
-    it('emits the keypress event', () => {
-      expect(wrapper.emitted('keydown.down')).toEqual([[]]);
+    it('calls the keydown listener', () => {
+      expect(keydownMock).toHaveBeenCalledWith(expect.any(KeyboardEvent));
     });
   });
 });

components/Atoms/GenreList.spec.ts

@@ -32,6 +32,6 @@ describe('GenreList', () => {
   });
 
   it('shows the correct number of genre content', () => {
-    expect(wrapper.findAll('[data-test-id="genre-list-item"]').length).toBe(2);
+    expect(wrapper.findAll('[data-test-id="genre-list-item"]')).toHaveLength(2);
   });
 });

components/Atoms/HotkeyMappings.spec.ts

@@ -7,7 +7,8 @@ import HotkeyMappings from './HotkeyMappings.vue';
 
 const isHotkeyListOpenedMock = ref(false);
 
-mockNuxtImport('useHotkeyManager', () => () => ({
+mockNuxtImport('useHotkeyManager', (original) => () => ({
+  ...original(),
   HOTKEY_MAPPINGS: [
     {
       Test: [
@@ -46,7 +47,7 @@ describe('HotkeyMappings', () => {
     wrapper = factory();
   });
 
-  describe('when isHotkeyListOpened is false', () => {
+  describe('when the isHotkeyListOpened value is false', () => {
     it('matches the snapshot', () => {
       expect(wrapper.html()).toMatchSnapshot();
     });
@@ -60,7 +61,7 @@ describe('HotkeyMappings', () => {
     });
   });
 
-  describe('when isHotkeyListOpened is true', () => {
+  describe('when the isHotkeyListOpened value is true', () => {
     beforeEach(() => {
       isHotkeyListOpenedMock.value = true;
     });

components/Atoms/InputField.spec.ts

@@ -121,6 +121,7 @@ describe('InputField', () => {
   describe('when input is triggered', () => {
     beforeEach(async () => {
       const input = wrapper.find({ ref: 'input' });
+
       (input.element as HTMLInputElement).value = 'Input value.';
       await input.trigger('input');
     });