Configure jest to work with Svelte components. (#1757)

jest.config.js

@@ -1,10 +1,17 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
     verbose: true,
     preset: 'ts-jest',
     transform: {
+        '^.+\\.svelte$': [
+            'svelte-jester',
+            {
+                preprocess: true,
+            },
+        ],
         '^.+\\.ts$': 'ts-jest',
     },
-    moduleFileExtensions: ['js', 'ts'],
+    moduleFileExtensions: ['js', 'ts', 'svelte'],
 
     // A list of paths to modules that run some code to configure or
     // set up the testing framework before each test.

package.json

@@ -25,6 +25,8 @@
   "devDependencies": {
     "@codemirror/view": "^6.2.0",
     "@evilmartians/lefthook": "^1.1.1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/svelte": "^3.2.2",
     "@tsconfig/svelte": "^3.0.0",
     "@types/jest": "^29.2.3",
     "@typescript-eslint/eslint-plugin": "^5.36.1",
@@ -47,6 +49,7 @@
     "prettier-plugin-svelte": "^2.7.0",
     "svelte": "^3.48.0",
     "svelte-check": "^2.10.3",
+    "svelte-jester": "^2.3.2",
     "svelte-preprocess": "^4.10.1",
     "ts-jest": "^29.0.3",
     "tslib": "^2.3.1",

svelte.config.js

@@ -0,0 +1,5 @@
+const sveltePreprocess = require('svelte-preprocess');
+
+module.exports = {
+    preprocess: sveltePreprocess(),
+};

tests/EditTask.test.ts

@@ -0,0 +1,57 @@
+/**
+ * @jest-environment jsdom
+ */
+import { fireEvent, render } from '@testing-library/svelte';
+import { describe, expect, it } from '@jest/globals';
+import moment from 'moment/moment';
+import { taskFromLine } from '../src/Commands/CreateOrEditTaskParser';
+import type { Task } from '../src/Task';
+import EditTask from '../src/ui/EditTask.svelte';
+import { Status } from '../src/Status';
+import { DateFallback } from '../src/DateFallback';
+
+window.moment = moment;
+const task = taskFromLine({ line: '- [X] test task 1', path: '' });
+const statusOptions: Status[] = [Status.DONE, Status.TODO];
+
+describe('Task editing (UI)', () => {
+    let resolvePromise: (input: string) => void;
+    let waitForClose: Promise<string>;
+    let onSubmit: (updatedTasks: Task[]) => void;
+
+    beforeEach(() => {
+        waitForClose = new Promise<string>((resolve, _) => {
+            resolvePromise = resolve;
+        });
+        onSubmit = (updatedTasks: Task[]): void => {
+            const serializedTask = DateFallback.removeInferredStatusIfNeeded(task, updatedTasks)
+                .map((task: Task) => task.toFileLineString())
+                .join('\n');
+            resolvePromise(serializedTask);
+        };
+    });
+
+    it('task description should be displayed', () => {
+        const { container } = render(EditTask, { task, statusOptions, onSubmit });
+        expect(() => container).toBeTruthy();
+        const description = container.ownerDocument.getElementById('description') as HTMLInputElement;
+        expect(() => description).toBeTruthy();
+        expect(description!.value).toEqual('test task 1');
+    });
+
+    it('task description should be updated', async () => {
+        const result = render(EditTask, { task, statusOptions, onSubmit });
+        const { container } = result;
+        expect(() => container).toBeTruthy();
+
+        const description = container.ownerDocument.getElementById('description') as HTMLInputElement;
+        expect(description).toBeTruthy();
+        const submit = result.getByText('Apply') as HTMLButtonElement;
+        expect(submit).toBeTruthy();
+
+        await fireEvent.input(description, { target: { value: 'task edited' } });
+        submit.click();
+        const editedTask = await waitForClose;
+        expect(editedTask).toEqual('- [X] task edited');
+    });
+});