ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-19 05:07:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[e2e] Fix flaky exampleImagery zoom tests (#5517)

Browse Source 
* extract zoom logic to functions and update test

* Refactor other tests to use new button zoom fns

* e2e:ci ++exampleImagery

* try polling

* try wait for animations

* code review comments

* fix syntax
This commit is contained in:
Jesse Mazzella 2022-07-15 16:39:55 -07:00 committed by GitHub
parent 70115be727
commit 413cb13edf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 97 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
e2e/commonActions.js Normal file
View File

@ -0,0 +1,18 @@
/**
* Wait for all animations within the given element and subtrees to finish
* See: https://github.com/microsoft/playwright/issues/15660#issuecomment-1184911658
* @param {import('@playwright/test').Locator} locator
*/
function waitForAnimations(locator) {
return locator
.evaluate((element) =>
Promise.all(
element
.getAnimations({ subtree: true })
.map((animation) => animation.finished)));
}
// eslint-disable-next-line no-undef
module.exports = {
waitForAnimations
};

118
e2e/tests/plugins/imagery/exampleImagery.e2e.spec.js
View File

@ -28,6 +28,7 @@ but only assume that example imagery is present.
const { test } = require('../../../fixtures.js');
const { expect } = require('@playwright/test');
const { waitForAnimations } = require('../../../commonActions.js');
const backgroundImageSelector = '.c-imagery__main-image__background-image';
@ -159,78 +160,65 @@ test.describe('Example Imagery Object', () => {
});
test('Can use + - buttons to zoom on the image', async ({ page }) => {
await page.locator(backgroundImageSelector).hover({trial: true});
const zoomInBtn = page.locator('.t-btn-zoom-in').nth(0);
const zoomOutBtn = page.locator('.t-btn-zoom-out').nth(0);
// Get initial image dimensions
const initialBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
await zoomInBtn.click();
await zoomInBtn.click();
// wait for zoom animation to finish
await page.locator(backgroundImageSelector).hover({trial: true});
// Zoom in twice via button
await zoomIntoImageryByButton(page);
await zoomIntoImageryByButton(page);
// Get and assert zoomed in image dimensions
const zoomedInBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
expect(zoomedInBoundingBox.height).toBeGreaterThan(initialBoundingBox.height);
expect(zoomedInBoundingBox.width).toBeGreaterThan(initialBoundingBox.width);
await zoomOutBtn.click();
// wait for zoom animation to finish
await page.locator(backgroundImageSelector).hover({trial: true});
// Zoom out once via button
await zoomOutOfImageryByButton(page);
// Get and assert zoomed out image dimensions
const zoomedOutBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
expect(zoomedOutBoundingBox.height).toBeLessThan(zoomedInBoundingBox.height);
expect(zoomedOutBoundingBox.width).toBeLessThan(zoomedInBoundingBox.width);
// Zoom out again via button, assert against the initial image dimensions
await zoomOutOfImageryByButton(page);
const finalBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
expect(finalBoundingBox).toEqual(initialBoundingBox);
});
test('Can use the reset button to reset the image', async ({ page }, testInfo) => {
test.slow(testInfo.project === 'chrome-beta', "This test is slow in chrome-beta");
// wait for zoom animation to finish
await page.locator(backgroundImageSelector).hover({trial: true});
const zoomInBtn = page.locator('.t-btn-zoom-in').nth(0);
const zoomResetBtn = page.locator('.t-btn-zoom-reset').nth(0);
// Get initial image dimensions
const initialBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
await zoomInBtn.click();
// wait for zoom animation to finish
await page.locator(backgroundImageSelector).hover({trial: true});
await zoomInBtn.click();
// wait for zoom animation to finish
await page.locator(backgroundImageSelector).hover({trial: true});
// Zoom in twice via button
await zoomIntoImageryByButton(page);
await zoomIntoImageryByButton(page);
// Get and assert zoomed in image dimensions
const zoomedInBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
expect.soft(zoomedInBoundingBox.height).toBeGreaterThan(initialBoundingBox.height);
expect.soft(zoomedInBoundingBox.width).toBeGreaterThan(initialBoundingBox.width);
// wait for zoom animation to finish
// FIXME: The zoom is flakey, sometimes not returning to original dimensions
// https://github.com/nasa/openmct/issues/5491
await expect.poll(async () => {
await zoomResetBtn.click();
const boundingBox = await page.locator(backgroundImageSelector).boundingBox();
return boundingBox;
}, {
timeout: 10 * 1000
}).toEqual(initialBoundingBox);
// Reset pan and zoom and assert against initial image dimensions
await resetImageryPanAndZoom(page);
const finalBoundingBox = await page.locator(backgroundImageSelector).boundingBox();
expect(finalBoundingBox).toEqual(initialBoundingBox);
});
test('Using the zoom features does not pause telemetry', async ({ page }) => {
const pausePlayButton = page.locator('.c-button.pause-play');
// wait for zoom animation to finish
await page.locator(backgroundImageSelector).hover({trial: true});
// open the time conductor drop down
await page.locator('button:has-text("Fixed Timespan")').click();
// Click local clock
await page.locator('[data-testid="conductor-modeOption-realtime"]').click();
await expect.soft(pausePlayButton).not.toHaveClass(/is-paused/);
const zoomInBtn = page.locator('.t-btn-zoom-in').nth(0);
await zoomInBtn.click();
// wait for zoom animation to finish
await page.locator(backgroundImageSelector).hover({trial: true});
return expect(pausePlayButton).not.toHaveClass(/is-paused/);
// Zoom in via button
await zoomIntoImageryByButton(page);
await expect(pausePlayButton).not.toHaveClass(/is-paused/);
});
});
@ -777,3 +765,53 @@ async function assertBackgroundImageContrast(page, expected) {
expect(actual).toBe(expected);
}
/**
* Use the '+' button to zoom in. Hovers first if the toolbar is not visible
* and waits for the zoom animation to finish afterwards.
* @param {import('@playwright/test').Page} page
*/
async function zoomIntoImageryByButton(page) {
// FIXME: There should only be one set of imagery buttons, but there are two?
const zoomInBtn = page.locator("[role='toolbar'][aria-label='Image controls'] .t-btn-zoom-in").nth(0);
const backgroundImage = page.locator(backgroundImageSelector);
if (!(await zoomInBtn.isVisible())) {
await backgroundImage.hover({trial: true});
}
await zoomInBtn.click();
await waitForAnimations(backgroundImage);
}
/**
* Use the '-' button to zoom out. Hovers first if the toolbar is not visible
* and waits for the zoom animation to finish afterwards.
* @param {import('@playwright/test').Page} page
*/
async function zoomOutOfImageryByButton(page) {
// FIXME: There should only be one set of imagery buttons, but there are two?
const zoomOutBtn = page.locator("[role='toolbar'][aria-label='Image controls'] .t-btn-zoom-out").nth(0);
const backgroundImage = page.locator(backgroundImageSelector);
if (!(await zoomOutBtn.isVisible())) {
await backgroundImage.hover({trial: true});
}
await zoomOutBtn.click();
await waitForAnimations(backgroundImage);
}
/**
* Use the reset button to reset image pan and zoom. Hovers first if the toolbar is not visible
* and waits for the zoom animation to finish afterwards.
* @param {import('@playwright/test').Page} page
*/
async function resetImageryPanAndZoom(page) {
// FIXME: There should only be one set of imagery buttons, but there are two?
const panZoomResetBtn = page.locator("[role='toolbar'][aria-label='Image controls'] .t-btn-zoom-reset").nth(0);
const backgroundImage = page.locator(backgroundImageSelector);
if (!(await panZoomResetBtn.isVisible())) {
await backgroundImage.hover({trial: true});
}
await panZoomResetBtn.click();
await waitForAnimations(backgroundImage);
}

2
package.json
View File

@ -92,7 +92,7 @@
"test:firefox": "cross-env NODE_ENV=test NODE_OPTIONS=\"--max_old_space_size=4096\" karma start --single-run --browsers=FirefoxHeadless",
"test:debug": "cross-env NODE_ENV=debug karma start --no-single-run",
"test:e2e": "npx playwright test",
"test:e2e:ci": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome visual smoke branding default condition timeConductor clock persistence performance grandsearch tags",
"test:e2e:ci": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome visual smoke branding default exampleImagery condition timeConductor clock persistence performance grandsearch tags",
"test:e2e:local": "npx playwright test --config=e2e/playwright-local.config.js --project=chrome",
"test:e2e:updatesnapshots": "npx playwright test --config=e2e/playwright-ci.config.js --project=chrome --grep @snapshot --update-snapshots",
"test:e2e:visual": "percy exec --config ./e2e/.percy.yml -- npx playwright test --config=e2e/playwright-visual.config.js",