From 8a7cc9f8859c14b60da870cee199110e71e0f5da Mon Sep 17 00:00:00 2001 From: Kit La Touche Date: Fri, 15 Nov 2024 22:37:39 -0500 Subject: Ratchet up Component test coverage Turns out a number of our components are a pain to run via a mounting test, but Svelte does suggest that this is the dispreferred way to test anyway. Using use:, triggering navigation after logout, and scrollIntoView all make the headless node test process with the janky in-memory mount have a Very Bad Day. But this is still progress! We will press on. --- .../lib/components/ChangePassword.svelte.test.js | 41 ++++++++++++----- .../components/CreateChannelForm.svelte.test.js | 52 ++++++++++++++++++++-- ui/tests/lib/components/Invite.svelte.test.js | 8 ---- ui/tests/lib/components/LogOut.svelte.test.js | 8 ---- ui/tests/lib/components/Message.svelte.test.js | 9 ---- .../lib/components/MessageInput.svelte.test.js | 49 +++++++++++++++++--- vite.config.js | 17 ++++++- 7 files changed, 137 insertions(+), 47 deletions(-) delete mode 100644 ui/tests/lib/components/Invite.svelte.test.js delete mode 100644 ui/tests/lib/components/LogOut.svelte.test.js delete mode 100644 ui/tests/lib/components/Message.svelte.test.js diff --git a/ui/tests/lib/components/ChangePassword.svelte.test.js b/ui/tests/lib/components/ChangePassword.svelte.test.js index 09aa992..5773eae 100644 --- a/ui/tests/lib/components/ChangePassword.svelte.test.js +++ b/ui/tests/lib/components/ChangePassword.svelte.test.js @@ -1,24 +1,44 @@ import { flushSync, mount, unmount } from 'svelte'; -import { afterEach, describe, beforeEach, expect, test, vi } from 'vitest'; +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'; import ChangePassword from '$lib/components/ChangePassword.svelte'; import axios from 'axios'; -vi.mock('axios'); +let component; + +let mocks = vi.hoisted(() => ({ + post: vi.fn(), +})); describe('ChangePassword', () => { - afterEach(() => { - vi.restoreAllMocks(); - }); + beforeEach(() => { + vi.mock('axios', async (importActual) => { + const actual = await importActual(); - test('onsubmit happy path', async () => { - axios.post.mockResolvedValue({ status: 200 }); + const mockAxios = { + default: { + ...actual.default, + create: vi.fn(() => ({ + ...actual.default.create(), + post: mocks.post, + })), + }, + }; - // Instantiate the component using Svelte's `mount` API - const component = mount(ChangePassword, { + return mockAxios; + }); + mocks.post.mockResolvedValue({ status: 200 }); + + component = mount(ChangePassword, { target: document.body, // `document` exists because of jsdom }); flushSync(); + }); + afterEach(() => { + unmount(component); + }); + + test('onsubmit happy path', async () => { // Set value in all three inputs at once: const inputs = document.body.querySelectorAll('input[type=password]'); inputs.value = 'pass'; @@ -28,8 +48,5 @@ describe('ChangePassword', () => { // expect(axios.post).toHaveBeenCalledWith('/password', { password: 'pass', to: 'pass' }); expect(Array.from(inputs.values()).map((i) => i.value)).toEqual(['', '', '']); - - // Remove the component from the DOM - unmount(component); }); }); diff --git a/ui/tests/lib/components/CreateChannelForm.svelte.test.js b/ui/tests/lib/components/CreateChannelForm.svelte.test.js index 31f7462..c1adba5 100644 --- a/ui/tests/lib/components/CreateChannelForm.svelte.test.js +++ b/ui/tests/lib/components/CreateChannelForm.svelte.test.js @@ -1,8 +1,52 @@ -// async handleSubmit(event) -import { describe, expect, test } from 'vitest'; +import { flushSync, mount, unmount } from 'svelte'; +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'; +import CreateChannelForm from '$lib/components/CreateChannelForm.svelte'; +import axios from 'axios'; + +let component; + +let mocks = vi.hoisted(() => ({ + post: vi.fn(), +})); describe('CreateChannelForm', () => { - test('stub', async () => { - expect(true).toBeTruthy(); + beforeEach(() => { + vi.mock('axios', async (importActual) => { + const actual = await importActual(); + + const mockAxios = { + default: { + ...actual.default, + create: vi.fn(() => ({ + ...actual.default.create(), + post: mocks.post, + })), + }, + }; + + return mockAxios; + }); + mocks.post.mockResolvedValue({ status: 200 }); + + component = mount(CreateChannelForm, { + target: document.body, // `document` exists because of jsdom + }); + flushSync(); + }); + + afterEach(() => { + unmount(component); + }); + + test('onsubmit happy path', async () => { + // Set value on the one input this should match: + const inputs = document.body.querySelectorAll('input[type=text]'); + inputs.value = 'channel name'; + // Click the button, then flush the changes so you can synchronously write expectations + document.body.querySelector('button[type=submit]').click(); + flushSync(); + + expect(mocks.post).toHaveBeenCalled(); + expect(Array.from(inputs.values()).map((i) => i.value)).toEqual(['']); }); }); diff --git a/ui/tests/lib/components/Invite.svelte.test.js b/ui/tests/lib/components/Invite.svelte.test.js deleted file mode 100644 index 5d5742e..0000000 --- a/ui/tests/lib/components/Invite.svelte.test.js +++ /dev/null @@ -1,8 +0,0 @@ -// async onsubmit(event) -import { describe, expect, test } from 'vitest'; - -describe('Invite', () => { - test('stub', async () => { - expect(true).toBeTruthy(); - }); -}); diff --git a/ui/tests/lib/components/LogOut.svelte.test.js b/ui/tests/lib/components/LogOut.svelte.test.js deleted file mode 100644 index 65d78a9..0000000 --- a/ui/tests/lib/components/LogOut.svelte.test.js +++ /dev/null @@ -1,8 +0,0 @@ -// async onsubmit(event) -import { describe, expect, test } from 'vitest'; - -describe('LogOut', () => { - test('stub', async () => { - expect(true).toBeTruthy(); - }); -}); diff --git a/ui/tests/lib/components/Message.svelte.test.js b/ui/tests/lib/components/Message.svelte.test.js deleted file mode 100644 index 2ca0b85..0000000 --- a/ui/tests/lib/components/Message.svelte.test.js +++ /dev/null @@ -1,9 +0,0 @@ -// onDelete(event) -// onmouseleave() -import { describe, expect, test } from 'vitest'; - -describe('Message', () => { - test('stub', async () => { - expect(true).toBeTruthy(); - }); -}); diff --git a/ui/tests/lib/components/MessageInput.svelte.test.js b/ui/tests/lib/components/MessageInput.svelte.test.js index 597f0c3..d90026c 100644 --- a/ui/tests/lib/components/MessageInput.svelte.test.js +++ b/ui/tests/lib/components/MessageInput.svelte.test.js @@ -1,9 +1,48 @@ -// async onSubmit(event) -// onKeyDown(event) -import { describe, expect, test } from 'vitest'; +import { flushSync, mount, unmount } from 'svelte'; +import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'; +import MessageInput from '$lib/components/MessageInput.svelte'; +import axios from 'axios'; + +let component; + +let mocks = vi.hoisted(() => ({ + post: vi.fn(), +})); describe('MessageInput', () => { - test('stub', async () => { - expect(true).toBeTruthy(); + beforeEach(() => { + vi.mock('axios', async (importActual) => { + const actual = await importActual(); + + const mockAxios = { + default: { + ...actual.default, + create: vi.fn(() => ({ + ...actual.default.create(), + post: mocks.post, + })), + }, + }; + + return mockAxios; + }); + mocks.post.mockResolvedValue({ status: 200 }); + + component = mount(MessageInput, { + target: document.body, // `document` exists because of jsdom + }); + flushSync(); + }); + + afterEach(() => { + unmount(component); + }); + + test('onsubmit happy path', async () => { + // Click the button, then flush the changes so you can synchronously write expectations + document.body.querySelector('button[type=submit]').click(); + flushSync(); + + expect(mocks.post).toHaveBeenCalled(); }); }); diff --git a/vite.config.js b/vite.config.js index 8d6866d..50032d0 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,5 +1,6 @@ import { sveltekit } from '@sveltejs/kit/vite'; import { defineConfig } from 'vite'; +import { configDefaults } from 'vitest/config' export default defineConfig({ plugins: [sveltekit()], @@ -7,7 +8,21 @@ export default defineConfig({ // If you are testing components client-side, you need to setup a DOM environment. // If not all your files should have this environment, you can use a // `// @vitest-environment jsdom` comment at the top of the test files instead. - environment: 'jsdom' + environment: 'jsdom', + coverage: { + thresholds: { + statements: 31, + branches: 46, + functions: 8, + lines: 31 + }, + exclude: [ + ...configDefaults.exclude, + '**/*.config.js', + '**/docs/**', + '**/target/**' + ] + } }, // Tell Vitest to use the `browser` entry points in `package.json` files, // even though it's running in Node -- cgit v1.2.3