From 6521b888d6f52322bf63cad91a855c6a66994024 Mon Sep 17 00:00:00 2001 From: Jesse Mazzella Date: Thu, 19 May 2022 16:09:22 -0700 Subject: [PATCH] Enable lint enforcement on e2e tests and fix the existing errors (#5229) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add `e2e` folder to lint scripts * Fix or add exceptions to all new linting errors * fix an oopsie 👀 --- e2e/playwright-ci.config.js | 1 + e2e/playwright-local.config.js | 1 + e2e/tests/branding.e2e.spec.js | 2 +- .../ExportAsJSON/exportAsJson.e2e.spec.js | 2 + .../ImportAsJSON/importAsJson.e2e.spec.js | 2 + .../imagery/exampleImagery.e2e.spec.js | 170 +++++++++--------- e2e/tests/plugins/plot/logPlot.e2e.spec.js | 2 + .../timeConductor/timeConductor.e2e.spec.js | 3 - package.json | 4 +- .../imagery/components/ImageryView.vue | 2 +- 10 files changed, 97 insertions(+), 92 deletions(-) diff --git a/e2e/playwright-ci.config.js b/e2e/playwright-ci.config.js index 8f241a8cd5..92b55f17d8 100644 --- a/e2e/playwright-ci.config.js +++ b/e2e/playwright-ci.config.js @@ -2,6 +2,7 @@ // playwright.config.js // @ts-check +// eslint-disable-next-line no-unused-vars const { devices } = require('@playwright/test'); /** @type {import('@playwright/test').PlaywrightTestConfig} */ diff --git a/e2e/playwright-local.config.js b/e2e/playwright-local.config.js index f5b2bdb5c0..fe3145f310 100644 --- a/e2e/playwright-local.config.js +++ b/e2e/playwright-local.config.js @@ -2,6 +2,7 @@ // playwright.config.js // @ts-check +// eslint-disable-next-line no-unused-vars const { devices } = require('@playwright/test'); /** @type {import('@playwright/test').PlaywrightTestConfig} */ diff --git a/e2e/tests/branding.e2e.spec.js b/e2e/tests/branding.e2e.spec.js index f86cc23b2c..dc6b94be28 100644 --- a/e2e/tests/branding.e2e.spec.js +++ b/e2e/tests/branding.e2e.spec.js @@ -58,6 +58,6 @@ test.describe('Branding tests', () => { page.waitForEvent('popup'), page.locator('text=click here for third party licensing information').click() ]); - expect(page2.waitForURL('**\/licenses**')).toBeTruthy(); + expect(page2.waitForURL('**/licenses**')).toBeTruthy(); }); }); diff --git a/e2e/tests/plugins/ExportAsJSON/exportAsJson.e2e.spec.js b/e2e/tests/plugins/ExportAsJSON/exportAsJson.e2e.spec.js index f2095b351c..6da6c0287f 100644 --- a/e2e/tests/plugins/ExportAsJSON/exportAsJson.e2e.spec.js +++ b/e2e/tests/plugins/ExportAsJSON/exportAsJson.e2e.spec.js @@ -25,6 +25,8 @@ This test suite is dedicated to tests which verify the basic operations surround */ 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'); test.describe('ExportAsJSON', () => { diff --git a/e2e/tests/plugins/ImportAsJSON/importAsJson.e2e.spec.js b/e2e/tests/plugins/ImportAsJSON/importAsJson.e2e.spec.js index 8b61fdf23d..6469e8f157 100644 --- a/e2e/tests/plugins/ImportAsJSON/importAsJson.e2e.spec.js +++ b/e2e/tests/plugins/ImportAsJSON/importAsJson.e2e.spec.js @@ -25,6 +25,8 @@ This test suite is dedicated to tests which verify the basic operations surround */ 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'); test.describe('ExportAsJSON', () => { diff --git a/e2e/tests/plugins/imagery/exampleImagery.e2e.spec.js b/e2e/tests/plugins/imagery/exampleImagery.e2e.spec.js index 1bf9d8bfb6..ef31628c61 100644 --- a/e2e/tests/plugins/imagery/exampleImagery.e2e.spec.js +++ b/e2e/tests/plugins/imagery/exampleImagery.e2e.spec.js @@ -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'); const backgroundImageSelector = '.c-imagery__main-image__background-image'; test('Example Imagery in Display layout', async ({ page }) => { - // Go to baseURL - await page.goto('/', { waitUntil: 'networkidle' }); + // Go to baseURL + await page.goto('/', { waitUntil: 'networkidle' }); - // Click the Create button - await page.click('button:has-text("Create")'); + // Click the Create button + await page.click('button:has-text("Create")'); - // Click text=Example Imagery - await page.click('text=Example Imagery'); + // Click text=Example Imagery + await page.click('text=Example Imagery'); - // Clear and set Image load delay (milliseconds) - await page.click('input[type="number"]', {clickCount: 3}) - await page.type('input[type="number"]', "20") + // Clear and set Image load delay (milliseconds) + await page.click('input[type="number"]', {clickCount: 3}); + await page.type('input[type="number"]', "20"); - // Click text=OK - await Promise.all([ - page.waitForNavigation({waitUntil: 'networkidle'}), - page.click('text=OK'), - //Wait for Save Banner to appear - page.waitForSelector('.c-message-banner__message') - ]); - // Wait until Save Banner is gone - await page.waitForSelector('.c-message-banner__message', { state: 'detached'}); - await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Example Imagery'); - const bgImageLocator = await page.locator(backgroundImageSelector); - await bgImageLocator.hover(); + // Click text=OK + await Promise.all([ + page.waitForNavigation({waitUntil: 'networkidle'}), + page.click('text=OK'), + //Wait for Save Banner to appear + page.waitForSelector('.c-message-banner__message') + ]); + // Wait until Save Banner is gone + await page.waitForSelector('.c-message-banner__message', { state: 'detached'}); + await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Example Imagery'); + const bgImageLocator = await page.locator(backgroundImageSelector); + await bgImageLocator.hover(); - // Click previous image button - const previousImageButton = await page.locator('.c-nav--prev'); - await previousImageButton.click(); + // Click previous image button + const previousImageButton = await page.locator('.c-nav--prev'); + await previousImageButton.click(); - // Verify previous image - const selectedImage = page.locator('.selected'); - await expect(selectedImage).toBeVisible(); + // Verify previous image + const selectedImage = page.locator('.selected'); + await expect(selectedImage).toBeVisible(); - // Zoom in - const originalImageDimensions = await page.locator(backgroundImageSelector).boundingBox(); - await bgImageLocator.hover(); - const deltaYStep = 100; // equivalent to 1x zoom - await page.mouse.wheel(0, deltaYStep * 2); - const zoomedBoundingBox = await bgImageLocator.boundingBox(); - const imageCenterX = zoomedBoundingBox.x + zoomedBoundingBox.width / 2; - const imageCenterY = zoomedBoundingBox.y + zoomedBoundingBox.height / 2; + // Zoom in + const originalImageDimensions = await page.locator(backgroundImageSelector).boundingBox(); + await bgImageLocator.hover(); + const deltaYStep = 100; // equivalent to 1x zoom + await page.mouse.wheel(0, deltaYStep * 2); + const zoomedBoundingBox = await bgImageLocator.boundingBox(); + const imageCenterX = zoomedBoundingBox.x + zoomedBoundingBox.width / 2; + const imageCenterY = zoomedBoundingBox.y + zoomedBoundingBox.height / 2; - // Wait for zoom animation to finish - await bgImageLocator.hover(); - const imageMouseZoomedIn = await page.locator(backgroundImageSelector).boundingBox(); - expect(imageMouseZoomedIn.height).toBeGreaterThan(originalImageDimensions.height); - expect(imageMouseZoomedIn.width).toBeGreaterThan(originalImageDimensions.width); + // Wait for zoom animation to finish + await bgImageLocator.hover(); + const imageMouseZoomedIn = await page.locator(backgroundImageSelector).boundingBox(); + expect(imageMouseZoomedIn.height).toBeGreaterThan(originalImageDimensions.height); + expect(imageMouseZoomedIn.width).toBeGreaterThan(originalImageDimensions.width); - // Center the mouse pointer - await page.mouse.move(imageCenterX, imageCenterY); + // Center the mouse pointer + await page.mouse.move(imageCenterX, imageCenterY); - // Pan Imagery Hints - console.log('process.platform is '+process.platform); - const expectedAltText = process.platform === 'linux' ? 'Ctrl+Alt drag to pan' : 'Alt drag to pan'; - const imageryHintsText = await page.locator('.c-imagery__hints').innerText(); - expect(expectedAltText).toEqual(imageryHintsText); + // Pan Imagery Hints + console.log('process.platform is ' + process.platform); + const expectedAltText = process.platform === 'linux' ? 'Ctrl+Alt drag to pan' : 'Alt drag to pan'; + const imageryHintsText = await page.locator('.c-imagery__hints').innerText(); + expect(expectedAltText).toEqual(imageryHintsText); - // Click next image button - const nextImageButton = await page.locator('.c-nav--next'); - await nextImageButton.click(); + // Click next image button + const nextImageButton = await page.locator('.c-nav--next'); + await nextImageButton.click(); - // Click fixed timespan button - await page.locator('.c-button__label >> text=Fixed Timespan').click(); + // Click fixed timespan button + await page.locator('.c-button__label >> text=Fixed Timespan').click(); - // Click local clock - await page.locator('.icon-clock >> text=Local Clock').click(); + // Click local clock + await page.locator('.icon-clock >> text=Local Clock').click(); - // Zoom in on next image - await bgImageLocator.hover(); - await page.mouse.wheel(0, deltaYStep * 2); + // Zoom in on next image + await bgImageLocator.hover(); + await page.mouse.wheel(0, deltaYStep * 2); - // Wait for zoom animation to finish - await bgImageLocator.hover(); - const imageNextMouseZoomedIn = await page.locator(backgroundImageSelector).boundingBox(); - expect(imageNextMouseZoomedIn.height).toBeGreaterThan(originalImageDimensions.height); - expect(imageNextMouseZoomedIn.width).toBeGreaterThan(originalImageDimensions.width); + // Wait for zoom animation to finish + await bgImageLocator.hover(); + const imageNextMouseZoomedIn = await page.locator(backgroundImageSelector).boundingBox(); + expect(imageNextMouseZoomedIn.height).toBeGreaterThan(originalImageDimensions.height); + expect(imageNextMouseZoomedIn.width).toBeGreaterThan(originalImageDimensions.width); - // Click previous image button - await previousImageButton.click(); + // Click previous image button + await previousImageButton.click(); - // Verify previous image - await expect(selectedImage).toBeVisible(); + // Verify previous image + await expect(selectedImage).toBeVisible(); - // Wait 20ms to verify no new image has come in - await page.waitForTimeout(21); + // Wait 20ms to verify no new image has come in + await page.waitForTimeout(21); - //Get background-image url from background-image css prop - const backgroundImage = await page.locator('.c-imagery__main-image__background-image'); - let backgroundImageUrl = await backgroundImage.evaluate((el) => { - return window.getComputedStyle(el).getPropertyValue('background-image').match(/url\(([^)]+)\)/)[1]; - }); - let backgroundImageUrl1 = backgroundImageUrl.slice(1, -1); //forgive me, padre - console.log('backgroundImageUrl1 ' + backgroundImageUrl1) + //Get background-image url from background-image css prop + const backgroundImage = await page.locator('.c-imagery__main-image__background-image'); + let backgroundImageUrl = await backgroundImage.evaluate((el) => { + return window.getComputedStyle(el).getPropertyValue('background-image').match(/url\(([^)]+)\)/)[1]; + }); + let backgroundImageUrl1 = backgroundImageUrl.slice(1, -1); //forgive me, padre + console.log('backgroundImageUrl1 ' + backgroundImageUrl1); - // sleep 21ms - await page.waitForTimeout(21); + // sleep 21ms + await page.waitForTimeout(21); - // Verify next image has updated - let backgroundImageUrlNext = await backgroundImage.evaluate((el) => { - return window.getComputedStyle(el).getPropertyValue('background-image').match(/url\(([^)]+)\)/)[1]; - }); - let backgroundImageUrl2 = backgroundImageUrlNext.slice(1, -1); //forgive me, padre - console.log('backgroundImageUrl2 ' + backgroundImageUrl2) + // Verify next image has updated + let backgroundImageUrlNext = await backgroundImage.evaluate((el) => { + return window.getComputedStyle(el).getPropertyValue('background-image').match(/url\(([^)]+)\)/)[1]; + }); + let backgroundImageUrl2 = backgroundImageUrlNext.slice(1, -1); //forgive me, padre + console.log('backgroundImageUrl2 ' + backgroundImageUrl2); - // Expect backgroundImageUrl2 to be greater then backgroundImageUrl1 - expect(backgroundImageUrl2 >= backgroundImageUrl1); + // Expect backgroundImageUrl2 to be greater then backgroundImageUrl1 + expect(backgroundImageUrl2 >= backgroundImageUrl1); }); test.describe('Example Imagery in Flexible layout', () => { diff --git a/e2e/tests/plugins/plot/logPlot.e2e.spec.js b/e2e/tests/plugins/plot/logPlot.e2e.spec.js index 1e040c402f..2dfd704d4a 100644 --- a/e2e/tests/plugins/plot/logPlot.e2e.spec.js +++ b/e2e/tests/plugins/plot/logPlot.e2e.spec.js @@ -242,6 +242,8 @@ async function saveOverlayPlot(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) { 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. diff --git a/e2e/tests/plugins/timeConductor/timeConductor.e2e.spec.js b/e2e/tests/plugins/timeConductor/timeConductor.e2e.spec.js index 7d68c74097..8ca1285aa8 100644 --- a/e2e/tests/plugins/timeConductor/timeConductor.e2e.spec.js +++ b/e2e/tests/plugins/timeConductor/timeConductor.e2e.spec.js @@ -76,9 +76,6 @@ test.describe('Time conductor input fields real-time mode', () => { //Go to baseURL await page.goto('/', { waitUntil: 'networkidle' }); - // Set realtime "local clock" mode offsets - const timeInputs = page.locator('input.c-input--datetime'); - // Click fixed timespan button await page.locator('.c-button__label >> text=Fixed Timespan').click(); diff --git a/package.json b/package.json index 8fd5cfe941..0497345d35 100644 --- a/package.json +++ b/package.json @@ -82,8 +82,8 @@ "clean": "rm -rf ./dist ./node_modules ./package-lock.json", "clean-test-lint": "npm run clean; npm install; npm run test; npm run lint", "start": "node app.js", - "lint": "eslint example src --ext .js,.vue openmct.js", - "lint:fix": "eslint example src --ext .js,.vue openmct.js --fix", + "lint": "eslint example src e2e --ext .js,.vue openmct.js", + "lint:fix": "eslint example src e2e --ext .js,.vue openmct.js --fix", "build:prod": "cross-env webpack --config webpack.prod.js", "build:dev": "webpack --config webpack.dev.js", "build:coverage": "webpack --config webpack.coverage.js", diff --git a/src/plugins/imagery/components/ImageryView.vue b/src/plugins/imagery/components/ImageryView.vue index 2d0cce2e60..ad63b623df 100644 --- a/src/plugins/imagery/components/ImageryView.vue +++ b/src/plugins/imagery/components/ImageryView.vue @@ -55,7 +55,7 @@
{{formatImageAltText}}
+ >{{ formatImageAltText }}