Skip to content

Commit

Permalink
Add more test cases for tabs
Browse files Browse the repository at this point in the history
  • Loading branch information
@anhallbe
anhallbe committed Sep 9, 2024
1 parent feb4aa7 commit ccd046e
Show file tree
Hide file tree
Showing 4 changed files with 174 additions and 48 deletions.
2 changes: 1 addition & 1 deletion src/components/ids-tabs/demos/index.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
type: Example
description: Shows vertical tabs
- link: validation.html
type: Example
type: Test
description: Shows validation indicator in tabs
- link: side-by-side.html
type: Side by Side
Expand Down
181 changes: 149 additions & 32 deletions src/components/ids-tabs/demos/validation.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,40 +7,157 @@
<body>
<ids-container role="main" padding="8" hidden>
<ids-theme-switcher mode="light"></ids-theme-switcher>
<ids-layout-grid auto-fit="true" padding="sm">
<ids-layout-grid cols="1" padding="sm">
<ids-text font-size="12" type="h1">Tabs</ids-text>
<ids-card no-header="true">
<ids-tabs-context id="normal-tabs" slot="card-content">
<ids-tabs>
<ids-tab value="with-required">Has Required</ids-tab>
<ids-tab value="other">Other</ids-tab>
<ids-tab value="always-error" has-error>Manual Error</ids-tab>
</ids-tabs>
<ids-tab-content value="with-required">
<ids-layout-grid auto-fit="true" padding="sm">
<ids-input label="Required Field" validate="required"></ids-input>
<ids-input label="Another Required Field" validate="required"></ids-input>
</ids-layout-grid>
</ids-tab-content>
<ids-tab-content value="other">
<div class="tab-content">
<ids-layout-grid auto-fit="true" padding="sm">
<ids-text font-size="16" type="p">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed unde laboriosam veniam. Perferendis neque vero mollitia harum delectus, perspiciatis ratione ducimus reprehenderit voluptatibus aspernatur, velit doloribus unde veritatis rerum quidem!
</ids-text>
</ids-layout-grid>
</div>
</ids-tab-content>
<ids-tab-content value="always-error">
<div class="tab-content">
<ids-layout-grid auto-fit="true" padding="sm">
<ids-text font-size="16" type="p">
This tab always has an error indicator because of the validation-has-error attribute.
</ids-text>
</ids-layout-grid>
</div>
</ids-tab-content>
</ids-tabs-context>
</ids-card>

<ids-card no-header="true">
<ids-tabs-context id="dismissable-normal-tabs" slot="card-content">
<ids-tabs>
<ids-tab value="with-required">Has Required</ids-tab>
<ids-tab value="other">Other</ids-tab>
<ids-tab value="always-error" has-error>Manual Error</ids-tab>
<ids-tab value="dismissible" has-error dismissible>Dismissible</ids-tab>
</ids-tabs>
<ids-tab-content value="with-required">
<ids-layout-grid auto-fit="true" padding="sm">
<ids-input label="Required Field" validate="required"></ids-input>
<ids-input label="Another Required Field" validate="required"></ids-input>
</ids-layout-grid>
</ids-tab-content>
<ids-tab-content value="other">
<div class="tab-content">
<ids-layout-grid auto-fit="true" padding="sm">
<ids-text font-size="16" type="p">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed unde laboriosam veniam. Perferendis neque vero mollitia harum delectus, perspiciatis ratione ducimus reprehenderit voluptatibus aspernatur, velit doloribus unde veritatis rerum quidem!
</ids-text>
</ids-layout-grid>
</div>
</ids-tab-content>
<ids-tab-content value="always-error">
<div class="tab-content">
<ids-layout-grid auto-fit="true" padding="sm">
<ids-text font-size="16" type="p">
This tab always has an error indicator because of the validation-has-error attribute.
</ids-text>
</ids-layout-grid>
</div>
</ids-tab-content>
<ids-tab-content value="dismissible">
<ids-text>This tab is dismissible with an error.</ids-text>
</ids-tab-content>
</ids-tabs-context>
</ids-card>

<ids-card no-header="true">
<ids-tabs-context id="module-tabs" slot="card-content">
<ids-tabs color-variant="module">
<ids-tab value="with-required">Has Required</ids-tab>
<ids-tab value="other">Other</ids-tab>
<ids-tab value="always-error" has-error>Manual Error</ids-tab>
<ids-tab value="dismissible" has-error dismissible>Dismissible</ids-tab>
</ids-tabs>
<ids-tab-content value="with-required">
<ids-layout-grid auto-fit="true" padding="sm">
<ids-input label="Required Field" validate="required"></ids-input>
<ids-input label="Another Required Field" validate="required"></ids-input>
</ids-layout-grid>
</ids-tab-content>
<ids-tab-content value="other">
<div class="tab-content">
<ids-layout-grid auto-fit="true" padding="sm">
<ids-text font-size="16" type="p">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed unde laboriosam veniam. Perferendis neque vero mollitia harum delectus, perspiciatis ratione ducimus reprehenderit voluptatibus aspernatur, velit doloribus unde veritatis rerum quidem!
</ids-text>
</ids-layout-grid>
</div>
</ids-tab-content>
<ids-tab-content value="always-error">
<div class="tab-content">
<ids-layout-grid auto-fit="true" padding="sm">
<ids-text font-size="16" type="p">
This tab always has an error indicator because of the validation-has-error attribute.
</ids-text>
</ids-layout-grid>
</div>
</ids-tab-content>
<ids-tab-content value="dismissible">
<ids-text>This tab is dismissible with an error.</ids-text>
</ids-tab-content>
</ids-tabs-context>
</ids-card>

<ids-card no-header="true">
<ids-tabs-context id="count-tabs" slot="card-content">
<ids-tabs>
<ids-tab value="with-required" count="1">Has Required</ids-tab>
<ids-tab value="other" count="2">Other</ids-tab>
<ids-tab value="always-error" count="3" has-error>Manual Error</ids-tab>
<ids-tab value="dismissible" count="3" has-error dismissible>Dismissible</ids-tab>
</ids-tabs>
<ids-tab-content value="with-required">
<ids-layout-grid auto-fit="true" padding="sm">
<ids-input label="Required Field" validate="required"></ids-input>
<ids-input label="Another Required Field" validate="required"></ids-input>
</ids-layout-grid>
</ids-tab-content>
<ids-tab-content value="other">
<div class="tab-content">
<ids-layout-grid auto-fit="true" padding="sm">
<ids-text font-size="16" type="p">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed unde laboriosam veniam. Perferendis neque vero mollitia harum delectus, perspiciatis ratione ducimus reprehenderit voluptatibus aspernatur, velit doloribus unde veritatis rerum quidem!
</ids-text>
</ids-layout-grid>
</div>
</ids-tab-content>
<ids-tab-content value="always-error">
<div class="tab-content">
<ids-layout-grid auto-fit="true" padding="sm">
<ids-text font-size="16" type="p">
This tab always has an error indicator because of the validation-has-error attribute.
</ids-text>
</ids-layout-grid>
</div>
</ids-tab-content>
<ids-tab-content value="dismissible">
<ids-text>This tab is dismissible with an error.</ids-text>
</ids-tab-content>
</ids-tabs-context>
</ids-card>
</ids-layout-grid>
<ids-tabs-context>
<ids-tabs>
<ids-tab value="with-required">Has Required</ids-tab>
<ids-tab value="other">Other</ids-tab>
<ids-tab value="always-error" has-error>Manual Error</ids-tab>
</ids-tabs>
<ids-tab-content value="with-required">
<ids-layout-grid auto-fit="true" padding="sm">
<ids-input label="Required Field" validate="required"></ids-input>
<ids-input label="Another Required Field" validate="required"></ids-input>
</ids-layout-grid>
</ids-tab-content>
<ids-tab-content value="other">
<div class="tab-content">
<ids-layout-grid auto-fit="true" padding="sm">
<ids-text font-size="16" type="p">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sed unde laboriosam veniam. Perferendis neque vero mollitia harum delectus, perspiciatis ratione ducimus reprehenderit voluptatibus aspernatur, velit doloribus unde veritatis rerum quidem!
</ids-text>
</ids-layout-grid>
</div>
</ids-tab-content>
<ids-tab-content value="always-error">
<div class="tab-content">
<ids-layout-grid auto-fit="true" padding="sm">
<ids-text font-size="16" type="p">
This tab always has an error indicator because of the validation-has-error attribute.
</ids-text>
</ids-layout-grid>
</div>
</ids-tab-content>
</ids-tabs-context>

</ids-container>
</body>
</html>
1 change: 1 addition & 0 deletions src/components/ids-tabs/demos/validation.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import '../../ids-text/ids-text';
import '../ids-tabs';
import '../../ids-input/ids-input';
import '../../ids-card/ids-card';
38 changes: 23 additions & 15 deletions tests/ids-tabs/ids-tabs.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,21 +204,29 @@ test.describe('IdsTabs tests', () => {
});

test('should not be visible by default', async ({ page }) => {
const tab = await page.locator('ids-tab[value="with-required"]');
await expect(tab).not.toHaveAttribute('has-error', /.*/);
await expect(tab.locator('ids-icon[icon="error"]')).not.toBeVisible();
});

test('should be visible when there is a validation error', async ({ page }) => {
const tab = page.locator('ids-tab[value="with-required"]');
const tabContent = page.locator('ids-tab-content[value="with-required"]');
const firstInput = tabContent.locator('ids-input').first();

await firstInput.evaluate((el: IdsInput) => { el.value = 'hello'; });
await firstInput.evaluate((el: IdsInput) => { el.value = ''; });

await expect(tab).toHaveAttribute('has-error', 'true');
await expect(tab.locator('ids-icon[icon="error"]')).toBeVisible();
const contexts = await page.locator('ids-tabs-context').all();
for (const context of contexts) {
const tab = context.locator('ids-tab[value="with-required"]');
await expect(tab).not.toHaveAttribute('has-error', /.*/);
await expect(tab.locator('ids-icon[icon="error"]')).not.toBeVisible();
}
});

test('should only be visible when there is a validation error', async ({ page }) => {
const contexts = await page.locator('ids-tabs-context').all();
for (const context of contexts) {
const tab = context.locator('ids-tab[value="with-required"]');
const content = context.locator('ids-tab-content[value="with-required"]');
const input = content.locator('ids-input').first();
const icon = tab.locator('ids-icon[icon="error"]');

await input.evaluate((el: IdsInput) => { el.value = 'hello'; });
await input.evaluate((el: IdsInput) => { el.value = ''; });
await expect(icon).toBeVisible();

await input.evaluate((el: IdsInput) => { el.value = 'hello'; });
await expect(icon).not.toBeVisible();
}
});
});
});

0 comments on commit ccd046e

Please sign in to comment.