fix(console, e2e): static data-e2e attributes, consistent naming (#4188)

* fix(console, e2e): static data-e2e attributes, consistent naming

* quote cypress attribute selectors

* Update console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html

Co-authored-by: Elio Bischof <eliobischof@gmail.com>

* Update console/src/app/modules/project-roles-table/project-roles-table.component.html

Co-authored-by: Elio Bischof <eliobischof@gmail.com>

* fix ,

Co-authored-by: Elio Bischof <eliobischof@gmail.com>

e2e/cypress/e2e/humans/humans.cy.ts

@@ -1,57 +1,68 @@
-import { apiAuth } from '../../support/api/apiauth';
-import { ensureHumanUserExists, ensureUserDoesntExist } from '../../support/api/users';
-import { loginname } from '../../support/login/users';
+import { apiAuth } from "../../support/api/apiauth";
+import {
+  ensureHumanUserExists,
+  ensureUserDoesntExist,
+} from "../../support/api/users";
+import { loginname } from "../../support/login/users";
 
-describe.skip('humans', () => {
+describe.skip("humans", () => {
   const humansPath = `/ui/console/users?type=human`;
-  const testHumanUserNameAdd = 'e2ehumanusernameadd';
-  const testHumanUserNameRemove = 'e2ehumanusernameremove';
+  const testHumanUserNameAdd = "e2ehumanusernameadd";
+  const testHumanUserNameRemove = "e2ehumanusernameremove";
 
-  describe('add', () => {
+  describe("add", () => {
     before(`ensure it doesn't exist already`, () => {
       apiAuth().then((apiCallProperties) => {
-        ensureUserDoesntExist(apiCallProperties, testHumanUserNameAdd).then(()=>{
-          cy.visit(humansPath);
-        });
+        ensureUserDoesntExist(apiCallProperties, testHumanUserNameAdd).then(
+          () => {
+            cy.visit(humansPath);
+          }
+        );
       });
     });
 
-    it('should add a user', () => {
-      cy.get('[data-e2e="action-key-add"]').parents('[data-e2e="create-user-button"]').click();
-      cy.url().should('contain', 'users/create');
-      cy.get('[formcontrolname="email"]').type(loginname('e2ehuman'));
+    it("should add a user", () => {
+      cy.get('[data-e2e="action-key-add"]')
+        .parents('[data-e2e="create-user-button"]')
+        .click();
+      cy.url().should("contain", "users/create");
+      cy.get('[formcontrolname="email"]').type(loginname("e2ehuman"));
       //force needed due to the prefilled username prefix
-      cy.get('[formcontrolname="userName"]').type(testHumanUserNameAdd, { force: true });
-      cy.get('[formcontrolname="firstName"]').type('e2ehumanfirstname');
-      cy.get('[formcontrolname="lastName"]').type('e2ehumanlastname');
-      cy.get('[formcontrolname="phone"]').type('+41 123456789');
+      cy.get('[formcontrolname="userName"]').type(testHumanUserNameAdd, {
+        force: true,
+      });
+      cy.get('[formcontrolname="firstName"]').type("e2ehumanfirstname");
+      cy.get('[formcontrolname="lastName"]').type("e2ehumanlastname");
+      cy.get('[formcontrolname="phone"]').type("+41 123456789");
       cy.get('[data-e2e="create-button"]').click();
-      cy.get('.data-e2e-success');
+      cy.get(".data-e2e-success");
       cy.wait(200);
-      cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+      cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
     });
   });
 
-  describe('remove', () => {
-    before('ensure it exists', () => {
+  describe("remove", () => {
+    before("ensure it exists", () => {
       apiAuth().then((api) => {
-        ensureHumanUserExists(api, testHumanUserNameRemove).then(()=>{
+        ensureHumanUserExists(api, testHumanUserNameRemove).then(() => {
           cy.visit(humansPath);
         });
       });
     });
 
-    it('should delete a human user', () => {
-      cy.contains('tr', testHumanUserNameRemove)
+    it("should delete a human user", () => {
+      cy.contains("tr", testHumanUserNameRemove)
         // doesn't work, need to force click.
         // .trigger('mouseover')
-        .find('[e2e-data="enabled-delete-button"]')
-        .click({force: true});
-      cy.get('[e2e-data="confirm-dialog-input"]').click().type(loginname(testHumanUserNameRemove, Cypress.env('org')));
-      cy.get('[e2e-data="confirm-dialog-button"]').click();
-      cy.get('.data-e2e-success');
+        .find('[data-e2e="enabled-delete-button"]')
+        .click({ force: true });
+      cy.get('[data-e2e="confirm-dialog-input"]')
+        .click()
+        .type(loginname(testHumanUserNameRemove, Cypress.env("org")));
+      cy.get('[data-e2e="confirm-dialog-button"]').click();
+      cy.get(".data-e2e-success");
       cy.wait(200);
-      cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+      cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
     });
   });
-});
+});

e2e/cypress/e2e/machines/machines.cy.ts

@@ -1,55 +1,66 @@
-import { apiAuth } from '../../support/api/apiauth';
-import { ensureMachineUserExists, ensureUserDoesntExist } from '../../support/api/users';
-import { loginname } from '../../support/login/users';
+import { apiAuth } from "../../support/api/apiauth";
+import {
+  ensureMachineUserExists,
+  ensureUserDoesntExist,
+} from "../../support/api/users";
+import { loginname } from "../../support/login/users";
 
-describe.skip('machines', () => {
+describe.skip("machines", () => {
   const machinesPath = `/ui/console/users?type=machine`;
-  const testMachineUserNameAdd = 'e2emachineusernameadd';
-  const testMachineUserNameRemove = 'e2emachineusernameremove';
+  const testMachineUserNameAdd = "e2emachineusernameadd";
+  const testMachineUserNameRemove = "e2emachineusernameremove";
 
-  describe('add', () => {
+  describe("add", () => {
     before(`ensure it doesn't exist already`, () => {
       apiAuth().then((apiCallProperties) => {
-        ensureUserDoesntExist(apiCallProperties, testMachineUserNameAdd).then(()=>{
-          cy.visit(machinesPath);
-        });
+        ensureUserDoesntExist(apiCallProperties, testMachineUserNameAdd).then(
+          () => {
+            cy.visit(machinesPath);
+          }
+        );
       });
     });
 
-    it('should add a machine', () => {
-      cy.get('[data-e2e="action-key-add"]').parents('[data-e2e="create-user-button"]').click();
-      cy.url().should('contain', 'users/create-machine');
+    it("should add a machine", () => {
+      cy.get('[data-e2e="action-key-add"]')
+        .parents('[data-e2e="create-user-button"]')
+        .click();
+      cy.url().should("contain", "users/create-machine");
       //force needed due to the prefilled username prefix
-      cy.get('[formcontrolname="userName"]').type(testMachineUserNameAdd, { force: true });
-      cy.get('[formcontrolname="name"]').type('e2emachinename');
-      cy.get('[formcontrolname="description"]').type('e2emachinedescription');
+      cy.get('[formcontrolname="userName"]').type(testMachineUserNameAdd, {
+        force: true,
+      });
+      cy.get('[formcontrolname="name"]').type("e2emachinename");
+      cy.get('[formcontrolname="description"]').type("e2emachinedescription");
       cy.get('[data-e2e="create-button"]').click();
-      cy.get('.data-e2e-success');
+      cy.get(".data-e2e-success");
       cy.wait(200);
-      cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+      cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
     });
   });
 
-  describe('remove', () => {
-    before('ensure it exists', () => {
+  describe("remove", () => {
+    before("ensure it exists", () => {
       apiAuth().then((api) => {
-        ensureMachineUserExists(api, testMachineUserNameRemove).then(()=>{
+        ensureMachineUserExists(api, testMachineUserNameRemove).then(() => {
           cy.visit(machinesPath);
         });
       });
     });
 
-    it('should delete a machine', () => {
-      cy.contains('tr', testMachineUserNameRemove, { timeout: 1000 })
+    it("should delete a machine", () => {
+      cy.contains("tr", testMachineUserNameRemove, { timeout: 1000 })
         // doesn't work, need to force click.
         // .trigger('mouseover')
-        .find('[e2e-data="enabled-delete-button"]')
-        .click({force: true});
-      cy.get('[e2e-data="confirm-dialog-input"]').click().type(loginname(testMachineUserNameRemove, Cypress.env('org')));
-      cy.get('[e2e-data="confirm-dialog-button"]').click();
-      cy.get('.data-e2e-success');
+        .find('[data-e2e="enabled-delete-button"]')
+        .click({ force: true });
+      cy.get('[data-e2e="confirm-dialog-input"]')
+        .click()
+        .type(loginname(testMachineUserNameRemove, Cypress.env("org")));
+      cy.get('[data-e2e="confirm-dialog-button"]').click();
+      cy.get(".data-e2e-success");
       cy.wait(200);
-      cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+      cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
     });
   });
 });

e2e/cypress/e2e/projects/projects.cy.ts

@@ -1,12 +1,15 @@
-import { apiAuth } from '../../support/api/apiauth';
-import { ensureProjectDoesntExist, ensureProjectExists } from '../../support/api/projects';
+import { apiAuth } from "../../support/api/apiauth";
+import {
+  ensureProjectDoesntExist,
+  ensureProjectExists,
+} from "../../support/api/projects";
 
-describe('projects', () => {
-  const testProjectNameCreate = 'e2eprojectcreate';
-  const testProjectNameDeleteList = 'e2eprojectdeletelist';
-  const testProjectNameDeleteGrid = 'e2eprojectdeletegrid';
+describe("projects", () => {
+  const testProjectNameCreate = "e2eprojectcreate";
+  const testProjectNameDeleteList = "e2eprojectdeletelist";
+  const testProjectNameDeleteGrid = "e2eprojectdeletegrid";
 
-  describe('add project', () => {
+  describe("add project", () => {
     beforeEach(`ensure it doesn't exist already`, () => {
       apiAuth().then((api) => {
         ensureProjectDoesntExist(api, testProjectNameCreate);
@@ -14,57 +17,61 @@ describe('projects', () => {
       cy.visit(`/ui/console/projects`);
     });
 
-    it('should add a project', () => {
-      cy.get('.add-project-button').click({ force: true });
-      cy.get('input').type(testProjectNameCreate);
+    it("should add a project", () => {
+      cy.get(".add-project-button").click({ force: true });
+      cy.get("input").type(testProjectNameCreate);
       cy.get('[data-e2e="continue-button"]').click();
-      cy.get('.data-e2e-success');
+      cy.get(".data-e2e-success");
       cy.wait(200);
-      cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+      cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
     });
   });
 
-  describe.skip('remove project', () => {
-    describe('list view', () => {
-      beforeEach('ensure it exists', () => {
+  describe.skip("remove project", () => {
+    describe("list view", () => {
+      beforeEach("ensure it exists", () => {
         apiAuth().then((api) => {
           ensureProjectExists(api, testProjectNameDeleteList);
         });
         cy.visit(`/ui/console/projects`);
       });
 
-      it('removes the project', () => {
-        cy.get('[data-e2e=toggle-grid]').click();
-        cy.get('[data-e2e=timestamp]');
-        cy.contains('tr', testProjectNameDeleteList, { timeout: 1000 })
-          .find('[data-e2e=delete-project-button]')
-          .click({force: true});
-        cy.get('[e2e-data="confirm-dialog-input"]').type(testProjectNameDeleteList);
-        cy.get('[e2e-data="confirm-dialog-button"]').click();
-        cy.get('.data-e2e-success');
+      it("removes the project", () => {
+        cy.get('[data-e2e="toggle-grid"]').click();
+        cy.get('[data-e2e="timestamp"]');
+        cy.contains("tr", testProjectNameDeleteList, { timeout: 1000 })
+          .find('[data-e2e="delete-project-button"]')
+          .click({ force: true });
+        cy.get('[data-e2e="confirm-dialog-input"]').type(
+          testProjectNameDeleteList
+        );
+        cy.get('[data-e2e="confirm-dialog-button"]').click();
+        cy.get(".data-e2e-success");
         cy.wait(200);
-        cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+        cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
       });
     });
 
-    describe('grid view', () => {
-      beforeEach('ensure it exists', () => {
+    describe("grid view", () => {
+      beforeEach("ensure it exists", () => {
         apiAuth().then((api) => {
           ensureProjectExists(api, testProjectNameDeleteGrid);
         });
         cy.visit(`/ui/console/projects`);
       });
 
-      it('removes the project', () => {
-        cy.contains('[data-e2e=grid-card]', testProjectNameDeleteGrid)
-          .find('[data-e2e=delete-project-button]')
-          .trigger('mouseover')
+      it("removes the project", () => {
+        cy.contains('[data-e2e="grid-card"]', testProjectNameDeleteGrid)
+          .find('[data-e2e="delete-project-button"]')
+          .trigger("mouseover")
           .click();
-        cy.get('[e2e-data="confirm-dialog-input"]').type(testProjectNameDeleteGrid);
-        cy.get('[e2e-data="confirm-dialog-button"]').click();
-        cy.get('.data-e2e-success');
+        cy.get('[data-e2e="confirm-dialog-input"]').type(
+          testProjectNameDeleteGrid
+        );
+        cy.get('[data-e2e="confirm-dialog-button"]').click();
+        cy.get(".data-e2e-success");
         cy.wait(200);
-        cy.get('.data-e2e-failure', { timeout: 0 }).should('not.exist');
+        cy.get(".data-e2e-failure", { timeout: 0 }).should("not.exist");
       });
     });
   });

e2e/cypress/e2e/settings/login-policy.cy.ts

@@ -14,7 +14,7 @@ describe("login policy", ()=> {
                 login(user)
                 cy.visit(orgPath)
                 // TODO: Why force?
-                cy.contains('[data-e2e=policy-card]', 'Login Policy').contains('button', 'Modify').click({force: true}) // TODO: select data-e2e
+                cy.contains('[data-e2e="policy-card"]', 'Login Policy').contains('button', 'Modify').click({force: true}) // TODO: select data-e2e
                 apiAuth().then(api => {
                     ensureHumanUserExists(api, User.LoginPolicyUser)
                 })

e2e/cypress/e2e/settings/password-complexity.cy.ts

@@ -13,7 +13,7 @@ describe("password complexity", ()=> {
                 login(user)
                 cy.visit(orgPath)
                 // TODO: Why force?
-                cy.contains('[data-e2e=policy-card]', 'Password Complexity').contains('button', 'Modify').click({force: true}) // TODO: select data-e2e
+                cy.contains('[data-e2e="policy-card"]', 'Password Complexity').contains('button', 'Modify').click({force: true}) // TODO: select data-e2e
             })
 
             // TODO: fix saving password complexity policy bug

e2e/cypress/e2e/settings/private-labeling.cy.ts

@@ -13,7 +13,7 @@ describe('private labeling', () => {
         login(user);
         cy.visit(orgPath);
         // TODO: Why force?
-        cy.contains('[data-e2e=policy-card]', 'Private Labeling').contains('button', 'Modify').click({ force: true }); // TODO: select data-e2e
+        cy.contains('[data-e2e="policy-card"]', 'Private Labeling').contains('button', 'Modify').click({ force: true }); // TODO: select data-e2e
       });
 
       customize('white', user);
@@ -32,12 +32,12 @@ function customize(theme: string, user: User) {
 
     describe.skip('logo', () => {
       beforeEach('expand logo category', () => {
-        cy.contains('[data-e2e=policy-category]', 'Logo').click(); // TODO: select data-e2e
+        cy.contains('[data-e2e="policy-category"]', 'Logo').click(); // TODO: select data-e2e
         cy.fixture('logo.png').as('logo');
       });
 
       it('should update a logo', () => {
-        cy.get('[data-e2e=image-part-logo]')
+        cy.get('[data-e2e="image-part-logo"]')
           .find('input')
           .then(function (el) {
             const blob = Cypress.Blob.base64StringToBlob(this.logo, 'image/png');
@@ -56,10 +56,10 @@ function customize(theme: string, user: User) {
     it('should update an icon');
     it('should delete an icon');
     it.skip('should update the background color', () => {
-      cy.contains('[data-e2e=color]', 'Background Color').find('button').click(); // TODO: select data-e2e
+      cy.contains('[data-e2e="color"]', 'Background Color').find('button').click(); // TODO: select data-e2e
       cy.get('color-editable-input').find('input').clear().type('#ae44dc');
-      cy.get('[data-e2e=save-colors-button]').click();
-      cy.get('[data-e2e=header-user-avatar]').click();
+      cy.get('[data-e2e="save-colors-button"]').click();
+      cy.get('[data-e2e="header-user-avatar"]').click();
       cy.contains('Logout All Users').click(); // TODO: select data-e2e
       login(User.LoginPolicyUser, undefined, true, null, () => {
         cy.pause();