mirror of
https://github.com/nasa/openmct.git
synced 2025-06-06 09:21:43 +00:00
Enable lint enforcement on e2e tests and fix the existing errors (#5229)
* Add `e2e` folder to lint scripts
* Fix or add exceptions to all new linting errors
* fix an oopsie 👀
This commit is contained in:
parent
85fce3c456
commit
6521b888d6
@ -2,6 +2,7 @@
|
|||||||
// playwright.config.js
|
// playwright.config.js
|
||||||
// @ts-check
|
// @ts-check
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
const { devices } = require('@playwright/test');
|
const { devices } = require('@playwright/test');
|
||||||
|
|
||||||
/** @type {import('@playwright/test').PlaywrightTestConfig} */
|
/** @type {import('@playwright/test').PlaywrightTestConfig} */
|
||||||
|
@ -2,6 +2,7 @@
|
|||||||
// playwright.config.js
|
// playwright.config.js
|
||||||
// @ts-check
|
// @ts-check
|
||||||
|
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
const { devices } = require('@playwright/test');
|
const { devices } = require('@playwright/test');
|
||||||
|
|
||||||
/** @type {import('@playwright/test').PlaywrightTestConfig} */
|
/** @type {import('@playwright/test').PlaywrightTestConfig} */
|
||||||
|
@ -58,6 +58,6 @@ test.describe('Branding tests', () => {
|
|||||||
page.waitForEvent('popup'),
|
page.waitForEvent('popup'),
|
||||||
page.locator('text=click here for third party licensing information').click()
|
page.locator('text=click here for third party licensing information').click()
|
||||||
]);
|
]);
|
||||||
expect(page2.waitForURL('**\/licenses**')).toBeTruthy();
|
expect(page2.waitForURL('**/licenses**')).toBeTruthy();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
@ -25,6 +25,8 @@ This test suite is dedicated to tests which verify the basic operations surround
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
const { test } = require('../../../fixtures.js');
|
const { test } = require('../../../fixtures.js');
|
||||||
|
// FIXME: Remove this eslint exception once tests are implemented
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
const { expect } = require('@playwright/test');
|
const { expect } = require('@playwright/test');
|
||||||
|
|
||||||
test.describe('ExportAsJSON', () => {
|
test.describe('ExportAsJSON', () => {
|
||||||
|
@ -25,6 +25,8 @@ This test suite is dedicated to tests which verify the basic operations surround
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
const { test } = require('../../../fixtures.js');
|
const { test } = require('../../../fixtures.js');
|
||||||
|
// FIXME: Remove this eslint exception once tests are implemented
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
const { expect } = require('@playwright/test');
|
const { expect } = require('@playwright/test');
|
||||||
|
|
||||||
test.describe('ExportAsJSON', () => {
|
test.describe('ExportAsJSON', () => {
|
||||||
|
@ -235,113 +235,113 @@ test.describe('Example Imagery', () => {
|
|||||||
// ('If the imagery view is not in pause mode, it should be updated when new images come in');
|
// ('If the imagery view is not in pause mode, it should be updated when new images come in');
|
||||||
const backgroundImageSelector = '.c-imagery__main-image__background-image';
|
const backgroundImageSelector = '.c-imagery__main-image__background-image';
|
||||||
test('Example Imagery in Display layout', async ({ page }) => {
|
test('Example Imagery in Display layout', async ({ page }) => {
|
||||||
// Go to baseURL
|
// Go to baseURL
|
||||||
await page.goto('/', { waitUntil: 'networkidle' });
|
await page.goto('/', { waitUntil: 'networkidle' });
|
||||||
|
|
||||||
// Click the Create button
|
// Click the Create button
|
||||||
await page.click('button:has-text("Create")');
|
await page.click('button:has-text("Create")');
|
||||||
|
|
||||||
// Click text=Example Imagery
|
// Click text=Example Imagery
|
||||||
await page.click('text=Example Imagery');
|
await page.click('text=Example Imagery');
|
||||||
|
|
||||||
// Clear and set Image load delay (milliseconds)
|
// Clear and set Image load delay (milliseconds)
|
||||||
await page.click('input[type="number"]', {clickCount: 3})
|
await page.click('input[type="number"]', {clickCount: 3});
|
||||||
await page.type('input[type="number"]', "20")
|
await page.type('input[type="number"]', "20");
|
||||||
|
|
||||||
// Click text=OK
|
// Click text=OK
|
||||||
await Promise.all([
|
await Promise.all([
|
||||||
page.waitForNavigation({waitUntil: 'networkidle'}),
|
page.waitForNavigation({waitUntil: 'networkidle'}),
|
||||||
page.click('text=OK'),
|
page.click('text=OK'),
|
||||||
//Wait for Save Banner to appear
|
//Wait for Save Banner to appear
|
||||||
page.waitForSelector('.c-message-banner__message')
|
page.waitForSelector('.c-message-banner__message')
|
||||||
]);
|
]);
|
||||||
// Wait until Save Banner is gone
|
// Wait until Save Banner is gone
|
||||||
await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
|
await page.waitForSelector('.c-message-banner__message', { state: 'detached'});
|
||||||
await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Example Imagery');
|
await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Example Imagery');
|
||||||
const bgImageLocator = await page.locator(backgroundImageSelector);
|
const bgImageLocator = await page.locator(backgroundImageSelector);
|
||||||
await bgImageLocator.hover();
|
await bgImageLocator.hover();
|
||||||
|
|
||||||
// Click previous image button
|
// Click previous image button
|
||||||
const previousImageButton = await page.locator('.c-nav--prev');
|
const previousImageButton = await page.locator('.c-nav--prev');
|
||||||
await previousImageButton.click();
|
await previousImageButton.click();
|
||||||
|
|
||||||
// Verify previous image
|
// Verify previous image
|
||||||
const selectedImage = page.locator('.selected');
|
const selectedImage = page.locator('.selected');
|
||||||
await expect(selectedImage).toBeVisible();
|
await expect(selectedImage).toBeVisible();
|
||||||
|
|
||||||
// Zoom in
|
// Zoom in
|
||||||
const originalImageDimensions = await page.locator(backgroundImageSelector).boundingBox();
|
const originalImageDimensions = await page.locator(backgroundImageSelector).boundingBox();
|
||||||
await bgImageLocator.hover();
|
await bgImageLocator.hover();
|
||||||
const deltaYStep = 100; // equivalent to 1x zoom
|
const deltaYStep = 100; // equivalent to 1x zoom
|
||||||
await page.mouse.wheel(0, deltaYStep * 2);
|
await page.mouse.wheel(0, deltaYStep * 2);
|
||||||
const zoomedBoundingBox = await bgImageLocator.boundingBox();
|
const zoomedBoundingBox = await bgImageLocator.boundingBox();
|
||||||
const imageCenterX = zoomedBoundingBox.x + zoomedBoundingBox.width / 2;
|
const imageCenterX = zoomedBoundingBox.x + zoomedBoundingBox.width / 2;
|
||||||
const imageCenterY = zoomedBoundingBox.y + zoomedBoundingBox.height / 2;
|
const imageCenterY = zoomedBoundingBox.y + zoomedBoundingBox.height / 2;
|
||||||
|
|
||||||
// Wait for zoom animation to finish
|
// Wait for zoom animation to finish
|
||||||
await bgImageLocator.hover();
|
await bgImageLocator.hover();
|
||||||
const imageMouseZoomedIn = await page.locator(backgroundImageSelector).boundingBox();
|
const imageMouseZoomedIn = await page.locator(backgroundImageSelector).boundingBox();
|
||||||
expect(imageMouseZoomedIn.height).toBeGreaterThan(originalImageDimensions.height);
|
expect(imageMouseZoomedIn.height).toBeGreaterThan(originalImageDimensions.height);
|
||||||
expect(imageMouseZoomedIn.width).toBeGreaterThan(originalImageDimensions.width);
|
expect(imageMouseZoomedIn.width).toBeGreaterThan(originalImageDimensions.width);
|
||||||
|
|
||||||
// Center the mouse pointer
|
// Center the mouse pointer
|
||||||
await page.mouse.move(imageCenterX, imageCenterY);
|
await page.mouse.move(imageCenterX, imageCenterY);
|
||||||
|
|
||||||
// Pan Imagery Hints
|
// Pan Imagery Hints
|
||||||
console.log('process.platform is '+process.platform);
|
console.log('process.platform is ' + process.platform);
|
||||||
const expectedAltText = process.platform === 'linux' ? 'Ctrl+Alt drag to pan' : 'Alt drag to pan';
|
const expectedAltText = process.platform === 'linux' ? 'Ctrl+Alt drag to pan' : 'Alt drag to pan';
|
||||||
const imageryHintsText = await page.locator('.c-imagery__hints').innerText();
|
const imageryHintsText = await page.locator('.c-imagery__hints').innerText();
|
||||||
expect(expectedAltText).toEqual(imageryHintsText);
|
expect(expectedAltText).toEqual(imageryHintsText);
|
||||||
|
|
||||||
// Click next image button
|
// Click next image button
|
||||||
const nextImageButton = await page.locator('.c-nav--next');
|
const nextImageButton = await page.locator('.c-nav--next');
|
||||||
await nextImageButton.click();
|
await nextImageButton.click();
|
||||||
|
|
||||||
// Click fixed timespan button
|
// Click fixed timespan button
|
||||||
await page.locator('.c-button__label >> text=Fixed Timespan').click();
|
await page.locator('.c-button__label >> text=Fixed Timespan').click();
|
||||||
|
|
||||||
// Click local clock
|
// Click local clock
|
||||||
await page.locator('.icon-clock >> text=Local Clock').click();
|
await page.locator('.icon-clock >> text=Local Clock').click();
|
||||||
|
|
||||||
// Zoom in on next image
|
// Zoom in on next image
|
||||||
await bgImageLocator.hover();
|
await bgImageLocator.hover();
|
||||||
await page.mouse.wheel(0, deltaYStep * 2);
|
await page.mouse.wheel(0, deltaYStep * 2);
|
||||||
|
|
||||||
// Wait for zoom animation to finish
|
// Wait for zoom animation to finish
|
||||||
await bgImageLocator.hover();
|
await bgImageLocator.hover();
|
||||||
const imageNextMouseZoomedIn = await page.locator(backgroundImageSelector).boundingBox();
|
const imageNextMouseZoomedIn = await page.locator(backgroundImageSelector).boundingBox();
|
||||||
expect(imageNextMouseZoomedIn.height).toBeGreaterThan(originalImageDimensions.height);
|
expect(imageNextMouseZoomedIn.height).toBeGreaterThan(originalImageDimensions.height);
|
||||||
expect(imageNextMouseZoomedIn.width).toBeGreaterThan(originalImageDimensions.width);
|
expect(imageNextMouseZoomedIn.width).toBeGreaterThan(originalImageDimensions.width);
|
||||||
|
|
||||||
// Click previous image button
|
// Click previous image button
|
||||||
await previousImageButton.click();
|
await previousImageButton.click();
|
||||||
|
|
||||||
// Verify previous image
|
// Verify previous image
|
||||||
await expect(selectedImage).toBeVisible();
|
await expect(selectedImage).toBeVisible();
|
||||||
|
|
||||||
// Wait 20ms to verify no new image has come in
|
// Wait 20ms to verify no new image has come in
|
||||||
await page.waitForTimeout(21);
|
await page.waitForTimeout(21);
|
||||||
|
|
||||||
//Get background-image url from background-image css prop
|
//Get background-image url from background-image css prop
|
||||||
const backgroundImage = await page.locator('.c-imagery__main-image__background-image');
|
const backgroundImage = await page.locator('.c-imagery__main-image__background-image');
|
||||||
let backgroundImageUrl = await backgroundImage.evaluate((el) => {
|
let backgroundImageUrl = await backgroundImage.evaluate((el) => {
|
||||||
return window.getComputedStyle(el).getPropertyValue('background-image').match(/url\(([^)]+)\)/)[1];
|
return window.getComputedStyle(el).getPropertyValue('background-image').match(/url\(([^)]+)\)/)[1];
|
||||||
});
|
});
|
||||||
let backgroundImageUrl1 = backgroundImageUrl.slice(1, -1); //forgive me, padre
|
let backgroundImageUrl1 = backgroundImageUrl.slice(1, -1); //forgive me, padre
|
||||||
console.log('backgroundImageUrl1 ' + backgroundImageUrl1)
|
console.log('backgroundImageUrl1 ' + backgroundImageUrl1);
|
||||||
|
|
||||||
// sleep 21ms
|
// sleep 21ms
|
||||||
await page.waitForTimeout(21);
|
await page.waitForTimeout(21);
|
||||||
|
|
||||||
// Verify next image has updated
|
// Verify next image has updated
|
||||||
let backgroundImageUrlNext = await backgroundImage.evaluate((el) => {
|
let backgroundImageUrlNext = await backgroundImage.evaluate((el) => {
|
||||||
return window.getComputedStyle(el).getPropertyValue('background-image').match(/url\(([^)]+)\)/)[1];
|
return window.getComputedStyle(el).getPropertyValue('background-image').match(/url\(([^)]+)\)/)[1];
|
||||||
});
|
});
|
||||||
let backgroundImageUrl2 = backgroundImageUrlNext.slice(1, -1); //forgive me, padre
|
let backgroundImageUrl2 = backgroundImageUrlNext.slice(1, -1); //forgive me, padre
|
||||||
console.log('backgroundImageUrl2 ' + backgroundImageUrl2)
|
console.log('backgroundImageUrl2 ' + backgroundImageUrl2);
|
||||||
|
|
||||||
// Expect backgroundImageUrl2 to be greater then backgroundImageUrl1
|
// Expect backgroundImageUrl2 to be greater then backgroundImageUrl1
|
||||||
expect(backgroundImageUrl2 >= backgroundImageUrl1);
|
expect(backgroundImageUrl2 >= backgroundImageUrl1);
|
||||||
});
|
});
|
||||||
|
|
||||||
test.describe('Example Imagery in Flexible layout', () => {
|
test.describe('Example Imagery in Flexible layout', () => {
|
||||||
|
@ -242,6 +242,8 @@ async function saveOverlayPlot(page) {
|
|||||||
/**
|
/**
|
||||||
* @param {import('@playwright/test').Page} page
|
* @param {import('@playwright/test').Page} page
|
||||||
*/
|
*/
|
||||||
|
// FIXME: Remove this eslint exception once implemented
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
async function testLogPlotPixels(page) {
|
async function testLogPlotPixels(page) {
|
||||||
const pixelsMatch = await page.evaluate(async () => {
|
const pixelsMatch = await page.evaluate(async () => {
|
||||||
// TODO get canvas pixels at a few locations to make sure they're the correct color, to test that the plot comes out as expected.
|
// TODO get canvas pixels at a few locations to make sure they're the correct color, to test that the plot comes out as expected.
|
||||||
|
@ -76,9 +76,6 @@ test.describe('Time conductor input fields real-time mode', () => {
|
|||||||
//Go to baseURL
|
//Go to baseURL
|
||||||
await page.goto('/', { waitUntil: 'networkidle' });
|
await page.goto('/', { waitUntil: 'networkidle' });
|
||||||
|
|
||||||
// Set realtime "local clock" mode offsets
|
|
||||||
const timeInputs = page.locator('input.c-input--datetime');
|
|
||||||
|
|
||||||
// Click fixed timespan button
|
// Click fixed timespan button
|
||||||
await page.locator('.c-button__label >> text=Fixed Timespan').click();
|
await page.locator('.c-button__label >> text=Fixed Timespan').click();
|
||||||
|
|
||||||
|
@ -82,8 +82,8 @@
|
|||||||
"clean": "rm -rf ./dist ./node_modules ./package-lock.json",
|
"clean": "rm -rf ./dist ./node_modules ./package-lock.json",
|
||||||
"clean-test-lint": "npm run clean; npm install; npm run test; npm run lint",
|
"clean-test-lint": "npm run clean; npm install; npm run test; npm run lint",
|
||||||
"start": "node app.js",
|
"start": "node app.js",
|
||||||
"lint": "eslint example src --ext .js,.vue openmct.js",
|
"lint": "eslint example src e2e --ext .js,.vue openmct.js",
|
||||||
"lint:fix": "eslint example src --ext .js,.vue openmct.js --fix",
|
"lint:fix": "eslint example src e2e --ext .js,.vue openmct.js --fix",
|
||||||
"build:prod": "cross-env webpack --config webpack.prod.js",
|
"build:prod": "cross-env webpack --config webpack.prod.js",
|
||||||
"build:dev": "webpack --config webpack.dev.js",
|
"build:dev": "webpack --config webpack.dev.js",
|
||||||
"build:coverage": "webpack --config webpack.coverage.js",
|
"build:coverage": "webpack --config webpack.coverage.js",
|
||||||
|
@ -55,7 +55,7 @@
|
|||||||
<div
|
<div
|
||||||
v-if="zoomFactor > 1"
|
v-if="zoomFactor > 1"
|
||||||
class="c-imagery__hints"
|
class="c-imagery__hints"
|
||||||
>{{formatImageAltText}}</div>
|
>{{ formatImageAltText }}</div>
|
||||||
<div
|
<div
|
||||||
ref="focusedImageWrapper"
|
ref="focusedImageWrapper"
|
||||||
class="image-wrapper"
|
class="image-wrapper"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user