Merge pull request #51 from appwrite/tests-2

feat: improve & update tests

Author: TorstenDittmann

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';

src/lib/components/InnerModal.svelte renamed to src/lib/components/innerModal.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
 </script>
 
@@ -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}>
         <slot />
     </a>
 {: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}>
         <slot />
     </button>
 {/if}

src/lib/elements/forms/button.svelte

@@ -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');

tests/unit/elements/button.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',

tests/unit/elements/inputEmail.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');

tests/unit/elements/inputNumber.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',

tests/unit/elements/inputPassword.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',

tests/unit/elements/inputPhone.test.ts

@@ -67,6 +67,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',

tests/unit/elements/inputSelect.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',