From fc6ba6c1f66081e1b889e1229a739c441c1bbaae Mon Sep 17 00:00:00 2001 From: Arman Date: Wed, 14 Sep 2022 17:51:26 +0200 Subject: [PATCH 1/8] feat: improved button tests --- src/lib/elements/forms/button.svelte | 7 +++++-- tests/unit/elements/button.test.ts | 31 ++++++++++++++++++++++++++++ 2 files changed, 36 insertions(+), 2 deletions(-) diff --git a/src/lib/elements/forms/button.svelte b/src/lib/elements/forms/button.svelte index 641720d78..c89eb1148 100644 --- a/src/lib/elements/forms/button.svelte +++ b/src/lib/elements/forms/button.svelte @@ -8,6 +8,7 @@ export let external = false; export let href: string = null; export let fullWidth = false; + export let ariaLabel: string = null; //TODO: add option to add aria-label to buttons that are only icons @@ -22,7 +23,8 @@ class:is-secondary={secondary} class:is-text={text} class:is-danger={danger} - class:is-full-width={fullWidth}> + class:is-full-width={fullWidth} + aria-label={ariaLabel}> {:else} @@ -35,7 +37,8 @@ class:is-danger={danger} class:is-text={text} class:is-full-width={fullWidth} - type={submit ? 'submit' : 'button'}> + type={submit ? 'submit' : 'button'} + aria-label={ariaLabel}> {/if} diff --git a/tests/unit/elements/button.test.ts b/tests/unit/elements/button.test.ts index 98c65478b..9edeb8dfe 100644 --- a/tests/unit/elements/button.test.ts +++ b/tests/unit/elements/button.test.ts @@ -32,6 +32,37 @@ test('shows button - text', () => { expect(getByRole('button')).toHaveClass('is-text'); }); +test('shows button - danger', () => { + const { getByRole } = render(Button, { danger: true }); + + expect(getByRole('button')).toHaveClass('is-danger'); +}); + +test('shows button - round', () => { + const { getByRole } = render(Button, { round: true }); + + expect(getByRole('button')).toHaveClass('is-only-icon'); +}); +test('shows button - full width', () => { + const { getByRole } = render(Button, { fullWidth: true }); + + expect(getByRole('button')).toHaveClass('is-full-width'); +}); + +test('shows button - is link', () => { + render(Button, { href: 'https://appwrite.io' }); + const link = document.querySelector('a'); + + expect(link).toHaveAttribute('href', 'https://appwrite.io'); +}); +test('shows button - is link is external', () => { + render(Button, { href: 'https://appwrite.io', external: true }); + const link = document.querySelector('a'); + + expect(link).toHaveAttribute('target', '_blank'); + expect(link).toHaveAttribute('rel', 'noopener noreferrer'); +}); + test('shows button - on:click', async () => { const { getByRole, component } = render(Button); const button = getByRole('button'); From 1c06f6ec01c0324cefdc89f9711cc8797b425918 Mon Sep 17 00:00:00 2001 From: Arman Date: Thu, 15 Sep 2022 10:28:59 +0200 Subject: [PATCH 2/8] fix: rename component --- src/lib/components/index.ts | 2 +- src/lib/components/{InnerModal.svelte => innerModal.svelte} | 0 2 files changed, 1 insertion(+), 1 deletion(-) rename src/lib/components/{InnerModal.svelte => innerModal.svelte} (100%) diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts index 55469257d..890743861 100644 --- a/src/lib/components/index.ts +++ b/src/lib/components/index.ts @@ -2,7 +2,7 @@ export { default as Modal } from './modal.svelte'; export { default as Pagination } from './pagination.svelte'; export { default as Card } from './card.svelte'; export { default as CardGrid } from './cardGrid.svelte'; -export { default as InnerModal } from './InnerModal.svelte'; +export { default as InnerModal } from './innerModal.svelte'; export { default as Tile } from './tile.svelte'; export { default as Tiles } from './tiles.svelte'; export { default as Back } from './back.svelte'; diff --git a/src/lib/components/InnerModal.svelte b/src/lib/components/innerModal.svelte similarity index 100% rename from src/lib/components/InnerModal.svelte rename to src/lib/components/innerModal.svelte From 01a817a39b6da3142828fb90ff0ee68741564e7c Mon Sep 17 00:00:00 2001 From: Arman Date: Thu, 15 Sep 2022 12:48:27 +0200 Subject: [PATCH 3/8] feat: improve inputs tests --- tests/unit/elements/inputPhone.test.ts | 31 +++++++++++++++++++ tests/unit/elements/inputSelect.test.ts | 12 +++++++ tests/unit/elements/inputTags.test.ts | 11 +++++++ tests/unit/elements/inputText.test.ts | 31 +++++++++++++++++++ ...extarea.test .ts => inputTextarea.test.ts} | 22 ++++++++++++- 5 files changed, 106 insertions(+), 1 deletion(-) rename tests/unit/elements/{inputTextarea.test .ts => inputTextarea.test.ts} (78%) diff --git a/tests/unit/elements/inputPhone.test.ts b/tests/unit/elements/inputPhone.test.ts index f5370b119..1eab5f3cc 100644 --- a/tests/unit/elements/inputPhone.test.ts +++ b/tests/unit/elements/inputPhone.test.ts @@ -39,6 +39,37 @@ test('shows phone input - placeholder', () => { expect(getByPlaceholderText('find me')).toBeInTheDocument(); }); +test('shows phone input - hide label', () => { + render(InputPhone, { + id: 'input', + label: 'label', + showLabel: false + }); + + const label = document.querySelector('label'); + expect(label).toHaveClass('u-hide'); +}); + +test('shows phone input - autocomplete', () => { + const { getByLabelText } = render(InputPhone, { + id: 'input', + label: 'input', + autocomplete: true + }); + + expect(getByLabelText('input')).toHaveAttribute('autocomplete', 'on'); +}); + +test('shows phone input - maxlength', () => { + const { getByLabelText } = render(InputPhone, { + id: 'input', + label: 'input', + maxlength: 2 + }); + + expect(getByLabelText('input')).toHaveAttribute('maxlength', '2'); +}); + test('state', async () => { const { component, getByLabelText } = render(InputPhone, { id: 'input', diff --git a/tests/unit/elements/inputSelect.test.ts b/tests/unit/elements/inputSelect.test.ts index c2766f180..0f8c61ed2 100644 --- a/tests/unit/elements/inputSelect.test.ts +++ b/tests/unit/elements/inputSelect.test.ts @@ -56,6 +56,18 @@ test('shows select input - disabled', () => { expect(getByLabelText('select')).toBeDisabled(); }); +test('shows select input - hide label', () => { + render(InputSelect, { + id: 'select', + options, + label: 'label', + showLabel: false + }); + + const label = document.querySelector('label'); + expect(label).toHaveClass('u-hide'); +}); + test('state', async () => { const { component, getByLabelText } = render(InputSelect, { id: 'select', diff --git a/tests/unit/elements/inputTags.test.ts b/tests/unit/elements/inputTags.test.ts index 9f337df6a..382c5d57f 100644 --- a/tests/unit/elements/inputTags.test.ts +++ b/tests/unit/elements/inputTags.test.ts @@ -15,6 +15,17 @@ test('shows input - autofocus', () => { expect(getByLabelText('Tags')).toHaveFocus(); }); +test('shows input - hide label', () => { + render(InputTags, { + id: 'input', + label: 'label', + showLabel: false + }); + + const label = document.querySelector('label'); + expect(label).toHaveClass('u-hide'); +}); + test('shows tags', () => { const { getByText } = render(InputTags, { id: 'input', diff --git a/tests/unit/elements/inputText.test.ts b/tests/unit/elements/inputText.test.ts index 4070d2f22..a6d927fb3 100644 --- a/tests/unit/elements/inputText.test.ts +++ b/tests/unit/elements/inputText.test.ts @@ -40,6 +40,37 @@ test('shows text input - placeholder', () => { expect(getByPlaceholderText('find me')).toBeInTheDocument(); }); +test('shows text input - hide label', () => { + render(InputText, { + id: 'input', + label: 'label', + showLabel: false + }); + + const label = document.querySelector('label'); + expect(label).toHaveClass('u-hide'); +}); + +test('shows text input - autocomplete', () => { + const { getByLabelText } = render(InputText, { + id: 'input', + label: 'input', + autocomplete: true + }); + + expect(getByLabelText('input')).toHaveAttribute('autocomplete', 'on'); +}); + +test('shows text input - maxlength', () => { + const { getByLabelText } = render(InputText, { + id: 'input', + label: 'input', + maxlength: 2 + }); + + expect(getByLabelText('input')).toHaveAttribute('maxlength', '2'); +}); + test('state', async () => { const { component, getByLabelText } = render(InputText, { id: 'input', diff --git a/tests/unit/elements/inputTextarea.test .ts b/tests/unit/elements/inputTextarea.test.ts similarity index 78% rename from tests/unit/elements/inputTextarea.test .ts rename to tests/unit/elements/inputTextarea.test.ts index 414d7bd5b..8ba43f54d 100644 --- a/tests/unit/elements/inputTextarea.test .ts +++ b/tests/unit/elements/inputTextarea.test.ts @@ -9,7 +9,6 @@ test('shows textarea', () => { expect(getByText('input')).toBeInTheDocument(); expect(input).toBeInTheDocument(); - expect(input).toHaveAttribute('type', 'text'); }); test('shows textarea - required', () => { @@ -52,6 +51,27 @@ test('shows textarea - placeholder', () => { expect(getByPlaceholderText('find me')).toBeInTheDocument(); }); +test('shows textarea - hide label', () => { + render(InputTextarea, { + id: 'input', + label: 'label', + showLabel: false + }); + + const label = document.querySelector('label'); + expect(label).toHaveClass('u-hide'); +}); + +test('shows textarea - maxlength', () => { + const { getByLabelText } = render(InputTextarea, { + id: 'input', + label: 'input', + maxlength: 2 + }); + + expect(getByLabelText('input')).toHaveAttribute('maxlength', '2'); +}); + test('state', async () => { const { component, getByLabelText } = render(InputTextarea, { id: 'input', From a88d9d86d79ca3f927916fa949cb38a80f24c44b Mon Sep 17 00:00:00 2001 From: Arman Date: Thu, 15 Sep 2022 17:05:57 +0200 Subject: [PATCH 4/8] feat: upgrade input tests --- tests/unit/elements/inputEmail.test.ts | 21 ++++++++++ tests/unit/elements/inputNumber.test.ts | 21 ++++++++++ tests/unit/elements/inputPassword.test.ts | 51 +++++++++++++++++++++++ 3 files changed, 93 insertions(+) diff --git a/tests/unit/elements/inputEmail.test.ts b/tests/unit/elements/inputEmail.test.ts index 4641fd461..b7ff7bb08 100644 --- a/tests/unit/elements/inputEmail.test.ts +++ b/tests/unit/elements/inputEmail.test.ts @@ -40,6 +40,27 @@ test('shows email input - placeholder', () => { expect(getByPlaceholderText('find me')).toBeInTheDocument(); }); +test('shows email input - hide label', () => { + render(InputEmail, { + id: 'input', + label: 'label', + showLabel: false + }); + + const label = document.querySelector('label'); + expect(label).toHaveClass('u-hide'); +}); + +test('shows email input - autocomplete', () => { + const { getByLabelText } = render(InputEmail, { + id: 'input', + label: 'input', + autocomplete: true + }); + + expect(getByLabelText('input')).toHaveAttribute('autocomplete', 'on'); +}); + test('state', async () => { const { component, getByLabelText } = render(InputEmail, { id: 'input', diff --git a/tests/unit/elements/inputNumber.test.ts b/tests/unit/elements/inputNumber.test.ts index 082822aa8..66d543580 100644 --- a/tests/unit/elements/inputNumber.test.ts +++ b/tests/unit/elements/inputNumber.test.ts @@ -44,6 +44,27 @@ test('shows number input - placeholder', () => { expect(getByPlaceholderText('find me')).toBeInTheDocument(); }); +test('shows number input - hide label', () => { + render(InputNumber, { + id: 'input', + label: 'label', + showLabel: false + }); + + const label = document.querySelector('label'); + expect(label).toHaveClass('u-hide'); +}); + +test('shows number input - maxlength', () => { + const { getByLabelText } = render(InputNumber, { + id: 'input', + label: 'input', + maxlength: 2 + }); + + expect(getByLabelText('input')).toHaveAttribute('maxlength', '2'); +}); + test('state', async () => { const { component, getByLabelText } = render(InputNumber, { id: 'input', label: 'input' }); const input = getByLabelText('input'); diff --git a/tests/unit/elements/inputPassword.test.ts b/tests/unit/elements/inputPassword.test.ts index 7de86b0d6..2e645b806 100644 --- a/tests/unit/elements/inputPassword.test.ts +++ b/tests/unit/elements/inputPassword.test.ts @@ -52,6 +52,57 @@ test('shows password input - placeholder', () => { expect(getByPlaceholderText('find me')).toBeInTheDocument(); }); +test('shows password input - meter', () => { + render(InputPassword, { + id: 'input', + label: 'input', + meter: true + }); + + const meter = document.querySelector('meter'); + expect(meter).toBeInTheDocument(); +}); + +test('shows password input - show password button', () => { + const { getByRole } = render(InputPassword, { + id: 'input', + label: 'input', + showPasswordButton: true + }); + + expect(getByRole('button')).toBeInTheDocument(); +}); + +test('shows password input - maxlength', () => { + const { getByLabelText } = render(InputPassword, { + id: 'input', + label: 'input', + maxlength: 2 + }); + + expect(getByLabelText('input')).toHaveAttribute('maxlength', '2'); +}); +test('shows password input - minlength', () => { + const { getByLabelText } = render(InputPassword, { + id: 'input', + label: 'input', + minlength: 2 + }); + + expect(getByLabelText('input')).toHaveAttribute('minlength', '2'); +}); + +test('shows password input - hide label', () => { + render(InputPassword, { + id: 'input', + label: 'label', + showLabel: false + }); + + const label = document.querySelector('label'); + expect(label).toHaveClass('u-hide'); +}); + test('state', async () => { const { component, getByLabelText } = render(InputPassword, { id: 'input', From ed209a11dcb834af5c8b387312cca88555080e7a Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Wed, 21 Sep 2022 17:37:36 +0200 Subject: [PATCH 5/8] test: parallel jobs --- .github/workflows/prepare.yml | 12 ++++++++++++ .github/workflows/tests.yml | 30 +++++++++++++++++++++++------- 2 files changed, 35 insertions(+), 7 deletions(-) create mode 100644 .github/workflows/prepare.yml diff --git a/.github/workflows/prepare.yml b/.github/workflows/prepare.yml new file mode 100644 index 000000000..b99b4155a --- /dev/null +++ b/.github/workflows/prepare.yml @@ -0,0 +1,12 @@ +name: 'Prepare Node.js' + +runs: + using: 'composite' + steps: + - uses: actions/checkout@v2 + - name: Use Node.js + uses: actions/setup-node@v2 + with: + node-version: 16 + - name: Install dependencies + run: npm ci diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 6b3c24003..47b3115a9 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -10,26 +10,42 @@ env: VITE_APPWRITE_ENDPOINT: http://appwrite.test/v1 jobs: + audit: + runs-on: ubuntu-latest + steps: + - uses: ./prepare.yml + - name: Audit dependencies + run: npm audit --audit-level high build: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 - - name: Use Node.js - uses: actions/setup-node@v2 - with: - node-version: 16 - - name: Audit dependencies - run: npm audit --audit-level high + - uses: ./prepare.yml - name: Install dependencies run: npm ci - name: Build Console run: npm run build + diagnostics: + runs-on: ubuntu-latest + steps: + - uses: ./prepare.yml - name: Svelte Diagnostics run: npm run check + linter: + runs-on: ubuntu-latest + steps: + - uses: ./prepare.yml - name: Linter run: npm run lint + unit-tests: + runs-on: ubuntu-latest + steps: + - uses: ./prepare.yml - name: Unit Tests run: npm test + e2e-tests: + runs-on: ubuntu-latest + steps: + - uses: ./prepare.yml - name: E2E Tests run: | npx playwright install From 8dd3520ac65fd83a362381e39ee71ed476d2cd8b Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Wed, 21 Sep 2022 17:39:42 +0200 Subject: [PATCH 6/8] tests: fix path --- .github/workflows/tests.yml | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 47b3115a9..3844651d2 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -13,13 +13,13 @@ jobs: audit: runs-on: ubuntu-latest steps: - - uses: ./prepare.yml + - uses: ./.github/workflows/prepare.yml - name: Audit dependencies run: npm audit --audit-level high build: runs-on: ubuntu-latest steps: - - uses: ./prepare.yml + - uses: ./.github/workflows/prepare.yml - name: Install dependencies run: npm ci - name: Build Console @@ -27,25 +27,25 @@ jobs: diagnostics: runs-on: ubuntu-latest steps: - - uses: ./prepare.yml + - uses: ./.github/workflows/prepare.yml - name: Svelte Diagnostics run: npm run check linter: runs-on: ubuntu-latest steps: - - uses: ./prepare.yml + - uses: ./.github/workflows/prepare.yml - name: Linter run: npm run lint unit-tests: runs-on: ubuntu-latest steps: - - uses: ./prepare.yml + - uses: ./.github/workflows/prepare.yml - name: Unit Tests run: npm test e2e-tests: runs-on: ubuntu-latest steps: - - uses: ./prepare.yml + - uses: ./.github/workflows/prepare.yml - name: E2E Tests run: | npx playwright install From ae46652fdb0e4e7e6fc4dfa5c02d3a2e96fa8c48 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Wed, 21 Sep 2022 17:41:04 +0200 Subject: [PATCH 7/8] tests: fix checkout --- .github/workflows/prepare.yml | 1 - .github/workflows/tests.yml | 6 ++++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/.github/workflows/prepare.yml b/.github/workflows/prepare.yml index b99b4155a..1e5a2767b 100644 --- a/.github/workflows/prepare.yml +++ b/.github/workflows/prepare.yml @@ -3,7 +3,6 @@ name: 'Prepare Node.js' runs: using: 'composite' steps: - - uses: actions/checkout@v2 - name: Use Node.js uses: actions/setup-node@v2 with: diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 3844651d2..4efdb05c3 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -13,12 +13,14 @@ jobs: audit: runs-on: ubuntu-latest steps: + - uses: actions/checkout@v2 - uses: ./.github/workflows/prepare.yml - name: Audit dependencies run: npm audit --audit-level high build: runs-on: ubuntu-latest steps: + - uses: actions/checkout@v2 - uses: ./.github/workflows/prepare.yml - name: Install dependencies run: npm ci @@ -27,24 +29,28 @@ jobs: diagnostics: runs-on: ubuntu-latest steps: + - uses: actions/checkout@v2 - uses: ./.github/workflows/prepare.yml - name: Svelte Diagnostics run: npm run check linter: runs-on: ubuntu-latest steps: + - uses: actions/checkout@v2 - uses: ./.github/workflows/prepare.yml - name: Linter run: npm run lint unit-tests: runs-on: ubuntu-latest steps: + - uses: actions/checkout@v2 - uses: ./.github/workflows/prepare.yml - name: Unit Tests run: npm test e2e-tests: runs-on: ubuntu-latest steps: + - uses: actions/checkout@v2 - uses: ./.github/workflows/prepare.yml - name: E2E Tests run: | From 6c2937bb19a54ebfa85a3122dbc15446854ed054 Mon Sep 17 00:00:00 2001 From: Torsten Dittmann Date: Wed, 21 Sep 2022 17:42:12 +0200 Subject: [PATCH 8/8] revert: parallel tests --- .github/workflows/prepare.yml | 11 ----------- .github/workflows/tests.yml | 34 ++++++---------------------------- 2 files changed, 6 insertions(+), 39 deletions(-) delete mode 100644 .github/workflows/prepare.yml diff --git a/.github/workflows/prepare.yml b/.github/workflows/prepare.yml deleted file mode 100644 index 1e5a2767b..000000000 --- a/.github/workflows/prepare.yml +++ /dev/null @@ -1,11 +0,0 @@ -name: 'Prepare Node.js' - -runs: - using: 'composite' - steps: - - name: Use Node.js - uses: actions/setup-node@v2 - with: - node-version: 16 - - name: Install dependencies - run: npm ci diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml index 4efdb05c3..6b3c24003 100644 --- a/.github/workflows/tests.yml +++ b/.github/workflows/tests.yml @@ -10,48 +10,26 @@ env: VITE_APPWRITE_ENDPOINT: http://appwrite.test/v1 jobs: - audit: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - uses: ./.github/workflows/prepare.yml - - name: Audit dependencies - run: npm audit --audit-level high build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - - uses: ./.github/workflows/prepare.yml + - name: Use Node.js + uses: actions/setup-node@v2 + with: + node-version: 16 + - name: Audit dependencies + run: npm audit --audit-level high - name: Install dependencies run: npm ci - name: Build Console run: npm run build - diagnostics: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - uses: ./.github/workflows/prepare.yml - name: Svelte Diagnostics run: npm run check - linter: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - uses: ./.github/workflows/prepare.yml - name: Linter run: npm run lint - unit-tests: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - uses: ./.github/workflows/prepare.yml - name: Unit Tests run: npm test - e2e-tests: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - uses: ./.github/workflows/prepare.yml - name: E2E Tests run: | npx playwright install