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 👀

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

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

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

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

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

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

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.

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

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

src/plugins/imagery/components/ImageryView.vue

@@ -55,7 +55,7 @@
             <div
                 v-if="zoomFactor > 1"
                 class="c-imagery__hints"
-            >{{formatImageAltText}}</div>
+            >{{ formatImageAltText }}</div>
             <div
                 ref="focusedImageWrapper"
                 class="image-wrapper"