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:
Jesse Mazzella 2022-05-19 16:09:22 -07:00 committed by GitHub
parent 85fce3c456
commit 6521b888d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 97 additions and 92 deletions

View File

@ -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} */

View File

@ -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} */

View File

@ -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();
}); });
}); });

View File

@ -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', () => {

View File

@ -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', () => {

View File

@ -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', () => {

View File

@ -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.

View File

@ -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();

View File

@ -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",

View File

@ -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"