Hoist global state access out of individual components.

Access to "global" (maybe "external?") state is now handled at the top level of the component hierarchy, in `+page.svelte`, `+layout.svelte`, and their associated scripts. State is otherwise passed down through props, and changes are passed up through callbacks.

This is - hopefully - groundwork for refactoring state management a bit. I wanted to move access to state out to a smaller number of places, so that I have fewer places to update to implement reconnect logic. My broader goal is to make it easier to refactor these kinds of external side effects, as well, though no such changes are in this branch.

This change also makes testing a mile easier, since tests can interact with props and callbacks instead of emulating the whole HTTP request stack and the Pilcrow API. This change removes do-very-little tests.

1 files changed, 52 insertions, 38 deletions

diff --git a/ui/tests/lib/components/ChangePassword.svelte.test.js b/ui/tests/lib/components/ChangePassword.svelte.test.js
index 9eb40f5..9db6974 100644
--- a/ui/tests/lib/components/ChangePassword.svelte.test.js
+++ b/ui/tests/lib/components/ChangePassword.svelte.test.js
@@ -1,52 +1,66 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { beforeEach, expect, test, describe, it, vi } from 'vitest';
 import ChangePassword from '$lib/components/ChangePassword.svelte';
-import axios from 'axios';
 
-let component;
+const user = userEvent.setup();
 
-let mocks = vi.hoisted(() => ({
-  post: vi.fn()
+const mocks = vi.hoisted(() => ({
+  changePassword: vi.fn()
 }));
 
-describe('ChangePassword', () => {
-  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;
+describe('ChangePassword', async () => {
+  beforeEach(async () => {
+    render(ChangePassword, {
+      changePassword: mocks.changePassword
     });
-    mocks.post.mockResolvedValue({ status: 200 });
+  });
 
-    component = mount(ChangePassword, {
-      target: document.body // `document` exists because of jsdom
-    });
-    flushSync();
+  it('submits valid password changes', async () => {
+    const oldPassword = screen.getByLabelText('current password');
+    await user.type(oldPassword, 'old password');
+
+    const newPassword = screen.getByLabelText('new password');
+    await user.type(newPassword, 'new password');
+
+    const confirmPassword = screen.getByLabelText('confirm new password');
+    await user.type(confirmPassword, 'new password');
+
+    const create = screen.getByRole('button');
+    await user.click(create);
+
+    expect(mocks.changePassword).toHaveBeenCalledExactlyOnceWith('old password', 'new password');
   });
 
-  afterEach(() => {
-    unmount(component);
+  it('is disabled when old password matches new password', async () => {
+    const oldPassword = screen.getByLabelText('new password');
+    await user.type(oldPassword, 'old password');
+
+    const newPassword = screen.getByLabelText('new password');
+    await user.type(newPassword, 'new password');
+
+    const confirmPassword = screen.getByLabelText('confirm new password');
+    await user.type(confirmPassword, 'new password');
+
+    const create = screen.getByRole('button');
+    await user.click(create);
+
+    expect(mocks.changePassword).not.toHaveBeenCalled();
   });
 
-  test('onsubmit happy path', async () => {
-    // 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();
+  it('is disabled when new passwords differ', async () => {
+    const oldPassword = screen.getByLabelText('new password');
+    await user.type(oldPassword, 'old password');
+
+    const newPassword = screen.getByLabelText('new password');
+    await user.type(newPassword, 'new password A');
+
+    const confirmPassword = screen.getByLabelText('confirm new password');
+    await user.type(confirmPassword, 'new password B');
+
+    const create = screen.getByRole('button');
+    await user.click(create);
 
-    // expect(axios.post).toHaveBeenCalledWith('/password', { password: 'pass', to: 'pass' });
-    expect(Array.from(inputs.values()).map((i) => i.value)).toEqual(['', '', '']);
+    expect(mocks.changePassword).not.toHaveBeenCalled();
   });
 });