) => {
+ await expect(items).not.toHaveCount(0);
+ for (const item of await items.all()) {
+ await checkStyles(item, styles);
+ }
+};
+
+const expectNoneFocused = async (items: Locator) => {
+ await expect(items).not.toHaveCount(0);
+ for (const item of await items.all()) {
+ await expect(item).not.toBeFocused();
+ }
+};
+
const pressKeyMultipleTimes = async (page: Page, key: string, times: number) => {
for (let i = 0; i < times; i++) {
await page.keyboard.press(key);
@@ -131,29 +149,27 @@ test.describe(`${TAG.VISUAL} `, () => {
await expect(locators.button(page)).toHaveAttribute('aria-expanded', 'false');
});
- await page.keyboard.press('Tab');
- await page.keyboard.press('Enter');
- await locators.menuitem(page, 0).waitFor({ state: 'visible' });
- await expect.poll(async () => {
- return await locators.menuitem(page, 0).getAttribute('class');
- }, {
- timeout: 1000,
- }).toMatch(/highlighted/);
+ await test.step('Verify first item highlighted when opened by Enter', async () => {
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('Enter');
+ await locators.menuitem(page, 0).waitFor({ state: 'visible' });
+ await expect(locators.menuitem(page, 0)).toHaveClass(/highlighted/, { timeout: 1000 });
+ });
- await pressKeyMultipleTimes(page, 'ArrowDown', 4);
- await page.keyboard.press('Tab');
- await expect.poll(async () => {
- return await locators.menuitem(page, 4).getAttribute('class');
- }, { timeout: 1000 }).toMatch(/highlighted/);
- await locators.menuitem(page, 4).scrollIntoViewIfNeeded();
- await expect(page).toHaveScreenshot();
+ await test.step('Verify Tab keeps highlight on the 5th item', async () => {
+ await pressKeyMultipleTimes(page, 'ArrowDown', 4);
+ await page.keyboard.press('Tab');
+ await expect(locators.menuitem(page, 4)).toHaveClass(/highlighted/, { timeout: 1000 });
+ await locators.menuitem(page, 4).scrollIntoViewIfNeeded();
+ await expect(page).toHaveScreenshot();
+ });
- await page.keyboard.press('ArrowDown');
- await expect.poll(async () => {
- return await locators.menuitem(page, 5).getAttribute('class');
- }, { timeout: 1000 }).toMatch(/highlighted/);
- await locators.menuitem(page, 5).scrollIntoViewIfNeeded();
- await expect(page).toHaveScreenshot();
+ await test.step('Verify ArrowDown highlights the 6th item', async () => {
+ await page.keyboard.press('ArrowDown');
+ await expect(locators.menuitem(page, 5)).toHaveClass(/highlighted/, { timeout: 1000 });
+ await locators.menuitem(page, 5).scrollIntoViewIfNeeded();
+ await expect(page).toHaveScreenshot();
+ });
});
test('Verify focus when notice and interactive item in menu', {
@@ -187,9 +203,11 @@ test.describe(`${TAG.VISUAL} `, () => {
{ size: 'l', disabledAll: false, visible: true, stretch: 'fixed' },
{ size: 'l', disabledAll: false, visible: true, stretch: false },
{ size: 'l', disabledAll: true, visible: true, stretch: undefined },
-
];
variables.forEach((item) => {
+ const size = item.size as keyof typeof sizeStyles;
+ const itemKindVariant = item.disabledAll || item.stretch === 'min';
+
test(`Verify base dropdown with size=${item.size} disabledAll=${item.disabledAll} stretch=${item.stretch} visible=${item.visible}`, {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
@@ -203,59 +221,35 @@ test.describe(`${TAG.VISUAL} `, () => {
await loadPage(page, 'stories/components/dropdown-menu/tests/examples/dropdown-base-props.tsx', 'en', item);
const itemHoverBg = await getCssVarColor(page, '--intergalactic-dropdown-menu-item-hover');
- await expect(page).toHaveScreenshot();
- await expect(locators.list(page).first()).toHaveCSS(
- 'max-height',
- item.size === 'l' ? '306px' : '246px',
- );
+ const disabledStep = item.disabledAll ? test.step : test.step.skip;
+ const hoverStep = item.disabledAll || browserName === 'firefox' ? test.step.skip : test.step;
- if (item.size == 'm') {
- await test.step('Verify styles of M size', async () => {
- const count1 = await locators.menuitem(page).count();
+ await test.step('Verify menu styles', async () => {
+ await expect(page).toHaveScreenshot();
+ await expect(locators.list(page).first()).toHaveCSS(
+ 'max-height',
+ item.size === 'l' ? '306px' : '246px',
+ );
+ });
- for (let i = 0; i < count1; i++) {
- await checkStyles(locators.menuitem(page, i), {
- 'font-size': '14px',
- 'min-height': '32px',
- });
- }
- });
- }
- if (item.size == 'l') {
- await test.step('Verify styles of L size', async () => {
- const count1 = await locators.menuitem(page).count();
-
- for (let i = 0; i < count1; i++) {
- await checkStyles(locators.menuitem(page, i), {
- 'font-size': '16px',
- 'min-height': '40px',
- });
- }
- });
- }
- if (item.disabledAll) {
- await test.step('Verify disabled styles', async () => {
- const count1 = await locators.menuitem(page).count();
-
- for (let i = 0; i < count1; i++) {
- await checkStyles(locators.menuitem(page, i), {
- opacity: '0.4',
- });
- }
- });
- }
+ await test.step(`Verify styles of ${item.size.toUpperCase()} size`, async () => {
+ await checkEachStyles(locators.menuitem(page), sizeStyles[size]);
+ });
+
+ await disabledStep('Verify disabled styles', async () => {
+ await checkEachStyles(locators.menuitem(page), { opacity: '0.4' });
+ });
- if (browserName === 'firefox') return;
- if (!item.disabledAll) {
- await test.step('Verify hover styles', async () => {
- await locators.menuitem(page, 1).hover();
- await checkStyles(locators.menuitem(page, 1), {
- 'background-color': itemHoverBg,
- });
+ await hoverStep('Verify hover styles (hover background is not checked in Firefox)', async () => {
+ await locators.menuitem(page, 1).hover();
+ await checkStyles(locators.menuitem(page, 1), {
+ 'background-color': itemHoverBg,
});
- }
+ });
});
+ if (!itemKindVariant) return;
+
test(`Verify multiselect dropdown with size=${item.size} disabledAll=${item.disabledAll} stretch=${item.stretch} visible=${item.visible}`, {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
@@ -267,33 +261,14 @@ test.describe(`${TAG.VISUAL} `, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/components/dropdown-menu/tests/examples/multiselect-props.tsx', 'en', item);
- await locators.menuitemcheckbox(page, 0).waitFor({ state: 'visible' });
- await expect(page).toHaveScreenshot();
-
- if (item.size == 'm') {
- await test.step('Verify styles of M size', async () => {
- const count1 = await locators.menuitemcheckbox(page).count();
+ await test.step('Verify menu styles', async () => {
+ await locators.menuitemcheckbox(page, 0).waitFor({ state: 'visible' });
+ await expect(page).toHaveScreenshot();
+ });
- for (let i = 0; i < count1; i++) {
- await checkStyles(locators.menuitemcheckbox(page, i), {
- 'font-size': '14px',
- 'min-height': '32px',
- });
- }
- });
- }
- if (item.size == 'l') {
- await test.step('Verify styles of L size', async () => {
- const count1 = await locators.menuitemcheckbox(page).count();
-
- for (let i = 0; i < count1; i++) {
- await checkStyles(locators.menuitemcheckbox(page, i), {
- 'font-size': '16px',
- 'min-height': '40px',
- });
- }
- });
- }
+ await test.step(`Verify styles of ${item.size.toUpperCase()} size`, async () => {
+ await checkEachStyles(locators.menuitemcheckbox(page), sizeStyles[size]);
+ });
});
test(`Verify selectable radio dropdown with size=${item.size} disabledAll=${item.disabledAll} stretch=${item.stretch} visible=${item.visible}`, {
@@ -310,86 +285,46 @@ test.describe(`${TAG.VISUAL} `, () => {
const itemSelectedBg = await getCssVarColor(page, '--intergalactic-dropdown-menu-item-selected');
const itemSelectedHoverBg = await getCssVarColor(page, '--intergalactic-dropdown-menu-item-selected-hover');
- await expect(page).toHaveScreenshot();
+ const hoverStep = item.disabledAll || browserName === 'firefox' ? test.step.skip : test.step;
+
+ await test.step('Verify menu styles', async () => {
+ await expect(page).toHaveScreenshot();
+ });
const titleSubtitleGroup = locators.menu(page).locator(
'[data-ui-name="Dropdown.Item"]:not(:has(:scope > [data-ui-name="DropdownMenu.Group"]))',
);
const elements = titleSubtitleGroup.locator('[data-ui-name="Flex"]');
- if (item.size == 'm') {
- await test.step('Verify styles of m group title and subtitle', async () => {
- await checkStyles(elements.first(), {
- 'font-size': '14px',
- 'font-weight': '700',
- });
-
- await checkStyles(elements.nth(1), {
- 'font-size': '14px',
- 'font-weight': '400',
- });
- });
+ const fontSize = sizeStyles[size]['font-size'];
- await test.step('Verify styles of M size', async () => {
- await checkStyles(locators.itemInGroup(page).first(), {
- 'font-size': '14px',
- 'min-height': '32px',
- 'background-color': itemSelectedBg,
- });
-
- const count1 = await locators.menuitemradio(page).count();
-
- for (let i = 1; i < count1; i++) {
- await checkStyles(locators.itemInGroup(page).nth(i), {
- 'font-size': '14px',
- 'min-height': '32px',
- });
- }
- });
- }
+ await test.step(`Verify styles of ${item.size.toUpperCase()} group title and subtitle`, async () => {
+ await checkStyles(elements.first(), { 'font-size': fontSize, 'font-weight': '700' });
+ await checkStyles(elements.nth(1), { 'font-size': fontSize, 'font-weight': '400' });
+ });
- if (item.size == 'l') {
- await test.step('Verify styles of L group title and subtitle', async () => {
- await checkStyles(elements.first(), {
- 'font-size': '16px',
- 'font-weight': '700',
- });
-
- await checkStyles(elements.nth(1), {
- 'font-size': '16px',
- 'font-weight': '400',
- });
- });
- await test.step('Verify styles of L size', async () => {
- await checkStyles(locators.itemInGroup(page).first(), {
- 'font-size': '16px',
- 'min-height': '40px',
- 'background-color': itemSelectedBg,
- });
-
- const count1 = await locators.menuitemradio(page).count();
-
- for (let i = 1; i < count1; i++) {
- await checkStyles(locators.itemInGroup(page).nth(i), {
- 'font-size': '16px',
- 'min-height': '40px',
- });
- }
+ await test.step(`Verify styles of ${item.size.toUpperCase()} size`, async () => {
+ await checkStyles(locators.itemInGroup(page).first(), {
+ ...sizeStyles[size],
+ 'background-color': itemSelectedBg,
});
- }
- if (browserName === 'firefox') return;
- if (!item.disabledAll) {
- await test.step('Verify hover styles', async () => {
- await locators.menuitemradio(page, 0).hover();
- await checkStyles(locators.itemInGroup(page).first(), {
- 'background-color': itemSelectedHoverBg,
- });
- await locators.menuitemradio(page, 1).hover();
- await checkStyles(locators.itemInGroup(page).nth(1), {
- 'background-color': itemHoverBg,
- });
+ const count = await locators.menuitemradio(page).count();
+ expect(count).toBeGreaterThan(1);
+ for (let i = 1; i < count; i++) {
+ await checkStyles(locators.itemInGroup(page).nth(i), sizeStyles[size]);
+ }
+ });
+
+ await hoverStep('Verify hover styles (hover background is not checked in Firefox)', async () => {
+ await locators.menuitemradio(page, 0).hover();
+ await checkStyles(locators.itemInGroup(page).first(), {
+ 'background-color': itemSelectedHoverBg,
});
- }
+ await locators.menuitemradio(page, 1).hover();
+ await checkStyles(locators.itemInGroup(page).nth(1), {
+ 'background-color': itemHoverBg,
+ });
+ });
});
});
@@ -586,11 +521,7 @@ test.describe(`${TAG.VISUAL} `, () => {
await expect(locators.button(page)).toBeFocused();
await page.keyboard.press('Enter');
await locators.menuitemcheckbox(page, 0).waitFor({ state: 'visible' });
- await expect.poll(async () => {
- return await locators.menuitemcheckbox(page, 0).getAttribute('class');
- }, {
- timeout: 1000,
- }).toMatch(/highlighted/);
+ await expect(locators.menuitemcheckbox(page, 0)).toHaveClass(/highlighted/, { timeout: 1000 });
});
await test.step('Verify enter checks item and menu is not closed', async () => {
@@ -658,7 +589,7 @@ test.describe(`${TAG.VISUAL} `, () => {
'@select',
'@typography'],
}, async ({ page, browserName }) => {
- if (browserName != 'chromium') test.skip();
+ test.skip(browserName !== 'chromium', 'Keyboard focus in virtualized list is verified in Chromium only (UIK-2417)');
await loadPage(page, 'stories/components/dropdown-menu/advanced/examples/project-selector.tsx', 'en');
await page.keyboard.press('Tab');
@@ -729,8 +660,11 @@ test.describe(`${TAG.VISUAL} `, () => {
await locators.menuitemradio(page, 'project 42').scrollIntoViewIfNeeded();
await expect(locators.menuitemradio(page, 'project 42')).toBeInViewport();
await expect(locators.menuitemradio(page, 'project 44')).toBeVisible();
- if (browserName === 'firefox') return; // every scroll on ff differs on some pixels(not stable) so visual regression skipped for it
- await expect(page).toHaveScreenshot();
+
+ const visualStep = browserName === 'firefox' ? test.step.skip : test.step;
+ await visualStep('Verify scrolled list (Firefox scroll differs by a few pixels)', async () => {
+ await expect(page).toHaveScreenshot();
+ });
});
test.describe('Sticky groups', () => {
@@ -767,11 +701,7 @@ test.describe(`${TAG.VISUAL} `, () => {
await page.keyboard.press('Enter');
await locators.item(page).nth(10).waitFor({ state: 'visible' });
- await expect.poll(async () => {
- return await locators.item(page).nth(30).getAttribute('class');
- }, {
- timeout: 1000,
- }).toMatch(/highlighted/);
+ await expect(locators.item(page).nth(30)).toHaveClass(/highlighted/, { timeout: 1000 });
await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.01 });
await page.keyboard.press('Tab');
@@ -787,6 +717,7 @@ test.describe(`${TAG.VISUAL} `, () => {
test('Verify mouse interactions with menu with sticky groups', {
tag: [TAG.PRIORITY_HIGH,
+ TAG.MOUSE,
TAG.KEYBOARD,
'@dropdown-menu',
'@base-components',
@@ -828,7 +759,7 @@ test.describe(`${TAG.VISUAL} `, () => {
await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.01 });
await locators.button(page).first().click();
- await expect(locators.item(page).nth(0)).not.toBeVisible();
+ await expect(locators.item(page).nth(0)).toBeHidden();
});
});
@@ -887,7 +818,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(locators.menu(page)).toBeVisible();
});
- await test.step('Verify non closed by click on the menu item', async () => {
+ await test.step('Verify not closed by click on the menu item', async () => {
await locators.menuitem(page, 0).click();
await expect(locators.menu(page)).toBeVisible();
});
@@ -895,31 +826,31 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await test.step('Verify closes by trigger click', async () => {
await locators.button(page, 'Actions').click();
await locators.menuitem(page, 0).waitFor({ state: 'hidden' });
- await expect(locators.menu(page)).not.toBeVisible();
+ await expect(locators.menu(page)).toBeHidden();
});
- await test.step('Verify closes by esc when opened by mouse ', async () => {
+ await test.step('Verify closes by Escape when opened by mouse', async () => {
await locators.button(page, 'Actions').click();
await locators.menuitem(page, 0).waitFor({ state: 'visible' });
await page.keyboard.press('Escape');
await locators.menuitem(page, 0).waitFor({ state: 'hidden' });
- await expect(locators.menu(page)).not.toBeVisible();
+ await expect(locators.menu(page)).toBeHidden();
await expect(locators.button(page, 'Actions')).toBeFocused();
});
- await test.step('Verify closes by click outside ', async () => {
+ await test.step('Verify closes by click outside', async () => {
await locators.button(page, 'Actions').click();
await locators.menuitem(page, 0).waitFor({ state: 'visible' });
await page.mouse.click(0, 0);
await locators.menuitem(page, 0).waitFor({ state: 'hidden' });
- await expect(locators.menu(page)).not.toBeVisible();
+ await expect(locators.menu(page)).toBeHidden();
});
});
test('Verify keyboard interactions with Base dropdown menu', {
tag: [TAG.PRIORITY_HIGH,
- TAG.MOUSE,
+ TAG.KEYBOARD,
'@dropdown-menu',
'@button'],
}, async ({ page }) => {
@@ -935,7 +866,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await test.step('Verify closed by Escape', async () => {
await page.keyboard.press('Escape');
await locators.menuitem(page, 0).waitFor({ state: 'hidden' });
- await expect(locators.menu(page)).not.toBeVisible();
+ await expect(locators.menu(page)).toBeHidden();
});
await test.step('Verify opens by Space', async () => {
@@ -994,7 +925,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(locators.menuitem(page, 0)).toBeFocused();
});
- await test.step('Verify cant switch to interactive element by arrows', async () => {
+ await test.step('Verify arrows do not move focus to interactive element', async () => {
await page.keyboard.press('ArrowUp');
await expect(locators.menuitem(page, 2)).toBeFocused();
});
@@ -1014,7 +945,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(locators.button(page)).toBeFocused();
});
- await test.step('Verify closed by entered on the item and trigger is focused', async () => {
+ await test.step('Verify closed by Enter on the item and trigger is focused', async () => {
await page.keyboard.press('Space');
await locators.menuitem(page, 0).waitFor({ state: 'visible' });
await page.keyboard.press('ArrowDown');
@@ -1024,7 +955,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
});
});
- test('Verify Keyboard interaction when items with action buttons', {
+ test('Verify keyboard interaction when items with action buttons', {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
'@dropdown-menu',
@@ -1047,12 +978,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(locators.button(page)).toBeFocused();
await page.keyboard.press('Enter');
await locators.menuitem(page, 0).waitFor({ state: 'visible' });
- await expect.poll(async () => {
- return await locators.menuitem(page, 0).getAttribute('class');
- }, {
- timeout: 1000,
- }).toMatch(/highlighted/);
-
+ await expect(locators.menuitem(page, 0)).toHaveClass(/highlighted/, { timeout: 1000 });
await expect(locators.menuitem(page, 0)).toBeFocused();
});
@@ -1063,11 +989,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await page.keyboard.press('ArrowDown');
await locators.menuitem(page, 0).waitFor({ state: 'visible' });
- await expect.poll(async () => {
- return await locators.menuitem(page, 0).getAttribute('class');
- }, {
- timeout: 1000,
- }).toMatch(/highlighted/);
+ await expect(locators.menuitem(page, 0)).toHaveClass(/highlighted/, { timeout: 1000 });
await expect(locators.menuitem(page, 0)).toBeFocused();
});
@@ -1085,19 +1007,6 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(Trash).not.toBeFocused();
});
- // this shouldn't work (and don't work in real browsers
- // await test.step('Verify focus switches by tab', async () => {
- // await page.keyboard.press('Tab');
- // await expect(MathPlus).toBeFocused();
- // await page.getByText('Add new').waitFor({ state: 'visible' });
- // await page.keyboard.press('Escape');
- // await page.getByText('Add new').waitFor({ state: 'hidden' });
- // await page.keyboard.press('Escape');
- // await expect(locators.menuitem(page, 2)).toBeFocused();
- // await expect(MathPlus).not.toBeFocused();
- // await expect(Trash).not.toBeFocused();
- // });
-
await test.step('Verify focus switches by ArrowRight', async () => {
await page.keyboard.press('ArrowRight');
await expect(MathPlus).toBeFocused();
@@ -1120,12 +1029,11 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
});
await test.step('Verify submenu not expands automatically', async () => {
- // Ensure focus is stable before moving to next item
await expect(locators.menuitem(page, 2)).toBeFocused();
await page.keyboard.press('ArrowDown');
await expect(page.getByRole('menuitem', { name: 'Menu item 4' })).toBeFocused();
- await expect(page.getByText('Add')).not.toBeVisible();
+ await expect(page.getByText('Add')).toBeHidden();
});
await test.step('Verify submenu expands by enter', async () => {
@@ -1156,7 +1064,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
});
});
- test('Verify Keyboard interaction in nested menus with focusable elements', {
+ test('Verify keyboard interaction in nested menus with focusable elements', {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
'@dropdown-menu',
@@ -1179,7 +1087,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(locators.button(page)).not.toBeFocused();
await expect(locators.menuitem(page, 0)).toBeFocused();
- await expect(SubItem1).not.toBeVisible();
+ await expect(SubItem1).toBeHidden();
});
await test.step('Verify arrow navigation and submenu not expands by itself', async () => {
@@ -1203,7 +1111,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(SubItem1).toBeFocused();
});
- await test.step('Verify submenu expanded by ArrowRight', async () => {
+ await test.step('Verify submenu expanded by ArrowRight', async () => {
await page.keyboard.press('Escape');
await page.keyboard.press('ArrowRight');
await SubItem1.waitFor({ state: 'visible' });
@@ -1221,12 +1129,12 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(SubItem1).not.toBeFocused();
});
- await test.step('Verify closed by ESC', async () => {
+ await test.step('Verify closed by Escape', async () => {
await page.keyboard.press('Escape');
await SubItem1.waitFor({ state: 'hidden' });
await expect(locators.menuitem(page, 2)).toBeFocused();
await page.keyboard.press('Escape');
- await locators.menuitem(page, 0).waitFor({ state: 'visible' });
+ await locators.menuitem(page, 0).waitFor({ state: 'hidden' });
await expect(locators.button(page)).toBeFocused();
});
});
@@ -1274,7 +1182,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
});
});
- test('Verify Keyboard interaction when On Visible controlled', {
+ test('Verify keyboard interaction when onVisibleChange controlled', {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
'@dropdown-menu',
@@ -1282,22 +1190,26 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/components/dropdown-menu/tests/examples/on-visible-2nd.tsx', 'en');
- // 1st item focused when Menu expands
- await page.keyboard.press('Tab');
- await expect(locators.button(page)).toBeFocused();
- await page.keyboard.press('Enter');
- await locators.menuitem(page, 0).waitFor({ state: 'visible' });
- await expect(locators.menuitem(page, 0)).toBeFocused();
+ await test.step('Verify 1st item focused when menu expands', async () => {
+ await page.keyboard.press('Tab');
+ await expect(locators.button(page)).toBeFocused();
+ await page.keyboard.press('Enter');
+ await locators.menuitem(page, 0).waitFor({ state: 'visible' });
+ await expect(locators.menuitem(page, 0)).toBeFocused();
+ });
- // 2nd item focused by 1st click on down
- await page.keyboard.press('ArrowDown');
- await expect(locators.menuitem(page, 1)).toBeFocused();
+ await test.step('Verify 2nd item focused by first ArrowDown', async () => {
+ await page.keyboard.press('ArrowDown');
+ await expect(locators.menuitem(page, 1)).toBeFocused();
+ });
- await page.keyboard.press('Escape');
- await locators.menuitem(page, 0).waitFor({ state: 'hidden' });
+ await test.step('Verify closed by Escape', async () => {
+ await page.keyboard.press('Escape');
+ await locators.menuitem(page, 0).waitFor({ state: 'hidden' });
+ });
});
- test('Verify mouse interaction when On Visible controlled', {
+ test('Verify mouse interaction when onVisibleChange controlled', {
tag: [TAG.PRIORITY_HIGH,
TAG.MOUSE,
'@dropdown-menu',
@@ -1313,7 +1225,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(locators.menu(page)).toHaveCount(0);
});
- test('Verify Selectable radio keyboard interaction', {
+ test('Verify selectable radio keyboard interaction', {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
'@dropdown-menu',
@@ -1330,13 +1242,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(locators.button(page)).toBeFocused();
await page.keyboard.press('Enter');
await locators.menuitemradio(page, 0).waitFor({ state: 'visible' });
-
- await expect.poll(async () => {
- return await page.locator('[data-ui-name="DropdownMenu.Item"]').first().getAttribute('class');
- }, {
- timeout: 1000,
- }).toMatch(/highlighted/);
-
+ await expect(locators.item(page).first()).toHaveClass(/highlighted/, { timeout: 1000 });
await expect(locators.menuitemradio(page, 0)).toBeFocused();
});
@@ -1346,9 +1252,9 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(locators.menuitemradio(page, 0)).toHaveAttribute('tabindex', '0');
await expect(locators.menuitemradio(page, 0)).toHaveAttribute('aria-describedby');
- const count1 = await locators.menuitemradio(page).count();
-
- for (let i = 1; i < count1; i++) {
+ const count = await locators.menuitemradio(page).count();
+ expect(count).toBeGreaterThan(1);
+ for (let i = 1; i < count; i++) {
await expect(locators.menuitemradio(page, i)).toHaveAttribute('aria-haspopup', 'true');
await expect(locators.menuitemradio(page, i)).toHaveAttribute('tabindex', '-1');
await expect(locators.menuitemradio(page, i)).toHaveAttribute('aria-describedby');
@@ -1361,11 +1267,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(locators.button(page)).toBeFocused();
await page.keyboard.press('Enter');
await locators.menuitemradio(page, 0).waitFor({ state: 'visible' });
- await expect.poll(async () => {
- return await page.locator('[data-ui-name="DropdownMenu.Item"]').first().getAttribute('class');
- }, {
- timeout: 1000,
- }).toMatch(/highlighted/);
+ await expect(locators.item(page).first()).toHaveClass(/highlighted/, { timeout: 1000 });
});
await test.step('Verify interactive item focused by right arrow', async () => {
@@ -1376,7 +1278,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(deleteButton1).toHaveAttribute('role', 'menuitem');
});
- await test.step('Verify Left Arrow switches focus from interactive item to menu item', async () => {
+ await test.step('Verify ArrowLeft switches focus from interactive item to menu item', async () => {
await page.keyboard.press('ArrowLeft');
await page.getByText('Delete item').waitFor({ state: 'hidden' });
await expect(deleteButton1).not.toBeFocused();
@@ -1398,7 +1300,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
});
});
- test('Verify Multiselect items keyboard interaction', {
+ test('Verify multiselect items keyboard interaction', {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
'@dropdown-menu',
@@ -1431,7 +1333,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await page.keyboard.press('Space');
await expect(locators.menuitemcheckbox(page, 9)).toBeChecked();
await page.keyboard.press('Escape');
- await expect(locators.menuitemcheckbox(page, 9)).not.toBeVisible();
+ await expect(locators.menuitemcheckbox(page, 9)).toBeHidden();
await expect(locators.button(page)).toBeFocused();
});
@@ -1444,7 +1346,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
});
});
- test('Verify Multiselect items mouse interaction', {
+ test('Verify multiselect items mouse interaction', {
tag: [TAG.PRIORITY_HIGH,
TAG.MOUSE,
'@dropdown-menu',
@@ -1484,7 +1386,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
});
});
- test('Verify Items render in DD with Virtual scroll ', {
+ test('Verify items render in dropdown menu with virtual scroll', {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
'@dropdown-menu',
@@ -1513,7 +1415,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(page.getByText('project 9').first()).toBeVisible();
});
- test('Verify Focus on input search when menu opened by keyboard ', {
+ test('Verify focus on input search when menu opened by keyboard', {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
'@dropdown-menu',
@@ -1531,7 +1433,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(page.getByRole('textbox')).toBeFocused();
});
- test('Verify Focus on input search when menu opened by mouse ', {
+ test('Verify focus on input search when menu opened by mouse', {
tag: [TAG.PRIORITY_HIGH,
TAG.MOUSE,
'@dropdown-menu',
@@ -1611,10 +1513,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await page.keyboard.press('Tab');
await page.keyboard.press('Enter');
await locators.menuitem(page, 0).waitFor({ state: 'visible' });
- const count = await locators.menuitem(page).count();
- for (let i = 0; i < count; i++) {
- await expect(locators.menuitem(page, i)).not.toBeFocused();
- }
+ await expectNoneFocused(locators.menuitem(page));
});
await test.step('Verify trigger is still focused', async () => {
@@ -1697,10 +1596,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
});
await test.step('Verify no item is focused when all disabled', async () => {
- const count = await locators.menuitemcheckbox(page).count();
- for (let i = 0; i < count; i++) {
- await expect(locators.menuitemcheckbox(page, i)).not.toBeFocused();
- }
+ await expectNoneFocused(locators.menuitemcheckbox(page));
});
await test.step('Verify trigger is still focused', async () => {
@@ -1730,10 +1626,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
});
await test.step('Verify no item is focused when all disabled', async () => {
- const count = await locators.menuitemradio(page).count();
- for (let i = 0; i < count; i++) {
- await expect(locators.menuitemradio(page, i)).not.toBeFocused();
- }
+ await expectNoneFocused(locators.menuitemradio(page));
});
await test.step('Verify trigger is still focused', async () => {
@@ -1743,10 +1636,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await test.step('Verify arrows do not focus disabled items', async () => {
await page.keyboard.press('ArrowUp');
await page.keyboard.press('ArrowDown');
- const count = await locators.menuitemradio(page).count();
- for (let i = 0; i < count; i++) {
- await expect(locators.menuitemradio(page, i)).not.toBeFocused();
- }
+ await expectNoneFocused(locators.menuitemradio(page));
await expect(locators.button(page)).toBeFocused();
});
});
@@ -1872,11 +1762,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(locators.button(page)).toBeFocused();
await page.keyboard.press('Enter');
await locators.menuitem(page, 0).waitFor({ state: 'visible' });
- await expect.poll(async () => {
- return await locators.menuitem(page, 0).getAttribute('class');
- }, {
- timeout: 1000,
- }).toMatch(/highlighted/);
+ await expect(locators.menuitem(page, 0)).toHaveClass(/highlighted/, { timeout: 1000 });
});
await test.step('Verify navigate to nested menu item', async () => {
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-l-disabledAll-false-stretch-false-visible-true-1-chromium-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-l-disabledAll-false-stretch-false-visible-true-1-chromium-linux.png
deleted file mode 100644
index e0cbaa9b74..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-l-disabledAll-false-stretch-false-visible-true-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-l-disabledAll-false-stretch-false-visible-true-1-firefox-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-l-disabledAll-false-stretch-false-visible-true-1-firefox-linux.png
deleted file mode 100644
index f127890686..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-l-disabledAll-false-stretch-false-visible-true-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-l-disabledAll-false-stretch-false-visible-true-1-webkit-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-l-disabledAll-false-stretch-false-visible-true-1-webkit-linux.png
deleted file mode 100644
index c6d6ac7aad..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-l-disabledAll-false-stretch-false-visible-true-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-l-disabledAll-false-stretch-fixed-visible-true-1-chromium-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-l-disabledAll-false-stretch-fixed-visible-true-1-chromium-linux.png
deleted file mode 100644
index 9d1edcb7e2..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-l-disabledAll-false-stretch-fixed-visible-true-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-l-disabledAll-false-stretch-fixed-visible-true-1-firefox-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-l-disabledAll-false-stretch-fixed-visible-true-1-firefox-linux.png
deleted file mode 100644
index 21eff0efae..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-l-disabledAll-false-stretch-fixed-visible-true-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-l-disabledAll-false-stretch-fixed-visible-true-1-webkit-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-l-disabledAll-false-stretch-fixed-visible-true-1-webkit-linux.png
deleted file mode 100644
index 7fee92e57f..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-l-disabledAll-false-stretch-fixed-visible-true-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-m-disabledAll-false-stretch-false-visible-true-1-chromium-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-m-disabledAll-false-stretch-false-visible-true-1-chromium-linux.png
deleted file mode 100644
index 855b320a5e..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-m-disabledAll-false-stretch-false-visible-true-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-m-disabledAll-false-stretch-false-visible-true-1-firefox-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-m-disabledAll-false-stretch-false-visible-true-1-firefox-linux.png
deleted file mode 100644
index 4409e69bf7..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-m-disabledAll-false-stretch-false-visible-true-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-m-disabledAll-false-stretch-false-visible-true-1-webkit-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-m-disabledAll-false-stretch-false-visible-true-1-webkit-linux.png
deleted file mode 100644
index bf05fbdc6e..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-m-disabledAll-false-stretch-false-visible-true-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-m-disabledAll-false-stretch-fixed-visible-true-1-chromium-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-m-disabledAll-false-stretch-fixed-visible-true-1-chromium-linux.png
deleted file mode 100644
index 999f61e95b..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-m-disabledAll-false-stretch-fixed-visible-true-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-m-disabledAll-false-stretch-fixed-visible-true-1-firefox-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-m-disabledAll-false-stretch-fixed-visible-true-1-firefox-linux.png
deleted file mode 100644
index d7491e9673..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-m-disabledAll-false-stretch-fixed-visible-true-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-m-disabledAll-false-stretch-fixed-visible-true-1-webkit-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-m-disabledAll-false-stretch-fixed-visible-true-1-webkit-linux.png
deleted file mode 100644
index 78677205b2..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-multiselect-dropdown-with-size-m-disabledAll-false-stretch-fixed-visible-true-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-l-disabledAll-false-stretch-false-visible-true-1-chromium-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-l-disabledAll-false-stretch-false-visible-true-1-chromium-linux.png
deleted file mode 100644
index bf6d44c901..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-l-disabledAll-false-stretch-false-visible-true-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-l-disabledAll-false-stretch-false-visible-true-1-firefox-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-l-disabledAll-false-stretch-false-visible-true-1-firefox-linux.png
deleted file mode 100644
index 6e9b88a066..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-l-disabledAll-false-stretch-false-visible-true-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-l-disabledAll-false-stretch-false-visible-true-1-webkit-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-l-disabledAll-false-stretch-false-visible-true-1-webkit-linux.png
deleted file mode 100644
index e7f10a947d..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-l-disabledAll-false-stretch-false-visible-true-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-l-disabledAll-false-stretch-fixed-visible-true-1-chromium-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-l-disabledAll-false-stretch-fixed-visible-true-1-chromium-linux.png
deleted file mode 100644
index 4a9c357947..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-l-disabledAll-false-stretch-fixed-visible-true-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-l-disabledAll-false-stretch-fixed-visible-true-1-firefox-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-l-disabledAll-false-stretch-fixed-visible-true-1-firefox-linux.png
deleted file mode 100644
index 29517a50eb..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-l-disabledAll-false-stretch-fixed-visible-true-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-l-disabledAll-false-stretch-fixed-visible-true-1-webkit-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-l-disabledAll-false-stretch-fixed-visible-true-1-webkit-linux.png
deleted file mode 100644
index aabbd56128..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-l-disabledAll-false-stretch-fixed-visible-true-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-m-disabledAll-false-stretch-false-visible-true-1-chromium-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-m-disabledAll-false-stretch-false-visible-true-1-chromium-linux.png
deleted file mode 100644
index 7f9b304c57..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-m-disabledAll-false-stretch-false-visible-true-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-m-disabledAll-false-stretch-false-visible-true-1-firefox-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-m-disabledAll-false-stretch-false-visible-true-1-firefox-linux.png
deleted file mode 100644
index e292e2a112..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-m-disabledAll-false-stretch-false-visible-true-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-m-disabledAll-false-stretch-false-visible-true-1-webkit-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-m-disabledAll-false-stretch-false-visible-true-1-webkit-linux.png
deleted file mode 100644
index 8a38a8ede8..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-m-disabledAll-false-stretch-false-visible-true-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-m-disabledAll-false-stretch-fixed-visible-true-1-chromium-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-m-disabledAll-false-stretch-fixed-visible-true-1-chromium-linux.png
deleted file mode 100644
index a935bee96e..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-m-disabledAll-false-stretch-fixed-visible-true-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-m-disabledAll-false-stretch-fixed-visible-true-1-firefox-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-m-disabledAll-false-stretch-fixed-visible-true-1-firefox-linux.png
deleted file mode 100644
index 4043709357..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-m-disabledAll-false-stretch-fixed-visible-true-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-m-disabledAll-false-stretch-fixed-visible-true-1-webkit-linux.png b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-m-disabledAll-false-stretch-fixed-visible-true-1-webkit-linux.png
deleted file mode 100644
index aa222a7728..0000000000
Binary files a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx-snapshots/-visual-Verify-selectable-radio-dropdown-with-size-m-disabledAll-false-stretch-fixed-visible-true-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.axe-test.tsx b/semcore/dropdown/__tests__/dropdown.axe-test.tsx
index d0c2e8905d..7ae9025fd0 100644
--- a/semcore/dropdown/__tests__/dropdown.axe-test.tsx
+++ b/semcore/dropdown/__tests__/dropdown.axe-test.tsx
@@ -6,41 +6,33 @@ test.describe(`${TAG.ACCESSIBILITY} @dropdown`, () => {
test('Basic usage', async ({ page }) => {
await loadPage(page, 'stories/components/dropdown/docs/examples/basic_usage.tsx', 'en');
- // base check
- {
+ await test.step('Verify closed dropdown', async () => {
const violations = await getAccessibilityViolations({ page });
-
expect(violations).toEqual([]);
- }
+ });
- // opened dropdown check
- {
+ await test.step('Verify opened dropdown', async () => {
await page.keyboard.press('Tab');
await page.keyboard.press('Enter');
const violations = await getAccessibilityViolations({ page });
-
expect(violations).toEqual([]);
- }
+ });
});
test('Focus interaction', async ({ page }) => {
await loadPage(page, 'stories/components/dropdown/docs/examples/focus_interaction.tsx', 'en');
- // base check
- {
+ await test.step('Verify closed dropdown', async () => {
const violations = await getAccessibilityViolations({ page });
-
expect(violations).toEqual([]);
- }
+ });
- // opened dropdown check
- {
+ await test.step('Verify dropdown opened on focus', async () => {
await page.keyboard.press('Tab');
const violations = await getAccessibilityViolations({ page });
-
expect(violations).toEqual([]);
- }
+ });
});
});
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx b/semcore/dropdown/__tests__/dropdown.browser-test.tsx
index dd55f8b388..30b13dc6d0 100644
--- a/semcore/dropdown/__tests__/dropdown.browser-test.tsx
+++ b/semcore/dropdown/__tests__/dropdown.browser-test.tsx
@@ -4,7 +4,6 @@ import { loadPage } from '@semcore/testing-utils/shared/helpers';
import { TAG } from '@semcore/testing-utils/shared/tags';
export const locators = {
-
button: (page: Page, name?: string, index?: number) => {
const base = page.getByRole('button', { name });
return typeof index === 'number' ? base.nth(index) : base;
@@ -13,32 +12,19 @@ export const locators = {
const base = page.getByRole('dialog');
return typeof index === 'number' ? base.nth(index) : base;
},
-
};
/* =====================================================
@visual
Visual states, hover and focus styles, paddings, margins, and snapshots.
===================================================== */
-test.describe(`${TAG.VISUAL} `, () => {
+test.describe(`${TAG.VISUAL}`, () => {
const variables = [
-
{ placement: 'auto', stretch: 'min' },
- { placement: 'top', stretch: 'min' },
{ placement: 'bottom', stretch: 'min' },
- { placement: 'left', stretch: 'min' },
- { placement: 'right', stretch: 'min' },
-
{ placement: 'auto-start', stretch: 'fixed' },
- { placement: 'top-start', stretch: 'fixed' },
{ placement: 'bottom-start', stretch: 'fixed' },
- { placement: 'left-start', stretch: 'fixed' },
- { placement: 'right-start', stretch: 'fixed' },
-
{ placement: 'auto-end', stretch: false },
- { placement: 'top-end', stretch: false },
{ placement: 'bottom-end', stretch: false },
- { placement: 'left-end', stretch: false },
- { placement: 'right-end', stretch: false },
];
variables.forEach((item) => {
test(`Verify Dropdown when placement=${item.placement} and stretch=${item.stretch}`, {
@@ -82,8 +68,8 @@ test.describe(`${TAG.VISUAL} `, () => {
Keyboard and mouse interactions - no snapshots here.
We verify states, visibility, and attributes.
===================================================== */
-test.describe(`${TAG.FUNCTIONAL} `, () => {
- test('Verify keyboard interactios when interaction undefined', {
+test.describe(`${TAG.FUNCTIONAL}`, () => {
+ test('Verify keyboard interactions when interaction undefined', {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
'@dropdown',
@@ -92,39 +78,48 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/components/dropdown/docs/examples/basic_usage.tsx', 'en');
- await page.keyboard.press('Tab');
- await page.keyboard.press('ArrowUp');
- await page.keyboard.press('ArrowDown');
- await expect(locators.button(page)).toBeFocused();
- await expect(locators.popper(page)).toHaveCount(0);
-
- await page.keyboard.press('Enter');
- await locators.popper(page).waitFor({ state: 'visible' });
+ await test.step('Verify arrows do not open popper', async () => {
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('ArrowUp');
+ await page.keyboard.press('ArrowDown');
+ await expect(locators.button(page)).toBeFocused();
+ await expect(locators.popper(page)).toHaveCount(0);
+ });
- await page.keyboard.press('ArrowUp');
- await page.keyboard.press('ArrowDown');
- await expect(locators.button(page)).not.toBeFocused();
- await expect(locators.popper(page)).toBeFocused();
+ await test.step('Verify Enter opens popper and focus stays in it on arrows', async () => {
+ await page.keyboard.press('Enter');
+ await locators.popper(page).waitFor({ state: 'visible' });
+ await page.keyboard.press('ArrowUp');
+ await page.keyboard.press('ArrowDown');
+ await expect(locators.button(page)).not.toBeFocused();
+ await expect(locators.popper(page)).toBeFocused();
+ });
- await page.keyboard.press('Escape');
- await locators.popper(page).waitFor({ state: 'hidden' });
- await expect(locators.button(page)).toBeFocused();
+ await test.step('Verify Escape closes popper and returns focus to trigger', async () => {
+ await page.keyboard.press('Escape');
+ await locators.popper(page).waitFor({ state: 'hidden' });
+ await expect(locators.button(page)).toBeFocused();
+ });
- await page.keyboard.press('Space');
- await locators.popper(page).waitFor({ state: 'visible' });
- await expect(locators.button(page)).not.toBeFocused();
- await expect(locators.popper(page)).toBeFocused();
+ await test.step('Verify Space opens popper and Tab keeps focus in it', async () => {
+ await page.keyboard.press('Space');
+ await locators.popper(page).waitFor({ state: 'visible' });
+ await expect(locators.button(page)).not.toBeFocused();
+ await expect(locators.popper(page)).toBeFocused();
- await page.keyboard.press('Tab');
- await expect(locators.button(page)).not.toBeFocused();
- await expect(locators.popper(page)).toBeFocused();
+ await page.keyboard.press('Tab');
+ await expect(locators.button(page)).not.toBeFocused();
+ await expect(locators.popper(page)).toBeFocused();
+ });
- await locators.button(page).click();
- await locators.popper(page).waitFor({ state: 'hidden' });
- await expect(locators.popper(page)).toHaveCount(0);
+ await test.step('Verify trigger click closes popper', async () => {
+ await locators.button(page).click();
+ await locators.popper(page).waitFor({ state: 'hidden' });
+ await expect(locators.popper(page)).toHaveCount(0);
+ });
});
- test('Verify mouse interactios when interaction undefined', {
+ test('Verify mouse interactions when interaction undefined', {
tag: [TAG.PRIORITY_HIGH,
TAG.MOUSE,
'@dropdown',
@@ -133,23 +128,28 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/components/dropdown/docs/examples/basic_usage.tsx', 'en');
- await locators.button(page).click();
- await locators.popper(page).waitFor({ state: 'visible' });
- await expect(locators.button(page)).not.toBeFocused();
-
- await locators.button(page).click();
- await locators.popper(page).waitFor({ state: 'hidden' });
+ await test.step('Verify trigger click toggles popper', async () => {
+ await locators.button(page).click();
+ await locators.popper(page).waitFor({ state: 'visible' });
+ await expect(locators.button(page)).not.toBeFocused();
- await locators.button(page).click();
- await locators.popper(page).waitFor({ state: 'visible' });
+ await locators.button(page).click();
+ await locators.popper(page).waitFor({ state: 'hidden' });
+ });
- await locators.popper(page).click();
- await expect(locators.button(page)).not.toBeFocused();
- await expect(locators.popper(page)).toBeVisible();
+ await test.step('Verify click inside popper keeps it open', async () => {
+ await locators.button(page).click();
+ await locators.popper(page).waitFor({ state: 'visible' });
+ await locators.popper(page).click();
+ await expect(locators.button(page)).not.toBeFocused();
+ await expect(locators.popper(page)).toBeVisible();
+ });
- await page.keyboard.press('Escape');
- await locators.popper(page).waitFor({ state: 'hidden' });
- await expect(locators.button(page)).toBeFocused();
+ await test.step('Verify Escape closes popper and returns focus to trigger', async () => {
+ await page.keyboard.press('Escape');
+ await locators.popper(page).waitFor({ state: 'hidden' });
+ await expect(locators.button(page)).toBeFocused();
+ });
});
test('Verify keyboard interaction when interaction = focus', {
@@ -161,31 +161,39 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/components/dropdown/docs/examples/focus_interaction.tsx', 'en');
- await page.keyboard.press('Tab');
- await page.keyboard.press('ArrowUp');
- await page.keyboard.press('ArrowDown');
- await locators.popper(page).waitFor({ state: 'visible' });
- await expect(locators.button(page)).not.toBeFocused();
- await expect(locators.popper(page)).toBeFocused();
+ await test.step('Verify popper opens on trigger focus', async () => {
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('ArrowUp');
+ await page.keyboard.press('ArrowDown');
+ await locators.popper(page).waitFor({ state: 'visible' });
+ await expect(locators.button(page)).not.toBeFocused();
+ await expect(locators.popper(page)).toBeFocused();
+ });
- await page.keyboard.press('Escape');
- await locators.popper(page).waitFor({ state: 'hidden' });
- await expect(locators.button(page)).toBeFocused();
- await expect(locators.popper(page)).toHaveCount(0);
+ await test.step('Verify Escape closes popper and returns focus to trigger', async () => {
+ await page.keyboard.press('Escape');
+ await locators.popper(page).waitFor({ state: 'hidden' });
+ await expect(locators.button(page)).toBeFocused();
+ await expect(locators.popper(page)).toHaveCount(0);
+ });
- await page.keyboard.press('Space');
- await locators.popper(page).waitFor({ state: 'visible' });
- await expect(locators.button(page)).not.toBeFocused();
- await expect(locators.popper(page)).toBeFocused();
+ await test.step('Verify Space reopens popper', async () => {
+ await page.keyboard.press('Space');
+ await locators.popper(page).waitFor({ state: 'visible' });
+ await expect(locators.button(page)).not.toBeFocused();
+ await expect(locators.popper(page)).toBeFocused();
+ });
- await page.keyboard.press('Tab');
- await expect(locators.button(page)).toBeFocused();
- await expect(locators.popper(page)).not.toBeFocused();
- await locators.popper(page).waitFor({ state: 'hidden' });
- await expect(locators.popper(page)).toHaveCount(0);
+ await test.step('Verify Tab returns focus to trigger and closes popper', async () => {
+ await page.keyboard.press('Tab');
+ await expect(locators.button(page)).toBeFocused();
+ await expect(locators.popper(page)).not.toBeFocused();
+ await locators.popper(page).waitFor({ state: 'hidden' });
+ await expect(locators.popper(page)).toHaveCount(0);
+ });
});
- test('Verify mouse interaction when interaction = focus', {
+ test('Verify mouse interaction when interaction = focus', {
tag: [TAG.PRIORITY_HIGH,
TAG.MOUSE,
'@dropdown',
@@ -221,28 +229,35 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/components/dropdown/tests/examples/example-with-props.tsx', 'en', { interaction: 'hover' });
- await page.keyboard.press('Tab');
- await page.keyboard.press('ArrowUp');
- await page.keyboard.press('ArrowDown');
- await locators.button(page, 'Export to PDF').waitFor({ state: 'visible' });
- await expect(locators.button(page).first()).not.toBeFocused();
- await expect(locators.button(page).nth(1)).not.toBeFocused();
-
- await expect(locators.popper(page)).toBeFocused();
+ await test.step('Verify popper opens on trigger focus', async () => {
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('ArrowUp');
+ await page.keyboard.press('ArrowDown');
+ await locators.button(page, 'Export to PDF').waitFor({ state: 'visible' });
+ await expect(locators.button(page).first()).not.toBeFocused();
+ await expect(locators.button(page).nth(1)).not.toBeFocused();
+ await expect(locators.popper(page)).toBeFocused();
+ });
- await page.mouse.click(0, 0);
- await locators.button(page, 'Export to PDF').waitFor({ state: 'hidden' });
- await expect.soft(locators.button(page)).not.toBeFocused();
- await expect(locators.popper(page)).toHaveCount(0);
+ await test.step('Verify click outside closes popper', async () => {
+ await page.mouse.click(0, 0);
+ await locators.button(page, 'Export to PDF').waitFor({ state: 'hidden' });
+ await expect.soft(locators.button(page)).not.toBeFocused();
+ await expect(locators.popper(page)).toHaveCount(0);
+ });
- await locators.button(page).hover();
- await locators.button(page, 'Export to PDF').waitFor({ state: 'visible' });
- await expect(locators.button(page).first()).not.toBeFocused();
- await expect(locators.popper(page)).toHaveCount(1);
+ await test.step('Verify popper opens on trigger hover', async () => {
+ await locators.button(page).hover();
+ await locators.button(page, 'Export to PDF').waitFor({ state: 'visible' });
+ await expect(locators.button(page).first()).not.toBeFocused();
+ await expect(locators.popper(page)).toHaveCount(1);
+ });
- await page.keyboard.press('Escape');
- await locators.button(page, 'Export to PDF').waitFor({ state: 'hidden' });
- await expect(locators.popper(page)).toHaveCount(0);
+ await test.step('Verify Escape closes popper', async () => {
+ await page.keyboard.press('Escape');
+ await locators.button(page, 'Export to PDF').waitFor({ state: 'hidden' });
+ await expect(locators.popper(page)).toHaveCount(0);
+ });
});
test('Verify keyboard and mouse interaction when interaction = click', {
@@ -258,43 +273,53 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/components/dropdown/tests/examples/example-with-props.tsx', 'en', { interaction: 'click' });
- await page.keyboard.press('Tab');
- await page.keyboard.press('ArrowUp');
- await page.keyboard.press('ArrowDown');
- await expect(locators.button(page)).toBeFocused();
- await expect(locators.popper(page)).toHaveCount(0);
+ await test.step('Verify arrows do not open popper', async () => {
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('ArrowUp');
+ await page.keyboard.press('ArrowDown');
+ await expect(locators.button(page)).toBeFocused();
+ await expect(locators.popper(page)).toHaveCount(0);
+ });
- await page.keyboard.press('Space');
- await locators.popper(page).waitFor({ state: 'visible' });
- await expect(locators.button(page).first()).not.toBeFocused();
- await expect(locators.popper(page)).toBeFocused();
- await expect(locators.popper(page)).toHaveCount(1);
+ await test.step('Verify Space opens popper and Escape closes it', async () => {
+ await page.keyboard.press('Space');
+ await locators.popper(page).waitFor({ state: 'visible' });
+ await expect(locators.button(page).first()).not.toBeFocused();
+ await expect(locators.popper(page)).toBeFocused();
+ await expect(locators.popper(page)).toHaveCount(1);
- await page.keyboard.press('Escape');
- await locators.popper(page).waitFor({ state: 'hidden' });
- await expect(locators.button(page)).toBeFocused();
- await expect(locators.popper(page)).toHaveCount(0);
+ await page.keyboard.press('Escape');
+ await locators.popper(page).waitFor({ state: 'hidden' });
+ await expect(locators.button(page)).toBeFocused();
+ await expect(locators.popper(page)).toHaveCount(0);
+ });
- await page.keyboard.press('Enter');
- await locators.popper(page).waitFor({ state: 'visible' });
- await page.waitForTimeout(100);
+ await test.step('Verify Enter opens popper and click outside closes it', async () => {
+ await page.keyboard.press('Enter');
+ await locators.popper(page).waitFor({ state: 'visible' });
+ await page.waitForTimeout(100);
- await page.mouse.click(0, 0);
- await locators.popper(page).waitFor({ state: 'hidden' });
- await expect.soft(locators.button(page)).not.toBeFocused();
- await expect(locators.popper(page)).toHaveCount(0);
+ await page.mouse.click(0, 0);
+ await locators.popper(page).waitFor({ state: 'hidden' });
+ await expect.soft(locators.button(page)).not.toBeFocused();
+ await expect(locators.popper(page)).toHaveCount(0);
+ });
- await locators.button(page).hover();
- await expect(locators.popper(page)).toHaveCount(0);
+ await test.step('Verify hover does not open popper', async () => {
+ await locators.button(page).hover();
+ await expect(locators.popper(page)).toHaveCount(0);
+ });
- await locators.button(page).click();
- await locators.popper(page).waitFor({ state: 'visible' });
- await expect(locators.popper(page)).toHaveCount(1);
+ await test.step('Verify click opens popper and Escape closes it', async () => {
+ await locators.button(page).click();
+ await locators.popper(page).waitFor({ state: 'visible' });
+ await expect(locators.popper(page)).toHaveCount(1);
- await page.keyboard.press('Escape');
- await locators.popper(page).waitFor({ state: 'hidden' });
- await expect(locators.button(page)).toBeFocused();
- await expect(locators.popper(page)).toHaveCount(0);
+ await page.keyboard.press('Escape');
+ await locators.popper(page).waitFor({ state: 'hidden' });
+ await expect(locators.button(page)).toBeFocused();
+ await expect(locators.popper(page)).toHaveCount(0);
+ });
});
test('Verify keyboard and mouse interaction when interaction = none', {
@@ -422,37 +447,45 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/components/dropdown/tests/examples/example-with-props.tsx', 'en', { disableEnforceFocus: true });
- await page.keyboard.press('Tab');
- await page.keyboard.press('ArrowDown');
- await expect(locators.button(page)).toBeFocused();
- await expect(locators.popper(page)).toHaveCount(0);
+ await test.step('Verify Enter opens popper without moving focus into it', async () => {
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('ArrowDown');
+ await expect(locators.button(page)).toBeFocused();
+ await expect(locators.popper(page)).toHaveCount(0);
- await page.keyboard.press('Enter');
- await locators.popper(page).waitFor({ state: 'visible' });
- await expect(locators.popper(page)).toHaveCount(1);
- await expect(locators.popper(page)).not.toBeFocused();
+ await page.keyboard.press('Enter');
+ await locators.popper(page).waitFor({ state: 'visible' });
+ await expect(locators.popper(page)).toHaveCount(1);
+ await expect(locators.popper(page)).not.toBeFocused();
+ });
- await page.keyboard.press('Escape');
- await locators.popper(page).waitFor({ state: 'hidden' });
- await expect(locators.popper(page)).toHaveCount(0);
- await expect(locators.button(page)).toBeFocused();
+ await test.step('Verify Escape closes popper and returns focus to trigger', async () => {
+ await page.keyboard.press('Escape');
+ await locators.popper(page).waitFor({ state: 'hidden' });
+ await expect(locators.popper(page)).toHaveCount(0);
+ await expect(locators.button(page)).toBeFocused();
+ });
- await page.keyboard.press('Enter');
- await locators.popper(page).waitFor({ state: 'visible' });
- await page.keyboard.press('Tab');
- await page.keyboard.press('Tab');
- await page.keyboard.press('Tab');
- await expect(locators.popper(page)).toHaveCount(1);
- await expect(locators.popper(page)).not.toBeFocused();
- await expect(locators.button(page).first()).not.toBeFocused();
+ await test.step('Verify Tab moves focus out of popper and popper stays open', async () => {
+ await page.keyboard.press('Enter');
+ await locators.popper(page).waitFor({ state: 'visible' });
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('Tab');
+ await expect(locators.popper(page)).toHaveCount(1);
+ await expect(locators.popper(page)).not.toBeFocused();
+ await expect(locators.button(page).first()).not.toBeFocused();
+ });
- await locators.button(page).first().click();
- await locators.popper(page).waitFor({ state: 'hidden' });
- await expect(locators.popper(page)).toHaveCount(0);
+ await test.step('Verify trigger click toggles popper', async () => {
+ await locators.button(page).first().click();
+ await locators.popper(page).waitFor({ state: 'hidden' });
+ await expect(locators.popper(page)).toHaveCount(0);
- await locators.button(page).first().click();
- await locators.popper(page).waitFor({ state: 'visible' });
- await expect(locators.popper(page)).toHaveCount(1);
+ await locators.button(page).first().click();
+ await locators.popper(page).waitFor({ state: 'visible' });
+ await expect(locators.popper(page)).toHaveCount(1);
+ });
});
test('Verify dropdown when focusLoop = true', {
@@ -483,7 +516,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await expect(locators.popper(page)).toBeFocused();
});
- test('Verify dropdown when disableEnforceFocus=false and autoFocus =true', {
+ test('Verify dropdown when disableEnforceFocus=false and autoFocus=true', {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
'@dropdown',
@@ -510,7 +543,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await expect(locators.popper(page)).toBeFocused();
});
- test('Verify dropdown when disableEnforceFocus=true and autoFocus =true', {
+ test('Verify dropdown when disableEnforceFocus=true and autoFocus=true', {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
'@dropdown',
@@ -537,7 +570,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await expect(locators.popper(page)).not.toBeFocused();
});
- test('Verify dropdown when disableEnforceFocus=false and autoFocus =false', {
+ test('Verify dropdown when disableEnforceFocus=false and autoFocus=false', {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
'@dropdown',
@@ -585,12 +618,12 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await expect(locators.popper(page)).toBeFocused();
});
- await test.step('Verify Navigation bettwenn items', async () => {
+ await test.step('Verify Tab moves focus to the link inside popper', async () => {
await page.keyboard.press('Tab');
await expect(page.getByRole('link', { name: 'set up first' })).toBeFocused();
});
- await test.step('Verify Closes by ESC', async () => {
+ await test.step('Verify closes by Escape', async () => {
await page.keyboard.press('Escape');
await locators.popper(page).waitFor({ state: 'hidden' });
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-and-stretch-min-1-chromium-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-and-stretch-min-1-chromium-linux.png
deleted file mode 100644
index 733426d122..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-and-stretch-min-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-and-stretch-min-1-firefox-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-and-stretch-min-1-firefox-linux.png
deleted file mode 100644
index 3183f3cfa8..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-and-stretch-min-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-and-stretch-min-1-webkit-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-and-stretch-min-1-webkit-linux.png
deleted file mode 100644
index 8aef8e4140..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-and-stretch-min-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-end-and-stretch-false-1-chromium-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-end-and-stretch-false-1-chromium-linux.png
deleted file mode 100644
index cfbe316e09..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-end-and-stretch-false-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-end-and-stretch-false-1-firefox-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-end-and-stretch-false-1-firefox-linux.png
deleted file mode 100644
index aed2dea93e..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-end-and-stretch-false-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-end-and-stretch-false-1-webkit-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-end-and-stretch-false-1-webkit-linux.png
deleted file mode 100644
index 279140d090..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-end-and-stretch-false-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-start-and-stretch-fixed-1-chromium-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-start-and-stretch-fixed-1-chromium-linux.png
deleted file mode 100644
index 651ece75b7..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-start-and-stretch-fixed-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-start-and-stretch-fixed-1-firefox-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-start-and-stretch-fixed-1-firefox-linux.png
deleted file mode 100644
index 51d7e872cf..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-start-and-stretch-fixed-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-start-and-stretch-fixed-1-webkit-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-start-and-stretch-fixed-1-webkit-linux.png
deleted file mode 100644
index 1801500298..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-left-start-and-stretch-fixed-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-and-stretch-min-1-chromium-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-and-stretch-min-1-chromium-linux.png
deleted file mode 100644
index 1da96ed6ed..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-and-stretch-min-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-and-stretch-min-1-firefox-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-and-stretch-min-1-firefox-linux.png
deleted file mode 100644
index 0f3f1331e6..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-and-stretch-min-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-and-stretch-min-1-webkit-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-and-stretch-min-1-webkit-linux.png
deleted file mode 100644
index 808312768e..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-and-stretch-min-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-end-and-stretch-false-1-chromium-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-end-and-stretch-false-1-chromium-linux.png
deleted file mode 100644
index 8c40f31233..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-end-and-stretch-false-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-end-and-stretch-false-1-firefox-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-end-and-stretch-false-1-firefox-linux.png
deleted file mode 100644
index 778b6218e2..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-end-and-stretch-false-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-end-and-stretch-false-1-webkit-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-end-and-stretch-false-1-webkit-linux.png
deleted file mode 100644
index fe437dd708..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-end-and-stretch-false-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-start-and-stretch-fixed-1-chromium-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-start-and-stretch-fixed-1-chromium-linux.png
deleted file mode 100644
index d8d3b8cdc2..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-start-and-stretch-fixed-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-start-and-stretch-fixed-1-firefox-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-start-and-stretch-fixed-1-firefox-linux.png
deleted file mode 100644
index ef4d597255..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-start-and-stretch-fixed-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-start-and-stretch-fixed-1-webkit-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-start-and-stretch-fixed-1-webkit-linux.png
deleted file mode 100644
index aec8af89c0..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-right-start-and-stretch-fixed-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-and-stretch-min-1-chromium-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-and-stretch-min-1-chromium-linux.png
deleted file mode 100644
index 87f7592b60..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-and-stretch-min-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-and-stretch-min-1-firefox-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-and-stretch-min-1-firefox-linux.png
deleted file mode 100644
index d1ad0db6b6..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-and-stretch-min-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-and-stretch-min-1-webkit-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-and-stretch-min-1-webkit-linux.png
deleted file mode 100644
index c656e8a97a..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-and-stretch-min-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-end-and-stretch-false-1-chromium-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-end-and-stretch-false-1-chromium-linux.png
deleted file mode 100644
index 8e4b2427c0..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-end-and-stretch-false-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-end-and-stretch-false-1-firefox-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-end-and-stretch-false-1-firefox-linux.png
deleted file mode 100644
index cb7d993f9f..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-end-and-stretch-false-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-end-and-stretch-false-1-webkit-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-end-and-stretch-false-1-webkit-linux.png
deleted file mode 100644
index c99986aabe..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-end-and-stretch-false-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-start-and-stretch-fixed-1-chromium-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-start-and-stretch-fixed-1-chromium-linux.png
deleted file mode 100644
index 486421ec74..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-start-and-stretch-fixed-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-start-and-stretch-fixed-1-firefox-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-start-and-stretch-fixed-1-firefox-linux.png
deleted file mode 100644
index 19594f25db..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-start-and-stretch-fixed-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-start-and-stretch-fixed-1-webkit-linux.png b/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-start-and-stretch-fixed-1-webkit-linux.png
deleted file mode 100644
index 4bb188c934..0000000000
Binary files a/semcore/dropdown/__tests__/dropdown.browser-test.tsx-snapshots/-visual-Verify-Dropdown-when-placement-top-start-and-stretch-fixed-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/dropdown/__tests__/filters-with-dropdown/advanced-filters.browser-test.tsx b/semcore/dropdown/__tests__/filters-with-dropdown/advanced-filters.browser-test.tsx
index 6050150771..944b92aee5 100644
--- a/semcore/dropdown/__tests__/filters-with-dropdown/advanced-filters.browser-test.tsx
+++ b/semcore/dropdown/__tests__/filters-with-dropdown/advanced-filters.browser-test.tsx
@@ -4,7 +4,6 @@ import { loadPage } from '@semcore/testing-utils/shared/helpers';
import { TAG } from '@semcore/testing-utils/shared/tags';
export const locators = {
-
button: (page: Page, name?: string, index?: number) => {
const base = page.getByRole('button', { name });
return typeof index === 'number' ? base.nth(index) : base;
@@ -13,7 +12,6 @@ export const locators = {
const base = page.getByRole('dialog');
return typeof index === 'number' ? base.nth(index) : base;
},
-
trigger: (page: Page, index?: number) => {
const base = page.getByRole('combobox');
return typeof index === 'number' ? base.nth(index) : base;
@@ -23,13 +21,12 @@ export const locators = {
input: (page: Page) => page.locator('[data-ui-name="Input.Value"]'),
conditionLegend: (page: Page) => page.locator('legend'),
conditionRow: (page: Page, index = 1) => page.getByRole('group', { name: `Condition #${index}` }).locator('..'),
-
};
/* =====================================================
@visual
Visual states, hover and focus styles, paddings, margins, and snapshots.
===================================================== */
-test.describe(`${TAG.VISUAL} `, () => {
+test.describe(`${TAG.VISUAL}`, () => {
test('Verify advanced filters visual', {
tag: [TAG.PRIORITY_HIGH,
'@dropdown',
@@ -45,27 +42,35 @@ test.describe(`${TAG.VISUAL} `, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/patterns/filters/advanced-filters/docs/examples/filters-with-filter-conditions.tsx', 'en');
- await page.keyboard.press('Tab');
- await page.keyboard.press('Enter');
- await locators.popper(page).waitFor({ state: 'visible' });
- await expect(page).toHaveScreenshot();
-
- await page.keyboard.press('Tab');
- await page.keyboard.press('Tab');
- await page.keyboard.press('Tab');
- await page.keyboard.press('a');
- await locators.button(page, 'Remove condition').waitFor({ state: 'visible' });
- await page.keyboard.press('Tab');
- await page.getByText('Remove condition').waitFor({ state: 'visible' });
- await expect(page).toHaveScreenshot();
-
- await locators.button(page, 'Add condition').click();
- await locators.button(page, 'Add condition').click();
- await locators.button(page, 'Add condition').click();
-
- await expect(page).toHaveScreenshot();
- await locators.button(page, 'Apply').click();
- await expect(page).toHaveScreenshot();
+ await test.step('Verify opened dropdown with one condition', async () => {
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('Enter');
+ await locators.popper(page).waitFor({ state: 'visible' });
+ await expect(page).toHaveScreenshot();
+ });
+
+ await test.step('Verify Remove condition button with hint after typing value', async () => {
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('a');
+ await locators.button(page, 'Remove condition').waitFor({ state: 'visible' });
+ await page.keyboard.press('Tab');
+ await page.getByText('Remove condition').waitFor({ state: 'visible' });
+ await expect(page).toHaveScreenshot();
+ });
+
+ await test.step('Verify several conditions', async () => {
+ await locators.button(page, 'Add condition').click();
+ await locators.button(page, 'Add condition').click();
+ await locators.button(page, 'Add condition').click();
+ await expect(page).toHaveScreenshot();
+ });
+
+ await test.step('Verify trigger with counter after Apply', async () => {
+ await locators.button(page, 'Apply').click();
+ await expect(page).toHaveScreenshot();
+ });
});
});
@@ -74,8 +79,8 @@ test.describe(`${TAG.VISUAL} `, () => {
Keyboard and mouse interactions - no snapshots here.
We verify states, visibility, and attributes.
===================================================== */
-test.describe(`${TAG.FUNCTIONAL} `, () => {
- test('Verify keyboard interactios', {
+test.describe(`${TAG.FUNCTIONAL}`, () => {
+ test('Verify keyboard interactions', {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
'@dropdown',
@@ -150,7 +155,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
});
await test.step('Verify hint on close button and trigger keyboard navigation', async () => {
await page.keyboard.press('Tab');
- await expect(locators.button(page, 'Clear advanced filters ')).toBeFocused();
+ await expect(locators.button(page, 'Clear advanced filters')).toBeFocused();
await page.getByText('Clear advanced filters').waitFor({ state: 'visible' });
await page.keyboard.press('Escape');
await page.getByText('Clear advanced filters').waitFor({ state: 'hidden' });
@@ -187,7 +192,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await locators.button(page, 'Apply').waitFor({ state: 'visible' });
await expect(page.getByLabel('Rule')).toBeFocused();
- await expect(locators.button(page, 'Clear all')).not.toBeHidden();
+ await expect(locators.button(page, 'Clear all')).toBeVisible();
await page.keyboard.press('Tab');
await page.keyboard.press('Tab');
@@ -223,7 +228,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await page.keyboard.press('Space');
await locators.popper(page).waitFor({ state: 'hidden' });
- await expect(locators.counter(page)).not.toBeVisible();
+ await expect(locators.counter(page)).toBeHidden();
});
await test.step('Verify counter removed when Clear All pressed', async () => {
await page.keyboard.press('Space');
@@ -270,7 +275,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/patterns/filters/advanced-filters/docs/examples/filters-with-filter-conditions.tsx', 'en');
- await test.step('Verify no remove and clear all bths when dropdown just opened', async () => {
+ await test.step('Verify no Remove condition and Clear all buttons when dropdown just opened', async () => {
await locators.trigger(page, 0).click();
await locators.button(page, 'Apply').waitFor({ state: 'visible' });
await expect(locators.conditionLegend(page)).toHaveCount(1);
@@ -285,7 +290,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await page.getByRole('option').nth(1).waitFor({ state: 'hidden' });
await locators.input(page).fill('a');
await locators.button(page, 'Remove condition').waitFor({ state: 'visible' });
- await locators.button(page, 'Remove condition').hover(); ;
+ await locators.button(page, 'Remove condition').hover();
await page.getByText('Remove condition').waitFor({ state: 'visible' });
await expect(locators.button(page, 'Remove condition')).toHaveCount(1);
});
@@ -296,15 +301,13 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await expect(locators.counter(page)).toHaveText('1 applied');
});
- await test.step('Verify hint on hover close button ', async () => {
+ await test.step('Verify hint on hover close button', async () => {
await page.getByLabel('Clear advanced filters').hover();
await page.getByText('Clear advanced filters').waitFor({ state: 'visible' });
- // await page.keyboard.press('Escape');
- // await expect(page.getByText('Clear')).not.toBeVisible();
await expect(page.getByText('Clear advanced filters')).toHaveCount(1);
});
- await test.step('Verify Adding multiple items', async () => {
+ await test.step('Verify adding multiple items', async () => {
await locators.trigger(page, 0).click();
await locators.popper(page).waitFor({ state: 'visible' });
@@ -319,7 +322,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await expect(locators.counter(page)).toHaveText('4 applied');
});
- await test.step('Verify items doesnt add when add new and click on trigger', async () => {
+ await test.step('Verify new item is not applied when dropdown closed by trigger click', async () => {
await locators.trigger(page, 0).click();
await locators.button(page, 'Apply').waitFor({ state: 'visible' });
await locators.button(page, 'Add condition').click();
@@ -329,7 +332,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await expect(locators.counter(page)).toHaveText('4 applied');
});
- await test.step('Verify Removing one item', async () => {
+ await test.step('Verify removing one item', async () => {
await locators.trigger(page, 0).click();
await locators.button(page, 'Apply').waitFor({ state: 'visible' });
await page.getByLabel('Remove condition').nth(2).click();
@@ -345,7 +348,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await expect(locators.counter(page)).toHaveText('3 applied');
await locators.button(page, 'Apply').click();
await locators.button(page, 'Apply').waitFor({ state: 'hidden' });
- await expect(locators.counter(page)).not.toBeVisible();
+ await expect(locators.counter(page)).toBeHidden();
});
});
});
diff --git a/semcore/dropdown/__tests__/filters-with-dropdown/competitive-density.browser-test.tsx b/semcore/dropdown/__tests__/filters-with-dropdown/competitive-density.browser-test.tsx
index 3028563318..9577a98f20 100644
--- a/semcore/dropdown/__tests__/filters-with-dropdown/competitive-density.browser-test.tsx
+++ b/semcore/dropdown/__tests__/filters-with-dropdown/competitive-density.browser-test.tsx
@@ -1,11 +1,9 @@
-import { e2eStandToHtml } from '@semcore/testing-utils/e2e-stand';
import type { Page } from '@semcore/testing-utils/playwright';
import { expect, test } from '@semcore/testing-utils/playwright';
import { loadPage } from '@semcore/testing-utils/shared/helpers';
import { TAG } from '@semcore/testing-utils/shared/tags';
export const locators = {
-
button: (page: Page, name?: string, index?: number) => {
const base = page.getByRole('button', { name });
return typeof index === 'number' ? base.nth(index) : base;
@@ -14,31 +12,22 @@ export const locators = {
const base = page.getByRole('dialog');
return typeof index === 'number' ? base.nth(index) : base;
},
-
trigger: (page: Page, index?: number) => {
const base = page.getByRole('combobox');
return typeof index === 'number' ? base.nth(index) : base;
},
-
- checkbox: (page: Page, index?: number) => {
- const base = page.getByRole('radio');
- return typeof index === 'number' ? base.nth(index) : base;
- },
textbox: (page: Page, index?: number) => {
const base = page.getByRole('textbox');
return typeof index === 'number' ? base.nth(index) : base;
},
triggerText: (page: Page) => page.locator('[data-ui-name="FilterTrigger.TriggerButton"]'),
- input: (page: Page) => page.locator('[data-ui-name="Input.Value"]'),
- conditionLegend: (page: Page) => page.locator('legend'),
-
};
/* =====================================================
@visual
Visual states, hover and focus styles, paddings, margins, and snapshots.
===================================================== */
-test.describe(`${TAG.VISUAL} `, () => {
+test.describe(`${TAG.VISUAL}`, () => {
test('Verify Competitive density pattern', {
tag: [TAG.PRIORITY_HIGH,
'@dropdown',
@@ -49,25 +38,29 @@ test.describe(`${TAG.VISUAL} `, () => {
'@filter-trigger',
'@flex-box',
'@typography'],
- }, async ({ page, browserName }) => {
+ }, async ({ page }) => {
await loadPage(page, 'stories/patterns/filters/filter-custom-range/docs/examples/basic-example.tsx', 'en');
- await page.keyboard.press('Tab');
- await page.keyboard.press('Enter');
- await locators.popper(page).waitFor({ state: 'visible' });
-
- await expect(page).toHaveScreenshot();
-
- await page.keyboard.press('1');
- await page.keyboard.press('Tab');
- await page.keyboard.press('5');
- await page.keyboard.press('Tab');
- await expect(page).toHaveScreenshot();
+ await test.step('Verify opened dropdown', async () => {
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('Enter');
+ await locators.popper(page).waitFor({ state: 'visible' });
+ await expect(page).toHaveScreenshot();
+ });
- await page.keyboard.press('Enter');
+ await test.step('Verify filled range with focused Apply', async () => {
+ await page.keyboard.press('1');
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('5');
+ await page.keyboard.press('Tab');
+ await expect(page).toHaveScreenshot();
+ });
- await locators.popper(page).waitFor({ state: 'hidden' });
- await expect(page).toHaveScreenshot();
+ await test.step('Verify trigger with applied range', async () => {
+ await page.keyboard.press('Enter');
+ await locators.popper(page).waitFor({ state: 'hidden' });
+ await expect(page).toHaveScreenshot();
+ });
});
});
@@ -76,8 +69,8 @@ test.describe(`${TAG.VISUAL} `, () => {
Keyboard and mouse interactions - no snapshots here.
We verify states, visibility, and attributes.
===================================================== */
-test.describe(`${TAG.FUNCTIONAL} `, () => {
- test('Verify keyboard interactios', {
+test.describe(`${TAG.FUNCTIONAL}`, () => {
+ test('Verify keyboard interactions', {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
'@dropdown',
@@ -88,7 +81,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
'@filter-trigger',
'@flex-box',
'@typography'],
- }, async ({ page, browserName }) => {
+ }, async ({ page }) => {
await loadPage(page, 'stories/patterns/filters/filter-custom-range/docs/examples/basic-example.tsx', 'en');
await test.step('Verify 1st textbox focused when dropdown opened', async () => {
@@ -114,7 +107,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await expect(locators.button(page, 'Apply')).toBeFocused();
});
- await test.step('Verify counter in trigger not added when textbox filled and ESC pressed', async () => {
+ await test.step('Verify trigger text not changed when Escape pressed', async () => {
await page.keyboard.press('Escape');
await locators.popper(page).waitFor({ state: 'hidden' });
@@ -123,7 +116,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await expect(locators.triggerText(page)).toContainText('Competitive Density');
});
- await test.step('Verify counter in trigger added when textbox filled and Apply pressed', async () => {
+ await test.step('Verify trigger text updated when Apply pressed', async () => {
await page.keyboard.press('Enter');
await locators.button(page, 'Apply').waitFor({ state: 'visible' });
await page.keyboard.press('Tab');
@@ -144,7 +137,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await page.getByText('Clear').waitFor({ state: 'hidden' });
});
- await test.step('Verify Clear all clears textbox', async () => {
+ await test.step('Verify Clear button resets trigger text', async () => {
await page.keyboard.press('Space');
await expect(locators.triggerText(page)).toContainText('Competitive Density');
@@ -162,7 +155,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
'@filter-trigger',
'@flex-box',
'@typography'],
- }, async ({ page, browserName }) => {
+ }, async ({ page }) => {
await loadPage(page, 'stories/patterns/filters/filter-custom-range/docs/examples/basic-example.tsx', 'en');
await test.step('Verify 1st textbox focused when dropdown opened', async () => {
@@ -175,7 +168,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await locators.trigger(page).click();
await locators.button(page, 'Apply').waitFor({ state: 'hidden' });
await expect(locators.triggerText(page)).toContainText('Competitive Density');
- await expect(locators.button(page, 'Clear')).not.toBeVisible();
+ await expect(locators.button(page, 'Clear')).toBeHidden();
});
await test.step('Verify trigger text updated when pressing apply', async () => {
@@ -188,7 +181,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await expect(locators.button(page, 'Clear')).toBeVisible();
});
- await test.step('Verify Hint on hover Clear', async () => {
+ await test.step('Verify hint on hover Clear', async () => {
await locators.button(page, 'Clear').hover();
await page.getByText('Clear').waitFor({ state: 'visible' });
await expect(page.getByText('Clear')).toHaveCount(1);
diff --git a/semcore/dropdown/__tests__/filters-with-dropdown/filter-include-exclude.browser-test.tsx b/semcore/dropdown/__tests__/filters-with-dropdown/filter-include-exclude.browser-test.tsx
index 0ff8a05ff6..65aec9a9f1 100644
--- a/semcore/dropdown/__tests__/filters-with-dropdown/filter-include-exclude.browser-test.tsx
+++ b/semcore/dropdown/__tests__/filters-with-dropdown/filter-include-exclude.browser-test.tsx
@@ -1,11 +1,9 @@
-import { e2eStandToHtml } from '@semcore/testing-utils/e2e-stand';
import type { Page } from '@semcore/testing-utils/playwright';
import { expect, test } from '@semcore/testing-utils/playwright';
import { loadPage } from '@semcore/testing-utils/shared/helpers';
import { TAG } from '@semcore/testing-utils/shared/tags';
export const locators = {
-
button: (page: Page, name?: string, index?: number) => {
const base = page.getByRole('button', { name });
return typeof index === 'number' ? base.nth(index) : base;
@@ -14,13 +12,11 @@ export const locators = {
const base = page.getByRole('dialog');
return typeof index === 'number' ? base.nth(index) : base;
},
-
trigger: (page: Page, index?: number) => {
const base = page.getByRole('combobox');
return typeof index === 'number' ? base.nth(index) : base;
},
-
- checkbox: (page: Page, index?: number) => {
+ radio: (page: Page, index?: number) => {
const base = page.getByRole('radio');
return typeof index === 'number' ? base.nth(index) : base;
},
@@ -29,16 +25,13 @@ export const locators = {
return typeof index === 'number' ? base.nth(index) : base;
},
triggerText: (page: Page) => page.locator('[data-ui-name="FilterTrigger.TriggerButton"]'),
- input: (page: Page) => page.locator('[data-ui-name="Input.Value"]'),
- conditionLegend: (page: Page) => page.locator('legend'),
-
};
/* =====================================================
@visual
Visual states, hover and focus styles, paddings, margins, and snapshots.
===================================================== */
-test.describe(`${TAG.VISUAL} `, () => {
+test.describe(`${TAG.VISUAL}`, () => {
test('Verify Filters include exclude', {
tag: [TAG.PRIORITY_HIGH,
'@dropdown',
@@ -51,25 +44,26 @@ test.describe(`${TAG.VISUAL} `, () => {
'@textarea',
'@typography'],
}, async ({ page, browserName }) => {
+ test.skip(browserName !== 'chromium', 'Focus on radio is unstable in Firefox and WebKit');
await loadPage(page, 'stories/patterns/filters/filter-include-exclude/docs/examples/basic-example.tsx', 'en');
- if (browserName !== 'chromium') return; // the focus on radio works unstable so skipped for firefox and webkit
-
- await page.keyboard.press('Tab');
- await page.keyboard.press('Enter');
- await locators.popper(page).waitFor({ state: 'visible' });
-
- await expect(page).toHaveScreenshot();
-
- await locators.textbox(page).fill('test');
- await page.keyboard.press('Tab');
- await page.keyboard.press('Enter');
+ await test.step('Verify opened dropdown', async () => {
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('Enter');
+ await locators.popper(page).waitFor({ state: 'visible' });
+ await expect(page).toHaveScreenshot();
+ });
- await locators.popper(page).waitFor({ state: 'hidden' });
+ await test.step('Verify applied trigger with Clear hint', async () => {
+ await locators.textbox(page).fill('test');
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('Enter');
+ await locators.popper(page).waitFor({ state: 'hidden' });
- await page.keyboard.press('Tab');
- await page.getByText('Clear').waitFor({ state: 'visible' });
- await expect(page).toHaveScreenshot();
+ await page.keyboard.press('Tab');
+ await page.getByText('Clear').waitFor({ state: 'visible' });
+ await expect(page).toHaveScreenshot();
+ });
});
});
@@ -78,8 +72,8 @@ test.describe(`${TAG.VISUAL} `, () => {
Keyboard and mouse interactions - no snapshots here.
We verify states, visibility, and attributes.
===================================================== */
-test.describe(`${TAG.FUNCTIONAL} `, () => {
- test('Verify keyboard interactios', {
+test.describe(`${TAG.FUNCTIONAL}`, () => {
+ test('Verify keyboard interactions', {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
'@dropdown',
@@ -92,10 +86,9 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
'@textarea',
'@typography'],
}, async ({ page, browserName }) => {
+ test.skip(browserName !== 'chromium', 'Incorrect initial focus in Firefox and WebKit (known issue)');
await loadPage(page, 'stories/patterns/filters/filter-include-exclude/docs/examples/basic-example.tsx', 'en');
- if (browserName !== 'chromium') return; // because incorrect initial focus on webkit and ff(known issue)
-
await test.step('Verify textbox focused when dropdown opened', async () => {
await page.keyboard.press('Tab');
await page.keyboard.press('Enter');
@@ -110,20 +103,20 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await expect(locators.button(page, 'Clear all')).toBeFocused();
await page.keyboard.press('Tab');
- await expect(locators.checkbox(page, 0)).toBeFocused();
+ await expect(locators.radio(page, 0)).toBeFocused();
await page.keyboard.press('Tab');
await expect(locators.textbox(page)).toBeFocused();
await page.keyboard.press('Shift+Tab');
- await expect(locators.checkbox(page, 0)).toBeFocused();
+ await expect(locators.radio(page, 0)).toBeFocused();
await page.keyboard.press('ArrowRight');
- await expect(locators.checkbox(page, 1)).toBeFocused();
+ await expect(locators.radio(page, 1)).toBeFocused();
await page.keyboard.press('Shift+Tab');
await expect(locators.button(page, 'Clear all')).toBeFocused();
await page.keyboard.press('Shift+Tab');
await expect(locators.button(page, 'Apply')).toBeFocused();
});
- await test.step('Verify counter in trigger not added when textbox filled and ESC pressed', async () => {
+ await test.step('Verify trigger text not changed when Escape pressed', async () => {
await page.keyboard.press('Shift+Tab');
await expect(locators.textbox(page)).toBeFocused();
await page.keyboard.type('test');
@@ -133,7 +126,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await expect(locators.triggerText(page)).toContainText('Include keywords');
});
- await test.step('Verify counter in trigger added when textbox filled and Apply pressed', async () => {
+ await test.step('Verify trigger text updated when Apply pressed', async () => {
await page.keyboard.press('Enter');
await locators.button(page, 'Apply').waitFor({ state: 'visible' });
await expect(locators.textbox(page)).toBeFocused();
@@ -155,7 +148,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await page.keyboard.press('Shift+Tab');
});
- await test.step('Verify Clear all clears textbox', async () => {
+ await test.step('Verify Clear all does not change trigger before Apply', async () => {
await page.keyboard.press('Space');
await locators.popper(page).waitFor({ state: 'visible' });
await expect(locators.textbox(page)).toBeFocused();
@@ -194,7 +187,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
'@radio',
'@textarea',
'@typography'],
- }, async ({ page, browserName }) => {
+ }, async ({ page }) => {
await loadPage(page, 'stories/patterns/filters/filter-include-exclude/docs/examples/basic-example.tsx', 'en');
await test.step('Verify trigger text not updated when entering text in textbox', async () => {
@@ -208,7 +201,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await locators.trigger(page).click();
await locators.button(page, 'Apply').waitFor({ state: 'hidden' });
await expect(locators.triggerText(page)).toHaveText('Include keywords');
- await expect(locators.button(page, 'Clear')).not.toBeVisible();
+ await expect(locators.button(page, 'Clear')).toBeHidden();
});
await test.step('Verify trigger text updated when pressing apply', async () => {
@@ -221,7 +214,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await expect(locators.button(page, 'Clear')).toBeVisible();
});
- await test.step('Verify Hint on hover Clear', async () => {
+ await test.step('Verify hint on hover Clear', async () => {
await locators.button(page, 'Clear').hover();
await page.getByText('Clear').waitFor({ state: 'visible' });
await expect(page.getByText('Clear')).toHaveCount(1);
@@ -239,7 +232,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await locators.button(page, 'Apply').click();
await locators.button(page, 'Apply').waitFor({ state: 'hidden' });
await expect(locators.triggerText(page)).toHaveText('Include keywords');
- await expect(locators.button(page, 'Clear')).not.toBeVisible();
+ await expect(locators.button(page, 'Clear')).toBeHidden();
});
});
});
diff --git a/semcore/dropdown/__tests__/index.test.tsx b/semcore/dropdown/__tests__/index.test.tsx
index 2d1d41d772..5751bc1682 100644
--- a/semcore/dropdown/__tests__/index.test.tsx
+++ b/semcore/dropdown/__tests__/index.test.tsx
@@ -29,21 +29,21 @@ describe('Dropdown.StatusItem', () => {
expect(status).toHaveAttribute('id', 'search-result');
});
- test('Verify renders screen reader result count', () => {
+ test('Verify renders screen reader result count', async () => {
render();
- waitFor(() => {
- const status = screen.getByRole('status', { name: '2 results found' });
- expect(status).toBeInTheDocument();
- expect(status).toHaveAttribute('aria-live', 'polite');
+ const status = screen.getByRole('status');
+ expect(status).toHaveAttribute('aria-live', 'polite');
+ await waitFor(() => {
+ expect(status.textContent).toContain('2 results found');
});
});
- test('Verify renders singular result count', () => {
+ test('Verify renders singular result count', async () => {
render();
- waitFor(() => {
- expect(screen.getByRole('status', { name: '1 result found' })).toBeInTheDocument();
+ await waitFor(() => {
+ expect(screen.getByRole('status').textContent).toContain('1 result found');
});
});
diff --git a/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx b/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx
index 77b52a036e..25004ae94e 100644
--- a/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx
+++ b/semcore/ellipsis/__tests__/ellipsis.browser-test.tsx
@@ -131,7 +131,8 @@ test.describe(`${TAG.VISUAL} `, () => {
TAG.MOUSE,
'@ellipsis',
'@data-table',
- '@link'],
+ '@link',
+ '@typography'],
}, async ({ page }) => {
await loadPage(page, 'stories/components/ellipsis/test/examples/in_table_with_link.tsx', 'en', item);
diff --git a/semcore/errors/__tests__/errors.axe-test.ts b/semcore/errors/__tests__/errors.axe-test.ts
index d7c21b65ac..15faa98049 100644
--- a/semcore/errors/__tests__/errors.axe-test.ts
+++ b/semcore/errors/__tests__/errors.axe-test.ts
@@ -1,9 +1,8 @@
-import { e2eStandToHtml } from '@semcore/testing-utils/e2e-stand';
import { expect, test, getAccessibilityViolations } from '@semcore/testing-utils/playwright';
import { loadPage } from '@semcore/testing-utils/shared/helpers';
import { TAG } from '@semcore/testing-utils/shared/tags';
-test.describe(`@errors ${TAG.ACCESSIBILITY} `, () => {
+test.describe(`@errors ${TAG.ACCESSIBILITY}`, () => {
test('Custom error', async ({ page }) => {
await loadPage(page, 'stories/components/errors/docs/examples/custom-error.tsx', 'en');
@@ -11,6 +10,7 @@ test.describe(`@errors ${TAG.ACCESSIBILITY} `, () => {
expect(violations).toEqual([]);
});
+
test('Templates', async ({ page }) => {
await loadPage(page, 'stories/components/errors/docs/examples/templates.tsx', 'en');
diff --git a/semcore/errors/__tests__/errors.browser-test.tsx b/semcore/errors/__tests__/errors.browser-test.tsx
index d5125fa0fb..a72638f5b8 100644
--- a/semcore/errors/__tests__/errors.browser-test.tsx
+++ b/semcore/errors/__tests__/errors.browser-test.tsx
@@ -7,13 +7,15 @@ import { TAG } from '@semcore/testing-utils/shared/tags';
Visual states, hover and focus styles, paddings, margins, and snapshots.
===================================================== */
test.describe(`${TAG.VISUAL} `, () => {
- async function expectScreenshotOf(page: Page, locator: Locator, name?: string) {
+ async function expectScreenshotOf(page: Page, locator: Locator, name: string) {
const box = await locator.boundingBox();
if (!box) throw new Error('Element not found or not visible');
await expect(page).toHaveScreenshot(`${name}.png`, { clip: box });
}
- test('Veriry error templates', {
+ const templates = ['AccessDenied', 'Maintenance', 'PageNotFound', 'ProjectNotFound', 'PageError'];
+
+ test('Verify error templates', {
tag: [TAG.PRIORITY_HIGH,
'@errors',
'@button'],
@@ -21,14 +23,14 @@ test.describe(`${TAG.VISUAL} `, () => {
await loadPage(page, 'stories/components/errors/docs/examples/templates.tsx', 'en');
await page.setViewportSize({ width: 1280, height: 2500 });
- await expectScreenshotOf(page, page.locator('[data-ui-name="AccessDenied"]'), 'AccessDenied');
- await expectScreenshotOf(page, page.locator('[data-ui-name="Maintenance"]'), 'Maintenance');
- await expectScreenshotOf(page, page.locator('[data-ui-name="PageNotFound"]'), 'PageNotFound');
- await expectScreenshotOf(page, page.locator('[data-ui-name="ProjectNotFound"]'), 'ProjectNotFound');
- await expectScreenshotOf(page, page.locator('[data-ui-name="PageError"]'), 'PageError');
+ for (const template of templates) {
+ await test.step(`Verify ${template}`, async () => {
+ await expectScreenshotOf(page, page.locator(`[data-ui-name="${template}"]`), template);
+ });
+ }
});
- test('Veriry error templates when screen width is 648px', {
+ test('Verify error templates when screen width is 648px', {
tag: [TAG.PRIORITY_HIGH,
'@errors',
'@button'],
@@ -36,14 +38,14 @@ test.describe(`${TAG.VISUAL} `, () => {
await loadPage(page, 'stories/components/errors/docs/examples/templates.tsx', 'en');
await page.setViewportSize({ width: 648, height: 2700 });
- await expectScreenshotOf(page, page.locator('[data-ui-name="AccessDenied"]'), 'AccessDenied648px');
- await expectScreenshotOf(page, page.locator('[data-ui-name="Maintenance"]'), 'Maintenance648px');
- await expectScreenshotOf(page, page.locator('[data-ui-name="PageNotFound"]'), 'PageNotFound648px');
- await expectScreenshotOf(page, page.locator('[data-ui-name="ProjectNotFound"]'), 'ProjectNotFound648px');
- await expectScreenshotOf(page, page.locator('[data-ui-name="PageError"]'), 'PageError648px');
+ for (const template of templates) {
+ await test.step(`Verify ${template}`, async () => {
+ await expectScreenshotOf(page, page.locator(`[data-ui-name="${template}"]`), `${template}648px`);
+ });
+ }
});
- test('Veriry custom error states', {
+ test('Verify custom error states', {
tag: [TAG.PRIORITY_HIGH,
'@errors',
'@button',
@@ -51,15 +53,21 @@ test.describe(`${TAG.VISUAL} `, () => {
'@flex-box'],
}, async ({ page }) => {
await loadPage(page, 'stories/components/errors/tests/examples/custom-error-cases.tsx', 'en');
-
await page.setViewportSize({ width: 1280, height: 2500 });
- await expectScreenshotOf(page, page.locator('[data-testid="title-description"]'), 'Custom-title-description');
- await expectScreenshotOf(page, page.locator('[data-testid="icon-title-controls"]'), 'Custom-icon-title-controls');
- await expectScreenshotOf(page, page.locator('[data-testid="description-controls"]'), 'Custom-description-controls');
- await expectScreenshotOf(page, page.locator('[data-testid="icon-title-description"]'), 'Custom-icon-title-description');
- await expectScreenshotOf(page, page.locator('[data-testid="title-description-controls"]'), 'Custom-title-description-controls');
- await expectScreenshotOf(page, page.locator('[data-testid="icon-title-description-controls"]'), 'Custom-icon-title-description-controls');
+ const cases = [
+ 'title-description',
+ 'icon-title-controls',
+ 'description-controls',
+ 'icon-title-description',
+ 'title-description-controls',
+ 'icon-title-description-controls',
+ ];
+ for (const testId of cases) {
+ await test.step(`Verify ${testId}`, async () => {
+ await expectScreenshotOf(page, page.getByTestId(testId), `Custom-${testId}`);
+ });
+ }
});
});
@@ -68,7 +76,10 @@ test.describe(`${TAG.VISUAL} `, () => {
Keyboard and mouse interactions - no snapshots here.
We verify states, visibility, and attributes.
===================================================== */
-test.describe(`${TAG.FUNCTIONAL} `, () => {
+test.describe(`${TAG.FUNCTIONAL}`, () => {
+ const templatesWithHomeLink = ['AccessDenied', 'Maintenance', 'PageNotFound'];
+ const templates = [...templatesWithHomeLink, 'ProjectNotFound', 'PageError'];
+
const variables = [
{ titleTag: 'h1', homeLink: 'test1' },
{ titleTag: 'h2', homeLink: 'test1' },
@@ -78,47 +89,33 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
{ titleTag: 'p', homeLink: undefined },
];
variables.forEach((item) => {
- test(`Verify Errors with titleTag=${item.titleTag} homeLink= ${item.homeLink}`, {
+ test(`Verify Errors with titleTag=${item.titleTag} homeLink=${item.homeLink}`, {
tag: [TAG.PRIORITY_HIGH,
'@errors',
'@button'],
}, async ({ page }) => {
await loadPage(page, 'stories/components/errors/docs/examples/templates.tsx', 'en', item);
- const errorBlocks = [
- page.locator('[data-ui-name="AccessDenied"]'),
- page.locator('[data-ui-name="Maintenance"]'),
- page.locator('[data-ui-name="PageNotFound"]'),
- page.locator('[data-ui-name="ProjectNotFound"]'),
- page.locator('[data-ui-name="PageError"]'),
- ];
-
- for (let i = 0; i < errorBlocks.length; i++) {
- const block = errorBlocks[i];
+ for (const template of templates) {
+ const block = page.locator(`[data-ui-name="${template}"]`);
const title = block.locator('[data-ui-name="Error.Title"]');
- await expect(title).toBeVisible();
-
- const tagName = await title.evaluate((el) => el.tagName.toLowerCase());
- expect(tagName).toBe(item.titleTag);
+ await test.step(`Verify ${template} title is <${item.titleTag}>`, async () => {
+ await expect(title).toBeVisible();
+ await expect(title).toHaveJSProperty('tagName', item.titleTag.toUpperCase());
- if (/^h[1-6]$/.test(item.titleTag)) {
- const level = Number(item.titleTag[1]);
- const text = (await title.textContent()) ?? '';
- await expect(block.getByRole('heading', { level })).toHaveText(text);
- } else if (item.titleTag === 'p') {
- expect(tagName).toBe('p');
- const role = await title.getAttribute('role');
- expect(role).not.toBe('heading');
- }
-
- if (i <= 2) {
- const homepageLink = block.getByRole('link', { name: 'Go to homepage' });
- if (item.homeLink) {
- await expect(homepageLink).toHaveAttribute('href', item.homeLink);
+ if (item.titleTag === 'p') {
+ await expect(title).not.toHaveAttribute('role', 'heading');
} else {
- await expect(homepageLink).toHaveAttribute('href', '/');
+ const level = Number(item.titleTag[1]);
+ await expect(block.getByRole('heading', { level })).toHaveText((await title.textContent()) ?? '');
}
+ });
+
+ if (templatesWithHomeLink.includes(template)) {
+ await test.step(`Verify ${template} homepage link`, async () => {
+ await expect(block.getByRole('link', { name: 'Go to homepage' })).toHaveAttribute('href', item.homeLink ?? '/');
+ });
}
}
});
@@ -137,18 +134,8 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/components/errors/docs/examples/templates.tsx', 'en', item);
- const maintenance = page.locator('[data-ui-name="Maintenance"]').nth(0);
- const title = maintenance.locator('[data-ui-name="Error.Title"]');
-
- await expect(title).toBeVisible();
-
- const text = await title.textContent();
-
- if (item.toolName) {
- expect(text).toContain(item.toolName);
- } else {
- expect(text).toContain('Intergalactic');
- }
+ const title = page.locator('[data-ui-name="Maintenance"]').locator('[data-ui-name="Error.Title"]');
+ await expect(title).toContainText(item.toolName ?? 'Intergalactic');
});
});
@@ -157,7 +144,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
{ projectsLink: 'projectsLink', contactsLink: 'contactLink', supportTeamLink: 'supportTeamLink' },
];
projectNotFound.forEach((item) => {
- test(`Verify projectNotFound with projectsLink=${item.projectsLink} contactLink=${item.contactsLink} supportTeamLink=${item.supportTeamLink}`, {
+ test(`Verify projectNotFound with projectsLink=${item.projectsLink} contactLink=${item.contactsLink} supportTeamLink=${item.supportTeamLink}`, {
tag: [TAG.PRIORITY_HIGH,
'@errors',
'@button'],
@@ -168,27 +155,9 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
const controls = projectNotFoundBlock.locator('[data-ui-name="Error.Controls"]');
const description = projectNotFoundBlock.locator('[data-ui-name="Error.Description"]');
- const projects = controls.getByRole('link').nth(0);
- const contact = controls.getByRole('link').nth(1);
- const supportTeam = description.locator('a');
-
- if (item.projectsLink) {
- await expect(projects).toHaveAttribute('href', item.projectsLink);
- } else {
- await expect(projects).toHaveAttribute('href', '/projects');
- }
-
- if (item.contactsLink) {
- await expect(contact).toHaveAttribute('href', item.contactsLink);
- } else {
- await expect(contact).toHaveAttribute('href', '/company/contacts');
- }
-
- if (item.supportTeamLink) {
- await expect(supportTeam).toHaveAttribute('href', item.supportTeamLink);
- } else {
- await expect(supportTeam).toHaveAttribute('href', '/company/contacts');
- }
+ await expect(controls.getByRole('link').nth(0)).toHaveAttribute('href', item.projectsLink ?? '/projects');
+ await expect(controls.getByRole('link').nth(1)).toHaveAttribute('href', item.contactsLink ?? '/company/contacts');
+ await expect(description.locator('a')).toHaveAttribute('href', item.supportTeamLink ?? '/company/contacts');
});
});
});
diff --git a/semcore/feature-highlight/__tests__/feature-highlight.axe-test.ts b/semcore/feature-highlight/__tests__/feature-highlight.axe-test.ts
index b3a635db1e..5450079604 100644
--- a/semcore/feature-highlight/__tests__/feature-highlight.axe-test.ts
+++ b/semcore/feature-highlight/__tests__/feature-highlight.axe-test.ts
@@ -66,7 +66,7 @@ test.describe(`@feature-highlight ${TAG.ACCESSIBILITY}`, () => {
expect(violations).toEqual([]);
});
- test('Verify Select has no Axe issues in closed state', async ({ page }) => {
+ test('Verify Select has no Axe issues', async ({ page }) => {
await loadPage(page, 'stories/components/feature-highlight/docs/examples/select.tsx', 'en');
await test.step('Verify closed state', async () => {
diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx
index f990a3e6b7..8741e99ca2 100644
--- a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx
+++ b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx
@@ -62,21 +62,16 @@ const expectNoFeatureHighlightFocusOutline = async (
export const locators = {
buttons: (page: Page) => page.locator('[data-ui-name="ButtonFH"]'),
pills: (page: Page) => page.getByRole('radio'),
- pillHighlightedItem: (page: Page) => page.locator('[data-ui-name="HighlightedItem.Addon"]'),
select: (page: Page) => page.getByRole('combobox'),
selectOptions: (page: Page) => page.getByRole('option'),
input: (page: Page) => page.getByRole('textbox'),
inputOutline: (page: Page) => page.locator('[class*="SOutline"]'),
- switch: (page: Page) => page.locator('[data-ui-name="SwitchFH"]'),
// The focus outline is painted on the toggle that wraps the switch input.
switchToggle: (page: Page) => page.locator('[class*="SToggle"]').first(),
- radioGroup: (page: Page) => page.locator('[data-ui-name="RadioGroup"]'),
radioMark: (page: Page) => page.locator('[data-ui-name="Value.RadioMark"]'),
- checkbox: (page: Page) => page.locator('[data-ui-name="CheckboxFH"]'),
checkboxMark: (page: Page) => page.locator('[data-ui-name="Value.CheckMark"]'),
notice: (page: Page) => page.locator('[data-ui-name="NoticeFH"]'),
dataTable: (page: Page) => page.locator('[role="grid"]'),
- tablist: (page: Page) => page.getByRole('tablist'),
tabs: (page: Page) => page.getByRole('tab'),
};
@@ -86,8 +81,8 @@ Visual states, hover and focus styles.
===================================================== */
test.describe(`${TAG.VISUAL} `, () => {
test.describe(`BadgeFH`, () => {
- test(`Verify BasgeFH Visual`, {
- tag: [TAG.PRIORITY_HIGH, TAG.KEYBOARD, '@feature-highlight', '@pills'],
+ test(`Verify BadgeFH Visual`, {
+ tag: [TAG.PRIORITY_HIGH, '@feature-highlight', '@badge'],
}, async ({ page }) => {
await loadPage(page, 'stories/components/feature-highlight/docs/examples/badge.tsx', 'en');
await expect(page).toHaveScreenshot();
@@ -119,25 +114,25 @@ test.describe(`${TAG.VISUAL} `, () => {
await loadPage(page, 'stories/components/feature-highlight/tests/examples/button.tsx', 'en', item);
const button = locators.buttons(page);
- await expect(page).toHaveScreenshot();
+ const interactive = !item.disabled && !item.loading;
+ const focusStep = interactive ? test.step : test.step.skip;
+ const hoverStep = interactive && !item.active && browserName !== 'firefox' ? test.step : test.step.skip;
- if (!item.disabled && !item.loading) {
- await test.step('Verify focus style for buttons', async () => {
- await page.keyboard.press('Tab');
+ await test.step('Verify default styles', async () => {
+ await expect(page).toHaveScreenshot();
+ });
- await expect(button).toBeFocused();
- await expectFeatureHighlightFocusOutline(page, button);
- await expect(page).toHaveScreenshot();
- });
+ await focusStep('Verify focus style for buttons', async () => {
+ await page.keyboard.press('Tab');
+ await expect(button).toBeFocused();
+ await expectFeatureHighlightFocusOutline(page, button);
+ await expect(page).toHaveScreenshot();
+ });
- if (browserName === 'firefox') return;
- await test.step('Verify hover style for non-active buttons', async () => {
- if (!item.active && !item.loading) {
- await button.hover();
- await expect(page).toHaveScreenshot();
- }
- });
- }
+ await hoverStep('Verify hover style for non-active buttons (not checked in Firefox)', async () => {
+ await button.hover();
+ await expect(page).toHaveScreenshot();
+ });
});
});
});
@@ -197,7 +192,7 @@ test.describe(`${TAG.VISUAL} `, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/components/feature-highlight/tests/examples/input.tsx', 'en', item);
- const outline = page.locator('[class*="SOutline"]');
+ const outline = locators.inputOutline(page);
if (item.disabled || item.state !== 'normal') {
await test.step('Verify disabled or invalid state', async () => {
@@ -237,19 +232,22 @@ test.describe(`${TAG.VISUAL} `, () => {
await expect(page).toHaveScreenshot();
});
} else {
- await test.step('Verify focus and toggle', async () => {
- await page.keyboard.press('Tab');
- // Webkit doesn't move focus to checkbox based controls with Tab,
- // so the focus outline can only be verified in the other browsers.
- if (browserName !== 'webkit') {
- await expectFeatureHighlightFocusOutline(page, toggle);
- }
+ const outlineStep = browserName === 'webkit' ? test.step.skip : test.step;
+ const outlineStepTitle = 'Verify feature highlight focus outline (WebKit does not focus checkbox-based controls by Tab)';
+
+ await page.keyboard.press('Tab');
+ await outlineStep(outlineStepTitle, async () => {
+ await expectFeatureHighlightFocusOutline(page, toggle);
+ });
+ await test.step('Verify focused switch', async () => {
await expect(page).toHaveScreenshot();
+ });
- await page.keyboard.press('Space');
- if (browserName !== 'webkit') {
- await expectFeatureHighlightFocusOutline(page, toggle);
- }
+ await page.keyboard.press('Space');
+ await outlineStep(outlineStepTitle, async () => {
+ await expectFeatureHighlightFocusOutline(page, toggle);
+ });
+ await test.step('Verify toggled switch', async () => {
await expect(page).toHaveScreenshot();
});
}
@@ -263,27 +261,18 @@ test.describe(`${TAG.VISUAL} `, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/components/feature-highlight/docs/examples/data-table.tsx', 'en');
- const flex = locators.dataTable(page);
-
- await test.step('Verify primary table', async () => {
- const screenshotsClip1 = (await flex.first().boundingBox())!;
- screenshotsClip1.x -= 4;
- screenshotsClip1.y -= 4;
- screenshotsClip1.width += 8;
- screenshotsClip1.height += 8;
-
- await expect(page).toHaveScreenshot({ clip: screenshotsClip1 });
- });
-
- await test.step('Verify secondary table', async () => {
- const screenshotsClip2 = (await flex.nth(1).boundingBox())!;
- screenshotsClip2.x -= 4;
- screenshotsClip2.y -= 4;
- screenshotsClip2.width += 8;
- screenshotsClip2.height += 8;
+ const tables = locators.dataTable(page);
- await expect(page).toHaveScreenshot({ clip: screenshotsClip2 });
- });
+ for (const [index, use] of ['primary', 'secondary'].entries()) {
+ await test.step(`Verify ${use} table`, async () => {
+ const clip = (await tables.nth(index).boundingBox())!;
+ clip.x -= 4;
+ clip.y -= 4;
+ clip.width += 8;
+ clip.height += 8;
+ await expect(page).toHaveScreenshot({ clip });
+ });
+ }
});
});
@@ -297,7 +286,7 @@ test.describe(`${TAG.VISUAL} `, () => {
variables.forEach((item) => {
test(`Verify Tabline disabled = ${item.disabled} size = ${item.size} showBadge = ${item.showBadge}`, {
- tag: [TAG.PRIORITY_HIGH, TAG.KEYBOARD, TAG.MOUSE, '@feature-highlight', '@tabline', '@base-components', '@flex-box'],
+ tag: [TAG.PRIORITY_HIGH, TAG.KEYBOARD, TAG.MOUSE, '@feature-highlight', '@tab-line', '@base-components', '@flex-box'],
}, async ({ page }) => {
await loadPage(page, 'stories/components/feature-highlight/tests/examples/tabline.tsx', 'en', item);
@@ -345,21 +334,22 @@ test.describe(`${TAG.VISUAL} `, () => {
await expect(page).toHaveScreenshot();
});
} else {
- if (browserName !== 'webkit') {
- await test.step('Verify focus and selection', async () => {
- await page.keyboard.press('Tab');
- await expectFeatureHighlightFocusOutline(page, radioMark.first(), '::before');
- await expect(page).toHaveScreenshot();
-
- await page.keyboard.press('Space');
- await expectFeatureHighlightFocusOutline(page, radioMark.first(), '::before');
- await expect(page).toHaveScreenshot();
-
- // The second radio is a regular one, it keeps the default focus outline.
- await page.keyboard.press('ArrowDown');
- await expectNoFeatureHighlightFocusOutline(page, radioMark.nth(1), '::before');
- });
- }
+ const notWebkitStep = browserName === 'webkit' ? test.step.skip : test.step;
+
+ await notWebkitStep('Verify focus and selection (WebKit does not focus radio by Tab)', async () => {
+ await page.keyboard.press('Tab');
+ await expectFeatureHighlightFocusOutline(page, radioMark.first(), '::before');
+ await expect(page).toHaveScreenshot();
+
+ await page.keyboard.press('Space');
+ await expectFeatureHighlightFocusOutline(page, radioMark.first(), '::before');
+ await expect(page).toHaveScreenshot();
+ });
+
+ await notWebkitStep('Verify regular radio keeps default focus outline', async () => {
+ await page.keyboard.press('ArrowDown');
+ await expectNoFeatureHighlightFocusOutline(page, radioMark.nth(1), '::before');
+ });
}
});
});
@@ -387,22 +377,26 @@ test.describe(`${TAG.VISUAL} `, () => {
await expect(page).toHaveScreenshot();
});
} else {
- await test.step('Verify focus and toggle', async () => {
- await page.keyboard.press('Tab');
- // Webkit doesn't move focus to checkbox based controls with Tab,
- // so the focus outline can only be verified in the other browsers.
- if (browserName !== 'webkit') {
- await expectFeatureHighlightFocusOutline(page, value.first(), '::before');
- }
+ const outlineStep = browserName === 'webkit' ? test.step.skip : test.step;
+ const outlineStepTitle = 'Verify feature highlight focus outline (WebKit does not focus checkbox-based controls by Tab)';
+
+ await page.keyboard.press('Tab');
+ await outlineStep(outlineStepTitle, async () => {
+ await expectFeatureHighlightFocusOutline(page, value.first(), '::before');
+ });
+ await test.step('Verify focused checkbox', async () => {
await expect(page).toHaveScreenshot();
+ });
- await page.keyboard.press('Enter');
- if (browserName !== 'webkit') {
- await expectFeatureHighlightFocusOutline(page, value.first(), '::before');
- }
+ await page.keyboard.press('Enter');
+ await outlineStep(outlineStepTitle, async () => {
+ await expectFeatureHighlightFocusOutline(page, value.first(), '::before');
+ });
+ await test.step('Verify checked checkbox', async () => {
await expect(page).toHaveScreenshot();
+ });
- // The second checkbox is a regular one, it keeps the default focus outline.
+ await test.step('Verify regular checkbox keeps default focus outline', async () => {
await page.keyboard.press('Tab');
await expectNoFeatureHighlightFocusOutline(page, value.nth(1), '::before');
});
@@ -494,74 +488,34 @@ We verify states, visibility, and attributes.
===================================================== */
test.describe(`${TAG.FUNCTIONAL}`, () => {
test('Verify Pills addon logic', {
- tag: [TAG.PRIORITY_HIGH, '@feature-highlight', '@pills'],
+ tag: [TAG.PRIORITY_HIGH, '@feature-highlight', '@pills', '@badge', '@base-components', '@flex-box', '@typography'],
}, async ({ page }) => {
await loadPage(page, 'stories/components/feature-highlight/tests/examples/pills/pills-addon-logic.tsx', 'en');
const pill = locators.pills(page);
+ const cases = [
+ { title: 'Verify stars in addons', index: 0, sparkles: 1 },
+ { title: 'Verify number in addons', index: 1, sparkles: 0, text: '0' },
+ { title: 'Verify icon in addons', index: 2, sparkles: 0 },
+ { title: 'Verify badge in addons', index: 3, sparkles: 0, badges: 1 },
+ { title: 'Verify text in addons', index: 4, sparkles: 0, text: 'Test' },
+ ];
- await test.step('Verify stars in addon', async () => {
- const addons = pill.first().locator('[data-ui-name="HighlightedItem.Addon"]');
- await expect(addons).toHaveCount(2);
-
- const addonCount = await addons.count();
- for (let j = 0; j < addonCount; j++) {
- const addon = addons.nth(j);
- const icons = addon.locator('[data-ui-name="SummaryAI"]');
- await expect(icons).toHaveCount(1);
- }
- });
-
- await test.step('Verify number in addons', async () => {
- const addons = pill.nth(1).locator('[data-ui-name="HighlightedItem.Addon"]');
- await expect(addons).toHaveCount(2);
-
- const addonCount = await addons.count();
- for (let j = 0; j < addonCount; j++) {
- const addon = addons.nth(j);
- const icons = addon.locator('[data-ui-name="SummaryAI"]');
- await expect(icons).toHaveCount(0);
- expect(await addon.textContent()).toBe('0');
- }
- });
-
- await test.step('Verify icon in addons', async () => {
- const addons = pill.nth(2).locator('[data-ui-name="HighlightedItem.Addon"]');
- await expect(addons).toHaveCount(2);
-
- const addonCount = await addons.count();
- for (let j = 0; j < addonCount; j++) {
- const addon = addons.nth(j);
- const icons = addon.locator('[data-ui-name="SummaryAI"]');
- await expect(icons).toHaveCount(0);
- }
- });
-
- await test.step('Verify badge in addons', async () => {
- const addons = pill.nth(3).locator('[data-ui-name="HighlightedItem.Addon"]');
- await expect(addons).toHaveCount(2);
-
- const addonCount = await addons.count();
- for (let j = 0; j < addonCount; j++) {
- const addon = addons.nth(j);
- const icons = addon.locator('[data-ui-name="SummaryAI"]');
- const badge = addon.locator('[data-ui-name="BadgeFH"]');
- await expect(icons).toHaveCount(0);
- await expect(badge).toHaveCount(1);
- }
- });
-
- await test.step('Verify text in addons', async () => {
- const addons = pill.nth(4).locator('[data-ui-name="HighlightedItem.Addon"]');
- await expect(addons).toHaveCount(2);
+ for (const item of cases) {
+ await test.step(item.title, async () => {
+ const addons = pill.nth(item.index).locator('[data-ui-name="HighlightedItem.Addon"]');
+ await expect(addons).toHaveCount(2);
- const addonCount = await addons.count();
- for (let j = 0; j < addonCount; j++) {
- const addon = addons.nth(j);
- const icons = addon.locator('[data-ui-name="SummaryAI"]');
- await expect(icons).toHaveCount(0);
- expect(await addon.textContent()).toBe('Test');
- }
- });
+ for (const addon of await addons.all()) {
+ await expect(addon.locator('[data-ui-name="SummaryAI"]')).toHaveCount(item.sparkles);
+ if (item.text !== undefined) {
+ await expect(addon).toHaveText(item.text);
+ }
+ if (item.badges !== undefined) {
+ await expect(addon.locator('[data-ui-name="BadgeFH"]')).toHaveCount(item.badges);
+ }
+ }
+ });
+ }
});
});
diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-BadgeFH-Verify-BasgeFH-Visual-1-chromium-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-BadgeFH-Verify-BadgeFH-Visual-1-chromium-linux.png
similarity index 100%
rename from semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-BadgeFH-Verify-BasgeFH-Visual-1-chromium-linux.png
rename to semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-BadgeFH-Verify-BadgeFH-Visual-1-chromium-linux.png
diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-BadgeFH-Verify-BasgeFH-Visual-1-firefox-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-BadgeFH-Verify-BadgeFH-Visual-1-firefox-linux.png
similarity index 100%
rename from semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-BadgeFH-Verify-BasgeFH-Visual-1-firefox-linux.png
rename to semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-BadgeFH-Verify-BadgeFH-Visual-1-firefox-linux.png
diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-BadgeFH-Verify-BasgeFH-Visual-1-webkit-linux.png b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-BadgeFH-Verify-BadgeFH-Visual-1-webkit-linux.png
similarity index 100%
rename from semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-BadgeFH-Verify-BasgeFH-Visual-1-webkit-linux.png
rename to semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx-snapshots/-visual-BadgeFH-Verify-BadgeFH-Visual-1-webkit-linux.png
diff --git a/semcore/feature-popover/__tests__/feature-popover.axe-test.ts b/semcore/feature-popover/__tests__/feature-popover.axe-test.ts
index 05d306ff65..44c5fd3624 100644
--- a/semcore/feature-popover/__tests__/feature-popover.axe-test.ts
+++ b/semcore/feature-popover/__tests__/feature-popover.axe-test.ts
@@ -2,8 +2,8 @@ import { expect, test, getAccessibilityViolations } from '@semcore/testing-utils
import { loadPage } from '@semcore/testing-utils/shared/helpers';
import { TAG } from '@semcore/testing-utils/shared/tags';
-test.describe(`${TAG.FUNCTIONAL} @feature-popover`, () => {
- test('Addons', async ({ page }) => {
+test.describe(`${TAG.ACCESSIBILITY} @feature-popover`, () => {
+ test('Basic', async ({ page }) => {
await loadPage(page, 'stories/components/feature-popover/docs/examples/Basic.tsx', 'en');
const violations = await getAccessibilityViolations({ page });
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx
index 275c2c09eb..3d846ffad3 100644
--- a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx
+++ b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx
@@ -4,7 +4,6 @@ import { loadPage } from '@semcore/testing-utils/shared/helpers';
import { TAG } from '@semcore/testing-utils/shared/tags';
export const locators = {
-
button: (page: Page, name?: string, index?: number) => {
const base = page.getByRole('button', { name });
return typeof index === 'number' ? base.nth(index) : base;
@@ -12,29 +11,18 @@ export const locators = {
featurePopoverPopper: (page: Page) => page.getByRole('dialog'),
hint: (page: Page) => page.getByText('Close'),
featurePopover: (page: Page) => page.locator('[data-ui-name="FeaturePopover.Popper"]'),
+ spot: (page: Page) => page.locator('[data-ui-name="FeaturePopover.Spot"]'),
};
/* =====================================================
@visual
Visual states, hover and focus styles, paddings, margins, and snapshots.
===================================================== */
-test.describe(`${TAG.VISUAL} `, () => {
+test.describe(`${TAG.VISUAL}`, () => {
const placement = [
- { placement: 'auto-start' },
- { placement: 'auto' },
- { placement: 'auto-end' },
- { placement: 'top-start' },
+ { placement: 'bottom-start' },
{ placement: 'top' },
- { placement: 'top-end' },
- { placement: 'right-start' },
{ placement: 'right' },
- { placement: 'right-end' },
- { placement: 'bottom-end' },
- { placement: 'bottom' },
- { placement: 'bottom-start' },
- { placement: 'left-end' },
{ placement: 'left' },
- { placement: 'left-start' },
-
];
placement.forEach((item) => {
test(`Verify Feature popover when placement = ${item.placement}`, {
@@ -48,10 +36,14 @@ test.describe(`${TAG.VISUAL} `, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/components/feature-popover/tests/examples/base-usage-with-all-props.tsx', 'en', item);
- await locators.featurePopoverPopper(page).waitFor({ state: 'visible' });
- await expect(page).toHaveScreenshot();
+ const focusStep = item.placement === 'bottom-start' ? test.step : test.step.skip;
- await test.step('Verify visual regression when focus inside feature popover', async () => {
+ await test.step('Verify opened feature popover', async () => {
+ await locators.featurePopoverPopper(page).waitFor({ state: 'visible' });
+ await expect(page).toHaveScreenshot();
+ });
+
+ await focusStep('Verify visual regression when focus inside feature popover (default placement only)', async () => {
await page.keyboard.press('Tab');
await expect(locators.button(page, 'Close')).toBeFocused();
await locators.hint(page).waitFor({ state: 'visible' });
@@ -65,7 +57,6 @@ test.describe(`${TAG.VISUAL} `, () => {
{ closeIcon: false, theme: 'accent' },
{ closeIcon: true, theme: 'neutral' },
{ closeIcon: false, theme: 'neutral' },
-
];
closeIcon.forEach((item) => {
test(`Verify Feature popover styles with closeIcon = ${item.closeIcon} and theme = ${item.theme}`, {
@@ -79,7 +70,7 @@ test.describe(`${TAG.VISUAL} `, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/components/feature-popover/docs/examples/Basic.tsx', 'en', item);
- const spot = page.locator('[data-ui-name="FeaturePopover.Spot"]');
+ const spot = locators.spot(page);
await locators.featurePopover(page).waitFor({ state: 'visible' });
@@ -112,10 +103,12 @@ test.describe(`${TAG.VISUAL} `, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/components/feature-popover/tests/examples/base-usage-with-medium-illustration.tsx', 'en', { disablePortal: false });
- await locators.featurePopoverPopper(page).waitFor({ state: 'visible' });
- await locators.button(page, 'Close').hover();
- await locators.hint(page).waitFor({ state: 'visible' });
- await expect(page).toHaveScreenshot();
+ await test.step('Verify popover with medium illustration and Close hint on hover', async () => {
+ await locators.featurePopoverPopper(page).waitFor({ state: 'visible' });
+ await locators.button(page, 'Close').hover();
+ await locators.hint(page).waitFor({ state: 'visible' });
+ await expect(page).toHaveScreenshot();
+ });
});
});
@@ -124,7 +117,7 @@ test.describe(`${TAG.VISUAL} `, () => {
Keyboard and mouse interactions - no snapshots here.
We verify states, visibility, and attributes.
===================================================== */
-test.describe(`${TAG.FUNCTIONAL} `, () => {
+test.describe(`${TAG.FUNCTIONAL}`, () => {
test('Verify Base example with Close keyboard interactions', {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
@@ -153,7 +146,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await locators.hint(page).waitFor({ state: 'visible' });
});
- await test.step('Verify Feature Popper closed by Close button activating ', async () => {
+ await test.step('Verify Feature Popper closed by activating Close button', async () => {
await page.keyboard.press('Enter');
await locators.featurePopoverPopper(page).waitFor({ state: 'hidden' });
await expect(locators.button(page, 'Export')).toBeFocused();
@@ -173,7 +166,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await expect(locators.featurePopoverPopper(page)).toBeFocused();
});
- await test.step('Verify Feature Popper closed by ESC when focus is on the other focusable element inside ', async () => {
+ await test.step('Verify Feature Popper closed by Escape when focus is on another focusable element inside', async () => {
await page.keyboard.press('Tab');
await page.keyboard.press('Tab');
await page.keyboard.press('Escape');
@@ -181,7 +174,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await expect(locators.button(page, 'Export')).toBeFocused();
});
- await test.step('Verify focus in not looped inside Feature Popover and focused goes to next button when disablePortal = true', async () => {
+ await test.step('Verify focus is not trapped inside Feature Popover and moves to the next button when disablePortal = true', async () => {
await loadPage(page, 'stories/components/feature-popover/docs/examples/Basic.tsx', 'en');
await locators.featurePopoverPopper(page).waitFor({ state: 'visible' });
await page.keyboard.press('Tab');
@@ -211,7 +204,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await expect(locators.featurePopoverPopper(page)).toBeFocused();
});
- await test.step('Verify next focusable element focused by Tab pressing ', async () => {
+ await test.step('Verify next focusable element focused by Tab', async () => {
await page.keyboard.press('Tab');
await expect(page.getByRole('button', { name: 'Next' })).toBeFocused();
});
@@ -242,7 +235,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/components/feature-popover/docs/examples/Basic.tsx', 'en');
- const gotIt = page.getByText('Next');
+ const nextButton = page.getByText('Next');
await locators.featurePopoverPopper(page).waitFor({ state: 'visible' });
await test.step('Verify Hint on hover Close', async () => {
@@ -262,10 +255,10 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await expect(locators.featurePopoverPopper(page)).toHaveCount(0);
});
- await test.step('Verify Feature Popper closed by pressing Other button', async () => {
+ await test.step('Verify Feature Popper closed by clicking Next button', async () => {
await loadPage(page, 'stories/components/feature-popover/docs/examples/Basic.tsx', 'en');
await locators.featurePopoverPopper(page).waitFor({ state: 'visible' });
- await gotIt.click();
+ await nextButton.click();
await locators.featurePopoverPopper(page).waitFor({ state: 'hidden' });
await expect(locators.featurePopoverPopper(page)).toHaveCount(0);
});
@@ -286,7 +279,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
});
});
- test('Verify Focus order when disablePortal = false', {
+ test('Verify focus order when disablePortal = false', {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
'@feature-popover',
@@ -300,19 +293,20 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await locators.featurePopover(page).waitFor({ state: 'visible' });
- await page.keyboard.press('Tab');
- await page.keyboard.press('Tab');
- await page.keyboard.press('Tab');
- await page.keyboard.press('Tab');
- await expect(locators.featurePopoverPopper(page)).toBeVisible();
- await expect(page.getByRole('button', { name: 'Reload page' })).not.toBeFocused();
+ await test.step('Verify focus does not reach the next page button while popover is open', async () => {
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('Tab');
+ await expect(locators.featurePopoverPopper(page)).toBeVisible();
+ await expect(locators.button(page, 'Reload page')).not.toBeFocused();
+ });
});
const autoFocus = [
{ autoFocus: true },
{ autoFocus: false },
{ autoFocus: 'enforced' },
-
];
autoFocus.forEach((item) => {
test(`Verify Feature popover when autoFocus = ${item.autoFocus}`, {
@@ -328,11 +322,8 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await locators.featurePopoverPopper(page).waitFor({ state: 'visible' });
- if (!item.autoFocus) {
- await expect(locators.featurePopoverPopper(page)).not.toBeFocused();
- } else {
- await expect(locators.featurePopoverPopper(page)).toBeFocused();
- }
+ const popper = expect(locators.featurePopoverPopper(page));
+ await (item.autoFocus ? popper.toBeFocused() : popper.not.toBeFocused());
});
});
});
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-1-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-1-chromium-linux.png
deleted file mode 100644
index 6c4fb6e5bd..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-1-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-1-firefox-linux.png
deleted file mode 100644
index 379e157365..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-1-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-1-webkit-linux.png
deleted file mode 100644
index 378a47df08..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-2-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-2-chromium-linux.png
deleted file mode 100644
index 74a9271654..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-2-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-2-firefox-linux.png
deleted file mode 100644
index fd0f7ab527..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-2-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-2-webkit-linux.png
deleted file mode 100644
index 92651a8bcd..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-end-1-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-end-1-chromium-linux.png
deleted file mode 100644
index 8e7836c610..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-end-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-end-1-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-end-1-firefox-linux.png
deleted file mode 100644
index 62c1532534..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-end-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-end-1-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-end-1-webkit-linux.png
deleted file mode 100644
index 25d2de12d0..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-end-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-end-2-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-end-2-chromium-linux.png
deleted file mode 100644
index be7e64ebd3..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-end-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-end-2-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-end-2-firefox-linux.png
deleted file mode 100644
index 1cd5f2060a..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-end-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-end-2-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-end-2-webkit-linux.png
deleted file mode 100644
index 0a7af763e3..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-end-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-start-1-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-start-1-chromium-linux.png
deleted file mode 100644
index 0ca423ad6d..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-start-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-start-1-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-start-1-firefox-linux.png
deleted file mode 100644
index 6da3196877..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-start-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-start-1-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-start-1-webkit-linux.png
deleted file mode 100644
index aa51b35bda..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-start-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-start-2-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-start-2-chromium-linux.png
deleted file mode 100644
index c17447d47a..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-start-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-start-2-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-start-2-firefox-linux.png
deleted file mode 100644
index 8cfdf43cc0..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-start-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-start-2-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-start-2-webkit-linux.png
deleted file mode 100644
index 141dc5adf6..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-auto-start-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-1-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-1-chromium-linux.png
deleted file mode 100644
index 043dbece67..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-1-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-1-firefox-linux.png
deleted file mode 100644
index c85da5ebad..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-1-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-1-webkit-linux.png
deleted file mode 100644
index 14794ed1d5..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-2-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-2-chromium-linux.png
deleted file mode 100644
index 3f00f6f0fd..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-2-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-2-firefox-linux.png
deleted file mode 100644
index 33e38b7a5b..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-2-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-2-webkit-linux.png
deleted file mode 100644
index 92fe614174..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-end-1-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-end-1-chromium-linux.png
deleted file mode 100644
index 64b0a42aa3..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-end-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-end-1-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-end-1-firefox-linux.png
deleted file mode 100644
index f64e5e0ccd..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-end-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-end-1-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-end-1-webkit-linux.png
deleted file mode 100644
index 70c574d177..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-end-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-end-2-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-end-2-chromium-linux.png
deleted file mode 100644
index e7a119e8e1..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-end-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-end-2-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-end-2-firefox-linux.png
deleted file mode 100644
index 9e11ab20ce..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-end-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-end-2-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-end-2-webkit-linux.png
deleted file mode 100644
index 6428b9b267..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-bottom-end-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-2-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-2-chromium-linux.png
deleted file mode 100644
index 5262129aa5..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-2-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-2-firefox-linux.png
deleted file mode 100644
index 0622b154ad..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-2-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-2-webkit-linux.png
deleted file mode 100644
index 4b8f2e265d..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-end-1-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-end-1-chromium-linux.png
deleted file mode 100644
index cf05f1c891..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-end-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-end-1-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-end-1-firefox-linux.png
deleted file mode 100644
index 2a85b083ff..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-end-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-end-1-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-end-1-webkit-linux.png
deleted file mode 100644
index 3ada3ffc7c..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-end-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-end-2-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-end-2-chromium-linux.png
deleted file mode 100644
index aa7939819b..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-end-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-end-2-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-end-2-firefox-linux.png
deleted file mode 100644
index 85086a5b9c..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-end-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-end-2-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-end-2-webkit-linux.png
deleted file mode 100644
index daffb08304..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-end-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-start-1-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-start-1-chromium-linux.png
deleted file mode 100644
index 48f9d863c0..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-start-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-start-1-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-start-1-firefox-linux.png
deleted file mode 100644
index 0b63d5841b..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-start-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-start-1-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-start-1-webkit-linux.png
deleted file mode 100644
index 68d7dd3c60..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-start-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-start-2-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-start-2-chromium-linux.png
deleted file mode 100644
index ab140d6fab..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-start-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-start-2-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-start-2-firefox-linux.png
deleted file mode 100644
index ac65707ce1..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-start-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-start-2-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-start-2-webkit-linux.png
deleted file mode 100644
index d68a4563fa..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-left-start-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-2-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-2-chromium-linux.png
deleted file mode 100644
index 8800277931..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-2-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-2-firefox-linux.png
deleted file mode 100644
index 0af04decd8..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-2-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-2-webkit-linux.png
deleted file mode 100644
index ecef21d5d5..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-end-1-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-end-1-chromium-linux.png
deleted file mode 100644
index 70e089c008..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-end-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-end-1-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-end-1-firefox-linux.png
deleted file mode 100644
index b2de318731..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-end-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-end-1-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-end-1-webkit-linux.png
deleted file mode 100644
index 1bfe41b1dc..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-end-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-end-2-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-end-2-chromium-linux.png
deleted file mode 100644
index 0db4ec9977..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-end-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-end-2-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-end-2-firefox-linux.png
deleted file mode 100644
index a945cc7392..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-end-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-end-2-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-end-2-webkit-linux.png
deleted file mode 100644
index 228e66a71b..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-end-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-start-1-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-start-1-chromium-linux.png
deleted file mode 100644
index edae582eb3..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-start-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-start-1-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-start-1-firefox-linux.png
deleted file mode 100644
index 1a7969542e..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-start-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-start-1-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-start-1-webkit-linux.png
deleted file mode 100644
index 81bac6c4d7..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-start-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-start-2-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-start-2-chromium-linux.png
deleted file mode 100644
index b94156174d..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-start-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-start-2-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-start-2-firefox-linux.png
deleted file mode 100644
index 682bde1d06..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-start-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-start-2-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-start-2-webkit-linux.png
deleted file mode 100644
index ff9f6f4f1d..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-right-start-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-2-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-2-chromium-linux.png
deleted file mode 100644
index 65aa239a82..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-2-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-2-firefox-linux.png
deleted file mode 100644
index 3fb0e7f569..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-2-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-2-webkit-linux.png
deleted file mode 100644
index 060110f228..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-end-1-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-end-1-chromium-linux.png
deleted file mode 100644
index 94b7dc1850..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-end-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-end-1-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-end-1-firefox-linux.png
deleted file mode 100644
index 6afdd3ed1d..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-end-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-end-1-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-end-1-webkit-linux.png
deleted file mode 100644
index 65e1290910..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-end-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-end-2-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-end-2-chromium-linux.png
deleted file mode 100644
index 39bb7da9ac..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-end-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-end-2-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-end-2-firefox-linux.png
deleted file mode 100644
index 15482ce1fb..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-end-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-end-2-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-end-2-webkit-linux.png
deleted file mode 100644
index 955fb3e9a5..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-end-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-start-1-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-start-1-chromium-linux.png
deleted file mode 100644
index 8e719a8be3..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-start-1-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-start-1-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-start-1-firefox-linux.png
deleted file mode 100644
index f2e6116baa..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-start-1-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-start-1-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-start-1-webkit-linux.png
deleted file mode 100644
index 03fa888d35..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-start-1-webkit-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-start-2-chromium-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-start-2-chromium-linux.png
deleted file mode 100644
index b33dc5955f..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-start-2-chromium-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-start-2-firefox-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-start-2-firefox-linux.png
deleted file mode 100644
index 133390878f..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-start-2-firefox-linux.png and /dev/null differ
diff --git a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-start-2-webkit-linux.png b/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-start-2-webkit-linux.png
deleted file mode 100644
index 9270d07c72..0000000000
Binary files a/semcore/feature-popover/__tests__/feature-popover.browser-test.tsx-snapshots/-visual-Verify-Feature-popover-when-placement-top-start-2-webkit-linux.png and /dev/null differ
diff --git a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx
index 526fda44f7..f3f417ee76 100644
--- a/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx
+++ b/semcore/feedback-form/__tests__/feedback-form.browser-test.tsx
@@ -26,6 +26,14 @@ export const locators = {
},
};
+const expectInputsInvalid = async (page: Page) => {
+ await expect(locators.inputs(page)).not.toHaveCount(0);
+ for (const input of await locators.inputs(page).all()) {
+ await expect(input).toHaveAttribute('aria-invalid', 'true');
+ await expect(input).toHaveAttribute('aria-describedby');
+ }
+};
+
/* =====================================================
@visual
Visual states, hover and focus styles, paddings, margins, and snapshots.
@@ -113,29 +121,34 @@ test.describe(`${TAG.VISUAL}`, () => {
'@typography',
'@button'],
}, async ({ page, browserName }) => {
+ test.skip(browserName === 'webkit', 'Loading state screenshot is unstable in WebKit');
await loadPage(page, 'stories/components/feedback/tests/examples/feedback_form_theme_loading.tsx', 'en');
- if (browserName == 'webkit') test.skip(); // unstable
- await locators.button(page).click();
- await locators.feedbackForm(page).waitFor({ state: 'visible' });
- await expect(locators.inputs(page).nth(0)).toBeFocused();
- await locators.inputs(page, 0).fill('Your feedback must contain at least 10 characters.');
+ await test.step('Fill the form', async () => {
+ await locators.button(page).click();
+ await locators.feedbackForm(page).waitFor({ state: 'visible' });
+ await expect(locators.inputs(page).nth(0)).toBeFocused();
+
+ await locators.inputs(page, 0).fill('Your feedback must contain at least 10 characters.');
- await page.keyboard.press('Tab');
- await expect(locators.inputs(page).nth(1)).toBeFocused();
+ await page.keyboard.press('Tab');
+ await expect(locators.inputs(page).nth(1)).toBeFocused();
- await locators.inputs(page, 1).fill('test@test.test');
- await page.keyboard.press('Tab');
- await expect(page.getByRole('link', { name: 'Privacy Policy' })).toBeFocused();
+ await locators.inputs(page, 1).fill('test@test.test');
+ await page.keyboard.press('Tab');
+ await expect(page.getByRole('link', { name: 'Privacy Policy' })).toBeFocused();
+ });
- await page.keyboard.press('Tab');
- await expect(locators.button(page, 1)).toBeFocused();
+ await test.step('Verify loading styles after submit', async () => {
+ await page.keyboard.press('Tab');
+ await expect(locators.button(page, 1)).toBeFocused();
- await page.keyboard.press('Enter');
- await expect(locators.button(page, 1)).not.toBeFocused();
+ await page.keyboard.press('Enter');
+ await expect(locators.button(page, 1)).not.toBeFocused();
- await page.locator('[aria-label="Loading…"]').waitFor({ state: 'visible' });
- await expect(page).toHaveScreenshot();
+ await page.locator('[aria-label="Loading…"]').waitFor({ state: 'visible' });
+ await expect(page).toHaveScreenshot();
+ });
});
});
@@ -174,9 +187,9 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(locators.feedbackForm(page)).toHaveAttribute('novalidate');
await expect(locators.feedbackForm(page)).toHaveAttribute('method', 'POST');
- const count = await locators.inputs(page).count();
- for (let i = 0; i < count; i++) {
- await expect(locators.inputs(page, i)).toHaveAttribute('aria-invalid', 'false');
+ await expect(locators.inputs(page)).not.toHaveCount(0);
+ for (const input of await locators.inputs(page).all()) {
+ await expect(input).toHaveAttribute('aria-invalid', 'false');
}
await expect(locators.inputs(page, 0)).toHaveAttribute('name', 'description');
await expect(locators.inputs(page, 1)).toHaveAttribute('name', 'email');
@@ -194,7 +207,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await page.keyboard.press('Enter');
await locators.feedbackForm(page).waitFor({ state: 'hidden' });
- await expect(locators.feedbackForm(page)).not.toBeVisible();
+ await expect(locators.feedbackForm(page)).toBeHidden();
await expect(locators.button(page)).toBeFocused();
});
@@ -203,7 +216,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await locators.feedbackForm(page).waitFor({ state: 'visible' });
await page.keyboard.press('Escape');
await locators.feedbackForm(page).waitFor({ state: 'hidden' });
- await expect(locators.feedbackForm(page)).not.toBeVisible();
+ await expect(locators.feedbackForm(page)).toBeHidden();
await expect(locators.button(page)).toBeFocused();
});
@@ -228,12 +241,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await page.getByRole('tooltip', { name: 'Your feedback must contain at least 10 characters.' }).waitFor({ state: 'visible' });
await expect(locators.inputs(page, 0)).toBeFocused();
- const count = await locators.inputs(page).count();
-
- for (let i = 0; i < count; i++) {
- await expect(locators.inputs(page, i)).toHaveAttribute('aria-invalid', 'true');
- await expect(locators.inputs(page, i)).toHaveAttribute('aria-describedby');
- }
+ await expectInputsInvalid(page);
await page.keyboard.press('Tab');
await expect(locators.inputs(page, 1)).toBeFocused();
@@ -267,10 +275,10 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(locators.success(page)).toBeFocused();
});
- await test.step('Verify success closed by ESC', async () => {
+ await test.step('Verify success closed by Escape', async () => {
await page.keyboard.press('Escape');
await locators.success(page).waitFor({ state: 'hidden' });
- await expect(locators.success(page)).not.toBeVisible();
+ await expect(locators.success(page)).toBeHidden();
await expect(locators.button(page)).toBeFocused();
});
});
@@ -292,30 +300,34 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/components/feedback/docs/examples/default_feedback_form.tsx', 'en');
- await page.keyboard.press('Tab');
- await page.keyboard.press('Enter');
- await locators.feedbackForm(page).waitFor({ state: 'visible' });
- await expect(locators.inputs(page, 0)).toBeFocused();
+ await test.step('Verify validation tooltip shown after submitting empty form', async () => {
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('Enter');
+ await locators.feedbackForm(page).waitFor({ state: 'visible' });
+ await expect(locators.inputs(page, 0)).toBeFocused();
- await page.keyboard.press('Tab');
- await expect(locators.inputs(page, 1)).toBeFocused();
+ await page.keyboard.press('Tab');
+ await expect(locators.inputs(page, 1)).toBeFocused();
- await page.keyboard.press('Tab');
- await expect(page.getByRole('link', { name: 'Privacy Policy' })).toBeFocused();
+ await page.keyboard.press('Tab');
+ await expect(page.getByRole('link', { name: 'Privacy Policy' })).toBeFocused();
- await page.keyboard.press('Tab');
- await expect(locators.button(page, 1)).toBeFocused();
+ await page.keyboard.press('Tab');
+ await expect(locators.button(page, 1)).toBeFocused();
- await page.keyboard.press('Enter');
- await page.getByRole('tooltip', { name: 'Your feedback must contain at least 10 characters.' }).waitFor({ state: 'visible' });
- await expect(locators.inputs(page, 0)).toBeFocused();
- await expect(locators.inputs(page, 0)).toHaveAttribute('aria-invalid', 'true');
- await expect(locators.inputs(page, 0)).toHaveAttribute('aria-describedby');
+ await page.keyboard.press('Enter');
+ await page.getByRole('tooltip', { name: 'Your feedback must contain at least 10 characters.' }).waitFor({ state: 'visible' });
+ await expect(locators.inputs(page, 0)).toBeFocused();
+ await expect(locators.inputs(page, 0)).toHaveAttribute('aria-invalid', 'true');
+ await expect(locators.inputs(page, 0)).toHaveAttribute('aria-describedby');
+ });
- await page.keyboard.press('Escape');
- await locators.feedbackForm(page).waitFor({ state: 'hidden' });
- await expect(locators.feedbackForm(page)).not.toBeVisible();
- await expect(locators.button(page)).toBeFocused();
+ await test.step('Verify Escape closes the form and returns focus to trigger', async () => {
+ await page.keyboard.press('Escape');
+ await locators.feedbackForm(page).waitFor({ state: 'hidden' });
+ await expect(locators.feedbackForm(page)).toBeHidden();
+ await expect(locators.button(page)).toBeFocused();
+ });
});
test('Verify base feedback form mouse interaction', {
@@ -344,11 +356,11 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(locators.inputs(page, 0)).toBeFocused();
});
- await test.step('Verify feedback form closed by Cancel click ', async () => {
+ await test.step('Verify feedback form closed by Cancel click', async () => {
await expect(cancel).toHaveAttribute('type', 'reset');
await cancel.click();
await locators.feedbackForm(page).waitFor({ state: 'hidden' });
- await expect(locators.feedbackForm(page)).not.toBeVisible();
+ await expect(locators.feedbackForm(page)).toBeHidden();
});
await test.step('Verify feedback form closed by click outside the form', async () => {
@@ -356,22 +368,17 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await locators.feedbackForm(page).waitFor({ state: 'visible' });
await page.mouse.click(0, 0);
await locators.feedbackForm(page).waitFor({ state: 'hidden' });
- await expect(locators.feedbackForm(page)).not.toBeVisible();
+ await expect(locators.feedbackForm(page)).toBeHidden();
});
- await test.step('Verify feedback form validation starts and form not closed by click Send Feedback', async () => {
+ await test.step('Verify feedback form validation starts and form not closed by click on Send feedback', async () => {
await locators.button(page).click();
await locators.feedbackForm(page).waitFor({ state: 'visible' });
await expect(submit).toHaveAttribute('type', 'submit');
await submit.click();
await page.getByRole('tooltip', { name: 'Your feedback must contain at least 10 characters.' }).waitFor({ state: 'visible' });
await expect(locators.inputs(page, 0)).toBeFocused();
- const count = await locators.inputs(page).count();
-
- for (let i = 0; i < count; i++) {
- await expect(locators.inputs(page, i)).toHaveAttribute('aria-invalid', 'true');
- await expect(locators.inputs(page, i)).toHaveAttribute('aria-describedby');
- }
+ await expectInputsInvalid(page);
});
await test.step('Verify feedback form changes to success by click on Send feedback when inputs filled', async () => {
@@ -386,7 +393,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await test.step('Verify success closed by click outside the form', async () => {
await page.mouse.click(0, 0);
await locators.success(page).waitFor({ state: 'hidden' });
- await expect(locators.success(page)).not.toBeVisible();
+ await expect(locators.success(page)).toBeHidden();
});
await test.step('Verify success closed by click on trigger', async () => {
@@ -395,7 +402,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await locators.button(page).click();
await locators.success(page).waitFor({ state: 'hidden' });
- await expect(locators.success(page)).not.toBeVisible();
+ await expect(locators.success(page)).toBeHidden();
});
});
});
diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx
index 5a3a17db58..3a1e2ddc2b 100644
--- a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx
+++ b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx
@@ -26,6 +26,14 @@ export const locators = {
},
};
+const ensureFirstCheckboxFocused = async (page: Page, browserName: string) => {
+ const firstCheckbox = page.getByRole('checkbox').first();
+ if (browserName === 'firefox' && !(await firstCheckbox.evaluate((node) => node === document.activeElement))) {
+ await page.keyboard.press('Tab');
+ }
+ await expect(firstCheckbox).toBeFocused();
+};
+
/* =====================================================
@visual
Visual states, hover and focus styles, paddings, margins, and snapshots.
@@ -40,19 +48,13 @@ test.describe(`${TAG.VISUAL}`, () => {
}, async ({ page, browserName }) => {
await loadPage(page, 'stories/patterns/ux-patterns/feedback-rating/docs/examples/feedback_rating_form.tsx', 'en');
const checkboxInput = page.getByRole('checkbox');
- const ensureFirstCheckboxFocused = async () => {
- if (
- browserName === 'firefox' &&
- !(await checkboxInput.first().evaluate((node) => node === document.activeElement))
- ) {
- await page.keyboard.press('Tab');
- }
- await expect(checkboxInput.first()).toBeFocused();
- };
+ const buttons = locators.dialog(page).getByRole('button');
+ const notWebkitStep = browserName === 'webkit' ? test.step.skip : test.step;
+
+ await test.step('Verify default styles', async () => {
+ await expect(page).toHaveScreenshot();
+ });
- await expect(page).toHaveScreenshot();
- const dialog = locators.dialog(page);
- const buttons = dialog.getByRole('button');
await test.step('Verify stars hover state', async () => {
await locators.stars(page, 1).hover();
await expect(page).toHaveScreenshot();
@@ -65,17 +67,16 @@ test.describe(`${TAG.VISUAL}`, () => {
await expect(page).toHaveScreenshot();
});
- if (browserName == 'webkit') test.skip();
- await test.step('Verify form styles', async () => {
+ await notWebkitStep('Verify form styles (WebKit does not focus checkboxes by Tab)', async () => {
await page.keyboard.press('Enter');
await buttons.first().waitFor({ state: 'visible' });
- await ensureFirstCheckboxFocused();
+ await ensureFirstCheckboxFocused(page, browserName);
await page.waitForTimeout(200);
await expect(page).toHaveScreenshot();
});
- await test.step('Verify email validation', async () => {
+ await notWebkitStep('Verify email validation', async () => {
await page.keyboard.press('Tab');
await expect(checkboxInput.nth(1)).toBeFocused();
@@ -102,7 +103,7 @@ test.describe(`${TAG.VISUAL}`, () => {
});
});
- await test.step('Verify loading styles', async () => {
+ await notWebkitStep('Verify loading styles', async () => {
await page.keyboard.type('test@test.test');
await page.keyboard.press('Tab');
await expect(page.getByRole('link', { name: 'Privacy Policy' })).toBeFocused();
@@ -127,11 +128,13 @@ test.describe(`${TAG.VISUAL}`, () => {
const buttons = locators.dialog(page).getByRole('button');
- await locators.stars(page, 1).click();
- await buttons.first().waitFor({ state: 'visible' });
- await buttons.nth(1).click();
- await page.waitForSelector('text="Something went wrong. Please try again or contact us at"');
- await expect(page).toHaveScreenshot();
+ await test.step('Verify error notice after submit', async () => {
+ await locators.stars(page, 1).click();
+ await buttons.first().waitFor({ state: 'visible' });
+ await buttons.nth(1).click();
+ await page.waitForSelector('text="Something went wrong. Please try again or contact us at"');
+ await expect(page).toHaveScreenshot();
+ });
});
test('Verify feedback rating notice with title and subtitle', {
@@ -213,17 +216,9 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
const checkboxInput = page.getByRole('checkbox');
const buttons = locators.dialog(page).getByRole('button');
- const ensureFirstCheckboxFocused = async () => {
- if (
- browserName === 'firefox' &&
- !(await checkboxInput.first().evaluate((node) => node === document.activeElement))
- ) {
- await page.keyboard.press('Tab');
- }
- await expect(checkboxInput.first()).toBeFocused();
- };
+ const notWebkitStep = browserName === 'webkit' ? test.step.skip : test.step;
- await test.step('Verify stars can be focused and their attributes ', async () => {
+ await test.step('Verify stars can be focused and their attributes', async () => {
await page.keyboard.press('Tab');
await expect(locators.sliderRating(page)).toBeFocused();
await expect(locators.sliderRating(page)).toHaveAttribute('aria-valuemin', '1');
@@ -234,11 +229,11 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(locators.sliderRating(page)).toHaveAttribute('value', '0');
await expect(locators.sliderRating(page)).toHaveAttribute('aria-orientation', 'horizontal');
- const count = await locators.stars(page).count();
- for (let i = 0; i < count; i++) {
- await expect(locators.stars(page, i)).toHaveAttribute('fill', 'none');
- await expect(locators.stars(page, i)).toHaveAttribute('width', '24');
- await expect(locators.stars(page, i)).toHaveAttribute('height', '24');
+ await expect(locators.stars(page)).not.toHaveCount(0);
+ for (const star of await locators.stars(page).all()) {
+ await expect(star).toHaveAttribute('fill', 'none');
+ await expect(star).toHaveAttribute('width', '24');
+ await expect(star).toHaveAttribute('height', '24');
}
await page.keyboard.press('ArrowRight');
@@ -250,39 +245,49 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(locators.sliderRating(page)).toHaveAttribute('aria-valuetext', '2 out of 5. Press Enter to select the rating.');
});
- await test.step('Verify form opened and first checkbox focused by deault', async () => {
+ await test.step('Verify form opened by Enter', async () => {
await page.keyboard.press('Enter');
await buttons.first().waitFor({ state: 'visible' });
await expect(locators.sliderRating(page)).toHaveAttribute('value', '2');
- if (browserName !== 'webkit') await ensureFirstCheckboxFocused();
+ });
+
+ await notWebkitStep('Verify first checkbox focused by default (WebKit does not focus checkboxes)', async () => {
+ await ensureFirstCheckboxFocused(page, browserName);
+ });
+
+ await test.step('Verify first checkbox attributes', async () => {
await expect(checkboxInput.first()).toHaveAttribute('aria-invalid', 'false');
await expect(checkboxInput.first()).toHaveAttribute('aria-labelledby', 'option1');
});
- await test.step('Verify form closed by ESC and selected stars skipped', async () => {
+ await test.step('Verify form closed by Escape', async () => {
await page.keyboard.press('Escape');
await buttons.first().waitFor({ state: 'hidden' });
- if (browserName !== 'webkit') await expect(locators.sliderRating(page)).toBeFocused();
+ });
+
+ await notWebkitStep('Verify focus returns to stars after Escape', async () => {
+ await expect(locators.sliderRating(page)).toBeFocused();
+ });
+
+ await test.step('Verify selected stars reset after Escape', async () => {
await expect(locators.sliderRating(page)).toHaveAttribute('aria-valuenow', '0');
await expect(locators.sliderRating(page)).toHaveAttribute('aria-valuetext', 'Not set');
await expect(locators.sliderRating(page)).toHaveAttribute('value', '0');
});
- await test.step('Verify Form not opened by Enter when no starts selected', async () => {
+ await test.step('Verify form not opened by Enter when no stars selected', async () => {
await page.keyboard.press('Enter');
- await expect(buttons.first()).not.toBeVisible();
+ await expect(buttons.first()).toBeHidden();
});
- if (browserName === 'webkit') return;
-
- await test.step('Verify Form focus order', async () => {
+ await notWebkitStep('Verify form focus order', async () => {
await page.keyboard.press('ArrowRight');
await page.keyboard.press('ArrowRight');
await page.keyboard.press('Enter');
await buttons.first().waitFor({ state: 'visible' });
- await ensureFirstCheckboxFocused();
+ await ensureFirstCheckboxFocused(page, browserName);
for (let i = 0; i < 3; i++) {
await page.keyboard.press('Tab');
@@ -303,19 +308,19 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(buttons.nth(0)).toBeFocused();
});
- await test.step('Verify form closed by activate Close button', async () => {
+ await notWebkitStep('Verify form closed by activating Close button', async () => {
await page.keyboard.press('Enter');
await buttons.first().waitFor({ state: 'hidden' });
await expect(locators.sliderRating(page)).toBeFocused();
});
- await test.step('Verify form closed by activate Send request', async () => {
+ await notWebkitStep('Verify form closed by activating Send request', async () => {
await page.keyboard.press('ArrowRight');
await page.keyboard.press('ArrowRight');
await page.keyboard.press('Enter');
await page.waitForTimeout(200);
await buttons.first().waitFor({ state: 'visible' });
- await ensureFirstCheckboxFocused();
+ await ensureFirstCheckboxFocused(page, browserName);
await page.keyboard.press('Shift+Tab');
await page.keyboard.press('Shift+Tab');
await page.keyboard.press('Enter');
@@ -336,6 +341,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
const checkboxInput = page.getByRole('checkbox');
const buttons = locators.dialog(page).getByRole('button');
+ const notWebkitStep = browserName === 'webkit' ? test.step.skip : test.step;
await test.step('Verify stars hover interaction', async () => {
await locators.stars(page, 3).hover();
@@ -351,7 +357,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(locators.sliderRating(page)).toHaveAttribute('value', '4');
});
- await test.step('Verify form closed by click outside the form and selected starts skipped', async () => {
+ await test.step('Verify form closed by click outside the form and selected stars reset', async () => {
await page.mouse.click(0, 0);
await buttons.first().waitFor({ state: 'hidden' });
await expect(locators.sliderRating(page)).toHaveAttribute('aria-valuenow', '0');
@@ -364,13 +370,19 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await locators.stars(page, 3).click();
await buttons.first().waitFor({ state: 'visible' });
await buttons.first().click();
- await locators.dialog(page).waitFor({ state: 'visible' });
+ await buttons.first().waitFor({ state: 'hidden' });
});
- await test.step('Verify form closed by click Send request', async () => {
+ await test.step('Verify form opened by click on stars again', async () => {
await locators.stars(page, 3).click();
await buttons.first().waitFor({ state: 'visible' });
- if (browserName !== 'webkit') await expect(checkboxInput.first()).toBeFocused();
+ });
+
+ await notWebkitStep('Verify first checkbox focused when form opened by click (WebKit does not focus checkboxes)', async () => {
+ await expect(checkboxInput.first()).toBeFocused();
+ });
+
+ await test.step('Verify form closed by click Send request', async () => {
await buttons.nth(1).click();
await page.locator('[aria-label="Loading…"]').nth(1).waitFor({ state: 'hidden' });
diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-chromium-linux.png
index 5edc9e0d66..445b12e4c6 100644
Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-feedback-rating-with-custom-modal-width-1-chromium-linux.png differ
diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-chromium-linux.png
index 637be93b8b..72c91d42a2 100644
Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-3-chromium-linux.png differ
diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-4-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-4-chromium-linux.png
index 77e06232df..0b1eb22498 100644
Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-4-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-4-chromium-linux.png differ
diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-5-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-5-chromium-linux.png
index 8160b810d8..dedd5187ac 100644
Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-5-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-5-chromium-linux.png differ
diff --git a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-6-chromium-linux.png b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-6-chromium-linux.png
index 0285aa6f4c..789c1be37d 100644
Binary files a/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-6-chromium-linux.png and b/semcore/feedback-form/__tests__/five-star-form.browser-test.tsx-snapshots/-visual-Verify-five-stars-form-base-example-styles-6-chromium-linux.png differ
diff --git a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx
index 8030018d29..6e76741fd6 100644
--- a/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx
+++ b/semcore/feedback-form/__tests__/yes-no-form.browser-test.tsx
@@ -1,31 +1,14 @@
-import type { Page } from '@playwright/test';
import { expect, test } from '@semcore/testing-utils/playwright';
+import type { Locator, Page } from '@semcore/testing-utils/playwright';
import { loadPage } from '@semcore/testing-utils/shared/helpers';
import { TAG } from '@semcore/testing-utils/shared/tags';
const locators = {
button: (page: Page, text: string) => page.getByRole('button', { name: text }),
-
- feedbackForm: (page: Page, index?: number) => {
- const base = page.locator(`[data-ui-name="FeedbackForm"]`);
- return typeof index === 'number' ? base.nth(index) : base;
- },
- notice: (page: Page, index?: number) => {
- const base = page.locator(`[data-ui-name="FeedbackForm.Notice"]`);
- return typeof index === 'number' ? base.nth(index) : base;
- },
dialog: (page: Page, index?: number) => {
const base = page.getByRole('dialog');
return typeof index === 'number' ? base.nth(index) : base;
},
- stars: (page: Page, index?: number) => {
- const base = page.getByRole('none');
- return typeof index === 'number' ? base.nth(index) : base;
- },
- sliderRating: (page: Page, index?: number) => {
- const base = page.getByRole('slider');
- return typeof index === 'number' ? base.nth(index) : base;
- },
inputs: (page: Page, index?: number) => {
const base = page.getByRole('textbox');
return typeof index === 'number' ? base.nth(index) : base;
@@ -36,6 +19,26 @@ const locators = {
},
};
+const expectFeedbackFieldAttributes = async (field: Locator, invalid: boolean) => {
+ await expect(field).toHaveAttribute('aria-invalid', String(invalid));
+ await expect(field).toHaveAttribute('name', 'feedback');
+ await expect(field).toHaveAttribute('id', 'feedback');
+ await expect(field).toHaveAttribute('rows', '2');
+ if (invalid) {
+ await expect(field).toHaveAttribute('aria-describedby');
+ } else {
+ await expect(field).not.toHaveAttribute('aria-describedby');
+ }
+};
+
+const expectEmailFieldAttributes = async (field: Locator, invalid: boolean) => {
+ await expect(field).toHaveAttribute('aria-invalid', String(invalid));
+ await expect(field).toHaveAttribute('name', 'email');
+ await expect(field).toHaveAttribute('id', 'email');
+ await expect(field).toHaveAttribute('autocomplete', 'email');
+ await expect(field).toHaveAttribute('aria-describedby');
+};
+
/* =====================================================
@visual
Visual states, hover and focus styles, paddings, margins, and snapshots.
@@ -121,7 +124,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
const feedbackFormItem = page.locator('[data-ui-name="FeedbackForm.Item"]');
- await test.step('Verify stars can be focused and their attributes ', async () => {
+ await test.step('Verify focus order of answer buttons and Notice close hint', async () => {
await page.keyboard.press('Tab');
await expect(locators.button(page, 'Yes')).toBeFocused();
await page.keyboard.press('Tab');
@@ -145,28 +148,20 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(locators.button(page, 'No').first()).toBeFocused();
});
- await test.step('Verify form opened and attributed', async () => {
+ await test.step('Verify form opened and field attributes', async () => {
await page.keyboard.press('Enter');
await locators.dialog(page).waitFor({ state: 'visible' });
await expect(feedbackFormItem.first()).toBeFocused();
- await expect(feedbackFormItem.first()).toHaveAttribute('aria-invalid', 'false');
- await expect(feedbackFormItem.first()).toHaveAttribute('name', 'feedback');
- await expect(feedbackFormItem.first()).toHaveAttribute('id', 'feedback');
- await expect(feedbackFormItem.first()).toHaveAttribute('rows', '2');
- await expect(feedbackFormItem.first()).not.toHaveAttribute('aria-describedby');
+ await expectFeedbackFieldAttributes(feedbackFormItem.first(), false);
await page.keyboard.press('Tab');
await expect(feedbackFormItem.nth(1)).toBeFocused();
- await expect(feedbackFormItem.nth(1)).toHaveAttribute('aria-invalid', 'false');
- await expect(feedbackFormItem.nth(1)).toHaveAttribute('name', 'email');
- await expect(feedbackFormItem.nth(1)).toHaveAttribute('id', 'email');
- await expect(feedbackFormItem.nth(1)).toHaveAttribute('autocomplete', 'email');
- await expect(feedbackFormItem.nth(1)).toHaveAttribute('aria-describedby');
+ await expectEmailFieldAttributes(feedbackFormItem.nth(1), false);
await expect(feedbackFormItem.nth(1)).toHaveAttribute('value');
});
- await test.step('Verify form with error and attributed', async () => {
+ await test.step('Verify form with errors and field attributes', async () => {
await page.keyboard.press('Tab');
await page.keyboard.press('Tab');
@@ -174,19 +169,11 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await page.keyboard.press('Enter');
await expect(feedbackFormItem.first()).toBeFocused();
- await expect(feedbackFormItem.first()).toHaveAttribute('aria-invalid', 'true');
- await expect(feedbackFormItem.first()).toHaveAttribute('name', 'feedback');
- await expect(feedbackFormItem.first()).toHaveAttribute('id', 'feedback');
- await expect(feedbackFormItem.first()).toHaveAttribute('rows', '2');
- await expect(feedbackFormItem.first()).toHaveAttribute('aria-describedby');
+ await expectFeedbackFieldAttributes(feedbackFormItem.first(), true);
await page.keyboard.press('Tab');
await expect(feedbackFormItem.nth(1)).toBeFocused();
- await expect(feedbackFormItem.nth(1)).toHaveAttribute('aria-invalid', 'true');
- await expect(feedbackFormItem.nth(1)).toHaveAttribute('name', 'email');
- await expect(feedbackFormItem.nth(1)).toHaveAttribute('id', 'email');
- await expect(feedbackFormItem.nth(1)).toHaveAttribute('autocomplete', 'email');
- await expect(feedbackFormItem.nth(1)).toHaveAttribute('aria-describedby');
+ await expectEmailFieldAttributes(feedbackFormItem.nth(1), true);
await expect(feedbackFormItem.nth(1)).toHaveAttribute('value');
});
@@ -200,7 +187,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(locators.button(page, 'No').first()).toBeFocused();
});
- await test.step('Verify form closed Escape', async () => {
+ await test.step('Verify form closed by Escape', async () => {
await page.keyboard.press('Shift+Tab');
await expect(locators.button(page, 'Yes')).toBeFocused();
await page.keyboard.press('Enter');
@@ -211,7 +198,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(locators.button(page, 'Yes')).toBeFocused();
});
- await test.step('Verify Success form appeard and closed by Escape', async () => {
+ await test.step('Verify Success form appeared and closed by Escape', async () => {
await page.keyboard.press('Enter');
await locators.dialog(page).waitFor({ state: 'visible' });
await expect(locators.inputs(page).first()).toBeFocused();
@@ -227,17 +214,8 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await page.keyboard.press('Tab');
await expect(locators.button(page, 'Send feedback')).toBeFocused();
- await expect(feedbackFormItem.first()).toHaveAttribute('aria-invalid', 'false');
- await expect(feedbackFormItem.first()).toHaveAttribute('name', 'feedback');
- await expect(feedbackFormItem.first()).toHaveAttribute('id', 'feedback');
- await expect(feedbackFormItem.first()).toHaveAttribute('rows', '2');
- await expect(feedbackFormItem.first()).not.toHaveAttribute('aria-describedby');
-
- await expect(feedbackFormItem.nth(1)).toHaveAttribute('aria-invalid', 'false');
- await expect(feedbackFormItem.nth(1)).toHaveAttribute('name', 'email');
- await expect(feedbackFormItem.nth(1)).toHaveAttribute('id', 'email');
- await expect(feedbackFormItem.nth(1)).toHaveAttribute('autocomplete', 'email');
- await expect(feedbackFormItem.nth(1)).toHaveAttribute('aria-describedby');
+ await expectFeedbackFieldAttributes(feedbackFormItem.first(), false);
+ await expectEmailFieldAttributes(feedbackFormItem.nth(1), false);
await page.keyboard.press('Enter');
await locators.success(page).waitFor({ state: 'visible' });
@@ -275,25 +253,17 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
await expect(feedbackFormItem.nth(1)).toBeFocused();
});
- await test.step('Verify error tooltip ', async () => {
+ await test.step('Verify error tooltip and field attributes', async () => {
await locators.button(page, 'Send feedback').click();
await expect(page.getByRole('tooltip')).toHaveCount(1);
await expect(feedbackFormItem.first()).toBeFocused();
- await expect(feedbackFormItem.first()).toHaveAttribute('aria-invalid', 'true');
- await expect(feedbackFormItem.first()).toHaveAttribute('name', 'feedback');
- await expect(feedbackFormItem.first()).toHaveAttribute('id', 'feedback');
- await expect(feedbackFormItem.first()).toHaveAttribute('rows', '2');
- await expect(feedbackFormItem.first()).toHaveAttribute('aria-describedby');
+ await expectFeedbackFieldAttributes(feedbackFormItem.first(), true);
await page.locator('label').nth(1).click();
await expect(page.getByRole('tooltip')).toHaveCount(1);
await expect(feedbackFormItem.nth(1)).toBeFocused();
- await expect(feedbackFormItem.nth(1)).toHaveAttribute('aria-invalid', 'true');
- await expect(feedbackFormItem.nth(1)).toHaveAttribute('name', 'email');
- await expect(feedbackFormItem.nth(1)).toHaveAttribute('id', 'email');
- await expect(feedbackFormItem.nth(1)).toHaveAttribute('autocomplete', 'email');
- await expect(feedbackFormItem.nth(1)).toHaveAttribute('aria-describedby');
+ await expectEmailFieldAttributes(feedbackFormItem.nth(1), true);
await expect(feedbackFormItem.nth(1)).toHaveAttribute('value');
});
diff --git a/semcore/fullscreen-modal/__tests__/fullscreen-modal.axe-test.tsx b/semcore/fullscreen-modal/__tests__/fullscreen-modal.axe-test.tsx
index 6c0939d0d4..9969133ac9 100644
--- a/semcore/fullscreen-modal/__tests__/fullscreen-modal.axe-test.tsx
+++ b/semcore/fullscreen-modal/__tests__/fullscreen-modal.axe-test.tsx
@@ -2,7 +2,7 @@ import { expect, getAccessibilityViolations, test } from '@semcore/testing-utils
import { loadPage } from '@semcore/testing-utils/shared/helpers';
import { TAG } from '@semcore/testing-utils/shared/tags';
-test.describe(`${TAG.ACCESSIBILITY} @fullscreen-modal `, () => {
+test.describe(`${TAG.ACCESSIBILITY} @fullscreen-modal`, () => {
test('Basic usage', async ({ page }) => {
await loadPage(page, 'stories/components/fullscreen-modal/docs/examples/basic_fullscreen.headers_use.tsx', 'en');
diff --git a/semcore/fullscreen-modal/__tests__/fullscreen-modal.browser-test.tsx b/semcore/fullscreen-modal/__tests__/fullscreen-modal.browser-test.tsx
index 0c15617a8c..1ac489c006 100644
--- a/semcore/fullscreen-modal/__tests__/fullscreen-modal.browser-test.tsx
+++ b/semcore/fullscreen-modal/__tests__/fullscreen-modal.browser-test.tsx
@@ -1,25 +1,47 @@
-import { e2eStandToHtml } from '@semcore/testing-utils/e2e-stand';
import { expect, test } from '@semcore/testing-utils/playwright';
import type { Page } from '@semcore/testing-utils/playwright';
import { loadPage } from '@semcore/testing-utils/shared/helpers';
import { TAG } from '@semcore/testing-utils/shared/tags';
-export const locators = {
+export const locators = {
button: (page: Page, name?: string, index?: number) => {
const base = page.getByRole('button', { name });
return typeof index === 'number' ? base.nth(index) : base;
},
modal: (page: Page) => page.getByRole('dialog'),
- hint: (page: Page, text: string) => page.getByText(text),
sections: (page: Page) => page.locator('[data-ui-name="FullscreenModal.Section"]'),
+ closeElements: (page: Page) => ({
+ modalClose: page.locator('[data-ui-name="Modal.Close"]'),
+ fullscreenModalClose: page.locator('[data-ui-name="FullscreenModal.Close"]'),
+ }),
+};
- addon: (page: Page) => page.locator('[data-ui-name="Input.Addon"]'),
+type HeaderConfig = {
+ closable?: boolean;
+ showClose?: boolean;
+ showBack: boolean;
+ backText: string;
+ backWMax?: number;
+ titleText: string;
+ titleWidth?: number;
+ descriptionText: string;
+ showDescriptionTooltip: boolean;
+ hasBody: boolean;
+ hasFooter: boolean;
+ testName?: string;
+ skipSnapshot?: boolean;
+};
+
+const openModalByKeyboard = async (page: Page) => {
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('Enter');
+ await locators.modal(page).waitFor({ state: 'visible' });
};
/* =====================================================
@visual
Visual states, hover and focus styles, paddings, margins, and snapshots.
===================================================== */
-test.describe(`${TAG.VISUAL} `, () => {
+test.describe(`${TAG.VISUAL}`, () => {
test('Verify body paddings', {
tag: [TAG.PRIORITY_HIGH,
'@fullscreen-modal',
@@ -31,53 +53,15 @@ test.describe(`${TAG.VISUAL} `, () => {
await locators.button(page).click();
await locators.modal(page).waitFor({ state: 'visible' });
- await test.step('Verify paddings for first section', async () => {
- const {
- paddingTop,
- paddingBottom,
- paddingLeft,
- paddingRight,
- } = await locators.sections(page)
- .first()
- .evaluate((el) => {
- const styles = getComputedStyle(el);
- return {
- paddingTop: styles.paddingTop,
- paddingBottom: styles.paddingBottom,
- paddingLeft: styles.paddingLeft,
- paddingRight: styles.paddingRight,
- };
- });
-
- expect(paddingTop).toBe('24px');
- expect(paddingRight).toBe('40px');
- expect(paddingBottom).toBe('24px');
- expect(paddingLeft).toBe('40px');
- });
-
- await test.step('Verify paddings for second section', async () => {
- const {
- paddingTop,
- paddingBottom,
- paddingLeft,
- paddingRight,
- } = await locators.sections(page)
- .nth(1)
- .evaluate((el) => {
- const styles = getComputedStyle(el);
- return {
- paddingTop: styles.paddingTop,
- paddingBottom: styles.paddingBottom,
- paddingLeft: styles.paddingLeft,
- paddingRight: styles.paddingRight,
- };
- });
-
- expect(paddingTop).toBe('24px');
- expect(paddingRight).toBe('40px');
- expect(paddingBottom).toBe('24px');
- expect(paddingLeft).toBe('40px');
- });
+ for (const [index, name] of ['first', 'second'].entries()) {
+ await test.step(`Verify paddings for ${name} section`, async () => {
+ const section = locators.sections(page).nth(index);
+ await expect(section).toHaveCSS('padding-top', '24px');
+ await expect(section).toHaveCSS('padding-right', '40px');
+ await expect(section).toHaveCSS('padding-bottom', '24px');
+ await expect(section).toHaveCSS('padding-left', '40px');
+ });
+ }
});
test('Verify navigation when no footer and 1 zone in body', {
@@ -87,17 +71,18 @@ test.describe(`${TAG.VISUAL} `, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/components/fullscreen-modal/docs/examples/basic_fullscreen.headers_use.tsx', 'en');
- await page.keyboard.press('Tab');
- await page.keyboard.press('Enter');
- await locators.modal(page).waitFor({ state: 'visible' });
-
- await expect(locators.button(page, 'Close')).toBeFocused();
- await locators.button(page, 'Close').hover();
- await expect(page).toHaveScreenshot();
+ await test.step('Verify Close focused and hovered after opening', async () => {
+ await openModalByKeyboard(page);
+ await expect(locators.button(page, 'Close')).toBeFocused();
+ await locators.button(page, 'Close').hover();
+ await expect(page).toHaveScreenshot();
+ });
- await page.keyboard.press('Tab');
- await locators.button(page, 'Go to Tool Name').hover();
- await expect(page).toHaveScreenshot();
+ await test.step('Verify Back button focused by Tab and hovered', async () => {
+ await page.keyboard.press('Tab');
+ await locators.button(page, 'Go to Tool Name').hover();
+ await expect(page).toHaveScreenshot();
+ });
});
test('Verify dual zone render and styles', {
@@ -112,12 +97,12 @@ test.describe(`${TAG.VISUAL} `, () => {
await locators.button(page).click();
await locators.modal(page).waitFor({ state: 'visible' });
- await test.step('Verify backButton on Hover ', async () => {
+ await test.step('Verify Back button on hover', async () => {
await locators.button(page, 'Go to Tool Name').hover();
await expect(page).toHaveScreenshot();
});
- await test.step('Verify closeButton on Hover ', async () => {
+ await test.step('Verify Close button on hover', async () => {
await locators.button(page, 'Close').hover();
await expect(page).toHaveScreenshot();
@@ -130,24 +115,25 @@ test.describe(`${TAG.VISUAL} `, () => {
'@button',
'@typography'],
}, async ({ page, browserName }) => {
+ test.skip(browserName === 'webkit', 'Keyboard focus on the scrollable section is not reliable in WebKit');
await loadPage(page, 'stories/components/fullscreen-modal/docs/examples/example_of_a_dual-zone_modal_window.tsx', 'en');
- if (browserName === 'webkit') test.skip();
-
- await page.keyboard.press('Tab');
- await page.keyboard.press('Enter');
- await locators.modal(page).waitFor({ state: 'visible' });
+ await test.step('Focus the scrollable section', async () => {
+ await openModalByKeyboard(page);
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('Tab');
+ await expect(locators.sections(page).nth(1)).toBeFocused();
+ });
- await page.keyboard.press('Tab');
- await page.keyboard.press('Tab');
- await expect(locators.sections(page).nth(1)).toBeFocused();
- await page.keyboard.press('ArrowDown');
- await page.keyboard.press('ArrowDown');
- await page.waitForTimeout(250);
- await expect(page).toHaveScreenshot();
+ await test.step('Verify header stays fixed after scrolling by arrows', async () => {
+ await page.keyboard.press('ArrowDown');
+ await page.keyboard.press('ArrowDown');
+ await page.waitForTimeout(250);
+ await expect(page).toHaveScreenshot();
+ });
});
- const headerVariations = [
+ const headerVariations: HeaderConfig[] = [
// empty header (no title, no description)
{
closable: false,
@@ -283,9 +269,7 @@ test.describe(`${TAG.VISUAL} `, () => {
await loadPage(page, 'stories/components/fullscreen-modal/tests/examples/header/configurable-header.tsx', 'en', config);
await test.step('Open modal', async () => {
- await page.keyboard.press('Tab');
- await page.keyboard.press('Enter');
- await locators.modal(page).waitFor({ state: 'visible' });
+ await openModalByKeyboard(page);
});
if (config.showClose) {
@@ -300,13 +284,12 @@ test.describe(`${TAG.VISUAL} `, () => {
await expect(backButton).toBeVisible();
});
- if ((config as { backWMax?: number }).backWMax !== undefined) {
+ if (config.backWMax !== undefined) {
+ const backWMax = config.backWMax;
await test.step('Verify Back text is truncated when wMax is constrained', async () => {
const back = page.locator('[data-ui-name="FullscreenModal.Back"]');
const backBox = await back.boundingBox();
- expect(backBox!.width).toBeLessThanOrEqual(
- (config as { backWMax: number }).backWMax + 1,
- );
+ expect(backBox!.width).toBeLessThanOrEqual(backWMax + 1);
const textNode = back.locator('[data-ui-name="ButtonLink.Text"]');
const isTruncated = await textNode.evaluate(
(el) => el.scrollWidth > el.clientWidth,
@@ -320,14 +303,7 @@ test.describe(`${TAG.VISUAL} `, () => {
await test.step('Verify title renders and wraps correctly', async () => {
const title = page.locator('[data-ui-name="FullscreenModal.Title"]');
await expect(title).toBeVisible();
- const titleStyles = await title.evaluate((el) => {
- const computed = getComputedStyle(el);
- return {
- overflowWrap: computed.overflowWrap,
- whiteSpace: computed.whiteSpace,
- };
- });
- expect(titleStyles.overflowWrap).toBe('break-word');
+ await expect(title).toHaveCSS('overflow-wrap', 'break-word');
});
}
@@ -335,38 +311,19 @@ test.describe(`${TAG.VISUAL} `, () => {
await test.step('Verify description renders as tag and wraps correctly', async () => {
const description = page.locator('[data-ui-name="FullscreenModal.Description"]');
await expect(description).toBeVisible();
-
- const tagName = await description.evaluate((el) => el.tagName.toLowerCase());
- expect(tagName).toBe('p');
-
- const descStyles = await description.evaluate((el) => {
- const computed = getComputedStyle(el);
- return {
- overflowWrap: computed.overflowWrap,
- whiteSpace: computed.whiteSpace,
- };
- });
- expect(descStyles.overflowWrap).toBe('break-word');
+ await expect(description).toHaveJSProperty('tagName', 'P');
+ await expect(description).toHaveCSS('overflow-wrap', 'break-word');
});
}
await test.step('Verify header vertical layout', async () => {
const header = page.locator('[data-ui-name="FullscreenModal.Header"]');
- const headerStyles = await header.evaluate((el) => {
- const computed = getComputedStyle(el);
- return {
- flexDirection: computed.flexDirection,
- gap: computed.gap,
- alignItems: computed.alignItems,
- };
- });
-
- expect(headerStyles.flexDirection).toBe('column');
- expect(headerStyles.gap).toBe('8px');
- expect(headerStyles.alignItems).toBe('flex-start');
+ await expect(header).toHaveCSS('flex-direction', 'column');
+ await expect(header).toHaveCSS('gap', '8px');
+ await expect(header).toHaveCSS('align-items', 'flex-start');
});
- if (!(config as { skipSnapshot?: boolean }).skipSnapshot) {
+ if (!config.skipSnapshot) {
await test.step('Take visual snapshot', async () => {
if (config.showClose || config.closable) {
const closeButton = locators.button(page, 'Close');
@@ -384,7 +341,7 @@ test.describe(`${TAG.VISUAL} `, () => {
Keyboard and mouse interactions - no snapshots here.
We verify states, visibility, and attributes.
===================================================== */
-test.describe(`${TAG.FUNCTIONAL} `, () => {
+test.describe(`${TAG.FUNCTIONAL}`, () => {
test('Verify keyboard navigation when no footer and 1 zone in body', {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
@@ -393,35 +350,39 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/components/fullscreen-modal/docs/examples/basic_fullscreen.headers_use.tsx', 'en');
- await page.keyboard.press('Tab');
- await page.keyboard.press('Enter');
- await locators.modal(page).waitFor({ state: 'visible' });
-
- await expect(locators.button(page, 'Close')).toBeFocused();
-
- await page.keyboard.press('Enter');
- await locators.button(page, 'Close').waitFor({ state: 'hidden' });
- await expect(locators.button(page)).toBeFocused();
+ await test.step('Verify Close focused when opened', async () => {
+ await openModalByKeyboard(page);
+ await expect(locators.button(page, 'Close')).toBeFocused();
+ });
- await page.keyboard.press('Enter');
- await locators.button(page, 'Close').waitFor({ state: 'visible' });
- await expect(locators.button(page, 'Close')).toBeFocused();
+ await test.step('Verify closed by Enter on Close and focus returns to trigger', async () => {
+ await page.keyboard.press('Enter');
+ await locators.button(page, 'Close').waitFor({ state: 'hidden' });
+ await expect(locators.button(page)).toBeFocused();
+ });
- await page.keyboard.press('Escape');
- await locators.button(page, 'Close').waitFor({ state: 'hidden' });
- await expect(locators.button(page)).toBeFocused();
+ await test.step('Verify closed by Escape and focus returns to trigger', async () => {
+ await page.keyboard.press('Enter');
+ await locators.button(page, 'Close').waitFor({ state: 'visible' });
+ await expect(locators.button(page, 'Close')).toBeFocused();
- await page.keyboard.press('Enter');
- await locators.button(page, 'Close').waitFor({ state: 'visible' });
- await expect(locators.button(page, 'Close')).toBeFocused();
+ await page.keyboard.press('Escape');
+ await locators.button(page, 'Close').waitFor({ state: 'hidden' });
+ await expect(locators.button(page)).toBeFocused();
+ });
- await page.keyboard.press('Tab');
- await expect(locators.button(page, 'Go to Tool Name')).toBeFocused();
+ await test.step('Verify closed by Enter on Back and focus returns to trigger', async () => {
+ await page.keyboard.press('Enter');
+ await locators.button(page, 'Close').waitFor({ state: 'visible' });
+ await expect(locators.button(page, 'Close')).toBeFocused();
- await page.keyboard.press('Enter');
+ await page.keyboard.press('Tab');
+ await expect(locators.button(page, 'Go to Tool Name')).toBeFocused();
- await locators.button(page, 'Close').waitFor({ state: 'hidden' });
- await expect(locators.button(page)).toBeFocused();
+ await page.keyboard.press('Enter');
+ await locators.button(page, 'Close').waitFor({ state: 'hidden' });
+ await expect(locators.button(page)).toBeFocused();
+ });
});
test('Verify mouse navigation when no footer and 1 zone in body', {
@@ -432,37 +393,39 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
}, async ({ page }) => {
await loadPage(page, 'stories/components/fullscreen-modal/docs/examples/basic_fullscreen.headers_use.tsx', 'en');
- await locators.button(page).click();
- await locators.button(page, 'Close').waitFor({ state: 'visible' });
-
- await locators.button(page, 'Close').click();
- await locators.button(page, 'Close').waitFor({ state: 'hidden' });
-
- await locators.button(page).click();
- await locators.button(page, 'Close').waitFor({ state: 'visible' });
-
- await locators.button(page, 'Go to Tool Name').click();
- await locators.button(page, 'Close').waitFor({ state: 'hidden' });
-
- await locators.button(page).click();
- await locators.button(page, 'Close').waitFor({ state: 'visible' });
+ await test.step('Verify closed by Close click', async () => {
+ await locators.button(page).click();
+ await locators.button(page, 'Close').waitFor({ state: 'visible' });
+ await locators.button(page, 'Close').click();
+ await locators.button(page, 'Close').waitFor({ state: 'hidden' });
+ });
- await page.keyboard.press('Escape');
- await locators.button(page, 'Close').waitFor({ state: 'hidden' });
+ await test.step('Verify closed by Back click', async () => {
+ await locators.button(page).click();
+ await locators.button(page, 'Close').waitFor({ state: 'visible' });
+ await locators.button(page, 'Go to Tool Name').click();
+ await locators.button(page, 'Close').waitFor({ state: 'hidden' });
+ });
- await expect(locators.button(page)).toBeFocused();
+ await test.step('Verify closed by Escape after opening by click', async () => {
+ await locators.button(page).click();
+ await locators.button(page, 'Close').waitFor({ state: 'visible' });
+ await page.keyboard.press('Escape');
+ await locators.button(page, 'Close').waitFor({ state: 'hidden' });
+ await expect(locators.button(page)).toBeFocused();
+ });
});
- test('Verify keyboard navigation footer and 2 zones in body', {
+ test('Verify keyboard navigation with footer and 2 zones in body', {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
'@fullscreen-modal',
'@button',
'@typography'],
}, async ({ page, browserName }) => {
+ test.skip(browserName === 'webkit', 'Keyboard focus on the scrollable section is not reliable in WebKit');
await loadPage(page, 'stories/components/fullscreen-modal/docs/examples/example_of_a_dual-zone_modal_window.tsx', 'en');
- if (browserName === 'webkit') return;
await page.keyboard.press('Tab');
await page.keyboard.press('Enter');
await locators.button(page, 'Close').waitFor({ state: 'visible' });
@@ -483,7 +446,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await expect(locators.button(page, 'Close')).toBeFocused();
});
- test('Verify modal can be closed by ESC when no closable button', {
+ test('Verify modal can be closed by Escape when no closable button', {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
'@fullscreen-modal',
@@ -494,7 +457,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
'@tooltip',
'@typography'],
}, async ({ page }) => {
- const config = {
+ const config: HeaderConfig = {
closable: false,
showClose: false,
showBack: true,
@@ -508,34 +471,33 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await loadPage(page, 'stories/components/fullscreen-modal/tests/examples/header/configurable-header.tsx', 'en', config);
- await page.keyboard.press('Tab');
- await page.keyboard.press('Enter');
- await locators.modal(page).waitFor({ state: 'visible' });
- await page.keyboard.press('Escape');
- await locators.modal(page).waitFor({ state: 'hidden' });
-
- await locators.button(page).click();
- await locators.modal(page).waitFor({ state: 'visible' });
- await page.keyboard.press('Escape');
- await locators.modal(page).waitFor({ state: 'hidden' });
+ await test.step('Verify closed by Escape after opening by keyboard', async () => {
+ await openModalByKeyboard(page);
+ await page.keyboard.press('Escape');
+ await locators.modal(page).waitFor({ state: 'hidden' });
+ });
- await expect(locators.modal(page)).toHaveCount(0);
+ await test.step('Verify closed by Escape after opening by click', async () => {
+ await locators.button(page).click();
+ await locators.modal(page).waitFor({ state: 'visible' });
+ await page.keyboard.press('Escape');
+ await locators.modal(page).waitFor({ state: 'hidden' });
+ await expect(locators.modal(page)).toHaveCount(0);
+ });
});
- test('Verify Close, LongTitle and Description with interactive element', {
+ test('Verify description tooltip keyboard interaction in header', {
tag: [TAG.PRIORITY_HIGH,
TAG.KEYBOARD,
'@fullscreen-modal',
'@button',
- '@toooltip',
'@link',
'@button-link',
'@description-tooltip',
'@tooltip',
'@typography'],
}, async ({ page }) => {
- const config = {
-
+ const config: HeaderConfig = {
showBack: true,
backText: 'Go to Tool Name',
titleText: 'Go to Tool Name Go to Tool Name',
@@ -548,20 +510,24 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await loadPage(page, 'stories/components/fullscreen-modal/tests/examples/header/configurable-header.tsx', 'en', config);
- await page.keyboard.press('Tab');
- await page.keyboard.press('Enter');
+ const tooltipPopper = page.locator('[data-ui-name="DescriptionTooltip.Popper"]');
- await locators.modal(page).waitFor({ state: 'visible' });
- await locators.button(page, 'Close').waitFor({ state: 'visible' });
- await page.keyboard.press('Tab');
- await page.keyboard.press('Tab');
- await page.keyboard.press('Enter');
- await page.locator('[data-ui-name="DescriptionTooltip.Popper"]').waitFor({ state: 'visible' });
- await page.keyboard.press('Tab');
- await page.keyboard.press('Tab');
- await page.keyboard.press('Escape');
- await page.locator('[data-ui-name="DescriptionTooltip.Popper"]').waitFor({ state: 'hidden' });
- await expect(page.locator('[data-ui-name="DescriptionTooltip.Trigger"]')).toBeFocused();
+ await test.step('Verify description tooltip opened by Enter', async () => {
+ await openModalByKeyboard(page);
+ await locators.button(page, 'Close').waitFor({ state: 'visible' });
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('Enter');
+ await tooltipPopper.waitFor({ state: 'visible' });
+ });
+
+ await test.step('Verify Escape closes tooltip and returns focus to its trigger', async () => {
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('Tab');
+ await page.keyboard.press('Escape');
+ await tooltipPopper.waitFor({ state: 'hidden' });
+ await expect(page.locator('[data-ui-name="DescriptionTooltip.Trigger"]')).toBeFocused();
+ });
});
test('Verify there is only one closable element when closable = true and no Close button', {
@@ -574,7 +540,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
'@tooltip',
'@typography'],
}, async ({ page }) => {
- const config = {
+ const config: HeaderConfig = {
closable: true,
showClose: false,
showBack: true,
@@ -588,18 +554,12 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await loadPage(page, 'stories/components/fullscreen-modal/tests/examples/header/configurable-header.tsx', 'en', config);
- await page.keyboard.press('Tab');
- await page.keyboard.press('Enter');
-
- await locators.modal(page).waitFor({ state: 'visible' });
-
- const modalClose = page.locator('[data-ui-name="Modal.Close"]');
- const fullScreenModalClose = page.locator('[data-ui-name="FullscreenModal.Close"]');
+ await openModalByKeyboard(page);
- expect(await modalClose.count()).toBe(0);
- expect(await fullScreenModalClose.count()).toBe(1);
-
- expect(fullScreenModalClose.first()).toBeVisible();
+ const { modalClose, fullscreenModalClose } = locators.closeElements(page);
+ await expect(modalClose).toHaveCount(0);
+ await expect(fullscreenModalClose).toHaveCount(1);
+ await expect(fullscreenModalClose).toBeVisible();
});
test('Verify no closable elements when closable = false and no Close button', {
@@ -612,7 +572,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
'@tooltip',
'@typography'],
}, async ({ page }) => {
- const config = {
+ const config: HeaderConfig = {
closable: false,
showClose: false,
showBack: true,
@@ -626,16 +586,11 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await loadPage(page, 'stories/components/fullscreen-modal/tests/examples/header/configurable-header.tsx', 'en', config);
- await page.keyboard.press('Tab');
- await page.keyboard.press('Enter');
-
- await locators.modal(page).waitFor({ state: 'visible' });
-
- const modalClose = page.locator('[data-ui-name="Modal.Close"]');
- const fullScreenModalClose = page.locator('[data-ui-name="FullscreenModal.Close"]');
+ await openModalByKeyboard(page);
- expect(await modalClose.count()).toBe(0);
- expect(await fullScreenModalClose.count()).toBe(0);
+ const { modalClose, fullscreenModalClose } = locators.closeElements(page);
+ await expect(modalClose).toHaveCount(0);
+ await expect(fullscreenModalClose).toHaveCount(0);
});
test('Verify body scroll is restored after modal close (no inline style pollution)', {
@@ -665,10 +620,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
await page.evaluate(() => window.scrollTo(0, 0));
await page.locator('input[type="checkbox"]').check();
- const overflowAfterCheck = await page.evaluate(() =>
- window.getComputedStyle(document.body).overflow,
- );
- expect(overflowAfterCheck).toBe('hidden');
+ await expect(page.locator('body')).toHaveCSS('overflow', 'hidden');
});
});
});
diff --git a/semcore/fullscreen-modal/__tests__/fullscreen-modal.browser-test.tsx-snapshots/-visual-Verify-header-configuration-all-features-enabled-1-webkit-linux.png b/semcore/fullscreen-modal/__tests__/fullscreen-modal.browser-test.tsx-snapshots/-visual-Verify-header-configuration-all-features-enabled-1-webkit-linux.png
index 44130ab5df..c38d07f95d 100644
Binary files a/semcore/fullscreen-modal/__tests__/fullscreen-modal.browser-test.tsx-snapshots/-visual-Verify-header-configuration-all-features-enabled-1-webkit-linux.png and b/semcore/fullscreen-modal/__tests__/fullscreen-modal.browser-test.tsx-snapshots/-visual-Verify-header-configuration-all-features-enabled-1-webkit-linux.png differ
diff --git a/semcore/fullscreen-modal/__tests__/fullscreen-modal.browser-test.tsx-snapshots/-visual-Verify-header-configuration-empty-header-1-webkit-linux.png b/semcore/fullscreen-modal/__tests__/fullscreen-modal.browser-test.tsx-snapshots/-visual-Verify-header-configuration-empty-header-1-webkit-linux.png
index e092f23807..e1777e8e04 100644
Binary files a/semcore/fullscreen-modal/__tests__/fullscreen-modal.browser-test.tsx-snapshots/-visual-Verify-header-configuration-empty-header-1-webkit-linux.png and b/semcore/fullscreen-modal/__tests__/fullscreen-modal.browser-test.tsx-snapshots/-visual-Verify-header-configuration-empty-header-1-webkit-linux.png differ
diff --git a/stories/components/accordion/tests/accordion.stories.tsx b/stories/components/accordion/tests/accordion.stories.tsx
index 3c82bf21c2..fb79ea6ecd 100644
--- a/stories/components/accordion/tests/accordion.stories.tsx
+++ b/stories/components/accordion/tests/accordion.stories.tsx
@@ -1,4 +1,4 @@
-import Accrordion from '@semcore/ui/accordion';
+import Accordion from '@semcore/ui/accordion';
import type { Meta, StoryObj } from '@storybook/react-vite';
import AccordionAllPropsExample, { defaultAccordionAllProps } from './examples/accordion-all-props';
@@ -6,13 +6,13 @@ import AccordionAnimationExample from './examples/accordion-collapse-duration';
import ButtonsOnToggleExample from './examples/button-on-toggle';
import ValuesExample from './examples/values';
-const meta: Meta = {
+const meta: Meta = {
title: 'Components/Accordion/Tests',
- component: Accrordion,
+ component: Accordion,
};
export default meta;
-type Story = StoryObj;
+type Story = StoryObj;
export const ButtonsOnToggle: Story = {
render: ButtonsOnToggleExample,
@@ -22,7 +22,7 @@ export const Values: Story = {
render: ValuesExample,
};
-export const AccordionAnimation: StoryObj = {
+export const AccordionAnimation: Story = {
render: AccordionAnimationExample,
};
diff --git a/stories/components/accordion/tests/examples/accordion-all-props.tsx b/stories/components/accordion/tests/examples/accordion-all-props.tsx
index 586b133bd9..9db84d8bb5 100644
--- a/stories/components/accordion/tests/examples/accordion-all-props.tsx
+++ b/stories/components/accordion/tests/examples/accordion-all-props.tsx
@@ -4,24 +4,15 @@ import { Flex } from '@semcore/ui/base-components';
import React from 'react';
type ExampleProps = NSAccordion.Props & {
- /** Per-Collapse animation duration. Omitted by default so the root duration applies. */
collapseDuration?: number;
-
- /** Accordion.Item.Toggle */
- toggleTag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-
- /** Accordion.Item.Chevron */
- chevronSize: 'm' | 'l';
-
- /** Accordion.Item.Collapse */
+ toggleTag: NonNullable;
+ chevronSize: NonNullable;
initialAnimation: boolean;
timingFunction: 'ease-out' | 'ease-in' | 'ease-in-out' | 'linear' | 'cubic-bezier(0.5, 0, 0, 1.12)';
animationsDisabled: boolean;
overflowHidden: boolean;
- defaultHeight: 'auto' | '100%';
+ defaultHeight: NonNullable;
preserveNode: boolean;
-
- /** Per-item content, editable from the Storybook panel */
item1Label: string;
item1Content: string;
item1Disabled: boolean;
diff --git a/stories/components/accordion/tests/examples/accordion-collapse-duration.tsx b/stories/components/accordion/tests/examples/accordion-collapse-duration.tsx
index dc9eedfa32..5cf70c8033 100644
--- a/stories/components/accordion/tests/examples/accordion-collapse-duration.tsx
+++ b/stories/components/accordion/tests/examples/accordion-collapse-duration.tsx
@@ -72,6 +72,21 @@ const Demo = () => {
+
+
+
+
+
+
+ Accordion duration 300
+
+
+
+ Hello Section
+ Hello Section
+
+
+
);
};
diff --git a/stories/components/base-components/flex-box/tests/examples/box-margins-and-paddings.tsx b/stories/components/base-components/flex-box/tests/examples/box-margins-and-paddings.tsx
index ee1db1d89c..e3f2302ddc 100644
--- a/stories/components/base-components/flex-box/tests/examples/box-margins-and-paddings.tsx
+++ b/stories/components/base-components/flex-box/tests/examples/box-margins-and-paddings.tsx
@@ -61,9 +61,11 @@ const Demo = () => {
{10}
-
+
py=
{10}
+ , scaleIndent=
+ {5}
);
diff --git a/stories/components/button/tests/examples/button-base.tsx b/stories/components/button/tests/examples/button-base.tsx
index 3792ff17a9..58fb7971f9 100644
--- a/stories/components/button/tests/examples/button-base.tsx
+++ b/stories/components/button/tests/examples/button-base.tsx
@@ -105,7 +105,7 @@ export const defaultButtonProps: ExampleProps = {
use: 'primary',
theme: 'info',
hintPlacement: 'top',
- style: undefined, // this prop is needed for barckground to verofy some button themes (primary invert for instance)
+ style: undefined, // this prop is needed for background to verofy some button themes (primary invert for instance)
};
Demo.defaultProps = defaultButtonProps;
diff --git a/stories/components/button/tests/examples/button-icon-only.tsx b/stories/components/button/tests/examples/button-icon-only.tsx
index fb8e785eb3..4f4954d216 100644
--- a/stories/components/button/tests/examples/button-icon-only.tsx
+++ b/stories/components/button/tests/examples/button-icon-only.tsx
@@ -105,7 +105,7 @@ export const defaultIconButtonProps: ExampleProps = {
use: 'primary',
theme: 'info',
hintPlacement: 'top',
- style: undefined, // this prop is needed for barckground to verify some button themes (primary invert for instance)
+ style: undefined, // this prop is needed for background to verify some button themes (primary invert for instance)
};
diff --git a/stories/components/button/tests/examples/button-neighbor-location.tsx b/stories/components/button/tests/examples/button-neighbor-location.tsx
index 59e257aa78..5ebe27fbc4 100644
--- a/stories/components/button/tests/examples/button-neighbor-location.tsx
+++ b/stories/components/button/tests/examples/button-neighbor-location.tsx
@@ -63,7 +63,7 @@ export const defaultButtonNeighborProps: ExampleProps = {
use: 'primary',
theme: 'info',
hintPlacement: 'top',
- style: undefined, // this prop is needed for barckground to verofy some button themes (primary invert for instance)
+ style: undefined, // this prop is needed for barckground to verify some button themes (primary invert for instance)
};
diff --git a/stories/components/color-picker/tests/examples/base-no-palette-manager.tsx b/stories/components/color-picker/tests/examples/base-no-palette-manager.tsx
index af093d5509..43f0ace3c4 100644
--- a/stories/components/color-picker/tests/examples/base-no-palette-manager.tsx
+++ b/stories/components/color-picker/tests/examples/base-no-palette-manager.tsx
@@ -1,5 +1,5 @@
import { Flex } from '@semcore/ui/base-components';
-import ColorPicker, { PaletteManager } from '@semcore/ui/color-picker';
+import ColorPicker from '@semcore/ui/color-picker';
import { Text } from '@semcore/ui/typography';
import React from 'react';
diff --git a/stories/components/color-picker/tests/examples/label-and-color-expanded.tsx b/stories/components/color-picker/tests/examples/label-and-color-expanded.tsx
index 6371fbd543..4d60b46678 100644
--- a/stories/components/color-picker/tests/examples/label-and-color-expanded.tsx
+++ b/stories/components/color-picker/tests/examples/label-and-color-expanded.tsx
@@ -1,6 +1,6 @@
import { Flex, Box } from '@semcore/ui/base-components';
import ColorPicker, { PaletteManager } from '@semcore/ui/color-picker';
-import React, { useState } from 'react';
+import React from 'react';
const Demo = () => {
return (
diff --git a/stories/components/divider/tests/examples/divider-styles.tsx b/stories/components/divider/tests/examples/divider-styles.tsx
index 47aaf27b8d..b4ff458de5 100644
--- a/stories/components/divider/tests/examples/divider-styles.tsx
+++ b/stories/components/divider/tests/examples/divider-styles.tsx
@@ -6,20 +6,16 @@ import React from 'react';
type DividerStylesExample = NSDivider.Props;
const Demo = (props: DividerStylesExample) => {
return (
- <>
-
-
-
-
-
-
+
+
+
);
};
export const baseExampleProps: DividerStylesExample = {
diff --git a/stories/components/divider/tests/examples/render-in-center.tsx b/stories/components/divider/tests/examples/render-in-center.tsx
index 7bc5f1648d..b98f3e9b39 100644
--- a/stories/components/divider/tests/examples/render-in-center.tsx
+++ b/stories/components/divider/tests/examples/render-in-center.tsx
@@ -1,21 +1,20 @@
+import { Box, Flex } from '@semcore/ui/base-components';
import Divider from '@semcore/ui/divider';
import React from 'react';
const Demo = () => {
return (
<>
-
-
+
+
);
};
diff --git a/stories/components/dot/tests/examples/sizes-and-positions.tsx b/stories/components/dot/tests/examples/sizes-and-positions.tsx
index 2b8f86acdb..25380d157a 100644
--- a/stories/components/dot/tests/examples/sizes-and-positions.tsx
+++ b/stories/components/dot/tests/examples/sizes-and-positions.tsx
@@ -10,12 +10,10 @@ import React from 'react';
const Demo = (props: NSDot.Props) => {
return (
-