Fixed tests

Makefile

@@ -86,3 +86,7 @@ eslint-check: ## Run eslint.
 .PHONY: eslint-fix
 eslint-fix: ## Fix eslint errors.
 	$(frontend) lint-fix
+
+.PHONY: ziggy-generate
+ziggy-generate: ## Generate Ziggy routes for frontend tests.
+	$(compose) exec app ./artisan ziggy:generate --types

src/eslint.config.mjs

@@ -15,7 +15,8 @@ export default [
     ignores: [
       '**/node_modules',
       'public/build',
-      '**/vendor'
+      '**/vendor',
+      'resources/js/ziggy.js',
     ],
   },
 

src/resources/js/mocks/ziggy/setup.ts

@@ -0,0 +1,8 @@
+import { config } from '@vue/test-utils';
+
+import { Ziggy } from '@/ziggy';
+import { route } from 'ziggy-js';
+
+// mocking Ziggy
+// https://laracasts.com/discuss/channels/inertia/vitest-inertiajs-errors-when-running-tests-on-pagecomponents
+config.global.mocks.route = (name: string) => route(name, undefined, undefined, Ziggy);

src/resources/js/widgets/footer/ui/Footer.test.ts

@@ -1,16 +1,10 @@
-import { config, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import { describe, expect, it } from 'vitest';
 
-import { ZiggyVue } from 'ziggy-js';
-
-import { ZiggyMockConfig } from '@/mocks/ziggy-js';
-
 import Footer from './Footer.vue';
 
 describe('Footer test (Footer.vue)', () => {
     it('Renders correctly', () => {
-        config.global.plugins = [[ZiggyVue, ZiggyMockConfig]];
-
         const wrapper = mount(Footer);
 
         expect(wrapper.exists()).toBeTruthy();

src/resources/js/widgets/layouts/authenticated/AuthenticatedLayout.test.ts

@@ -1,12 +1,10 @@
 import { config, mount } from '@vue/test-utils';
-import { afterAll, afterEach, describe, expect, it, vi } from 'vitest';
+import { afterAll, describe, expect, it, vi } from 'vitest';
 
 import { usePage } from '@inertiajs/vue3';
-import { ZiggyVue } from 'ziggy-js';
 
 import { NavigationLink } from '@/features/navigation/navigation-link';
-import { ZiggyMockConfig } from '@/mocks/ziggy-js';
-import RippleDirective from '@/shared/directives/ripple';
+import Ripple from '@/shared/directives/ripple';
 import { HasRolePlugin } from '@/shared/plugins/user/authorize';
 
 import AuthenticatedLayout from './AuthenticatedLayout.vue';
@@ -20,66 +18,46 @@ vi.mock('@inertiajs/vue3', async () => {
     };
 });
 
-const mockedUsePage = vi.mocked(usePage);
-
-const mockedData = {
-    props: {
-        auth: {
-            user: {
-                roles: [],
+const addRole = (role: object) => {
+    vi.mocked(usePage).mockReturnValue({
+        props: {
+            auth: {
+                user: {
+                    roles: [role],
+                },
             },
         },
-    },
+    });
 };
 
-afterEach(() => {
-    mockedData.props.auth.user.roles = [];
-});
-
-afterAll(() => {
-    vi.clearAllMocks();
-});
+afterAll(() => vi.clearAllMocks());
 
 describe('AuthenticatedLayout test (AuthenticatedLayout.vue)', () => {
-    config.global.directives = {
-        ripple: RippleDirective,
-    };
-    config.global.plugins = [[ZiggyVue, ZiggyMockConfig], [HasRolePlugin]];
+    config.global.directives = { ripple: Ripple };
+    config.global.plugins = [HasRolePlugin];
 
     it('Invitation link must not be rendered if user is not owner', () => {
-        mockedData.props.auth.user.roles.push({ name: 'admin' });
-        mockedUsePage.mockReturnValue(mockedData);
+        addRole({ name: 'admin' });
 
-        const layoutWrapper = mount(AuthenticatedLayout, {
-            global: {
-                mocks: {
-                    $page: mockedData,
-                },
-            },
-        });
+        const wrapper = mount(AuthenticatedLayout);
+
+        const links = wrapper.findAllComponents(NavigationLink);
 
-        const links = layoutWrapper.findAllComponents(NavigationLink);
-        expect(links.length).toBe(4); // Home, anime list, random anime and logout
+        expect(links.length).toBe(4); // Home, anime search, random anime and logout
     });
 
     it('Owner must see rendered invitation link', () => {
-        mockedData.props.auth.user.roles.push({ name: 'owner' });
-        mockedUsePage.mockReturnValue(mockedData);
+        addRole({ name: 'owner' });
 
-        const layoutWrapper = mount(AuthenticatedLayout, {
-            global: {
-                mocks: {
-                    $page: mockedData,
-                },
-            },
-        });
+        const wrapper = mount(AuthenticatedLayout);
+
+        const links = wrapper.findAllComponents(NavigationLink);
 
-        const links = layoutWrapper.findAllComponents(NavigationLink);
         const invitationLink = links.find(
             (link) => link.find('a').attributes('title') === 'Invitations'
         );
 
-        expect(links.length).toBe(5); // Home, invitation, anime list, random anime and logout
         expect(invitationLink.exists()).toBeTruthy();
+        expect(links.length).toBe(5); // Home, invitations, anime search, random anime and logout
     });
 });