Merge pull request #455 from opencb/issue-411

Issue 411
opencb · Mar 29, 2022 · 081ac2a · 081ac2a
2 parents 377f474 + a7c9495
commit 081ac2a
Show file tree

Hide file tree

Showing 11 changed files with 113 additions and 61 deletions.
diff --git a/cypress/integration/001-header-bar-pre-login.spec.js b/cypress/integration/001-header-bar-pre-login.spec.js
@@ -30,8 +30,8 @@ context("1 - Header bar (pre-login): checks on Header Bar elements", () => {
     it("1.1 - check login page content", () => {
         cy.get("#loginButton", {timeout: TIMEOUT}).should("be.visible");
         cy.get("#loginButton").click();
-        cy.get("#opencgaUser").should("be.visible");
-        cy.get("#opencgaPassword").should("be.visible");
+        cy.get("user-login .panel-body #user").should("be.visible");
+        cy.get("user-login .panel-body #password").should("be.visible");
     });
 
     it("1.2 - check header-bar icons resolve correctly", () => {

diff --git a/cypress/integration/002-login.js b/cypress/integration/002-login.js
@@ -24,19 +24,19 @@ context("2 - Login", () => {
     });
 
     it("2.1 - login unsuccessful: not existing user", () => {
-        cy.get("#opencgaUser").type("demouser");
-        cy.get("#opencgaPassword").type("demo2");
-        cy.get("form#formLogin").submit();
-        cy.get("#error").should("be.visible");
-        cy.get("#error").contains("Incorrect user or password");
+        cy.get("user-login .panel-body #user").type("demouser");
+        cy.get("user-login .panel-body #password").type("demo2");
+        cy.get("button.btn-primary").contains("Sign In").click();
+        cy.get(".alert.alert-danger").should("be.visible");
+        cy.get(".alert.alert-danger").contains("Incorrect user or password");
     });
 
     it("2.2 - login unsuccessful: wrong password", () => {
-        cy.get("#opencgaUser").type("testest23ml");
-        cy.get("#opencgaPassword").type("123456");
-        cy.get("form#formLogin").submit();
-        cy.get("#error").should("be.visible");
-        cy.get("#error").contains("CatalogAuthenticationException");
+        cy.get("user-login .panel-body #user").type("testest23ml");
+        cy.get("user-login .panel-body #password").type("123456");
+        cy.get("button.btn-primary").contains("Sign In").click();
+        cy.get(".alert.alert-danger").should("be.visible");
+        cy.get(".alert.alert-danger").contains("CatalogAuthenticationException");
     });
 
     it("2.3 - login successful", () => {
@@ -46,9 +46,9 @@ context("2 - Login", () => {
 
         expect(username, "username was set").to.be.a("string").and.not.be.empty;
         expect(password, "password was set").to.be.a("string").and.not.be.empty;
-        cy.get("#opencgaUser").type(username);
-        cy.get("#opencgaPassword").type(password);
-        cy.get("form#formLogin").submit();
+        cy.get("user-login .panel-body #user").type(username);
+        cy.get("user-login .panel-body #password").type(password);
+        cy.get("button.btn-primary").contains("Sign In").click();
 
         cy.get(".login-overlay", {timeout: TIMEOUT}).should("be.visible");
         cy.get(".login-overlay", {timeout: TIMEOUT}).should("not.exist");

diff --git a/cypress/integration/004-opencga-variant-browser.spec.js b/cypress/integration/004-opencga-variant-browser.spec.js
@@ -244,9 +244,9 @@ context("4. Variant Browser", () => {
             .then($div => {
                 // HPO filter is visible
                 if (Cypress.$(".subsection-content[data-cy='hpo']", $div).length) {
-                    selectToken("hpo-accessions-filter", "Ovarian", true); // Ovariant teratoma
-                    cy.get("opencga-active-filters button[data-filter-name='annot-hpo']").contains("HP:0012226");
-                    removeToken("hpo-accessions-filter", "HP:0012226");
+                    selectToken("hpo-accessions-filter", "Ovarian", true); // Ovariant thecoma
+                    cy.get("opencga-active-filters button[data-filter-name='annot-hpo']").contains("HP:0030983");
+                    removeToken("hpo-accessions-filter", "HP:0030983");
                 }
             });
     });
@@ -256,11 +256,11 @@ context("4. Variant Browser", () => {
         cy.get("variant-browser-filter a[data-cy-section-title='Deleteriousness']").click();
         cy.get("protein-substitution-score-filter .sift .score-comparator .select-field-filter").click();
         cy.get("protein-substitution-score-filter .sift .score-comparator .dropdown-menu").contains("<").click();
-        cy.get("protein-substitution-score-filter .sift .score-value input[type='text']").type("0.1");
+        cy.get("protein-substitution-score-filter .sift .score-value input[type='number']").type("0.1");
 
         cy.get("protein-substitution-score-filter .polyphen .score-comparator .select-field-filter").click();
         cy.get("protein-substitution-score-filter .polyphen .score-comparator .dropdown-menu").contains("≤").click();
-        cy.get("protein-substitution-score-filter .polyphen .score-value input[type='text']").type("0.1");
+        cy.get("protein-substitution-score-filter .polyphen .score-value input[type='number']").type("0.1");
 
         cy.get("div.search-button-wrapper button").click();
         checkResults("variant-browser-grid");

diff --git a/cypress/integration/006-opencga-case-interpreter.spec.js b/cypress/integration/006-opencga-case-interpreter.spec.js
@@ -43,44 +43,51 @@ context("6 - Case Interpreter", () => {
             .then($tr => {
                 const $caseId = Cypress.$("td:nth-child(1) a[data-cy='case-id']", $tr);
                 const caseId = $caseId.text().trim();
-                const caseType = Cypress.$("td:nth-child(1)  p[data-cy='case-type']", $tr).text().trim();
-                const probandId = Cypress.$("td:nth-child(2) p[data-cy='proband-id']", $tr).text().trim();
+                const caseType = Cypress.$("td:nth-child(1)  div[data-cy='case-type']", $tr).text().trim();
+
+                const probandId = Cypress.$("td:nth-child(2) span[data-cy='proband-id']", $tr).text().trim();
                 const probandSampleId = Cypress.$("td:nth-child(2)  p[data-cy='proband-sample-id']", $tr).text().trim();
                 cy.wrap($caseId).click();
-                cy.get("div.page-title h2", {timeout: TIMEOUT}).should("be.visible").and("contain", "Case Interpreter Case " + caseId);
+                cy.get("div.page-title h2", {timeout: TIMEOUT})
+                    .should("be.visible")
+                    .and("contain", "Case Interpreter")
+                    .and("contain", caseId);
 
                 // test Case Interpreter in Family Cases
-                console.log("caseType: FAMILY", caseType === "FAMILY");
                 if (caseType === "FAMILY") {
 
                     /**
                      * Overview test
                      */
                     cy.get(".variant-interpreter-wizard a.variant-interpreter-step").contains("Case Info").click();
                     // check Case ID in Overview
-                    cy.get("opencga-clinical-analysis-view > data-form .detail-row:nth-child(1)").contains("Case ID");
-                    cy.get("opencga-clinical-analysis-view > data-form .detail-row:nth-child(1)").then($div => {
+                    cy.get("clinical-analysis-view > data-form > div > div.row > div:nth-child(1) > div > div > div:nth-child(2) > div:nth-child(1) > div.col-md-3").contains("Case ID");
+                    cy.get("clinical-analysis-view > data-form > div > div.row > div:nth-child(1) > div > div > div:nth-child(2) > div:nth-child(1) > div.col-md-9").then($div => {
                         expect($div.first().text()).to.include(caseId);
                     });
                     // check Case Type in Overview
-                    cy.get("opencga-clinical-analysis-view > data-form .detail-row:nth-child(4)").contains("Analysis Type");
-                    cy.get("opencga-clinical-analysis-view > data-form .detail-row:nth-child(4)").then($div => {
+                    cy.get("clinical-analysis-view > data-form > div > div.row > div:nth-child(1) > div > div > div:nth-child(2) > div:nth-child(4)").contains("Analysis Type");
+                    cy.get("clinical-analysis-view > data-form > div > div.row > div:nth-child(1) > div > div > div:nth-child(2) > div:nth-child(4)").then($div => {
                         expect($div.first().text()).to.include("FAMILY");
                     });
 
-
                     /**
                      * Quality control test
                      */
                     cy.get(".variant-interpreter-wizard a.variant-interpreter-step").contains("Quality Control").click();
                     // Default tab in Quality Control is Overview
-                    cy.get("variant-interpreter-qc .content-tab-wrapper .content-tab.active .page-title h2").contains("Quality Control Overview - " + caseId);
+                    cy.get("variant-interpreter-qc tool-header .page-title h2")
+                        .should("be.visible")
+                        .and("contain", "Quality Control Overview")
+                        .and("contain", probandId);
 
                     // click on Quality Control/Sample Variant Stats
-                    cy.get("variant-interpreter-qc .nav-tabs a[data-id=SampleVariantStats]").click();
-                    cy.get("variant-interpreter-qc .content-tab-wrapper .content-tab.active .page-title h2").contains(`Sample Variant Stats - ${caseId} (${probandSampleId})`);
-                    // checks there are 9 charts
-                    cy.get("sample-variant-stats-view simple-chart").should("be.visible", {timeout: 120000}).and("have.length", 9);
+                    cy.get("variant-interpreter-qc .nav-tabs a[data-id=sample-variant-stats-family]").click();
+                    cy.get("variant-interpreter-qc tool-header .page-title h2")
+                        .should("be.visible")
+                        .and("contain", `Sample Variant Stats - ${probandId} (${probandSampleId})`);
+                    // checks there are 8 charts
+                    cy.get("sample-variant-stats-view simple-chart").should("be.visible", {timeout: 120000}).and("have.length", 8);
 
                     // select PASS filter
                     // cy.get("variant-browser-filter variant-file-info-filter input[data-cy='filter-pass']").click();
@@ -89,8 +96,8 @@ context("6 - Case Interpreter", () => {
 
                     cy.wait(1000);
                     cy.get("sample-variant-stats-browser loading-spinner", {timeout: 120000}).should("not.exist");
-                    // checks there are 9 charts after the search
-                    cy.get("sample-variant-stats-view simple-chart").should("be.visible", {timeout: 120000}).and("have.length", 9);
+                    // checks there are 8 charts after the search
+                    cy.get("sample-variant-stats-view simple-chart").should("be.visible", {timeout: 120000}).and("have.length", 8);
 
                     /**
                      * Sample Variant Browser test
@@ -105,14 +112,14 @@ context("6 - Case Interpreter", () => {
                     // checkResults("variant-interpreter-grid");
 
                     // check Disease Panel select is actually populated (but not querying for Diseases)
-                    cy.get("a[data-accordion-id=Clinical].collapsed").click();
+                    cy.get("variant-browser-filter a[data-cy-section-title=Clinical].collapsed").click();
                     cy.get("disease-panel-filter").should("be.visible");
-                    cy.get("disease-panel-filter button").click();
-                    cy.get("disease-panel-filter select-field-filter ul.dropdown-menu li").should("have.length.above", 0);
-                    cy.get("disease-panel-filter button").click();
+                    cy.get("disease-panel-filter button").first().click();
+                    cy.get("disease-panel-filter select-field-filter ul.dropdown-menu li").first().should("have.length.above", 0);
+                    cy.get("disease-panel-filter button").first().click();
 
                     // query LoF
-                    cy.get("variant-browser-filter a[data-accordion-id='ConsequenceType'].collapsed").click();
+                    cy.get("variant-browser-filter a[data-cy-section-title='ConsequenceType'].collapsed").click();
                     cy.get("consequence-type-select-filter input[value='Loss-of-Function (LoF)'").click({force: true});
                     cy.get("opencga-active-filters button[data-filter-name='ct']").contains("Consequence Types");
                     cy.get("div.search-button-wrapper button").click();

diff --git a/cypress/integration/013-welcome.spec.js b/cypress/integration/013-welcome.spec.js
@@ -17,7 +17,13 @@
 import {login, goTo} from "../plugins/utils.js";
 import {TIMEOUT} from "../plugins/constants.js";
 
+const homePanel = [
+    {id: "browser", title: "Variant Browser"},
+    {id: "clinicalAnalysisPortal", title: "Case Portal"},
+    {id: "cat-catalog", title: "Catalog"}
+];
 
+// resolve Home Category Cards (not used anymore)
 const resolveButtons = page => {
     cy.get(".login-overlay", {timeout: TIMEOUT}).should("not.exist");
     cy.get(`a[data-cat-id=${page.id}]`).should("be.visible").click();
@@ -44,11 +50,12 @@ context("13 - Welcome page", () => {
     });
 
     it("13.2 - check buttons resolves correctly", () => {
-
-        cy.get(".hi-icon-animation > a").each(el => {
-            const id = el.data("cat-id");
-            const title = el.data("title");
-            resolveButtons({id, title});
+        homePanel.forEach((el, i) => {
+            cy.get("div[data-cy-welcome-card-id=" + el.id + "]", {timeout: TIMEOUT}).should("be.visible");
+            cy.get("div[data-cy-welcome-card-id=" + el.id + "] a", {timeout: TIMEOUT}).first().click();
+            cy.get("div.page-title h2", {timeout: TIMEOUT}).should("be.visible").and("contain", el.title);
+            cy.wait(1000);
+            cy.get(".navbar-header > a[href='#home']").click();
         });
     });
 

diff --git a/cypress/integration/015-rest-api.spec.js b/cypress/integration/015-rest-api.spec.js
@@ -0,0 +1,39 @@
+/* eslint-disable cypress/no-unnecessary-waiting */
+/**
+ * Copyright 2015-2016 OpenCB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {login, goTo, getResult, checkResults, checkResultsOrNot, selectToken} from "../plugins/utils.js";
+import {TIMEOUT} from "../plugins/constants.js";
+
+const endpoints = [
+    "Users", "Projects", "Studies", "Files", "Jobs", "Samples", "Individuals", "Families", "Cohorts", "Disease Panels",
+    "Analysis - Alignment", "Analysis - Variant", "Analysis - Clinical", "Operations - Variant Storage", "Meta", "GA4GH", "Admin"
+];
+
+context("15 - Rest API", () => {
+    before(() => {
+        login();
+        goTo("iva");
+    });
+
+    it("15.0 - Check existence and order of endpoints", () => {
+        cy.get("a[data-user-menu='rest-api']").click({force: true});
+
+        cy.get("div[data-cy=rest-api-endpoints] .panel-title").each((item, i) => {
+            cy.wrap(item).should("contain.text", endpoints[i]);
+        });
+    });
+});
diff --git a/cypress/plugins/utils.js b/cypress/plugins/utils.js
@@ -28,9 +28,9 @@ export const login = () => {
     cy.visit("http://localhost:3000/src/sites/iva/#login");
     const username = Cypress.env("username");
     const password = Cypress.env("password");
-    cy.get("#opencgaUser").type(username);
-    cy.get("#opencgaPassword").type(password, {log: false});
-    cy.get("form#formLogin").submit();
+    cy.get("user-login .panel-body #user").type(username);
+    cy.get("user-login .panel-body #password").type(password, {log: false});
+    cy.get("button.btn-primary").contains("Sign In").click();
 
     // temp fix
     cy.get(".login-overlay", {timeout: TIMEOUT}).should("be.visible");
@@ -122,7 +122,6 @@ export const checkResultsOrNot = (gridSelector, id) => {
         });
 };
 
-
 /**
  * Given column and row coordinates, it returns the value of a single cell out of a bootstrap table
  * @param {String} gridSelector CSS selector of the table

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -93,7 +93,7 @@
     "babel-eslint": "^10.0.3",
     "core-js": "^3.17.2",
     "crisper": "~2.1.1",
-    "cypress": "^9.5.0",
+    "cypress": "^9.5.2",
     "cypress-wait-until": "^1.7.1",
     "dependency-cruiser": "^10.0.7",
     "eslint": "^7.29.0",

diff --git a/src/webcomponents/api/rest-api.js b/src/webcomponents/api/rest-api.js
@@ -91,7 +91,7 @@ export default class RestApi extends LitElement {
             <div class="row">
                 <div class="col-md-10 col-md-offset-1">
                     <div class="col-md-4 pre-scrollable-custom">
-                        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">
+                        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false" data-cy="rest-api-endpoints">
                             ${this.api?.map(category => {
                                 const categoryName = category.name.replaceAll(" ", "_");
                                 const isFirst = category.name === this.api[0].name;
@@ -122,7 +122,7 @@ export default class RestApi extends LitElement {
                                                             <span style="margin-right: 10px; font-weight: bold; color:${this.methodColor[endpoint.method]}">
                                                                 ${endpoint.method}
                                                             </span>
-                                                            <span style="font-weight:bold;word-break:break-word;text-align:left;">
+                                                            <span style="font-weight:bold;word-break:break-word;text-align:left;" data-cy="endpoint-path">
                                                                 ${endpoint.path.replace("/{apiVersion}", "")}
                                                             </span>
                                                         </button>

diff --git a/src/webcomponents/commons/layouts/custom-welcome.js b/src/webcomponents/commons/layouts/custom-welcome.js
@@ -107,7 +107,7 @@ export default class CustomWelcome extends LitElement {
                     const itemLink = `${item.id}${session?.project ? `/${session.project.id}/${session.study.id}`: ""}`;
                     return html`
                         <div class="col-md-3 com-sm-6">
-                            <div class="panel panel-default">
+                            <div class="panel panel-default" data-cy-welcome-card-id="${item.id}">
                                 <div class="panel-body" align="center" style="height:180px;">
                                     <a href="#${itemLink}" style="text-decoration:none!important;">
                                         <div align="center" class="">