Skip to content

Commit

Permalink
De-flake layerContextMenuKeyboard.test.js, ArrowKeyNavContextMenu,
Browse files Browse the repository at this point in the history 
layerContextMenuKeyboard and popupTabNavigation, hopefully
  • Loading branch information
@prushforth @AliyanH
prushforth authored and AliyanH committed Mar 15, 2024
1 parent 287fc3b commit 7817c6c
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 93 deletions.
53 changes: 25 additions & 28 deletions test/e2e/core/ArrowKeyNavContextMenu.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ test.describe('Using arrow keys to navigate context menu', () => {

test('Testing layer contextmenu', async () => {
await page.waitForTimeout(500);
await page.click('body > mapml-viewer');
await page.waitForTimeout(500);
await page.locator('mapml-viewer').focus();
await page.keyboard.press('Tab');
await page.keyboard.press('Tab');

await page.keyboard.press('Tab');
Expand Down Expand Up @@ -62,18 +62,17 @@ test.describe('Using arrow keys to navigate context menu', () => {
);
expect(activeElement).toEqual('Copy Layer (<kbd>L</kbd>)');

await page.click('body > mapml-viewer');
await page.locator('mapml-viewer').click();

let hide = await page.$eval(
'body > mapml-viewer',
(viewer) => viewer._map.contextMenu._layerMenu.hidden
);
expect(hide).toEqual(true);
let hidden = await page
.locator('mapml-viewer')
.evaluate((viewer) => viewer._map.contextMenu._layerMenu.hidden);
expect(hidden).toEqual(true);
});

test('Testing Extent layer contextmenu', async () => {
await page.waitForTimeout(500);
await page.click('body > mapml-viewer');
await page.locator('mapml-viewer').click();
await page.waitForTimeout(500);
await page.keyboard.press('Tab');
await page.keyboard.press('Tab');
Expand Down Expand Up @@ -112,20 +111,18 @@ test.describe('Using arrow keys to navigate context menu', () => {
expect(activeElement).toEqual('Zoom To Sub-layer (<kbd>Z</kbd>)');

await page.keyboard.press('Escape');
let hide = await page.$eval(
'body > mapml-viewer',
(viewer) => viewer._map.contextMenu._extentLayerMenu.hidden
);
expect(hide).toEqual(true);
let hidden = await page
.locator('mapml-viewer')
.evaluate((viewer) => viewer._map.contextMenu._extentLayerMenu.hidden);
expect(hidden).toEqual(true);

await page.keyboard.press('Shift+F10');

await page.click('body > mapml-viewer');
hide = await page.$eval(
'body > mapml-viewer',
(viewer) => viewer._map.contextMenu._extentLayerMenu.hidden
);
expect(hide).toEqual(true);
await page.locator('mapml-viewer').click();
hidden = await page
.locator('mapml-viewer')
.evaluate((viewer) => viewer._map.contextMenu._extentLayerMenu.hidden);
expect(hidden).toEqual(true);

// Ensuring the extent is still being revealed after layercontrol was closed and reopened
await page.keyboard.press('Tab');
Expand All @@ -143,14 +140,15 @@ test.describe('Using arrow keys to navigate context menu', () => {
await page.keyboard.press('Tab');
await page.keyboard.press('Tab');
await page.keyboard.press('Shift+F10');
await page.waitForTimeout(500);
activeElement = await page.evaluate(
() => document.activeElement.shadowRoot.activeElement.innerHTML
);
expect(activeElement).toEqual('Zoom To Sub-layer (<kbd>Z</kbd>)');
});

test('(partial) Up and Down Arrow keys to navigate the contextmenu', async () => {
await page.click('body > mapml-viewer', { button: 'right' });
await page.locator('mapml-viewer').click({ button: 'right' });
await page.keyboard.press('ArrowDown');

let activeElement = await page.evaluate(
Expand Down Expand Up @@ -192,7 +190,7 @@ test.describe('Using arrow keys to navigate context menu', () => {
});

test('Right and Left Arrow keys to navigate the contextmenu', async () => {
await page.click('body > mapml-viewer');
await page.locator('mapml-viewer').click();
await page.keyboard.press('Shift+F10');
await page.keyboard.press('ArrowDown');

Expand Down Expand Up @@ -262,16 +260,15 @@ test.describe('Using arrow keys to navigate context menu', () => {
);
expect(activeElement).toEqual('Copy (<kbd>C</kbd>)<span></span>');

let hide = await page.$eval(
'body > mapml-viewer',
(viewer) => viewer._map.contextMenu._copySubMenu.hidden
);
expect(hide).toEqual(true);
let hidden = await page
.locator('mapml-viewer')
.evaluate((viewer) => viewer._map.contextMenu._copySubMenu.hidden);
expect(hidden).toEqual(true);
});

test('(full) Up and Down Arrow keys to navigate the contextmenu', async () => {
await page.waitForTimeout(500);
await page.click('body > mapml-viewer');
await page.locator('mapml-viewer').click();
await page.keyboard.press('ArrowRight');
await page.waitForTimeout(500);
await page.keyboard.press('ArrowRight');
Expand Down
16 changes: 7 additions & 9 deletions test/e2e/core/layerContextMenuKeyboard.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,10 @@ test.describe('Playwright Layer Context Menu Tests', () => {
await expect(zoom).toBe(0);

await page.locator('mapml-viewer').press('Tab');
await page.locator('[aria-label="Zoom in"]').press('Tab');
await page.locator('[aria-label="Zoom out"]').press('Tab');
await page.locator('[aria-label="Reload"]').press('Tab');
await page.getByLabel('Zoom in').press('Tab');
await page.getByLabel('Zoom out').press('Tab');
await page.getByLabel('Reload').press('Tab');
await page.getByRole('button', { name: 'View Fullscreen' }).press('Tab');

// layer control is next tab stop, opened by hover or Enter key
await page.locator('a[role="button"]').nth(3).press('Enter');
Expand Down Expand Up @@ -70,8 +71,7 @@ test.describe('Playwright Layer Context Menu Tests', () => {
await page.locator('[aria-label="Zoom out"]').press('Tab');

await page.locator('[aria-label="Reload"]').press('Tab');
// tab past features, focus on layer control
await page.locator('a[role="button"]').nth(2).press('Tab');
await page.getByRole('button', { name: 'View Fullscreen' }).press('Tab');
// Press Enter on layer control
await page.locator('a[role="button"]').nth(3).press('Enter');
// Press Shift+F10 to bring up layer context menu on first layer
Expand Down Expand Up @@ -104,8 +104,7 @@ test.describe('Playwright Layer Context Menu Tests', () => {
await page.locator('[aria-label="Zoom in"]').press('Tab');
await page.locator('[aria-label="Zoom out"]').press('Tab');
await page.locator('[aria-label="Reload"]').press('Tab');
// tab past features, focus on layer control
await page.locator('a[role="button"]').nth(2).press('Tab');
await page.getByRole('button', { name: 'View Fullscreen' }).press('Tab');
// Press Enter on layer control
await page.locator('a[role="button"]').nth(3).press('Enter');
// Press Shift+F10 to bring up layer context menu on first layer
Expand Down Expand Up @@ -143,8 +142,7 @@ test.describe('Playwright Layer Context Menu Tests', () => {
await page.locator('[aria-label="Zoom in"]').press('Tab');
await page.locator('[aria-label="Zoom out"]').press('Tab');
await page.locator('[aria-label="Reload"]').press('Tab');
// tab past features, focus on layer control
await page.locator('a[role="button"]').nth(2).press('Tab');
await page.getByRole('button', { name: 'View Fullscreen' }).press('Tab');
// Press Enter on layer control
await page.locator('a[role="button"]').nth(3).press('Enter');
// Press Shift+F10 to bring up layer context menu on first layer
Expand Down
73 changes: 17 additions & 56 deletions test/e2e/core/popupTabNavigation.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,91 +29,52 @@ test.describe('Playwright Keyboard Navigation + Query Layer Tests', () => {

await page.keyboard.press('Tab'); // focus feature
await page.keyboard.press('Enter'); // display popup with link in it
const h = await page.evaluateHandle(() =>
document.querySelector('mapml-viewer')
const viewer = page.locator('mapml-viewer');
let f = await viewer.evaluate(
(viewer) => viewer.shadowRoot.activeElement.className
);
const nh = await page.evaluateHandle((doc) => doc.shadowRoot, h);
const rh = await page.evaluateHandle((root) => root.activeElement, nh);
const f = await (
await page.evaluateHandle((elem) => elem.className, rh)
).jsonValue();
expect(f).toEqual('mapml-popup-content');

await page.keyboard.press('Tab'); // focus link
const h2 = await page.evaluateHandle(() =>
document.querySelector('mapml-viewer')
let f2 = await viewer.evaluate(
(viewer) => viewer.shadowRoot.activeElement.tagName
);
const nh2 = await page.evaluateHandle((doc) => doc.shadowRoot, h2);
const rh2 = await page.evaluateHandle((root) => root.activeElement, nh2);
const f2 = await (
await page.evaluateHandle((elem) => elem.tagName, rh2)
).jsonValue();
expect(f2.toUpperCase()).toEqual('A');

await page.keyboard.press('Tab'); // focus on "zoom to here" link
const h3 = await page.evaluateHandle(() =>
document.querySelector('mapml-viewer')
let f3 = await viewer.evaluate(
(viewer) => viewer.shadowRoot.activeElement.tagName
);
const nh3 = await page.evaluateHandle((doc) => doc.shadowRoot, h3);
const rh3 = await page.evaluateHandle((root) => root.activeElement, nh3);
const f3 = await (
await page.evaluateHandle((elem) => elem.tagName, rh3)
).jsonValue();
expect(f3.toUpperCase()).toEqual('A');

await page.keyboard.press('Tab'); // focus on |< affordance
const h4 = await page.evaluateHandle(() =>
document.querySelector('mapml-viewer')
let f4 = await viewer.evaluate(
(viewer) => viewer.shadowRoot.activeElement.title
);
const nh4 = await page.evaluateHandle((doc) => doc.shadowRoot, h4);
const rh4 = await page.evaluateHandle((root) => root.activeElement, nh4);
const f4 = await (
await page.evaluateHandle((elem) => elem.title, rh4)
).jsonValue();
expect(f4).toEqual('Focus Map');

await page.keyboard.press('Tab'); // focus on < affordance
const h5 = await page.evaluateHandle(() =>
document.querySelector('mapml-viewer')
let f5 = await viewer.evaluate(
(viewer) => viewer.shadowRoot.activeElement.title
);
const nh5 = await page.evaluateHandle((doc) => doc.shadowRoot, h5);
const rh5 = await page.evaluateHandle((root) => root.activeElement, nh5);
const f5 = await (
await page.evaluateHandle((elem) => elem.title, rh5)
).jsonValue();
expect(f5).toEqual('Previous Feature');

await page.keyboard.press('Tab'); // focus on > affordance
const h6 = await page.evaluateHandle(() =>
document.querySelector('mapml-viewer')
let f6 = await viewer.evaluate(
(viewer) => viewer.shadowRoot.activeElement.title
);
const nh6 = await page.evaluateHandle((doc) => doc.shadowRoot, h6);
const rh6 = await page.evaluateHandle((root) => root.activeElement, nh6);
const f6 = await (
await page.evaluateHandle((elem) => elem.title, rh6)
).jsonValue();
expect(f6).toEqual('Next Feature');

await page.keyboard.press('Tab'); // focus on >| affordance
const h7 = await page.evaluateHandle(() =>
document.querySelector('mapml-viewer')
let f7 = await viewer.evaluate(
(viewer) => viewer.shadowRoot.activeElement.title
);
const nh7 = await page.evaluateHandle((doc) => doc.shadowRoot, h7);
const rh7 = await page.evaluateHandle((root) => root.activeElement, nh7);
const f7 = await (
await page.evaluateHandle((elem) => elem.title, rh7)
).jsonValue();
expect(f7).toEqual('Focus Controls');

await page.keyboard.press('Tab'); // focus on X dismiss popup affordance
const h8 = await page.evaluateHandle(() =>
document.querySelector('mapml-viewer')
let f8 = await viewer.evaluate(
(viewer) => viewer.shadowRoot.activeElement.className
);
const nh8 = await page.evaluateHandle((doc) => doc.shadowRoot, h8);
const rh8 = await page.evaluateHandle((root) => root.activeElement, nh8);
const f8 = await (
await page.evaluateHandle((elem) => elem.className, rh8)
).jsonValue();
expect(f8).toEqual('leaflet-popup-close-button');
});

Expand Down

0 comments on commit 7817c6c

Please sign in to comment.