Update e2e 8th scenario to use the new Instance Details PAge (Issue #…

…5984, PR #6072) # Description move assertion from scenario 8 to the new instance Details page. fix bug with collapsing attributes on refetch, add label to the attributes closes #5984 # Self Check: Strike through any lines that are not applicable (`~~line~~`) then check the box - [ ] Attached issue to pull request - [ ] Changelog entry - [ ] Code is clear and sufficiently documented - [ ] Sufficient test cases (reproduces the bug/tests the requested feature) - [ ] Correct, in line with design - [ ] End user documentation is included or an issue is created for end-user documentation (add ref to issue here: )
inmanta · Nov 28, 2024 · a073bb6 · a073bb6
1 parent ade9ac8
commit a073bb6
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 106 deletions.
diff --git a/changelogs/unreleased/5984-e2e-labes.yml b/changelogs/unreleased/5984-e2e-labes.yml
@@ -0,0 +1,4 @@
+description: Update e2e 8th scenario to use the new Instance Details PAge
+issue-nr: 5984
+change-type: patch
+destination-branches: [master]
diff --git a/cypress/e2e/scenario-8-instance-composer.cy.js b/cypress/e2e/scenario-8-instance-composer.cy.js
@@ -1,5 +1,3 @@
-//TODO: tests are commented out as there is ongoing redesign of the instance composer which will affect how the user interact with it and how e2e test should look like
-
 /**
  * Shorthand method to clear the environment being passed.
  * By default, if no arguments are passed it will target the 'lsm-frontend' environment.
@@ -65,6 +63,9 @@ const forceUpdateEnvironment = (nameEnvironment = "lsm-frontend") => {
 };
 
 if (Cypress.env("edition") === "iso") {
+  const uuidRegex =
+    /^[0-9a-f]{8}-[0-9a-f]{4}-[4][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+
   describe("Scenario 8 - Instance Composer", async () => {
     before(() => {
       clearEnvironment();
@@ -536,24 +537,27 @@ if (Cypress.env("edition") === "iso") {
       );
 
       //check if embedded entities are present and relations are assigned correctly
-      cy.get("#expand-toggle0").click();
-      cy.get("button").contains("Attributes").click();
+      cy.get('[aria-label="row actions toggle"]').click();
+      cy.get("button").contains("Instance Details").click();
 
-      cy.get('[aria-label="Toggle-embedded"]').click();
+      //check if embedded entities are present and relations are assigned correctly
+      cy.get('[aria-label="Expand row 27"]').click(); //toggle extra_embedded
+      cy.get('[aria-label="Expand row 28"]').click(); //toggle fist entity of extra_embedded
 
-      cy.get('[aria-label="Toggle-extra_embedded"]').click();
-      cy.get('[aria-label="Toggle-extra_embedded$0"]').click();
+      cy.get('[aria-label="parent_service_value"]')
+        .invoke("text")
+        .then((text) => {
+          expect(text).to.match(uuidRegex);
+        });
 
-      cy.get('[aria-label="Row-parent_service"]').within(() => {
-        cy.get('[data-label="active"]').should("have.text", "test_name");
-      });
-      cy.get('[aria-label="Row-embedded$parent_service"]').within(() => {
-        cy.get('[data-label="active"]').should("have.text", "test_name2");
-      });
-      cy.get('[aria-label="Row-extra_embedded$0$parent_service"]').within(
-        () => {
-          cy.get('[data-label="active"]').should("have.text", "null");
-        },
+      cy.get('[aria-label="embedded.parent_service_value"]')
+        .invoke("text")
+        .then((text) => {
+          expect(text).to.match(uuidRegex);
+        });
+      cy.get('[aria-label="extra_embedded.0.parent_service_value"]').should(
+        "have.text",
+        "null",
       );
     });
 
@@ -666,62 +670,36 @@ if (Cypress.env("edition") === "iso") {
       );
 
       //check if core attributes and embedded entities are updated
-      cy.get("#expand-toggle0").click();
-      cy.get("button").contains("Attributes").click();
-
-      cy.get('[aria-label="Row-default_int"]').within(() => {
-        cy.get('[data-label="active"]').should("have.text", "20");
-        cy.get('[data-label="candidate"]').should("have.text", "22");
-      });
-
-      cy.get('[aria-label="Row-default_string"]').within(() => {
-        cy.get('[data-label="active"]').should("have.text", "default_string");
-        cy.get('[data-label="candidate"]').should(
-          "have.text",
-          "updated_string",
-        );
-      });
-
-      cy.get('[aria-label="Toggle-embedded"]').click();
-
-      cy.get('[aria-label="Row-embedded$default_int"]').within(() => {
-        cy.get('[data-label="active"]').should("have.text", "21");
-        cy.get('[data-label="candidate"]').should("have.text", "22");
-      });
-
-      cy.get('[aria-label="Row-embedded$default_float"]').within(() => {
-        cy.get('[data-label="active"]').should("have.text", "2.1");
-        cy.get('[data-label="candidate"]').should("have.text", "2");
-      });
-
-      cy.get('[aria-label="Row-embedded$default_string"]').within(() => {
-        cy.get('[data-label="active"]').should("have.text", "default_string");
-        cy.get('[data-label="candidate"]').should(
-          "have.text",
-          "updated_string",
-        );
-      });
+      cy.get('[aria-label="row actions toggle"]').click();
+      cy.get("button").contains("Instance Details").click();
 
-      //assert that extra_embedded attrs are empty as instance was removed
-      cy.get('[aria-label="Toggle-extra_embedded"]').click();
-      cy.get('[aria-label="Toggle-extra_embedded$0"]').click();
+      //Go to candidate attributes and assert that they are updated
+      cy.get('[aria-label="Select-AttributeSet"]').select(
+        "candidate_attributes",
+      );
+      cy.get('[aria-label="default_int_value"]').should("have.text", "22");
 
-      cy.get('[aria-label="Row-extra_embedded$0$default_int"]').within(() => {
-        cy.get('[data-label="active"]').should("have.text", "21");
-        cy.get('[data-label="candidate"]').should("have.text", "");
-      });
+      cy.get('[aria-label="default_string_value"]').should(
+        "have.text",
+        "updated_string",
+      );
 
-      cy.get('[aria-label="Row-extra_embedded$0$default_float"]').within(() => {
-        cy.get('[data-label="active"]').should("have.text", "2.1");
-        cy.get('[data-label="candidate"]').should("have.text", "");
-      });
+      cy.get('[aria-label="Expand row 1"]').click(); //toggle embedded
 
-      cy.get('[aria-label="Row-extra_embedded$0$default_string"]').within(
-        () => {
-          cy.get('[data-label="active"]').should("have.text", "default_string");
-          cy.get('[data-label="candidate"]').should("have.text", "");
-        },
+      cy.get('[aria-label="embedded.default_int_value"]').should(
+        "have.text",
+        "22",
       );
+      cy.get('[aria-label="embedded.default_float_value"]').should(
+        "have.text",
+        "2",
+      );
+      cy.get('[aria-label="embedded.default_string_value"]').should(
+        "have.text",
+        "updated_string",
+      );
+
+      cy.get('[aria-label="extra_embedded_value"]').should("have.text", "[]");
     });
 
     it("8.4 composer edit view is able to edit instances relations", () => {
@@ -801,15 +779,20 @@ if (Cypress.env("edition") === "iso") {
       );
 
       //check if relation is assigned correctly
-      cy.get("#expand-toggle0").click();
-      cy.get("button").contains("Attributes").click();
+      cy.get('[aria-label="row actions toggle"]').click();
+      cy.get("button").contains("Instance Details").click();
 
-      cy.get('[aria-label="Row-parent_entity"]').within(() => {
-        cy.get('[data-label="active"]').should("have.text", "test_name");
-      });
+      let oldUuid = "";
+
+      cy.get('[aria-label="parent_entity_value"]')
+        .invoke("text")
+        .then((text) => {
+          expect(text).to.match(uuidRegex);
+          oldUuid = text;
+        });
 
       // click on edit instance with composer
-      cy.get('[aria-label="row actions toggle"]').click();
+      cy.get('[aria-label="Actions-Toggle"]').click();
       cy.get("button").contains("Edit in Composer").click();
 
       // Expect Canvas to be visible
@@ -863,12 +846,20 @@ if (Cypress.env("edition") === "iso") {
         "up",
       );
 
-      //check if relation is assigned correctly
-      cy.get("button").contains("Attributes").click();
+      //check if relation is updated correctly
+      cy.get('[aria-label="row actions toggle"]').click();
+      cy.get("button").contains("Instance Details").click();
+      cy.get('[data-testid="selected-version"]').should(
+        "have.text",
+        "Version: 8",
+      ); // initial open of the details view will show the outdated version
 
-      cy.get('[aria-label="Row-parent_entity"]').within(() => {
-        cy.get('[data-label="active"]').should("have.text", "test_name2");
-      });
+      cy.get('[aria-label="parent_entity_value"]')
+        .invoke("text")
+        .then((text) => {
+          expect(text).to.match(uuidRegex);
+          expect(text).to.not.be.equal(oldUuid);
+        });
     });
 
     it("8.5 composer edit view is able to remove inter-service relation from instance", () => {
@@ -971,9 +962,6 @@ if (Cypress.env("edition") === "iso") {
       //assert that in Active attribute we have only 1 relation
       cy.get('[aria-label="Expand row 2"]').click();
 
-      const uuidRegex =
-        /^[0-9a-f]{8}-[0-9a-f]{4}-[4][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
-
       cy.get('[data-testid="0"]')
         .invoke("text")
         .then((text) => {
@@ -987,8 +975,6 @@ if (Cypress.env("edition") === "iso") {
         "rollback_attributes",
       );
 
-      cy.get('[aria-label="Expand row 2"]').click();
-
       cy.get('[data-testid="0"]')
         .invoke("text")
         .then((text) => {

diff --git a/src/Slices/ServiceInstanceDetails/Test/AttributesUtils.test.ts b/src/Slices/ServiceInstanceDetails/Test/AttributesUtils.test.ts
@@ -174,13 +174,13 @@ describe("formatTreeRowData", () => {
         value: { child1: "value1", child2: 456 },
         children: [
           {
-            id: expect.stringMatching(/^child1/),
+            id: expect.stringMatching(/^parent.child1/),
             name: "child1",
             value: "value1",
             children: [],
           },
           {
-            id: expect.stringMatching(/^child2/),
+            id: expect.stringMatching(/^parent.child2/),
             name: "child2",
             value: 456,
             children: [],
@@ -209,7 +209,7 @@ describe("formatTreeRowData", () => {
             value: { subKey1: "subValue1" },
             children: [
               {
-                id: expect.stringMatching(/^subKey1/),
+                id: expect.stringMatching(/^arrayKey.0.subKey1/),
                 name: "subKey1",
                 value: "subValue1",
                 children: [],
@@ -222,7 +222,7 @@ describe("formatTreeRowData", () => {
             value: { subKey2: "subValue2" },
             children: [
               {
-                id: expect.stringMatching(/^subKey2/),
+                id: expect.stringMatching(/^arrayKey.1.subKey2/),
                 name: "subKey2",
                 value: "subValue2",
                 children: [],
@@ -252,12 +252,12 @@ describe("formatTreeRowData", () => {
         value: { level2: { level3: "deepValue" } },
         children: [
           {
-            id: expect.stringMatching(/^level2/),
+            id: expect.stringMatching(/^level1.level2/),
             name: "level2",
             value: { level3: "deepValue" },
             children: [
               {
-                id: expect.stringMatching(/^level3/),
+                id: expect.stringMatching(/^level1.level2.level3/),
                 name: "level3",
                 value: "deepValue",
                 children: [],

diff --git a/src/Slices/ServiceInstanceDetails/Test/Page.test.tsx b/src/Slices/ServiceInstanceDetails/Test/Page.test.tsx
@@ -256,14 +256,6 @@ describe("ServiceInstanceDetailsPage", () => {
       expect(select2).toHaveValue("candidate_attributes");
     });
 
-    await act(async () => {
-      await userEvent.click(
-        screen.getByRole("button", {
-          name: /expand row 1/i,
-        }),
-      );
-    });
-
     // In Version 2, the site.name should be "inmanta-lab-0".
     expect(screen.getByText("inmanta-lab-0")).toBeVisible();
 

diff --git a/src/Slices/ServiceInstanceDetails/UI/Components/AttributesComponents/AttributesTable.tsx b/src/Slices/ServiceInstanceDetails/UI/Components/AttributesComponents/AttributesTable.tsx
@@ -283,10 +283,20 @@ export const AttributesTable: React.FC<Props> = ({
 
     return [
       <TreeRowWrapper key={rowIndex} row={{ props: treeRow.props }}>
-        <Td dataLabel="name" treeRow={treeRow} data-testid="attribute-key">
+        <Td
+          dataLabel="name"
+          treeRow={treeRow}
+          data-testid="attribute-key"
+          aria-label={node.id + "_attribute"}
+        >
           <TableText>{node.name}</TableText>
         </Td>
-        <Td dataLabel="value" width={60} data-testid={node.name}>
+        <Td
+          dataLabel="value"
+          width={60}
+          data-testid={node.name}
+          aria-label={node.id + "_value"}
+        >
           <TableText wrapModifier="truncate">{printValue(node)}</TableText>
         </Td>
       </TreeRowWrapper>,

diff --git a/src/Slices/ServiceInstanceDetails/Utils/AttributeUtils.ts b/src/Slices/ServiceInstanceDetails/Utils/AttributeUtils.ts
@@ -1,4 +1,3 @@
-import { uniqueId } from "lodash";
 import { InstanceAttributeModel } from "@/Core";
 import { InstanceLog } from "@/Slices/ServiceInstanceHistory/Core/Domain";
 
@@ -67,6 +66,7 @@ export const getAvailableAttributesSets = (
  */
 export const formatTreeRowData = (
   attributes: Record<string, unknown>,
+  path: string = "",
 ): TreeRowData[] => {
   const result: TreeRowData[] = [];
 
@@ -77,7 +77,7 @@ export const formatTreeRowData = (
       //  default
       const node: TreeRowData = {
         value: value,
-        id: uniqueId(key),
+        id: path + key,
         name: key,
         children: [],
       };
@@ -95,23 +95,29 @@ export const formatTreeRowData = (
               // If the item is an object, we need to add the properties into the children
               node?.children?.push({
                 name: `${index}`,
-                id: `${uniqueId(key)}`,
+                id: path + key + "." + index,
                 value: item,
-                children: formatTreeRowData(item as Record<string, unknown>),
+                children: formatTreeRowData(
+                  item as Record<string, unknown>,
+                  path + key + "." + index + ".",
+                ),
               });
             } else {
               // If the item is a primitive value, add it directly. They don't need a collapsible section.
               node?.children?.push({
                 name: `${index}`,
-                id: `${uniqueId(key)}`,
+                id: path + key + "." + index,
                 value: item,
               });
             }
           }
         } else {
           // this case is when we are dealing with a normal object. We call the recursion.
           node?.children?.push(
-            ...formatTreeRowData(value as Record<string, unknown>),
+            ...formatTreeRowData(
+              value as Record<string, unknown>,
+              path + key + ".",
+            ),
           );
         }
       }