Merge branch 'prop/global-state-at-top-level'

1 files changed, 25 insertions, 13 deletions

diff --git a/ui/tests/lib/components/LogIn.svelte.test.js b/ui/tests/lib/components/LogIn.svelte.test.js
index b64d846..ab77c11 100644
--- a/ui/tests/lib/components/LogIn.svelte.test.js
+++ b/ui/tests/lib/components/LogIn.svelte.test.js
@@ -1,22 +1,34 @@
-import { flushSync, mount, unmount } from 'svelte';
-import { afterEach, beforeEach, describe, expect, test } 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 LogIn from '$lib/components/LogIn.svelte';
 
-let component;
+const user = userEvent.setup();
 
-describe('LogIn', () => {
-  beforeEach(() => {
-    component = mount(LogIn, {
-      target: document.body // `document` exists because of jsdom
+const mocks = vi.hoisted(() => ({
+  logIn: vi.fn()
+}));
+
+describe('LogIn', async () => {
+  beforeEach(async () => {
+    render(LogIn, {
+      logIn: mocks.logIn
     });
-    flushSync();
   });
 
-  afterEach(() => {
-    unmount(component);
-  });
+  it('sends a login request', async () => {
+    const username = screen.getByLabelText('username');
+    await user.type(username, 'my username');
+
+    const password = screen.getByLabelText('password');
+    await user.type(password, 'my very creative and long password');
+
+    const signIn = screen.getByRole('button');
+    await user.click(signIn);
 
-  test('mounts', async () => {
-    expect(component).toBeTruthy();
+    expect(mocks.logIn).toHaveBeenCalledExactlyOnceWith(
+      'my username',
+      'my very creative and long password'
+    );
   });
 });