Merge pull request #1809 from headlamp-k8s/e2e-test-formatting

frontend: e2e-tests: Improve code formatting

e2e-tests/playwright.config.ts

@@ -19,7 +19,7 @@ const config: PlaywrightTestConfig = {
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
-    timeout: 5000
+    timeout: 5000,
   },
   /* Run tests in files in parallel */
   fullyParallel: true,

e2e-tests/tests/dynamicCluster.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { expect, test } from '@playwright/test';
 import { HeadlampPage } from './headlampPage';
 const yaml = require('yaml');
 const fs = require('fs').promises;
@@ -8,7 +8,10 @@ const exec = util.promisify(require('child_process').exec);
 test('There is cluster choose button and main cluster is selected', async ({ page }) => {
   const headlampPage = new HeadlampPage(page);
   await headlampPage.authenticate();
-  await headlampPage.pageLocatorContent('button:has-text("Our Cluster Chooser button. Cluster: main")', 'Our Cluster Chooser button. Cluster: main');
+  await headlampPage.pageLocatorContent(
+    'button:has-text("Our Cluster Chooser button. Cluster: main")',
+    'Our Cluster Chooser button. Cluster: main'
+  );
 });
 
 test('Store modified kubeconfig to IndexDB and check if present', async ({ page }) => {
@@ -46,7 +49,7 @@ test('check test is present in cluster and working', async ({ page }) => {
   await headlampPage.pageLocatorContent('h2:has-text("Overview")', 'Overview');
 });
 
-const getBase64EncodedKubeconfig = async (page) => {
+const getBase64EncodedKubeconfig = async () => {
   // Use kubectl command-line tool to get the kubeconfig
   const { stdout, stderr } = await exec('kubectl config view --output json');
   if (stderr) {
@@ -70,17 +73,20 @@ const getBase64EncodedKubeconfig = async (page) => {
   // Get the contents of certificate-authority file and convert to base64
   const caFilePath = kubeconfig.clusters[0].cluster['certificate-authority'];
   const caFileContent = await fs.readFile(caFilePath, 'utf-8');
-  kubeconfig.clusters[0].cluster['certificate-authority-data'] = Buffer.from(caFileContent).toString('base64');
+  kubeconfig.clusters[0].cluster['certificate-authority-data'] =
+    Buffer.from(caFileContent).toString('base64');
 
   // Get the contents of client-certificate file and convert to base64
   const clientCertFilePath = kubeconfig.users[0].user['client-certificate'];
   const clientCertFileContent = await fs.readFile(clientCertFilePath, 'utf-8');
-  kubeconfig.users[0].user['client-certificate-data'] = Buffer.from(clientCertFileContent).toString('base64');
+  kubeconfig.users[0].user['client-certificate-data'] =
+    Buffer.from(clientCertFileContent).toString('base64');
 
   // Get the contents of client-key file and convert to base64
   const clientKeyFilePath = kubeconfig.users[0].user['client-key'];
   const clientKeyFileContent = await fs.readFile(clientKeyFilePath, 'utf-8');
-  kubeconfig.users[0].user['client-key-data'] = Buffer.from(clientKeyFileContent).toString('base64');
+  kubeconfig.users[0].user['client-key-data'] =
+    Buffer.from(clientKeyFileContent).toString('base64');
 
   // Remove client-key, client-certificate, and certificate-authority keys
   delete kubeconfig.users[0].user['client-key'];
@@ -97,7 +103,7 @@ const getBase64EncodedKubeconfig = async (page) => {
 };
 
 const saveKubeconfigToIndexDB = async (page, base64EncodedKubeconfig) => {
-  await page.evaluate((base64EncodedKubeconfig) => {
+  await page.evaluate(base64EncodedKubeconfig => {
     // Open or create an IndexDB database
     const request = indexedDB.open('kubeconfigs', 1);
 
@@ -140,7 +146,7 @@ const saveKubeconfigToIndexDB = async (page, base64EncodedKubeconfig) => {
   }, base64EncodedKubeconfig);
 };
 
-const getKubeconfigFromIndexDB = async (page) => {
+const getKubeconfigFromIndexDB = async page => {
   const storedKubeconfig = await page.evaluate(() => {
     return new Promise((resolve, reject) => {
       const request = indexedDB.open('kubeconfigs', 1);

e2e-tests/tests/headlamp.spec.ts

@@ -1,7 +1,7 @@
-import { test, expect } from '@playwright/test';
+import { expect, test } from '@playwright/test';
 import { HeadlampPage } from './headlampPage';
-import { ServicesPage } from './servicesPage';
 import { SecurityPage } from './securityPage';
+import { ServicesPage } from './servicesPage';
 
 // --- Plugins tests start --- //
 test('GET /plugins/list returns plugins list', async ({ page }) => {
@@ -48,7 +48,7 @@ test('headlamp service page should contain port', async ({ page }) => {
   await headlampPage.authenticate();
   await servicesPage.navigateToServices();
   await servicesPage.clickOnServicesSection();
-  await servicesPage.goToParticularService("headlamp");
+  await servicesPage.goToParticularService('headlamp');
 
   // Check if there is text "TCP" on the page
   await headlampPage.checkPageContent('TCP');

e2e-tests/tests/headlampPage.ts

@@ -1,7 +1,7 @@
-import { Page, expect } from '@playwright/test';
+import { expect, Page } from '@playwright/test';
 
 export class HeadlampPage {
-  constructor(private page: Page) { }
+  constructor(private page: Page) {}
 
   async authenticate() {
     await this.page.goto('/');
@@ -15,7 +15,7 @@ export class HeadlampPage {
     this.hasToken(token);
 
     // Fill in the token
-    await this.page.locator("#token").fill(token);
+    await this.page.locator('#token').fill(token);
 
     // Click on the "Authenticate" button and wait for navigation
     await Promise.all([

e2e-tests/tests/namespaces.spec.ts

@@ -1,17 +1,15 @@
-import { test } from "@playwright/test";
-import { HeadlampPage } from "./headlampPage";
-import { NamespacesPage } from "./namespacesPage";
+import { test } from '@playwright/test';
+import { HeadlampPage } from './headlampPage';
+import { NamespacesPage } from './namespacesPage';
 
-test("create a namespace with the minimal editor then delete it", async ({
-  page,
-}) => {
-  const name = "testing-e2e";
+test('create a namespace with the minimal editor then delete it', async ({ page }) => {
+  const name = 'testing-e2e';
   const headlampPage = new HeadlampPage(page);
   await headlampPage.authenticate();
 
   // If there's no namespaces permission, then we return
   const content = await page.content();
-  if (!content.includes("Namespaces") || !content.includes('href="/c/main/namespaces')) {
+  if (!content.includes('Namespaces') || !content.includes('href="/c/main/namespaces')) {
     return;
   }
 

e2e-tests/tests/namespacesPage.ts

@@ -1,11 +1,11 @@
-import { Page } from "@playwright/test";
+import { Page } from '@playwright/test';
 
 export class NamespacesPage {
   constructor(private page: Page) {}
 
   async navigateToNamespaces() {
     await this.page.click('span:has-text("Cluster")');
-    await this.page.waitForLoadState("load");
+    await this.page.waitForLoadState('load');
     await this.page.waitForSelector('span:has-text("Namespaces")');
     await this.page.click('span:has-text("Namespaces")');
     await this.page.waitForLoadState('load');
@@ -23,20 +23,20 @@ export class NamespacesPage {
     await page.waitForSelector('span:has-text("Namespaces")');
 
     await page.click('span:has-text("Namespaces")');
-    await page.waitForLoadState("load");
+    await page.waitForLoadState('load');
 
     // If the namespace already exists, return.
     // This makes it a bit more resilient to flakiness.
     const pageContent = await this.page.content();
     if (pageContent.includes(name)) {
-      return
+      return;
     }
 
     await page.click('button[title="Create / Apply"]');
-    await page.waitForLoadState("load");
+    await page.waitForLoadState('load');
 
     await page.click('span:has-text("Use minimal editor")');
-    await page.waitForLoadState("load");
+    await page.waitForLoadState('load');
 
     await page.fill('textarea[aria-label="yaml Code"]', yaml);
     await page.click('button:has-text("Apply")');
@@ -46,13 +46,11 @@ export class NamespacesPage {
   async deleteNamespace(name) {
     const page = this.page;
     await page.click('span:has-text("Namespaces")');
-    await page.waitForLoadState("load");
+    await page.waitForLoadState('load');
     await page.waitForSelector(`text=${name}`);
     await page.click(`a:has-text("${name}")`);
     await page.click('button[title="Delete"]');
-    await page.waitForSelector(
-      "text=Are you sure you want to delete this item?"
-    );
+    await page.waitForSelector('text=Are you sure you want to delete this item?');
     await page.click('button:has-text("Yes")');
     await page.waitForSelector(`text=Deleted item ${name}`);
   }

e2e-tests/tests/pluginSetting.spec.ts

@@ -1,4 +1,4 @@
-import { test } from "@playwright/test";
+import { test } from '@playwright/test';
 import { HeadlampPage } from './headlampPage';
 
 test('plugin settings page should have a title', async ({ page }) => {

e2e-tests/tests/securityPage.ts

@@ -1,7 +1,7 @@
 import { Page } from '@playwright/test';
 
 export class SecurityPage {
-  constructor(private page: Page) { }
+  constructor(private page: Page) {}
 
   async navigateToSecurity() {
     // Click on the "Security" button

e2e-tests/tests/servicesPage.ts

@@ -1,7 +1,7 @@
 import { Page } from '@playwright/test';
 
 export class ServicesPage {
-  constructor(private page: Page) { }
+  constructor(private page: Page) {}
 
   async navigateToServices() {
     // Click on the "Network" button
@@ -17,7 +17,7 @@ export class ServicesPage {
     await this.page.click('span:has-text("Services")');
     // Wait for the page to load
     await this.page.waitForLoadState('load');
-  } 
+  }
 
   async goToParticularService(serviceName: string) {
     // Click on the particular service

frontend/package.json

@@ -101,9 +101,9 @@
     "build": "if-env PUBLIC_URL react-scripts build || cross-env PUBLIC_URL=./ react-scripts build --max_old_space_size=768 && npx shx rm -f build/frontend/index.baseUrl.html",
     "test": "cross-env UNDER_TEST=true react-scripts test",
     "eject": "react-scripts eject",
-    "lint": "eslint --cache -c package.json --ext .js,.ts,.tsx src/ ../app/electron ../plugins/headlamp-plugin --ignore-pattern ../plugins/headlamp-plugin/template --ignore-pattern ../plugins/headlamp-plugin/lib/",
-    "format": "prettier --config package.json --write src ../app/electron ../app/scripts ../plugins/headlamp-plugin/bin ../plugins/headlamp-plugin/config ../plugins/headlamp-plugin/template ../plugins/headlamp-plugin/test*.js ../plugins/headlamp-plugin/*.json ../plugins/headlamp-plugin/*.js",
-    "format-check": "prettier --config package.json --check src ../app/electron ../app/scripts ../plugins/headlamp-plugin/bin ../plugins/headlamp-plugin/config ../plugins/headlamp-plugin/template ../plugins/headlamp-plugin/test*.js ../plugins/headlamp-plugin/*.json ../plugins/headlamp-plugin/*.js",
+    "lint": "eslint --cache -c package.json --ext .js,.ts,.tsx src/ ../app/electron ../plugins/headlamp-plugin  ../e2e-tests/tests/*.ts ../e2e-tests/playwright.config.ts --ignore-pattern ../plugins/headlamp-plugin/template --ignore-pattern ../plugins/headlamp-plugin/lib/",
+    "format": "prettier --config package.json --write --cache src ../app/electron ../app/scripts ../plugins/headlamp-plugin/bin ../plugins/headlamp-plugin/config ../plugins/headlamp-plugin/template ../plugins/headlamp-plugin/test*.js ../plugins/headlamp-plugin/*.json ../plugins/headlamp-plugin/*.js ../e2e-tests/tests/*.ts ../e2e-tests/playwright.config.ts",
+    "format-check": "prettier --config package.json --check src ../app/electron ../app/scripts ../plugins/headlamp-plugin/bin ../plugins/headlamp-plugin/config ../plugins/headlamp-plugin/template ../plugins/headlamp-plugin/test*.js ../plugins/headlamp-plugin/*.json ../plugins/headlamp-plugin/*.js ../e2e-tests/tests/*.ts ../e2e-tests/playwright.config.ts",
     "storybook": "storybook dev -p 6006 -s public",
     "build-typedoc": "npx typedoc",
     "build-storybook": "storybook build -s public -o ../docs/development/storybook",
@@ -206,7 +206,7 @@
     "lint-staged": "^10.5.4",
     "msw": "^0.47.4",
     "msw-storybook-addon": "^1.10.0",
-    "prettier": "^2.4.1",
+    "prettier": "^2.7.1",
     "redux-mock-store": "^1.5.4",
     "resize-observer-polyfill": "^1.5.1",
     "storybook": "^7.6.7",

plugins/headlamp-plugin/bin/headlamp-plugin.js

@@ -543,7 +543,7 @@ function build(packageFolder) {
 function format(packageFolder, check) {
   const cmdLine = check
     ? `prettier --config package.json --check src`
-    : 'prettier --config package.json --write src';
+    : 'prettier --config package.json --write --cache src';
   return runScriptOnPackages(packageFolder, 'format', cmdLine, {});
 }
 

plugins/headlamp-plugin/package.json

@@ -113,7 +113,7 @@
     "patch-package": "^6.4.7",
     "postcss": "^8.4.5",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "prettier": "^2.4.1",
+    "prettier": "^2.7.1",
     "process": "^0.11.10",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",