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

@@ -245,8 +245,8 @@ test('Example Imagery in Display layout', async ({ page }) => {
     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")
+    await page.click('input[type="number"]', {clickCount: 3});
+    await page.type('input[type="number"]', "20");
 
     // Click text=OK
     await Promise.all([
@@ -288,7 +288,7 @@ test('Example Imagery in Display layout', async ({ page }) => {
     await page.mouse.move(imageCenterX, imageCenterY);
 
     // 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 imageryHintsText = await page.locator('.c-imagery__hints').innerText();
     expect(expectedAltText).toEqual(imageryHintsText);
@@ -328,7 +328,7 @@ test('Example Imagery in Display layout', async ({ page }) => {
         return window.getComputedStyle(el).getPropertyValue('background-image').match(/url\(([^)]+)\)/)[1];
     });
     let backgroundImageUrl1 = backgroundImageUrl.slice(1, -1); //forgive me, padre
-  console.log('backgroundImageUrl1 ' + backgroundImageUrl1)
+    console.log('backgroundImageUrl1 ' + backgroundImageUrl1);
 
     // sleep 21ms
     await page.waitForTimeout(21);
@@ -338,7 +338,7 @@ test('Example Imagery in Display layout', async ({ page }) => {
         return window.getComputedStyle(el).getPropertyValue('background-image').match(/url\(([^)]+)\)/)[1];
     });
     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 >= backgroundImageUrl1);

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"