From 87146973dadef8398cc7305c1e090bc916fe4dc6 Mon Sep 17 00:00:00 2001 From: Arman Date: Wed, 27 Apr 2022 17:56:52 +0200 Subject: [PATCH 01/13] feat: added e2e tests for login page --- tests/e2e/login.spec.ts | 51 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 50 insertions(+), 1 deletion(-) diff --git a/tests/e2e/login.spec.ts b/tests/e2e/login.spec.ts index 2df0ebffa5..d73728622d 100644 --- a/tests/e2e/login.spec.ts +++ b/tests/e2e/login.spec.ts @@ -1,9 +1,58 @@ import { expect, test } from '@playwright/test'; -test('login page has inputs', async ({ page }) => { +/*TODO: Things to test in login: + - presence of forgot password link + - validation message on wrong input + - correct response and redirect after login + - logout works + - back button does not log out user + - forward button does not log in user after logout + - limit to total number of login attempts + - +*/ + +test('login page has inputs and button', async ({ page }) => { await page.goto('/login'); const mail = page.locator('id=email'); const pass = page.locator('id=password'); + const button = page.locator('button:has-text("Login")'); expect(await mail.isVisible()); expect(await pass.isVisible()); + expect(await button.isVisible()); +}); + +test('login page has a working sign up link', async ({ page }) => { + await page.goto('/login'); + const signup = page.locator('a[href="/register"]'); + expect(await signup.isVisible()); + await signup.click(); + await page.waitForNavigation(); + expect(page.url()).toContain('/register'); + expect(await page.locator('Register').isVisible()); +}); + +test('login page inputs are navigable by keyboard', async ({ page }) => { + await page.goto('/login'); + const mail = page.locator('id=email'); + await mail.focus(); + await page.keyboard.type('wrongemail@apppwrite.io'); + await page.keyboard.press('Tab'); + await page.keyboard.type('password'); + await page.keyboard.press('Tab'); + await page.keyboard.press('Enter'); + expect(await page.locator('.toaster-item').isVisible()); + expect(await page.locator('text=Invalid credentials').isVisible()); +}); + +test('login page shows error & response is 401 with wrong inputs', async ({ page }) => { + await page.goto('/login'); + + await page.fill('id=email', 'wrongemail@apppwrite.io'); + await page.fill('id=password', 'wrongpassword'); + await page.click('button:has-text("Login")'); + page.on('response', (response) => { + expect(response.status()).toBe(401); + }); + expect(await page.locator('.toaster-item').isVisible()); + expect(await page.locator('text=Invalid credentials').isVisible()); }); From 17144b15ecd657166746784e405950f5498f6540 Mon Sep 17 00:00:00 2001 From: Arman Date: Thu, 28 Apr 2022 16:12:42 +0200 Subject: [PATCH 02/13] feat: add fallback to copy component --- src/lib/components/copy.svelte | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/src/lib/components/copy.svelte b/src/lib/components/copy.svelte index 437b3fa73e..02399392b2 100644 --- a/src/lib/components/copy.svelte +++ b/src/lib/components/copy.svelte @@ -6,8 +6,12 @@ const copy = async () => { try { if (navigator.clipboard === undefined) { - //TODO: add fallback to old methods - throw new Error('Clipboard API only available to SSL'); + fallbackCopyTextToClipboard(value); + addNotification({ + message: 'Copied to clipboard.', + type: 'success' + }); + return; } await navigator.clipboard.writeText(value); addNotification({ @@ -21,6 +25,30 @@ }); } }; + + function fallbackCopyTextToClipboard(text) { + let textArea = document.createElement('textarea'); + textArea.value = text; + + // Avoid scrolling to bottom + textArea.style.top = '0'; + textArea.style.left = '0'; + textArea.style.position = 'fixed'; + + document.body.appendChild(textArea); + textArea.focus(); + textArea.select(); + + try { + let successful = document.execCommand('copy'); + let msg = successful ? 'successful' : 'unsuccessful'; + console.log('Fallback: Copying text command was ' + msg); + } catch (err) { + console.error('Fallback: Oops, unable to copy', err); + } + + document.body.removeChild(textArea); + }
From 4ac24b8f4982ce6f4a326b13f0002de0e407105d Mon Sep 17 00:00:00 2001 From: Arman Date: Thu, 28 Apr 2022 18:10:44 +0200 Subject: [PATCH 03/13] test: initial test for the copy component (WIP) --- tests/unit/components/copy.test.ts | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 tests/unit/components/copy.test.ts diff --git a/tests/unit/components/copy.test.ts b/tests/unit/components/copy.test.ts new file mode 100644 index 0000000000..5805540bdc --- /dev/null +++ b/tests/unit/components/copy.test.ts @@ -0,0 +1,18 @@ +import '@testing-library/jest-dom'; +import { render } from '@testing-library/svelte'; +import { Copy } from '../../../src/lib/components'; + +//TODO: test after button click value is copied to clipboard + +const value = 'This is a test'; + +test('shows copy component', () => { + const { getByRole } = render(Copy, { value }); + const input = document.querySelector('input'); + const button = getByRole('button'); + + expect(input).toBeInTheDocument(); + expect(button).toBeInTheDocument(); + expect(input).toHaveAttribute('type', 'text'); + expect(input).toBeDisabled(); +}); From 1ff8777482f81ec3d3b6b7d1be59d4420681e322 Mon Sep 17 00:00:00 2001 From: Arman Date: Thu, 28 Apr 2022 18:11:25 +0200 Subject: [PATCH 04/13] test: added tests for input checkbox components --- tests/unit/elements/inputCheckbox.test.ts | 65 +++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 tests/unit/elements/inputCheckbox.test.ts diff --git a/tests/unit/elements/inputCheckbox.test.ts b/tests/unit/elements/inputCheckbox.test.ts new file mode 100644 index 0000000000..9555f6233f --- /dev/null +++ b/tests/unit/elements/inputCheckbox.test.ts @@ -0,0 +1,65 @@ +import '@testing-library/jest-dom'; +import { render, fireEvent } from '@testing-library/svelte'; +import userEvent from '@testing-library/user-event'; +import { InputCheckbox } from '../../../src/lib/elements/forms'; + +test('shows checkbox input', () => { + const { getByText, getByLabelText } = render(InputCheckbox, { id: 'input', label: 'checkbox' }); + const checkbox = getByLabelText('checkbox'); + + expect(getByText('checkbox')).toBeInTheDocument(); + expect(checkbox).toBeInTheDocument(); +}); + +test('shows checkbox input - required', () => { + const { getByLabelText } = render(InputCheckbox, { + id: 'input', + label: 'checkbox', + required: true + }); + + expect(getByLabelText('checkbox')).toBeRequired(); +}); + +test('shows checkbox input - disabled', () => { + const { getByLabelText } = render(InputCheckbox, { + id: 'input', + label: 'checkbox', + disabled: true + }); + + expect(getByLabelText('checkbox')).toBeDisabled(); +}); + +test('state', async () => { + const { component, getByLabelText } = render(InputCheckbox, { id: 'input', label: 'checkbox' }); + const checkbox = getByLabelText('checkbox'); + + expect(component.value).toEqual(false); + await userEvent.click(checkbox); + expect(component.value).toEqual(true); +}); + +test('state', async () => { + const { getByLabelText, component } = render(InputCheckbox, { id: 'input', label: 'checkbox' }); + const checkbox = getByLabelText('checkbox'); + + expect(checkbox).not.toBeChecked(); + expect(component.value).toStrictEqual(false); + + await fireEvent.click(checkbox); + expect(checkbox).toBeChecked(); + expect(component.value).toStrictEqual(true); + + await fireEvent.click(checkbox); + expect(checkbox).not.toBeChecked(); + expect(component.value).toStrictEqual(false); + + component.value = true; + expect(checkbox).toBeChecked(); + expect(component.value).toStrictEqual(true); + + component.value = false; + expect(checkbox).not.toBeChecked(); + expect(component.value).toStrictEqual(false); +}); From f58b40b2bc704034082f17be85d111139040c6ce Mon Sep 17 00:00:00 2001 From: Arman Date: Fri, 29 Apr 2022 11:40:53 +0200 Subject: [PATCH 05/13] fix: added id to input select elem --- src/lib/elements/forms/inputSelect.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte index f9788d6199..7ab396f29c 100644 --- a/src/lib/elements/forms/inputSelect.svelte +++ b/src/lib/elements/forms/inputSelect.svelte @@ -15,7 +15,7 @@
- {#each options as option}