feat: replace instruments table with the new dynamic material table

cypress/e2e/instruments/instruments-general.cy.js

@@ -0,0 +1,206 @@
+const path = require("path");
+
+import { testData } from "../../fixtures/testData";
+import { testConfig } from "../../fixtures/testData";
+import { getFormattedFileNamingDate, mergeConfig } from "../../support/utils";
+
+describe("Instruments general", () => {
+  beforeEach(() => {
+    cy.login(Cypress.env("username"), Cypress.env("password"));
+  });
+
+  after(() => {
+    cy.removeInstruments();
+  });
+
+  describe("Instruments table and details", () => {
+    it("should be able to see instrument in a table and visit the instrument details page", () => {
+      const instrument = {
+        ...testData.instrument,
+        name: "Cypress test instrument",
+        uniqueName: `Instrument-${Math.floor(1000 + Math.random() * 9000).toString()}`,
+      };
+      cy.createInstrument(instrument);
+
+      cy.visit("/instruments");
+
+      cy.get("mat-table mat-header-row").should("exist");
+
+      cy.finishedLoading();
+
+      cy.get("mat-table mat-row").should("contain", instrument.uniqueName);
+
+      cy.get("mat-cell")
+        .contains(instrument.uniqueName)
+        .closest("mat-row")
+        .contains(instrument.name)
+        .click();
+
+      cy.url().should("include", `/instruments`);
+
+      cy.contains(instrument.uniqueName);
+    });
+
+    it("instrument should have metadata and if not it should be able to add", () => {
+      const metadataName = "Instrument Metadata Name";
+      const metadataValue = "instrument metadata value";
+      const instrument = {
+        ...testData.instrument,
+        name: "Cypress test instrument",
+        uniqueName: `Instrument-${Math.floor(1000 + Math.random() * 9000).toString()}`,
+      };
+      cy.createInstrument(instrument);
+
+      cy.visit("/instruments");
+
+      cy.finishedLoading();
+
+      cy.get("mat-cell")
+        .contains(instrument.uniqueName)
+        .closest("mat-row")
+        .contains(instrument.name)
+        .click();
+
+      cy.finishedLoading();
+
+      cy.get('[data-cy="instrument-metadata-card"]').should("exist");
+
+      cy.get('[data-cy="instrument-metadata-card"] [role="tab"]')
+        .contains("Edit")
+        .click();
+
+      cy.get('[data-cy="add-new-row"]').click();
+
+      // simulate click event on the drop down
+      cy.get("mat-select[data-cy=field-type-input]").last().click(); // opens the drop down
+
+      // simulate click event on the drop down item (mat-option)
+      cy.get("mat-option")
+        .contains("string")
+        .then((option) => {
+          option[0].click();
+        });
+
+      cy.get("[data-cy=metadata-name-input]")
+        .last()
+        .focus()
+        .type(`${metadataName}{enter}`);
+      cy.get("[data-cy=metadata-value-input]")
+        .last()
+        .focus()
+        .type(`${metadataValue}{enter}`);
+
+      cy.get("button[data-cy=save-changes-button]").click();
+
+      cy.finishedLoading();
+
+      cy.reload();
+
+      cy.finishedLoading();
+
+      cy.contains(instrument.name);
+
+      cy.get('[data-cy="instrument-metadata-card"]').contains(metadataName, {
+        matchCase: true,
+      });
+      cy.get('[data-cy="instrument-metadata-card"]').contains(metadataValue, {
+        matchCase: true,
+      });
+    });
+  });
+
+  describe("Instruments dynamic material table", () => {
+    it("should be able to sort for instrument in the column sort", () => {
+      const newInstrument = {
+        ...testData.instrument,
+        name: "000 Cypress test instrument",
+        uniqueName: `Instrument-${Math.floor(1000 + Math.random() * 9000).toString()}`,
+      };
+
+      const newInstrument2 = {
+        ...testData.instrument,
+        name: "001 Cypress test instrument",
+        uniqueName: `Instrument-${Math.floor(1000 + Math.random() * 9000).toString()}`,
+      };
+
+      cy.createInstrument(newInstrument2);
+      cy.createInstrument(newInstrument);
+
+      cy.visit("/instruments");
+
+      cy.get("mat-table mat-row")
+        .first()
+        .should("not.contain", newInstrument.name);
+
+      cy.get(".mat-sort-header-container").contains("Name").click();
+
+      cy.get("mat-table mat-row").first().should("contain", newInstrument.name);
+
+      cy.reload();
+
+      cy.get("mat-table mat-row").first().should("contain", newInstrument.name);
+    });
+
+    it("should be able to download table data as a json", () => {
+      const instrument = {
+        ...testData.instrument,
+        uniqueName: `Instrument-${Math.floor(1000 + Math.random() * 9000).toString()}`,
+      };
+
+      cy.createInstrument(instrument);
+
+      cy.visit("/instruments");
+
+      cy.get("dynamic-mat-table table-menu button").click();
+
+      cy.get('[role="menu"] button').contains("Save data").click();
+
+      cy.get('[role="menu"] button').contains("Json file").click();
+
+      const downloadsFolder = Cypress.config("downloadsFolder");
+      const tableName = "instrumentsTable";
+
+      cy.readFile(
+        path.join(
+          downloadsFolder,
+          `${tableName}${getFormattedFileNamingDate()}.json`,
+        ),
+      ).then((actualExport) => {
+        const foundInstrument = actualExport.find(
+          (instrument) => instrument.uniqueName === instrument.uniqueName,
+        );
+
+        expect(foundInstrument).to.exist;
+      });
+    });
+
+    it("should be able to download table data as a csv", () => {
+      const instrument = {
+        ...testData.instrument,
+        uniqueName: `Instrument-${Math.floor(1000 + Math.random() * 9000).toString()}`,
+      };
+
+      cy.createInstrument(instrument);
+
+      cy.visit("/instruments");
+
+      cy.get("dynamic-mat-table table-menu button").click();
+
+      cy.get('[role="menu"] button').contains("Save data").click();
+
+      cy.get('[role="menu"] button').contains("CSV file").click();
+
+      const downloadsFolder = Cypress.config("downloadsFolder");
+      const tableName = "instrumentsTable";
+
+      cy.readFile(
+        path.join(
+          downloadsFolder,
+          `${tableName}${getFormattedFileNamingDate()}.csv`,
+        ),
+      ).then((actualExport) => {
+        expect(actualExport).to.contain(instrument.uniqueName);
+      });
+    });
+  });
+});

cypress/fixtures/testData.js

@@ -61,6 +61,15 @@ export const testData = {
     ownerGroup: "20170251-group",
     accessGroups: [],
   },
+  instrument: {
+    uniqueName: "ESS1-1",
+    name: "ESS1",
+    customMetadata: {
+      institute: "An immaginary intitution #1",
+      department: "An immaginary department #1",
+      main_user: "ESS",
+    },
+  },
   rawDataset: {
     principalInvestigator: "string",
     endTime: "2019-10-31T14:44:46.143Z",

cypress/support/commands.js

@@ -195,6 +195,29 @@ Cypress.Commands.add("createProposal", (proposal) => {
     });
   });
 });
+
+Cypress.Commands.add("createInstrument", (instrument) => {
+  return cy.getCookie("user").then((userCookie) => {
+    const user = JSON.parse(decodeURIComponent(userCookie.value));
+
+    cy.getToken().then((token) => {
+      cy.log("Instrument: " + JSON.stringify(instrument, null, 2));
+      cy.log("User: " + JSON.stringify(user, null, 2));
+
+      cy.request({
+        method: "POST",
+        url: lbBaseUrl + "/Instruments",
+        headers: {
+          Authorization: token,
+          Accept: "application/json",
+          "Content-Type": "application/json",
+        },
+        body: instrument,
+      });
+    });
+  });
+});
+
 Cypress.Commands.add("updateProposal", (proposalId, updateProposalDto) => {
   return cy.getCookie("user").then((userCookie) => {
     const user = JSON.parse(decodeURIComponent(userCookie.value));
@@ -314,6 +337,46 @@ Cypress.Commands.add("removeProposals", () => {
   });
 });
 
+Cypress.Commands.add("removeInstruments", () => {
+  cy.login(Cypress.env("username"), Cypress.env("password"));
+  cy.getToken().then((token) => {
+    cy.request({
+      method: "GET",
+      url: lbBaseUrl + "/instruments",
+      headers: {
+        Authorization: token,
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+    })
+      .its("body")
+      .as("instruments");
+
+    cy.get("@instruments").then((instruments) => {
+      cy.login(
+        Cypress.env("secondaryUsername"),
+        Cypress.env("secondaryPassword"),
+      );
+      cy.getToken().then((token) => {
+        instruments.forEach((instrument) => {
+          cy.request({
+            method: "DELETE",
+            url:
+              lbBaseUrl +
+              "/instruments/" +
+              encodeURIComponent(instrument.pid),
+            headers: {
+              Authorization: token,
+              Accept: "application/json",
+              "Content-Type": "application/json",
+            },
+          });
+        });
+      });
+    });
+  });
+});
+
 Cypress.Commands.add("removeSamples", () => {
   cy.login(Cypress.env("username"), Cypress.env("password"));
   cy.getToken().then((token) => {

src/app/instruments/instrument-details/instrument-details.component.html

@@ -28,7 +28,10 @@
         </mat-card-content>
       </mat-card>
 
-      <mat-card *ngIf="instrument.customMetadata as value">
+      <mat-card
+        data-cy="instrument-metadata-card"
+        *ngIf="instrument.customMetadata as value"
+      >
         <mat-card-header class="customMetadata-header">
           <div mat-card-avatar class="section-icon">
             <mat-icon> science </mat-icon>
@@ -43,36 +46,40 @@
                 <mat-icon>list</mat-icon> View
               </ng-template>
 
-              <div [ngSwitch]="appConfig.metadataStructure">
-                <tree-view
-                  *ngSwitchCase="'tree'"
-                  [metadata]="value"
-                ></tree-view>
-                <metadata-view
-                  *ngSwitchDefault
-                  [metadata]="value"
-                ></metadata-view>
-              </div>
+              <ng-template matTabContent>
+                <div [ngSwitch]="appConfig.metadataStructure">
+                  <tree-view
+                    *ngSwitchCase="'tree'"
+                    [metadata]="value"
+                  ></tree-view>
+                  <metadata-view
+                    *ngSwitchDefault
+                    [metadata]="value"
+                  ></metadata-view>
+                </div>
+              </ng-template>
             </mat-tab>
 
             <mat-tab *ngIf="isAdmin$ | async">
               <ng-template mat-tab-label>
                 <mat-icon>edit</mat-icon> Edit
               </ng-template>
 
-              <div [ngSwitch]="appConfig.metadataStructure">
-                <tree-edit
-                  *ngSwitchCase="'tree'"
-                  [metadata]="value"
-                  (save)="onSaveCustomMetadata(instrument.pid, $event)"
-                  (hasUnsavedChanges)="onHasUnsavedChanges($event)"
-                ></tree-edit>
-                <metadata-edit
-                  *ngSwitchDefault
-                  [metadata]="value"
-                  (save)="onSaveCustomMetadata(instrument.pid, $event)"
-                ></metadata-edit>
-              </div>
+              <ng-template matTabContent>
+                <div [ngSwitch]="appConfig.metadataStructure">
+                  <tree-edit
+                    *ngSwitchCase="'tree'"
+                    [metadata]="value"
+                    (save)="onSaveCustomMetadata(instrument.pid, $event)"
+                    (hasUnsavedChanges)="onHasUnsavedChanges($event)"
+                  ></tree-edit>
+                  <metadata-edit
+                    *ngSwitchDefault
+                    [metadata]="value"
+                    (save)="onSaveCustomMetadata(instrument.pid, $event)"
+                  ></metadata-edit>
+                </div>
+              </ng-template>
             </mat-tab>
           </mat-tab-group>
         </mat-card-content>