Skip to content

Commit 0f1dbce

Browse files
andreancardonaalisonjosephfrancineluccakodiakhq[bot]guidari
authored
feat: tooltip keyboard testing (#14159)
* feat: contained list persistent search * docs: update docs for contained list search * fix: fix border * feat: functionality working * fix(tabs): hover style bugs * fix: remove hover from disabled state * feat: clean up code * Update packages/react/src/components/ContainedList/ContainedList.mdx Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> * fix: update docs * fix: fix styling Co-authored-by: Francine Lucca <francinelucca@users.noreply.github.com> * fix: update docs * fix: failing test * fix: fix tests * feat: basic tooltip avt test * feat: default testing * feat: default keyboard nav * feat: tooltip avt testing * feat: remove testid * feat: updated test * feat: testing timeout error * fix: testing timeout * fix: syntax * fix: testing timeout * fix: test timeout * fix: fix avt timeout --------- Co-authored-by: Alison Joseph <alison.joseph@us.ibm.com> Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> Co-authored-by: Francine Lucca <francinelucca@users.noreply.github.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: Guilherme Datilio Ribeiro <guilhermedatilio@gmail.com>
1 parent 43b8990 commit 0f1dbce

4 files changed

Lines changed: 69 additions & 15 deletions

File tree

e2e/components/OverflowMenu/OverflowMenu-test.e2e.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,6 @@ test.describe('OverflowMenu', () => {
6767
theme: 'white',
6868
},
6969
});
70-
await expect(page).toHaveNoACViolations('OverflowMenu');
70+
await expect(page).toHaveNoACViolations('OverflowMenu feature-flag');
7171
});
7272
});
Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
/**
2+
* Copyright IBM Corp. 2016, 2023
3+
*
4+
* This source code is licensed under the Apache-2.0 license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*/
7+
8+
'use strict';
9+
10+
const { expect, test } = require('@playwright/test');
11+
const { visitStory } = require('../../test-utils/storybook');
12+
13+
test.describe('Tooltip @avt', () => {
14+
test('accessibility-checker - tooltip default', async ({ page }) => {
15+
await visitStory(page, {
16+
component: 'Tooltip',
17+
id: 'components-tooltip--default',
18+
globals: {
19+
theme: 'white',
20+
},
21+
});
22+
await expect(page).toHaveNoACViolations('Tooltip');
23+
});
24+
25+
test('accessibility-checker - tooltip alignment', async ({ page }) => {
26+
await visitStory(page, {
27+
component: 'Tooltip',
28+
id: 'components-tooltip--alignment',
29+
globals: {
30+
theme: 'white',
31+
},
32+
});
33+
await expect(page).toHaveNoACViolations('Tooltip - alignment');
34+
});
35+
36+
test('accessibility-checker - tooltip duration', async ({ page }) => {
37+
await visitStory(page, {
38+
component: 'Tooltip',
39+
id: 'components-tooltip--duration',
40+
globals: {
41+
theme: 'white',
42+
},
43+
});
44+
await expect(page).toHaveNoACViolations('Tooltip - duration');
45+
});
46+
47+
// Prevent timeout
48+
test.slow('tooltip default - keyboard nav', async ({ page }) => {
49+
await visitStory(page, {
50+
component: 'Tooltip',
51+
id: 'components-tooltip--default',
52+
globals: {
53+
theme: 'white',
54+
},
55+
});
56+
57+
await page.keyboard.press('Tab');
58+
await expect(page.getByRole('button')).toBeVisible();
59+
// Expect tooltip to be focused
60+
await page.keyboard.press('Tab');
61+
await expect(page.getByRole('button')).toBeFocused();
62+
// Expect tooltip content to be visible
63+
await expect(page.locator('.cds--popover-container')).toBeVisible();
64+
});
65+
});

e2e/components/Tooltip/Tooltip-test.e2e.js

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77

88
'use strict';
99

10-
const { expect, test } = require('@playwright/test');
10+
const { test } = require('@playwright/test');
1111
const { themes } = require('../../test-utils/env');
12-
const { snapshotStory, visitStory } = require('../../test-utils/storybook');
12+
const { snapshotStory } = require('../../test-utils/storybook');
1313

1414
test.describe('Tooltip', () => {
1515
themes.forEach((theme) => {
@@ -39,15 +39,4 @@ test.describe('Tooltip', () => {
3939
});
4040
});
4141
});
42-
43-
test('accessibility-checker @avt', async ({ page }) => {
44-
await visitStory(page, {
45-
component: 'Tooltip',
46-
id: 'components-tooltip--default',
47-
globals: {
48-
theme: 'white',
49-
},
50-
});
51-
await expect(page).toHaveNoACViolations('Tooltip');
52-
});
5342
});

packages/react/src/components/Tooltip/Tooltip.stories.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export default {
4747

4848
export const Default = () => {
4949
const label =
50-
'Occassionally, services are updated in a specified time window to ensure no down time for customers.';
50+
'Occasionally, services are updated in a specified time window to ensure no down time for customers.';
5151
return (
5252
<Tooltip align="bottom" label={label}>
5353
<button className="sb-tooltip-trigger" type="button">

0 commit comments

Comments
 (0)