From b13b5b617022a679d93128bbee6032ea1bb31147 Mon Sep 17 00:00:00 2001 From: Kit La Touche Date: Thu, 14 Nov 2024 16:59:24 -0500 Subject: Add in start of tests --- ui/tests/lib/components/MessageInput.svelte.test.js | 2 ++ 1 file changed, 2 insertions(+) create mode 100644 ui/tests/lib/components/MessageInput.svelte.test.js (limited to 'ui/tests/lib/components/MessageInput.svelte.test.js') diff --git a/ui/tests/lib/components/MessageInput.svelte.test.js b/ui/tests/lib/components/MessageInput.svelte.test.js new file mode 100644 index 0000000..7c7f9aa --- /dev/null +++ b/ui/tests/lib/components/MessageInput.svelte.test.js @@ -0,0 +1,2 @@ +// async onSubmit(event) +// onKeyDown(event) -- cgit v1.2.3 From 3a89459f8b48449b341469776a37d8b225e956f2 Mon Sep 17 00:00:00 2001 From: Kit La Touche Date: Thu, 14 Nov 2024 23:28:19 -0500 Subject: Stub in tests --- .../lib/components/ChangePassword.svelte.test.js | 45 +++++++++++++--------- .../components/CreateChannelForm.svelte.test.js | 7 ++++ ui/tests/lib/components/Invite.svelte.test.js | 7 ++++ ui/tests/lib/components/LogOut.svelte.test.js | 7 ++++ ui/tests/lib/components/Message.svelte.test.js | 7 ++++ .../lib/components/MessageInput.svelte.test.js | 7 ++++ 6 files changed, 61 insertions(+), 19 deletions(-) (limited to 'ui/tests/lib/components/MessageInput.svelte.test.js') diff --git a/ui/tests/lib/components/ChangePassword.svelte.test.js b/ui/tests/lib/components/ChangePassword.svelte.test.js index 6e0e652..09aa992 100644 --- a/ui/tests/lib/components/ChangePassword.svelte.test.js +++ b/ui/tests/lib/components/ChangePassword.svelte.test.js @@ -1,28 +1,35 @@ -// async onsubmit(event) -// -// Example: -/* */ import { flushSync, mount, unmount } from 'svelte'; -import { expect, test } from 'vitest'; +import { afterEach, describe, beforeEach, expect, test, vi } from 'vitest'; import ChangePassword from '$lib/components/ChangePassword.svelte'; +import axios from 'axios'; +vi.mock('axios'); -test('ChangePassword', () => { - // Instantiate the component using Svelte's `mount` API - const component = mount(ChangePassword, { - target: document.body, // `document` exists because of jsdom - props: { initial: 0 } - }); +describe('ChangePassword', () => { + afterEach(() => { + vi.restoreAllMocks(); + }); - expect(document.body.innerHTML).toBe(''); + test('onsubmit happy path', async () => { + axios.post.mockResolvedValue({ status: 200 }); - // Click the button, then flush the changes so you can synchronously write expectations - document.body.querySelector('button').click(); - flushSync(); + // Instantiate the component using Svelte's `mount` API + const component = mount(ChangePassword, { + target: document.body, // `document` exists because of jsdom + }); + flushSync(); - expect(document.body.innerHTML).toBe(''); + // Set value in all three inputs at once: + const inputs = document.body.querySelectorAll('input[type=password]'); + inputs.value = 'pass'; + // Click the button, then flush the changes so you can synchronously write expectations + document.body.querySelector('button[type=submit]').click(); + flushSync(); - // Remove the component from the DOM - unmount(component); + // 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 0380e01..31f7462 100644 --- a/ui/tests/lib/components/CreateChannelForm.svelte.test.js +++ b/ui/tests/lib/components/CreateChannelForm.svelte.test.js @@ -1 +1,8 @@ // async handleSubmit(event) +import { describe, expect, test } from 'vitest'; + +describe('CreateChannelForm', () => { + test('stub', async () => { + expect(true).toBeTruthy(); + }); +}); diff --git a/ui/tests/lib/components/Invite.svelte.test.js b/ui/tests/lib/components/Invite.svelte.test.js index e4383cc..5d5742e 100644 --- a/ui/tests/lib/components/Invite.svelte.test.js +++ b/ui/tests/lib/components/Invite.svelte.test.js @@ -1 +1,8 @@ // 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 index e4383cc..65d78a9 100644 --- a/ui/tests/lib/components/LogOut.svelte.test.js +++ b/ui/tests/lib/components/LogOut.svelte.test.js @@ -1 +1,8 @@ // 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 index d29a371..2ca0b85 100644 --- a/ui/tests/lib/components/Message.svelte.test.js +++ b/ui/tests/lib/components/Message.svelte.test.js @@ -1,2 +1,9 @@ // 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 7c7f9aa..597f0c3 100644 --- a/ui/tests/lib/components/MessageInput.svelte.test.js +++ b/ui/tests/lib/components/MessageInput.svelte.test.js @@ -1,2 +1,9 @@ // async onSubmit(event) // onKeyDown(event) +import { describe, expect, test } from 'vitest'; + +describe('MessageInput', () => { + test('stub', async () => { + expect(true).toBeTruthy(); + }); +}); -- cgit v1.2.3 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 (limited to 'ui/tests/lib/components/MessageInput.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