From 25266577f38f9cb85a9216170c1f0e270fde7189 Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 20:39:28 +0600 Subject: [PATCH 01/27] test: - add first test on DateEditor --- tests/ui/DateEditor.test.ts | 35 ++++++++++++++++++++++++++++++++ tests/ui/EditTask.test.ts | 27 +++++------------------- tests/ui/RenderingTestHelpers.ts | 24 ++++++++++++++++++++++ 3 files changed, 64 insertions(+), 22 deletions(-) create mode 100644 tests/ui/DateEditor.test.ts create mode 100644 tests/ui/RenderingTestHelpers.ts diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts new file mode 100644 index 0000000000..56a176d59f --- /dev/null +++ b/tests/ui/DateEditor.test.ts @@ -0,0 +1,35 @@ +/** + * @jest-environment jsdom + */ +import { type RenderResult, render } from '@testing-library/svelte'; +import moment from 'moment/moment'; +import { TASK_FORMATS } from '../../src/Config/Settings'; +import DateEditor from '../../src/ui/DateEditor.svelte'; + +import { getAndCheckRenderedElement } from './RenderingTestHelpers'; + +window.moment = moment; + +function renderDateEditor() { + const result: RenderResult = render(DateEditor, { + id: 'due', + dateSymbol: TASK_FORMATS.tasksPluginEmoji.taskSerializer.symbols.dueDateSymbol, + date: '', + isDateValid: true, + forwardOnly: true, + accesskey: 'D', + }); + + const { container } = result; + expect(() => container).toBeTruthy(); + return { result, container }; +} + +describe('date editor tests', () => { + it('should render and read input value', () => { + const { container } = renderDateEditor(); + const dueDateInput = getAndCheckRenderedElement(container, 'due'); + + expect(dueDateInput.value).toEqual(''); + }); +}); diff --git a/tests/ui/EditTask.test.ts b/tests/ui/EditTask.test.ts index bf9dca772e..47a83898c5 100644 --- a/tests/ui/EditTask.test.ts +++ b/tests/ui/EditTask.test.ts @@ -14,6 +14,11 @@ import { verifyWithFileExtension } from '../TestingTools/ApprovalTestHelpers'; import { verifyAllCombinations3Async } from '../TestingTools/CombinationApprovalsAsync'; import { prettifyHTML } from '../TestingTools/HTMLHelpers'; import { TaskBuilder } from '../TestingTools/TaskBuilder'; +import { + getAndCheckApplyButton, + getAndCheckRenderedDescriptionElement, + getAndCheckRenderedElement, +} from './RenderingTestHelpers'; window.moment = moment; /** @@ -50,28 +55,6 @@ function renderAndCheckModal(task: Task, onSubmit: (updatedTasks: Task[]) => voi return { result, container }; } -/** - * Find the element with the given id. - * Template type T might be, for example, HTMLInputElement or HTMLSelectElement - * @param container - * @param elementId - */ -function getAndCheckRenderedElement(container: HTMLElement, elementId: string) { - const element = container.ownerDocument.getElementById(elementId) as T; - expect(() => element).toBeTruthy(); - return element; -} - -function getAndCheckRenderedDescriptionElement(container: HTMLElement): HTMLInputElement { - return getAndCheckRenderedElement(container, 'description'); -} - -function getAndCheckApplyButton(result: RenderResult): HTMLButtonElement { - const submit = result.getByText('Apply') as HTMLButtonElement; - expect(submit).toBeTruthy(); - return submit; -} - async function editInputElement(inputElement: HTMLInputElement, newValue: string) { await fireEvent.input(inputElement, { target: { value: newValue } }); } diff --git a/tests/ui/RenderingTestHelpers.ts b/tests/ui/RenderingTestHelpers.ts new file mode 100644 index 0000000000..1da768427d --- /dev/null +++ b/tests/ui/RenderingTestHelpers.ts @@ -0,0 +1,24 @@ +import type { RenderResult } from '@testing-library/svelte'; +import type EditTask from '../../src/ui/EditTask.svelte'; + +/** + * Find the element with the given id. + * Template type T might be, for example, HTMLInputElement or HTMLSelectElement + * @param container + * @param elementId + */ +export function getAndCheckRenderedElement(container: HTMLElement, elementId: string) { + const element = container.ownerDocument.getElementById(elementId) as T; + expect(() => element).toBeTruthy(); + return element; +} + +export function getAndCheckRenderedDescriptionElement(container: HTMLElement): HTMLInputElement { + return getAndCheckRenderedElement(container, 'description'); +} + +export function getAndCheckApplyButton(result: RenderResult): HTMLButtonElement { + const submit = result.getByText('Apply') as HTMLButtonElement; + expect(submit).toBeTruthy(); + return submit; +} From 6cb90b2b5a3aec964c224d6aa057aa21e3163e28 Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 20:43:42 +0600 Subject: [PATCH 02/27] test: - test inputing a value --- tests/ui/DateEditor.test.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index 56a176d59f..62dedc4473 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -1,7 +1,7 @@ /** * @jest-environment jsdom */ -import { type RenderResult, render } from '@testing-library/svelte'; +import { type RenderResult, fireEvent, render } from '@testing-library/svelte'; import moment from 'moment/moment'; import { TASK_FORMATS } from '../../src/Config/Settings'; import DateEditor from '../../src/ui/DateEditor.svelte'; @@ -26,10 +26,14 @@ function renderDateEditor() { } describe('date editor tests', () => { - it('should render and read input value', () => { + it('should render and read input value', async () => { const { container } = renderDateEditor(); const dueDateInput = getAndCheckRenderedElement(container, 'due'); expect(dueDateInput.value).toEqual(''); + + await fireEvent.input(dueDateInput, { target: { value: '2024-10-01' } }); + + expect(dueDateInput.value).toEqual('2024-10-01'); }); }); From dff921c379b60a34df39c3e517fd0b90df9cf6a6 Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 20:52:15 +0600 Subject: [PATCH 03/27] test: - add a test wrapper and test feedback from DateEditor --- tests/ui/DateEditor.test.ts | 28 ++++++++++++++++++++++++++++ tests/ui/DateEditorWrapper.svelte | 22 ++++++++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 tests/ui/DateEditorWrapper.svelte diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index 62dedc4473..d46263907c 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -5,6 +5,7 @@ import { type RenderResult, fireEvent, render } from '@testing-library/svelte'; import moment from 'moment/moment'; import { TASK_FORMATS } from '../../src/Config/Settings'; import DateEditor from '../../src/ui/DateEditor.svelte'; +import DateEditorWrapper from './DateEditorWrapper.svelte'; import { getAndCheckRenderedElement } from './RenderingTestHelpers'; @@ -37,3 +38,30 @@ describe('date editor tests', () => { expect(dueDateInput.value).toEqual('2024-10-01'); }); }); + +function renderDateEditorWrapper() { + const result: RenderResult = render(DateEditorWrapper, {}); + + const { container } = result; + expect(() => container).toBeTruthy(); + return { result, container }; +} + +describe('date editor wrapper tests', () => { + it('should replace an empty date field with typed date value', async () => { + const { container } = renderDateEditorWrapper(); + const dueDateInput = getAndCheckRenderedElement(container, 'due'); + const dueDateFromDateEditorInput = getAndCheckRenderedElement( + container, + 'dueDateFromDateEditor', + ); + + expect(dueDateInput.value).toEqual(''); + expect(dueDateFromDateEditorInput.value).toEqual(''); + + await fireEvent.input(dueDateInput, { target: { value: '2024-10-01' } }); + + expect(dueDateInput.value).toEqual('2024-10-01'); + expect(dueDateFromDateEditorInput.value).toEqual('2024-10-01'); + }); +}); diff --git a/tests/ui/DateEditorWrapper.svelte b/tests/ui/DateEditorWrapper.svelte new file mode 100644 index 0000000000..5be4f59b9a --- /dev/null +++ b/tests/ui/DateEditorWrapper.svelte @@ -0,0 +1,22 @@ + + + {}} + on:close={() => {}} +/> + + + From 556f2d010272944d0326e6425563cce1073bcb9e Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 21:05:11 +0600 Subject: [PATCH 04/27] test: - add test with abbreviation input --- tests/ui/DateEditor.test.ts | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index d46263907c..f2d55f0d09 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -47,6 +47,15 @@ function renderDateEditorWrapper() { return { result, container }; } +beforeEach(() => { + jest.useFakeTimers(); + jest.setSystemTime(new Date('2024-04-20')); +}); + +afterEach(() => { + jest.useRealTimers(); +}); + describe('date editor wrapper tests', () => { it('should replace an empty date field with typed date value', async () => { const { container } = renderDateEditorWrapper(); @@ -64,4 +73,21 @@ describe('date editor wrapper tests', () => { expect(dueDateInput.value).toEqual('2024-10-01'); expect(dueDateFromDateEditorInput.value).toEqual('2024-10-01'); }); + + it('should replace an empty date field with typed abbreviation', async () => { + const { container } = renderDateEditorWrapper(); + const dueDateInput = getAndCheckRenderedElement(container, 'due'); + const dueDateFromDateEditorInput = getAndCheckRenderedElement( + container, + 'dueDateFromDateEditor', + ); + + expect(dueDateInput.value).toEqual(''); + expect(dueDateFromDateEditorInput.value).toEqual(''); + + await fireEvent.input(dueDateInput, { target: { value: 'tm ' } }); + + expect(dueDateInput.value).toEqual('tomorrow'); + expect(dueDateFromDateEditorInput.value).toEqual('tomorrow'); + }); }); From d80c291bcacb478297c3fa8c5fd2bab33fc7a788 Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 21:18:30 +0600 Subject: [PATCH 05/27] refactor: - make parsedDate testable and test it --- src/ui/DateEditor.svelte | 3 ++- tests/ui/DateEditor.test.ts | 12 ++++++++++++ tests/ui/DateEditorWrapper.svelte | 3 +++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/src/ui/DateEditor.svelte b/src/ui/DateEditor.svelte index 048f0ea2eb..a3c92e86bc 100644 --- a/src/ui/DateEditor.svelte +++ b/src/ui/DateEditor.svelte @@ -10,7 +10,8 @@ export let forwardOnly: boolean; export let accesskey: string | null; - let parsedDate: string; + // Use this for testing purposes only + export let parsedDate: string = ''; // let inputElement: HTMLInputElement; // let flatpickrInstance: any; // diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index f2d55f0d09..9d98bf8c83 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -64,14 +64,20 @@ describe('date editor wrapper tests', () => { container, 'dueDateFromDateEditor', ); + const parsedDateFromDateEditor = getAndCheckRenderedElement( + container, + 'parsedDateFromDateEditor', + ); expect(dueDateInput.value).toEqual(''); expect(dueDateFromDateEditorInput.value).toEqual(''); + expect(parsedDateFromDateEditor.value).toEqual('no due date'); await fireEvent.input(dueDateInput, { target: { value: '2024-10-01' } }); expect(dueDateInput.value).toEqual('2024-10-01'); expect(dueDateFromDateEditorInput.value).toEqual('2024-10-01'); + expect(parsedDateFromDateEditor.value).toEqual('2024-10-01'); }); it('should replace an empty date field with typed abbreviation', async () => { @@ -81,13 +87,19 @@ describe('date editor wrapper tests', () => { container, 'dueDateFromDateEditor', ); + const parsedDateFromDateEditor = getAndCheckRenderedElement( + container, + 'parsedDateFromDateEditor', + ); expect(dueDateInput.value).toEqual(''); expect(dueDateFromDateEditorInput.value).toEqual(''); + expect(parsedDateFromDateEditor.value).toEqual('no due date'); await fireEvent.input(dueDateInput, { target: { value: 'tm ' } }); expect(dueDateInput.value).toEqual('tomorrow'); expect(dueDateFromDateEditorInput.value).toEqual('tomorrow'); + expect(parsedDateFromDateEditor.value).toEqual('2024-04-21'); }); }); diff --git a/tests/ui/DateEditorWrapper.svelte b/tests/ui/DateEditorWrapper.svelte index 5be4f59b9a..fd7478e277 100644 --- a/tests/ui/DateEditorWrapper.svelte +++ b/tests/ui/DateEditorWrapper.svelte @@ -3,6 +3,7 @@ import DateEditor from '../../src/ui/DateEditor.svelte'; let dateFromDateEditor: string = ''; + let parsedDateFromDateEditor: string = ''; let isDueDateValid = true; @@ -15,8 +16,10 @@ accesskey={null} on:open={() => {}} on:close={() => {}} + bind:parsedDate={parsedDateFromDateEditor} /> + From 5280924209efe8c10f0c5796d81c5f9f4c28d36d Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 21:21:00 +0600 Subject: [PATCH 06/27] test: - separate initialisation test --- tests/ui/DateEditor.test.ts | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index 9d98bf8c83..5c5a9b01fa 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -57,7 +57,7 @@ afterEach(() => { }); describe('date editor wrapper tests', () => { - it('should replace an empty date field with typed date value', async () => { + it('should initialise fields correctly', () => { const { container } = renderDateEditorWrapper(); const dueDateInput = getAndCheckRenderedElement(container, 'due'); const dueDateFromDateEditorInput = getAndCheckRenderedElement( @@ -72,6 +72,19 @@ describe('date editor wrapper tests', () => { expect(dueDateInput.value).toEqual(''); expect(dueDateFromDateEditorInput.value).toEqual(''); expect(parsedDateFromDateEditor.value).toEqual('no due date'); + }); + + it('should replace an empty date field with typed date value', async () => { + const { container } = renderDateEditorWrapper(); + const dueDateInput = getAndCheckRenderedElement(container, 'due'); + const dueDateFromDateEditorInput = getAndCheckRenderedElement( + container, + 'dueDateFromDateEditor', + ); + const parsedDateFromDateEditor = getAndCheckRenderedElement( + container, + 'parsedDateFromDateEditor', + ); await fireEvent.input(dueDateInput, { target: { value: '2024-10-01' } }); @@ -92,10 +105,6 @@ describe('date editor wrapper tests', () => { 'parsedDateFromDateEditor', ); - expect(dueDateInput.value).toEqual(''); - expect(dueDateFromDateEditorInput.value).toEqual(''); - expect(parsedDateFromDateEditor.value).toEqual('no due date'); - await fireEvent.input(dueDateInput, { target: { value: 'tm ' } }); expect(dueDateInput.value).toEqual('tomorrow'); From 13a77710fb335d17a93f3d9389df5057ee99938c Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 21:26:32 +0600 Subject: [PATCH 07/27] test: . extract variables --- tests/ui/DateEditor.test.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index 5c5a9b01fa..3384f9d98d 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -86,11 +86,16 @@ describe('date editor wrapper tests', () => { 'parsedDateFromDateEditor', ); - await fireEvent.input(dueDateInput, { target: { value: '2024-10-01' } }); + const userTyped = '2024-10-01'; + const expectedLeftText = '2024-10-01'; + const expectedRightText = '2024-10-01'; + const expectedReturnedDate = '2024-10-01'; - expect(dueDateInput.value).toEqual('2024-10-01'); - expect(dueDateFromDateEditorInput.value).toEqual('2024-10-01'); - expect(parsedDateFromDateEditor.value).toEqual('2024-10-01'); + await fireEvent.input(dueDateInput, { target: { value: userTyped } }); + + expect(dueDateInput.value).toEqual(expectedLeftText); + expect(dueDateFromDateEditorInput.value).toEqual(expectedReturnedDate); + expect(parsedDateFromDateEditor.value).toEqual(expectedRightText); }); it('should replace an empty date field with typed abbreviation', async () => { From ce4d8e3f9d9d4190576366b5dd8ecc3477f91f8d Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 21:28:14 +0600 Subject: [PATCH 08/27] test: . extract testTypingInput() --- tests/ui/DateEditor.test.ts | 38 +++++++++++++++++++++---------------- 1 file changed, 22 insertions(+), 16 deletions(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index 3384f9d98d..7ef9f2879f 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -56,6 +56,27 @@ afterEach(() => { jest.useRealTimers(); }); +async function testTypingInput( + userTyped: string, + expectedLeftText: string, + expectedRightText: string, + expectedReturnedDate: string, +) { + const { container } = renderDateEditorWrapper(); + const dueDateInput = getAndCheckRenderedElement(container, 'due'); + const dueDateFromDateEditorInput = getAndCheckRenderedElement(container, 'dueDateFromDateEditor'); + const parsedDateFromDateEditor = getAndCheckRenderedElement( + container, + 'parsedDateFromDateEditor', + ); + + await fireEvent.input(dueDateInput, { target: { value: userTyped } }); + + expect(dueDateInput.value).toEqual(expectedLeftText); + expect(dueDateFromDateEditorInput.value).toEqual(expectedReturnedDate); + expect(parsedDateFromDateEditor.value).toEqual(expectedRightText); +} + describe('date editor wrapper tests', () => { it('should initialise fields correctly', () => { const { container } = renderDateEditorWrapper(); @@ -75,27 +96,12 @@ describe('date editor wrapper tests', () => { }); it('should replace an empty date field with typed date value', async () => { - const { container } = renderDateEditorWrapper(); - const dueDateInput = getAndCheckRenderedElement(container, 'due'); - const dueDateFromDateEditorInput = getAndCheckRenderedElement( - container, - 'dueDateFromDateEditor', - ); - const parsedDateFromDateEditor = getAndCheckRenderedElement( - container, - 'parsedDateFromDateEditor', - ); - const userTyped = '2024-10-01'; const expectedLeftText = '2024-10-01'; const expectedRightText = '2024-10-01'; const expectedReturnedDate = '2024-10-01'; - await fireEvent.input(dueDateInput, { target: { value: userTyped } }); - - expect(dueDateInput.value).toEqual(expectedLeftText); - expect(dueDateFromDateEditorInput.value).toEqual(expectedReturnedDate); - expect(parsedDateFromDateEditor.value).toEqual(expectedRightText); + await testTypingInput(userTyped, expectedLeftText, expectedRightText, expectedReturnedDate); }); it('should replace an empty date field with typed abbreviation', async () => { From 8c2c12b69ee6cd3ae0da711b31637d34be2aa72b Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 21:30:16 +0600 Subject: [PATCH 09/27] test: - change parameters to props and inline variables --- tests/ui/DateEditor.test.ts | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index 7ef9f2879f..99c78fbd4d 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -56,12 +56,17 @@ afterEach(() => { jest.useRealTimers(); }); -async function testTypingInput( - userTyped: string, - expectedLeftText: string, - expectedRightText: string, - expectedReturnedDate: string, -) { +async function testTypingInput({ + userTyped, + expectedLeftText, + expectedRightText, + expectedReturnedDate, +}: { + userTyped: string; + expectedLeftText: string; + expectedRightText: string; + expectedReturnedDate: string; +}) { const { container } = renderDateEditorWrapper(); const dueDateInput = getAndCheckRenderedElement(container, 'due'); const dueDateFromDateEditorInput = getAndCheckRenderedElement(container, 'dueDateFromDateEditor'); @@ -96,12 +101,12 @@ describe('date editor wrapper tests', () => { }); it('should replace an empty date field with typed date value', async () => { - const userTyped = '2024-10-01'; - const expectedLeftText = '2024-10-01'; - const expectedRightText = '2024-10-01'; - const expectedReturnedDate = '2024-10-01'; - - await testTypingInput(userTyped, expectedLeftText, expectedRightText, expectedReturnedDate); + await testTypingInput({ + userTyped: '2024-10-01', + expectedLeftText: '2024-10-01', + expectedRightText: '2024-10-01', + expectedReturnedDate: '2024-10-01', + }); }); it('should replace an empty date field with typed abbreviation', async () => { From 1a1aff88313a13d0478889273ab9ca0b64c32bd2 Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 21:32:23 +0600 Subject: [PATCH 10/27] test: - reuse testTypingInput() --- tests/ui/DateEditor.test.ts | 22 ++++++---------------- 1 file changed, 6 insertions(+), 16 deletions(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index 99c78fbd4d..ea0a65175d 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -110,21 +110,11 @@ describe('date editor wrapper tests', () => { }); it('should replace an empty date field with typed abbreviation', async () => { - const { container } = renderDateEditorWrapper(); - const dueDateInput = getAndCheckRenderedElement(container, 'due'); - const dueDateFromDateEditorInput = getAndCheckRenderedElement( - container, - 'dueDateFromDateEditor', - ); - const parsedDateFromDateEditor = getAndCheckRenderedElement( - container, - 'parsedDateFromDateEditor', - ); - - await fireEvent.input(dueDateInput, { target: { value: 'tm ' } }); - - expect(dueDateInput.value).toEqual('tomorrow'); - expect(dueDateFromDateEditorInput.value).toEqual('tomorrow'); - expect(parsedDateFromDateEditor.value).toEqual('2024-04-21'); + await testTypingInput({ + userTyped: 'tm ', + expectedLeftText: 'tomorrow', + expectedRightText: '2024-04-21', + expectedReturnedDate: 'tomorrow', + }); }); }); From 5bb5a71b74f6e197376f0f10494d5622e03a8937 Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 21:34:08 +0600 Subject: [PATCH 11/27] test: - test invalid input --- tests/ui/DateEditor.test.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index ea0a65175d..7198ca1347 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -117,4 +117,13 @@ describe('date editor wrapper tests', () => { expectedReturnedDate: 'tomorrow', }); }); + + it('should show an error message for invalid date', async () => { + await testTypingInput({ + userTyped: 'blah', + expectedLeftText: 'blah', + expectedRightText: 'invalid due date', + expectedReturnedDate: 'blah', + }); + }); }); From b1cbc7291393a1e7fcf0824dd5c3d1d2b8a07064 Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 21:34:29 +0600 Subject: [PATCH 12/27] test: . reorder expects --- tests/ui/DateEditor.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index 7198ca1347..a99f4a1e66 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -78,8 +78,8 @@ async function testTypingInput({ await fireEvent.input(dueDateInput, { target: { value: userTyped } }); expect(dueDateInput.value).toEqual(expectedLeftText); - expect(dueDateFromDateEditorInput.value).toEqual(expectedReturnedDate); expect(parsedDateFromDateEditor.value).toEqual(expectedRightText); + expect(dueDateFromDateEditorInput.value).toEqual(expectedReturnedDate); } describe('date editor wrapper tests', () => { From 19e2020cba9b44220dec74e89976ae677c33108e Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 21:39:00 +0600 Subject: [PATCH 13/27] test: . group related code closer --- tests/ui/DateEditor.test.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index a99f4a1e66..c61922ab3e 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -68,17 +68,19 @@ async function testTypingInput({ expectedReturnedDate: string; }) { const { container } = renderDateEditorWrapper(); + const dueDateInput = getAndCheckRenderedElement(container, 'due'); - const dueDateFromDateEditorInput = getAndCheckRenderedElement(container, 'dueDateFromDateEditor'); + await fireEvent.input(dueDateInput, { target: { value: userTyped } }); + + expect(dueDateInput.value).toEqual(expectedLeftText); + const parsedDateFromDateEditor = getAndCheckRenderedElement( container, 'parsedDateFromDateEditor', ); - - await fireEvent.input(dueDateInput, { target: { value: userTyped } }); - - expect(dueDateInput.value).toEqual(expectedLeftText); expect(parsedDateFromDateEditor.value).toEqual(expectedRightText); + + const dueDateFromDateEditorInput = getAndCheckRenderedElement(container, 'dueDateFromDateEditor'); expect(dueDateFromDateEditorInput.value).toEqual(expectedReturnedDate); } From 5120add734151de01efe65ecef093a397f346bb2 Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 21:40:49 +0600 Subject: [PATCH 14/27] test: . extract testInputValue() --- tests/ui/DateEditor.test.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index c61922ab3e..eb0ba44cc2 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -56,6 +56,11 @@ afterEach(() => { jest.useRealTimers(); }); +function testInputValue(container: HTMLElement, inputId: string, expectedText: string) { + const input = getAndCheckRenderedElement(container, inputId); + expect(input.value).toEqual(expectedText); +} + async function testTypingInput({ userTyped, expectedLeftText, @@ -74,11 +79,7 @@ async function testTypingInput({ expect(dueDateInput.value).toEqual(expectedLeftText); - const parsedDateFromDateEditor = getAndCheckRenderedElement( - container, - 'parsedDateFromDateEditor', - ); - expect(parsedDateFromDateEditor.value).toEqual(expectedRightText); + testInputValue(container, 'parsedDateFromDateEditor', expectedRightText); const dueDateFromDateEditorInput = getAndCheckRenderedElement(container, 'dueDateFromDateEditor'); expect(dueDateFromDateEditorInput.value).toEqual(expectedReturnedDate); From 07992da6ba1ef29c8f1b49191241f49b93efbc6e Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 21:41:39 +0600 Subject: [PATCH 15/27] test: . reuse testInputValue() --- tests/ui/DateEditor.test.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index eb0ba44cc2..f743d7ddd0 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -78,11 +78,8 @@ async function testTypingInput({ await fireEvent.input(dueDateInput, { target: { value: userTyped } }); expect(dueDateInput.value).toEqual(expectedLeftText); - testInputValue(container, 'parsedDateFromDateEditor', expectedRightText); - - const dueDateFromDateEditorInput = getAndCheckRenderedElement(container, 'dueDateFromDateEditor'); - expect(dueDateFromDateEditorInput.value).toEqual(expectedReturnedDate); + testInputValue(container, 'dueDateFromDateEditor', expectedReturnedDate); } describe('date editor wrapper tests', () => { From ed114b9b91adef1f954b9d9a84164bebab4914b3 Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 21:42:34 +0600 Subject: [PATCH 16/27] test: - reuse testInputValue() --- tests/ui/DateEditor.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index f743d7ddd0..b57683229a 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -77,7 +77,7 @@ async function testTypingInput({ const dueDateInput = getAndCheckRenderedElement(container, 'due'); await fireEvent.input(dueDateInput, { target: { value: userTyped } }); - expect(dueDateInput.value).toEqual(expectedLeftText); + testInputValue(container, 'due', expectedLeftText); testInputValue(container, 'parsedDateFromDateEditor', expectedRightText); testInputValue(container, 'dueDateFromDateEditor', expectedReturnedDate); } From 06d361dd371e7526f26f44eae40d9ac8b2fcb791 Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 21:43:44 +0600 Subject: [PATCH 17/27] test: - reuse testInputValue() --- tests/ui/DateEditor.test.ts | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index b57683229a..ff3ad719bf 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -85,19 +85,10 @@ async function testTypingInput({ describe('date editor wrapper tests', () => { it('should initialise fields correctly', () => { const { container } = renderDateEditorWrapper(); - const dueDateInput = getAndCheckRenderedElement(container, 'due'); - const dueDateFromDateEditorInput = getAndCheckRenderedElement( - container, - 'dueDateFromDateEditor', - ); - const parsedDateFromDateEditor = getAndCheckRenderedElement( - container, - 'parsedDateFromDateEditor', - ); - expect(dueDateInput.value).toEqual(''); - expect(dueDateFromDateEditorInput.value).toEqual(''); - expect(parsedDateFromDateEditor.value).toEqual('no due date'); + testInputValue(container, 'due', ''); + testInputValue(container, 'parsedDateFromDateEditor', 'no due date'); + testInputValue(container, 'dueDateFromDateEditor', ''); }); it('should replace an empty date field with typed date value', async () => { From e504c57b9b29757d81c4bc876751f0661ae28cbb Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 21:50:53 +0600 Subject: [PATCH 18/27] test: - test date forwarding --- tests/ui/DateEditor.test.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index ff3ad719bf..99373a8a3a 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -117,4 +117,13 @@ describe('date editor wrapper tests', () => { expectedReturnedDate: 'blah', }); }); + + it('should select a forward date', async () => { + await testTypingInput({ + userTyped: 'friday', + expectedLeftText: 'friday', + expectedRightText: '2024-04-26', + expectedReturnedDate: 'friday', + }); + }); }); From f387e0a948dd1d71356c98bd24e6b73ac95fa041 Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 21:56:09 +0600 Subject: [PATCH 19/27] test: - add forward only parameter to DateEditorWrapper --- tests/ui/DateEditor.test.ts | 2 +- tests/ui/DateEditorWrapper.svelte | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index 99373a8a3a..70aae210dd 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -40,7 +40,7 @@ describe('date editor tests', () => { }); function renderDateEditorWrapper() { - const result: RenderResult = render(DateEditorWrapper, {}); + const result: RenderResult = render(DateEditorWrapper, { forwardOnly: true }); const { container } = result; expect(() => container).toBeTruthy(); diff --git a/tests/ui/DateEditorWrapper.svelte b/tests/ui/DateEditorWrapper.svelte index fd7478e277..026caa07d5 100644 --- a/tests/ui/DateEditorWrapper.svelte +++ b/tests/ui/DateEditorWrapper.svelte @@ -2,6 +2,8 @@ import { TASK_FORMATS } from '../../src/Config/Settings'; import DateEditor from '../../src/ui/DateEditor.svelte'; + export let forwardOnly: boolean; + let dateFromDateEditor: string = ''; let parsedDateFromDateEditor: string = ''; let isDueDateValid = true; @@ -12,7 +14,7 @@ dateSymbol={TASK_FORMATS.tasksPluginEmoji.taskSerializer.symbols.dueDateSymbol} bind:date={dateFromDateEditor} bind:isDateValid={isDueDateValid} - forwardOnly={true} + {forwardOnly} accesskey={null} on:open={() => {}} on:close={() => {}} From f767277878ca428fbc76a54bb83e4eb08d080db3 Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 22:02:01 +0600 Subject: [PATCH 20/27] test: - test backwards date --- tests/ui/DateEditor.test.ts | 45 ++++++++++++++++++++++++------------- 1 file changed, 30 insertions(+), 15 deletions(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index 70aae210dd..9ca2b19d40 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -39,8 +39,8 @@ describe('date editor tests', () => { }); }); -function renderDateEditorWrapper() { - const result: RenderResult = render(DateEditorWrapper, { forwardOnly: true }); +function renderDateEditorWrapper(componentOptions: { forwardOnly: boolean }) { + const result: RenderResult = render(DateEditorWrapper, componentOptions); const { container } = result; expect(() => container).toBeTruthy(); @@ -61,18 +61,21 @@ function testInputValue(container: HTMLElement, inputId: string, expectedText: s expect(input.value).toEqual(expectedText); } -async function testTypingInput({ - userTyped, - expectedLeftText, - expectedRightText, - expectedReturnedDate, -}: { - userTyped: string; - expectedLeftText: string; - expectedRightText: string; - expectedReturnedDate: string; -}) { - const { container } = renderDateEditorWrapper(); +async function testTypingInput( + { + userTyped, + expectedLeftText, + expectedRightText, + expectedReturnedDate, + }: { + userTyped: string; + expectedLeftText: string; + expectedRightText: string; + expectedReturnedDate: string; + }, + { forwardOnly }: { forwardOnly: boolean } = { forwardOnly: true }, +) { + const { container } = renderDateEditorWrapper({ forwardOnly }); const dueDateInput = getAndCheckRenderedElement(container, 'due'); await fireEvent.input(dueDateInput, { target: { value: userTyped } }); @@ -84,7 +87,7 @@ async function testTypingInput({ describe('date editor wrapper tests', () => { it('should initialise fields correctly', () => { - const { container } = renderDateEditorWrapper(); + const { container } = renderDateEditorWrapper({ forwardOnly: true }); testInputValue(container, 'due', ''); testInputValue(container, 'parsedDateFromDateEditor', 'no due date'); @@ -126,4 +129,16 @@ describe('date editor wrapper tests', () => { expectedReturnedDate: 'friday', }); }); + + it('should select a backward/earlier date', async () => { + await testTypingInput( + { + userTyped: 'friday', + expectedLeftText: 'friday', + expectedRightText: '2024-04-19', + expectedReturnedDate: 'friday', + }, + { forwardOnly: false }, + ); + }); }); From 56655b78aee7b460ce7fdad31d569dacd5ad65fc Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 22:02:55 +0600 Subject: [PATCH 21/27] test: - specify parameter explicitly --- tests/ui/DateEditor.test.ts | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index 9ca2b19d40..c90ba91fee 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -122,12 +122,15 @@ describe('date editor wrapper tests', () => { }); it('should select a forward date', async () => { - await testTypingInput({ - userTyped: 'friday', - expectedLeftText: 'friday', - expectedRightText: '2024-04-26', - expectedReturnedDate: 'friday', - }); + await testTypingInput( + { + userTyped: 'friday', + expectedLeftText: 'friday', + expectedRightText: '2024-04-26', + expectedReturnedDate: 'friday', + }, + { forwardOnly: true }, + ); }); it('should select a backward/earlier date', async () => { From b946702045a67bd51d10f37ff2762d618d7689d0 Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 23:34:39 +0600 Subject: [PATCH 22/27] refactor: . reorder empty lines --- tests/ui/DateEditor.test.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index c90ba91fee..e578741c70 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -41,9 +41,10 @@ describe('date editor tests', () => { function renderDateEditorWrapper(componentOptions: { forwardOnly: boolean }) { const result: RenderResult = render(DateEditorWrapper, componentOptions); - const { container } = result; + expect(() => container).toBeTruthy(); + return { result, container }; } From 8c36c7f1910d3f112ab91890e90fe1af30287644 Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 23:35:07 +0600 Subject: [PATCH 23/27] refactor: - remove unused return value --- tests/ui/DateEditor.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index e578741c70..632385ca8a 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -45,7 +45,7 @@ function renderDateEditorWrapper(componentOptions: { forwardOnly: boolean }) { expect(() => container).toBeTruthy(); - return { result, container }; + return { container }; } beforeEach(() => { From e7e3a1431b2dc94aa4c3b227627acef59a53c455 Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 23:35:28 +0600 Subject: [PATCH 24/27] refactor: . inline variable --- tests/ui/DateEditor.test.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index 632385ca8a..bdf055bc76 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -40,8 +40,7 @@ describe('date editor tests', () => { }); function renderDateEditorWrapper(componentOptions: { forwardOnly: boolean }) { - const result: RenderResult = render(DateEditorWrapper, componentOptions); - const { container } = result; + const { container } = render(DateEditorWrapper, componentOptions); expect(() => container).toBeTruthy(); From 6e185104364165fe805af3908a804ae4a0feb842 Mon Sep 17 00:00:00 2001 From: Ilyas Landikov Date: Fri, 1 Nov 2024 23:36:13 +0600 Subject: [PATCH 25/27] refactor: - remove destructuring --- tests/ui/DateEditor.test.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index bdf055bc76..16663ded98 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -44,7 +44,7 @@ function renderDateEditorWrapper(componentOptions: { forwardOnly: boolean }) { expect(() => container).toBeTruthy(); - return { container }; + return container; } beforeEach(() => { @@ -75,7 +75,7 @@ async function testTypingInput( }, { forwardOnly }: { forwardOnly: boolean } = { forwardOnly: true }, ) { - const { container } = renderDateEditorWrapper({ forwardOnly }); + const container = renderDateEditorWrapper({ forwardOnly }); const dueDateInput = getAndCheckRenderedElement(container, 'due'); await fireEvent.input(dueDateInput, { target: { value: userTyped } }); @@ -87,7 +87,7 @@ async function testTypingInput( describe('date editor wrapper tests', () => { it('should initialise fields correctly', () => { - const { container } = renderDateEditorWrapper({ forwardOnly: true }); + const container = renderDateEditorWrapper({ forwardOnly: true }); testInputValue(container, 'due', ''); testInputValue(container, 'parsedDateFromDateEditor', 'no due date'); From 34c4dd34874c0ef9c7adbbcdf76e66599aff2879 Mon Sep 17 00:00:00 2001 From: Clare Macrae Date: Fri, 1 Nov 2024 21:59:04 +0000 Subject: [PATCH 26/27] test: - Remove early experiments in DateEditor.test.ts The later renderDateEditorWrapper() turned out to be much more useful. --- tests/ui/DateEditor.test.ts | 32 +------------------------------- 1 file changed, 1 insertion(+), 31 deletions(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index 16663ded98..bb60d257c2 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -1,44 +1,14 @@ /** * @jest-environment jsdom */ -import { type RenderResult, fireEvent, render } from '@testing-library/svelte'; +import { fireEvent, render } from '@testing-library/svelte'; import moment from 'moment/moment'; -import { TASK_FORMATS } from '../../src/Config/Settings'; -import DateEditor from '../../src/ui/DateEditor.svelte'; import DateEditorWrapper from './DateEditorWrapper.svelte'; import { getAndCheckRenderedElement } from './RenderingTestHelpers'; window.moment = moment; -function renderDateEditor() { - const result: RenderResult = render(DateEditor, { - id: 'due', - dateSymbol: TASK_FORMATS.tasksPluginEmoji.taskSerializer.symbols.dueDateSymbol, - date: '', - isDateValid: true, - forwardOnly: true, - accesskey: 'D', - }); - - const { container } = result; - expect(() => container).toBeTruthy(); - return { result, container }; -} - -describe('date editor tests', () => { - it('should render and read input value', async () => { - const { container } = renderDateEditor(); - const dueDateInput = getAndCheckRenderedElement(container, 'due'); - - expect(dueDateInput.value).toEqual(''); - - await fireEvent.input(dueDateInput, { target: { value: '2024-10-01' } }); - - expect(dueDateInput.value).toEqual('2024-10-01'); - }); -}); - function renderDateEditorWrapper(componentOptions: { forwardOnly: boolean }) { const { container } = render(DateEditorWrapper, componentOptions); From c59ebdc6f4c3ab2f48cbccfef0428b2deeaf56e8 Mon Sep 17 00:00:00 2001 From: Clare Macrae Date: Fri, 1 Nov 2024 22:01:18 +0000 Subject: [PATCH 27/27] test: . Move beforeEach()/afterEach() next to the describe() So all the helper functions are together. --- tests/ui/DateEditor.test.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/tests/ui/DateEditor.test.ts b/tests/ui/DateEditor.test.ts index bb60d257c2..f68679117f 100644 --- a/tests/ui/DateEditor.test.ts +++ b/tests/ui/DateEditor.test.ts @@ -17,15 +17,6 @@ function renderDateEditorWrapper(componentOptions: { forwardOnly: boolean }) { return container; } -beforeEach(() => { - jest.useFakeTimers(); - jest.setSystemTime(new Date('2024-04-20')); -}); - -afterEach(() => { - jest.useRealTimers(); -}); - function testInputValue(container: HTMLElement, inputId: string, expectedText: string) { const input = getAndCheckRenderedElement(container, inputId); expect(input.value).toEqual(expectedText); @@ -55,6 +46,15 @@ async function testTypingInput( testInputValue(container, 'dueDateFromDateEditor', expectedReturnedDate); } +beforeEach(() => { + jest.useFakeTimers(); + jest.setSystemTime(new Date('2024-04-20')); +}); + +afterEach(() => { + jest.useRealTimers(); +}); + describe('date editor wrapper tests', () => { it('should initialise fields correctly', () => { const container = renderDateEditorWrapper({ forwardOnly: true });