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 --- .../lib/components/ChangePassword.svelte.test.js | 28 ++++++++++++++++++++++ .../components/CreateChannelForm.svelte.test.js | 1 + ui/tests/lib/components/Invite.svelte.test.js | 1 + ui/tests/lib/components/LogOut.svelte.test.js | 1 + ui/tests/lib/components/Message.svelte.test.js | 2 ++ .../lib/components/MessageInput.svelte.test.js | 2 ++ 6 files changed, 35 insertions(+) create mode 100644 ui/tests/lib/components/ChangePassword.svelte.test.js create mode 100644 ui/tests/lib/components/CreateChannelForm.svelte.test.js create mode 100644 ui/tests/lib/components/Invite.svelte.test.js create mode 100644 ui/tests/lib/components/LogOut.svelte.test.js create mode 100644 ui/tests/lib/components/Message.svelte.test.js create mode 100644 ui/tests/lib/components/MessageInput.svelte.test.js (limited to 'ui') diff --git a/ui/tests/lib/components/ChangePassword.svelte.test.js b/ui/tests/lib/components/ChangePassword.svelte.test.js new file mode 100644 index 0000000..6e0e652 --- /dev/null +++ b/ui/tests/lib/components/ChangePassword.svelte.test.js @@ -0,0 +1,28 @@ +// async onsubmit(event) +// +// Example: +/* */ +import { flushSync, mount, unmount } from 'svelte'; +import { expect, test } from 'vitest'; +import ChangePassword from '$lib/components/ChangePassword.svelte'; + + +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 } + }); + + expect(document.body.innerHTML).toBe(''); + + // Click the button, then flush the changes so you can synchronously write expectations + document.body.querySelector('button').click(); + flushSync(); + + expect(document.body.innerHTML).toBe(''); + + // 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 new file mode 100644 index 0000000..0380e01 --- /dev/null +++ b/ui/tests/lib/components/CreateChannelForm.svelte.test.js @@ -0,0 +1 @@ +// async handleSubmit(event) diff --git a/ui/tests/lib/components/Invite.svelte.test.js b/ui/tests/lib/components/Invite.svelte.test.js new file mode 100644 index 0000000..e4383cc --- /dev/null +++ b/ui/tests/lib/components/Invite.svelte.test.js @@ -0,0 +1 @@ +// async onsubmit(event) diff --git a/ui/tests/lib/components/LogOut.svelte.test.js b/ui/tests/lib/components/LogOut.svelte.test.js new file mode 100644 index 0000000..e4383cc --- /dev/null +++ b/ui/tests/lib/components/LogOut.svelte.test.js @@ -0,0 +1 @@ +// async onsubmit(event) diff --git a/ui/tests/lib/components/Message.svelte.test.js b/ui/tests/lib/components/Message.svelte.test.js new file mode 100644 index 0000000..d29a371 --- /dev/null +++ b/ui/tests/lib/components/Message.svelte.test.js @@ -0,0 +1,2 @@ +// onDelete(event) +// onmouseleave() 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') 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') 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 From a5945c50c41a0a41104a0c28ad1279ea3f9255f9 Mon Sep 17 00:00:00 2001 From: Kit La Touche Date: Fri, 15 Nov 2024 22:45:53 -0500 Subject: Ratchet up coverage Just basic "will it mount?" tests for more components. --- .../lib/components/ActiveChannel.svelte.test.js | 22 ++++++++++++++++++++++ ui/tests/lib/components/Channel.svelte.test.js | 22 ++++++++++++++++++++++ ui/tests/lib/components/ChannelList.svelte.test.js | 22 ++++++++++++++++++++++ ui/tests/lib/components/LogIn.svelte.test.js | 22 ++++++++++++++++++++++ ui/tests/lib/components/MessageRun.svelte.test.js | 22 ++++++++++++++++++++++ vite.config.js | 8 ++++---- 6 files changed, 114 insertions(+), 4 deletions(-) create mode 100644 ui/tests/lib/components/ActiveChannel.svelte.test.js create mode 100644 ui/tests/lib/components/Channel.svelte.test.js create mode 100644 ui/tests/lib/components/ChannelList.svelte.test.js create mode 100644 ui/tests/lib/components/LogIn.svelte.test.js create mode 100644 ui/tests/lib/components/MessageRun.svelte.test.js (limited to 'ui') diff --git a/ui/tests/lib/components/ActiveChannel.svelte.test.js b/ui/tests/lib/components/ActiveChannel.svelte.test.js new file mode 100644 index 0000000..34e92d3 --- /dev/null +++ b/ui/tests/lib/components/ActiveChannel.svelte.test.js @@ -0,0 +1,22 @@ +import { flushSync, mount, unmount } from 'svelte'; +import { afterEach, beforeEach, describe, expect, test } from 'vitest'; +import ActiveChannel from '$lib/components/ActiveChannel.svelte'; + +let component; + +describe('ActiveChannel', () => { + beforeEach(() => { + component = mount(ActiveChannel, { + target: document.body, // `document` exists because of jsdom + }); + flushSync(); + }); + + afterEach(() => { + unmount(component); + }); + + test('mounts', async () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ui/tests/lib/components/Channel.svelte.test.js b/ui/tests/lib/components/Channel.svelte.test.js new file mode 100644 index 0000000..e43fa12 --- /dev/null +++ b/ui/tests/lib/components/Channel.svelte.test.js @@ -0,0 +1,22 @@ +import { flushSync, mount, unmount } from 'svelte'; +import { afterEach, beforeEach, describe, expect, test } from 'vitest'; +import Channel from '$lib/components/Channel.svelte'; + +let component; + +describe('Channel', () => { + beforeEach(() => { + component = mount(Channel, { + target: document.body, // `document` exists because of jsdom + }); + flushSync(); + }); + + afterEach(() => { + unmount(component); + }); + + test('mounts', async () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ui/tests/lib/components/ChannelList.svelte.test.js b/ui/tests/lib/components/ChannelList.svelte.test.js new file mode 100644 index 0000000..e6ec64d --- /dev/null +++ b/ui/tests/lib/components/ChannelList.svelte.test.js @@ -0,0 +1,22 @@ +import { flushSync, mount, unmount } from 'svelte'; +import { afterEach, beforeEach, describe, expect, test } from 'vitest'; +import ChannelList from '$lib/components/ChannelList.svelte'; + +let component; + +describe('ChannelList', () => { + beforeEach(() => { + component = mount(ChannelList, { + target: document.body, // `document` exists because of jsdom + }); + flushSync(); + }); + + afterEach(() => { + unmount(component); + }); + + test('mounts', async () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ui/tests/lib/components/LogIn.svelte.test.js b/ui/tests/lib/components/LogIn.svelte.test.js new file mode 100644 index 0000000..3b1d299 --- /dev/null +++ b/ui/tests/lib/components/LogIn.svelte.test.js @@ -0,0 +1,22 @@ +import { flushSync, mount, unmount } from 'svelte'; +import { afterEach, beforeEach, describe, expect, test } from 'vitest'; +import LogIn from '$lib/components/LogIn.svelte'; + +let component; + +describe('LogIn', () => { + beforeEach(() => { + component = mount(LogIn, { + target: document.body, // `document` exists because of jsdom + }); + flushSync(); + }); + + afterEach(() => { + unmount(component); + }); + + test('mounts', async () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ui/tests/lib/components/MessageRun.svelte.test.js b/ui/tests/lib/components/MessageRun.svelte.test.js new file mode 100644 index 0000000..480ce98 --- /dev/null +++ b/ui/tests/lib/components/MessageRun.svelte.test.js @@ -0,0 +1,22 @@ +import { flushSync, mount, unmount } from 'svelte'; +import { afterEach, beforeEach, describe, expect, test } from 'vitest'; +import MessageRun from '$lib/components/MessageRun.svelte'; + +let component; + +describe('MessageRun', () => { + beforeEach(() => { + component = mount(MessageRun, { + target: document.body, // `document` exists because of jsdom + }); + flushSync(); + }); + + afterEach(() => { + unmount(component); + }); + + test('mounts', async () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/vite.config.js b/vite.config.js index 50032d0..e74647a 100644 --- a/vite.config.js +++ b/vite.config.js @@ -11,10 +11,10 @@ export default defineConfig({ environment: 'jsdom', coverage: { thresholds: { - statements: 31, - branches: 46, - functions: 8, - lines: 31 + statements: 49, + branches: 60, + functions: 14, + lines: 49 }, exclude: [ ...configDefaults.exclude, -- cgit v1.2.3