diff --git a/cypress/e2e/iva/cohort-browser-grid.cy.js b/cypress/e2e/iva/cohort-browser-grid.cy.js
index 5613965ce6..fa9d3b4602 100644
--- a/cypress/e2e/iva/cohort-browser-grid.cy.js
+++ b/cypress/e2e/iva/cohort-browser-grid.cy.js
@@ -214,7 +214,7 @@ context("Cohort Browser Grid", () => {
                 });
         });
 
-        it("should hidden columns [Cohort ID,Creation Date]",() => {
+        it("should hide columns [Cohort ID,Creation Date]",() => {
             const columns = ["Cohort ID","Creation Date"];
             cy.get(`${browserGrid} thead th`)
                 .as("headerColumns");
@@ -290,49 +290,34 @@ context("Cohort Browser Grid", () => {
                 .find("li")
                 .contains("New Catalog Tab")
                 .click()
-                .should('be.visible');
+                .should("be.visible");
         });
     });
 
     context("detail tab", () => {
         it("should render", () => {
-            cy.get(browserDetail)
+            cy.get("detail-tabs")
                 .should("be.visible");
         });
 
-        it("should display info from the selected row",() => {
-            BrowserTest.getColumnIndexByHeader("Cohort ID");
-            cy.get("@indexColumn")
-                .then((indexColumn) => {
-                    const indexRow = 2;
-                    // eslint-disable-next-line cypress/unsafe-to-chain-command
-                    cy.get(`tbody tr`)
-                        .eq(indexRow)
-                        .click() // select the row
-                        .find("td")
-                        .eq(indexColumn)
-                        .invoke("text")
-                        .as("textRow");
-                    });
-
-            cy.get("@textRow")
-                .then((textRow) => {
-                    cy.get("detail-tabs > div.panel")
-                        .invoke("text")
-                        .then((text) => {
-                            const textTab = text.trim().split(" ");
-                            expect(textRow.trim()).to.equal(textTab[1].trim());
-                        });
-                });
+        it("should display info from the selected row", () => {
+            const cohort = "FIN";
+            cy.get(`tbody tr[data-uniqueid="${cohort}"]`)
+                .find(`td:first`)
+                .trigger("click");
+        
+            cy.get(`detail-tabs h3`)
+                .should("contain.text", `Cohort ${cohort}`);
         });
 
         it("should display 'JSON Data' Tab", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get(`detail-tabs > div.detail-tabs > ul`)
                 .find("li")
                 .contains("JSON Data")
-                .click()
-                .should('be.visible');
+                .trigger("click");
+            
+            cy.get("json-viewer")
+                .should("be.visible");
         });
     });
 });
diff --git a/cypress/e2e/iva/disease-panel-browser-grid.cy.js b/cypress/e2e/iva/disease-panel-browser-grid.cy.js
index 62daa6b8b7..51ed666d74 100644
--- a/cypress/e2e/iva/disease-panel-browser-grid.cy.js
+++ b/cypress/e2e/iva/disease-panel-browser-grid.cy.js
@@ -210,7 +210,7 @@ context("Disease Panel Browser Grid", () => {
                 });
         });
 
-        it("should hidden columns [Disorders,Source,Extra column]",() => {
+        it("should hide columns [Disorders,Source,Extra column]",() => {
             const columns = ["Disorders","Source","Extra column"];
             cy.get("disease-panel-grid thead th")
                 .as("headerColumns");
@@ -345,42 +345,23 @@ context("Disease Panel Browser Grid", () => {
         });
 
         it("should display info from the selected row",() => {
-            BrowserTest.getColumnIndexByHeader("Panel");
-            cy.get("@indexColumn")
-                .then(indexColumn => {
-                    const indexRow = 2;
-                    // eslint-disable-next-line cypress/unsafe-to-chain-command
-                    cy.get("tbody tr")
-                        .eq(indexRow)
-                        .click() // select the row
-                        .find("td")
-                        .eq(indexColumn)
-                        .invoke("text")
-                        .as("textRow");
-                });
-
-            cy.get("@textRow")
-                .then((textRow) => {
-                    const textRowTrimmed = textRow.trim();
-                    const lastLineMatch = textRowTrimmed.match(/(?:^|\n)([^\n]+)$/);
-                    const id = lastLineMatch ? lastLineMatch[1].trim() : textRowTrimmed;
-                    cy.get("detail-tabs > div.panel")
-                        .invoke("text")
-                        .then((text) => {
-                            const textTab = text.trim().split(" ");
-                            expect(id).to.equal(textTab[2].trim());
-                        });
-                });
+            const panel = "Familial_non_syndromic_congenital_heart_disease-PanelAppId-212";
+            cy.get(`tbody tr[data-uniqueid="${panel}"]`)
+                .find(`td:first`)
+                .trigger("click");
+        
+            cy.get(`detail-tabs h3`)
+                .should("contain.text", `Disease Panel ${panel}`);
         });
 
         it("should display 'JSON Data' Tab", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@detail")
                 .find("li")
                 .contains("JSON Data")
-                .click()
+                .trigger("click");
+            
+            cy.get("json-viewer")
                 .should("be.visible");
         });
     });
-
 });
diff --git a/cypress/e2e/iva/family-browser-grid.cy.js b/cypress/e2e/iva/family-browser-grid.cy.js
index f09a376eb7..bd355297b0 100644
--- a/cypress/e2e/iva/family-browser-grid.cy.js
+++ b/cypress/e2e/iva/family-browser-grid.cy.js
@@ -211,7 +211,7 @@ context("Family Browser Grid", () => {
                 });
         });
 
-        it("should hidden columns [Case ID,Phenotypes]",() => {
+        it("should hide columns [Case ID,Phenotypes]",() => {
             const columns = ["Case ID","Phenotypes"];
             cy.get(`${browserGrid} thead th`)
                 .as("headerColumns");
@@ -298,44 +298,30 @@ context("Family Browser Grid", () => {
         });
     });
 
-    context("detail tab",{tags: ["@shortTask","@testTask"]}, () => {
+    context("detail tab", {tags: ["@shortTask","@testTask"]}, () => {
         it("should render", () => {
             cy.get(browserDetail)
                 .should("be.visible");
         });
 
-        it("should display info from the selected row",() => {
-            BrowserTest.getColumnIndexByHeader("Family");
-            cy.get("@indexColumn")
-                .then((indexColumn) => {
-                    const indexRow = 1;
-                    // eslint-disable-next-line cypress/unsafe-to-chain-command
-                    cy.get("tbody tr")
-                        .eq(indexRow)
-                        .click() // select the row
-                        .find("td")
-                        .eq(indexColumn)
-                        .invoke("text")
-                        .as("textRow");
-                    });
-
-            cy.get("@textRow")
-                .then((textRow) => {
-                    cy.get("detail-tabs > div.panel")
-                        .invoke("text")
-                        .then((text) => {
-                            const textTab = text.trim().split(" ");
-                            expect(textRow).to.equal(textTab[1].trim());
-                        });
-                });
+        it("should display info from the selected row", () => {
+            const family = "919278";
+            cy.get(`tbody tr[data-uniqueid="${family}"]`)
+                .find(`td`)
+                .eq(1)
+                .trigger("click");
+        
+            cy.get(`detail-tabs h3`)
+                .should("contain.text", `Family ${family}`);
         });
 
         it("should display 'JSON Data' Tab", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("detail-tabs > div.detail-tabs > ul")
                 .find("li")
                 .contains("JSON Data")
-                .click()
+                .trigger("click");
+            
+            cy.get("json-viewer")
                 .should("be.visible");
         });
     });
diff --git a/cypress/e2e/iva/file-browser-grid.cy.js b/cypress/e2e/iva/file-browser-grid.cy.js
index 26304e2be7..a5e8a2140e 100644
--- a/cypress/e2e/iva/file-browser-grid.cy.js
+++ b/cypress/e2e/iva/file-browser-grid.cy.js
@@ -151,7 +151,7 @@ context("File Browser Grid", () => {
                 });
         });
 
-        it("should hidden columns [Name,Format]",() => {
+        it("should hide columns [Name,Format]",() => {
             const columns = ["Name","Format"];
             cy.get(`${browserGrid} thead th`)
                 .as("headerColumns");
@@ -229,7 +229,7 @@ context("File Browser Grid", () => {
         it("should display 'Extra Column' column", () => {
             cy.get("thead th")
                 .contains("Extra column")
-                .should('be.visible');
+                .should("be.visible");
         });
 
         it("should display 'New Catalog Tab' Tab", () => {
@@ -238,7 +238,7 @@ context("File Browser Grid", () => {
                 .find("li")
                 .contains("New Catalog Tab")
                 .click()
-                .should('be.visible');
+                .should("be.visible");
         });
     });
 
@@ -248,43 +248,24 @@ context("File Browser Grid", () => {
                 .should("be.visible");
         });
 
-        it("should display info from the selected row",() => {
-            BrowserTest.getColumnIndexByHeader("Name");
-            cy.get("@indexColumn")
-                .then((indexColumn) => {
-                    const indexRow = 2;
-                    // eslint-disable-next-line cypress/unsafe-to-chain-command
-                    cy.get(`tbody tr`)
-                        .eq(indexRow)
-                        .click() // select the row
-                        .find("td")
-                        .eq(indexColumn)
-                        .invoke("text")
-                        .as("textRow");
-                    });
-
-            cy.get("@textRow")
-                .then((textRow) => {
-                    cy.get("detail-tabs > div.panel")
-                        .invoke("text")
-                        .then((text) => {
-                            const textRowTrimmed = textRow.trim();
-                            const firstLineMatch = textRowTrimmed.match(/^([^\n]+)/);
-                            const id = firstLineMatch ? firstLineMatch[1].trim() : textRowTrimmed;
-
-                            const textTab = text.split(":");
-                            expect(id).to.equal(textTab[1].trim());
-                        });
-                });
+        it("should display info from the selected row", () => {
+            const file = "chinese:HG007_GRCh38_1_22_v4.2.1_benchmark.vcf.gz";
+            cy.get(`tbody tr[data-uniqueid="${file}"]`)
+                .find(`td:first`)
+                .trigger("click");
+        
+            cy.get(`detail-tabs h3`)
+                .should("contain.text", `File ${file}`);
         });
 
         it("should display 'Preview' Tab", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get(`detail-tabs > div.detail-tabs > ul`)
                 .find("li")
                 .contains("Preview")
-                .click()
-                .should('be.visible');
+                .trigger("click");
+            
+            cy.get("file-preview")
+                .should("be.visible");
         });
     });
 });
diff --git a/cypress/e2e/iva/individual-browser-grid.cy.js b/cypress/e2e/iva/individual-browser-grid.cy.js
index 468252cd66..69b9a267aa 100644
--- a/cypress/e2e/iva/individual-browser-grid.cy.js
+++ b/cypress/e2e/iva/individual-browser-grid.cy.js
@@ -212,7 +212,7 @@ context("Individual Browser Grid", () => {
                 });
         });
 
-        it("should hidden columns [Disorders,Case ID,Ethnicity]",() => {
+        it("should hide columns [Disorders,Case ID,Ethnicity]",() => {
             const columns = ["Disorders","Case ID","Ethnicity"];
             cy.get(`${browserGrid} thead th`)
                 .as("headerColumns");
@@ -425,7 +425,6 @@ context("Individual Browser Grid", () => {
 
     // DETAIL TABS
     context("Detail", () => {
-
         beforeEach(() => {
             cy.get("@container")
                 .find(`div[data-cy="ib-detail"]`)
@@ -437,44 +436,25 @@ context("Individual Browser Grid", () => {
                 .should("be.visible");
         });
 
-        it("should display info from the selected row",() => {
-            BrowserTest.getColumnIndexByHeader("Individual");
-            cy.get("@indexColumn")
-                .then(indexColumn => {
-                    const indexRow = 2;
-                    // eslint-disable-next-line cypress/unsafe-to-chain-command
-                    cy.get(`tbody tr`)
-                        .eq(indexRow)
-                        .click() // select the row
-                        .find("td")
-                        .eq(indexColumn)
-                        .invoke("text")
-                        .as("textRow");
-                });
-
-            cy.get("@textRow")
-                .then((textRow) => {
-                    cy.get("detail-tabs > div.panel")
-                        .invoke("text")
-                        .then((text) => {
-                            const textRowTrimmed = textRow.trim();
-                            const firstLineMatch = textRowTrimmed.match(/^([^\n]+)/);
-                            const id = firstLineMatch ? firstLineMatch[1].trim() : textRowTrimmed;
-
-                            const textTab = text.trim().split(" ");
-                            expect(id).to.equal(textTab[1].trim());
-                        });
-                });
+        it("should display info from the selected row", () => {
+            const individual = "NA12877";
+            cy.get(`tbody tr[data-uniqueid="${individual}"]`)
+                .find(`td`)
+                .eq(1)
+                .trigger("click");
+        
+            cy.get(`detail-tabs h3`)
+                .should("contain.text", `Individual ${individual}`);
         });
 
         it("should display 'JSON Data' Tab", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@detail")
                 .find("li")
                 .contains("JSON Data")
-                .click()
-                .should('be.visible');
+                .trigger("click");
+            
+            cy.get("json-viewer")
+                .should("be.visible");
         });
     });
-
 });
diff --git a/cypress/e2e/iva/job-browser-grid.cy.js b/cypress/e2e/iva/job-browser-grid.cy.js
index 2f99a3359e..a99bfcad91 100644
--- a/cypress/e2e/iva/job-browser-grid.cy.js
+++ b/cypress/e2e/iva/job-browser-grid.cy.js
@@ -151,7 +151,7 @@ context("Job Browser Grid", () => {
                 });
         });
 
-        it("should hidden columns [Status,Output Files,Runtime]",() => {
+        it("should hide columns [Status,Output Files,Runtime]",() => {
             const columns = ["Status","Output Files","Runtime"];
             cy.get(`${browserGrid} thead th`)
                 .as("headerColumns");
@@ -243,48 +243,30 @@ context("Job Browser Grid", () => {
         });
     });
 
-    context("detail tab",{tags: "@shortTask"}, () => {
+    context("detail tabs", {tags: "@shortTask"}, () => {
         it("should render", () => {
             cy.get(browserDetail)
                 .should("be.visible");
         });
 
-        it("should display info from the selected row",() => {
-            BrowserTest.getColumnIndexByHeader("Job ID");
-            cy.get("@indexColumn")
-                .then((indexColumn) => {
-                    const indexRow = 2;
-                    // eslint-disable-next-line cypress/unsafe-to-chain-command
-                    cy.get(`tbody tr`)
-                        .eq(indexRow)
-                        .click() // select the row
-                        .find("td")
-                        .eq(indexColumn)
-                        .invoke("text")
-                        .as("textRow");
-                    });
-
-            cy.get("@textRow")
-            .then((textRow) => {
-                cy.get("detail-tabs > div.panel")
-                    .invoke("text")
-                    .then((text) => {
-                        const textRowTrimmed = textRow.trim();
-                        const firstLineMatch = textRowTrimmed.match(/^([^\n]+)/);
-                        const id = firstLineMatch ? firstLineMatch[1].trim() : textRowTrimmed;
-
-                        const textTab = text.trim().split(" ");
-                        expect(id).to.equal(textTab[1].trim());
-                    });
-            });
+        it("should display info from the selected row", () => {
+            const job = "pedigree-graph-init.20230530144950.FWjipG";
+            cy.get(`tbody tr[data-uniqueid="${job}"]`)
+                .find(`td`)
+                .eq(1)
+                .trigger("click");
+        
+            cy.get(`detail-tabs h3`)
+                .should("contain.text", `Job ${job}`);
         });
 
         it("should display 'Logs' Tab", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get(`detail-tabs > div.detail-tabs > ul`)
                 .find("li")
                 .contains("Logs")
-                .click()
+                .trigger("click");
+            
+            cy.get("job-detail-log")
                 .should("be.visible");
         });
     });
diff --git a/cypress/e2e/iva/sample-browser-grid.cy.js b/cypress/e2e/iva/sample-browser-grid.cy.js
index 5bd84daa05..8d2af424d8 100644
--- a/cypress/e2e/iva/sample-browser-grid.cy.js
+++ b/cypress/e2e/iva/sample-browser-grid.cy.js
@@ -214,7 +214,7 @@ context("Sample Browser Grid", () => {
                 });
         });
 
-        it("should hidden columns [Collection Method,Preparation Method]",() => {
+        it("should hide columns [Collection Method,Preparation Method]",() => {
             const columns = ["Collection Method", "Preparation Method"];
             cy.get(`${browserGrid} thead th`)
                 .as("headerColumns");
@@ -401,14 +401,12 @@ context("Sample Browser Grid", () => {
             it("should display 'Extra Column' column", () => {
                 cy.get("thead th")
                     .contains("Extra column")
-                    .should('be.visible');
+                    .should("be.visible");
             });
         });
-
     });
 
     context("Detail", () => {
-
         beforeEach(() => {
             cy.get("@container")
                 .find(`div[data-cy="sb-detail"]`)
@@ -420,44 +418,24 @@ context("Sample Browser Grid", () => {
                 .should("be.visible");
         });
 
-        it("should display info from the selected row",() => {
-            BrowserTest.getColumnIndexByHeader("Sample ID");
-            cy.get("@indexColumn")
-                .then(indexColumn => {
-                    const indexRow = 2;
-                    // eslint-disable-next-line cypress/unsafe-to-chain-command
-                    cy.get(`tbody tr`)
-                        .eq(indexRow)
-                        .click() // select the row
-                        .find("td")
-                        .eq(indexColumn)
-                        .invoke("text")
-                        .as("textRow");
-                });
-
-            cy.get("@textRow")
-                .then((textRow) => {
-                    cy.get("detail-tabs > div.panel")
-                        .invoke("text")
-                        .then((text) => {
-                            const textRowTrimmed = textRow.trim();
-                            const firstLineMatch = textRowTrimmed.match(/^([^\n]+)/);
-                            const id = firstLineMatch ? firstLineMatch[1].trim() : textRowTrimmed;
-
-                            const textTab = text.trim().split(" ");
-                            expect(id).to.equal(textTab[1].trim());
-                        });
-                });
+        it("should display info from the selected row", () => {
+            const sample = "NA12889";
+            cy.get(`tbody tr[data-uniqueid="${sample}"]`)
+                .find(`td:first`)
+                .trigger("click");
+        
+            cy.get(`detail-tabs h3`)
+                .should("contain.text", `Sample ${sample}`);
         });
 
         it("should display 'JSON Data' Tab", () => {
-            // eslint-disable-next-line cypress/unsafe-to-chain-command
             cy.get("@detail")
                 .find("li")
                 .contains("JSON Data")
-                .click()
-                .should('be.visible');
+                .trigger("click");
+
+            cy.get("json-viewer")
+                .should("be.visible");
         });
     });
-
 });
diff --git a/cypress/e2e/iva/variant-browser-grid-cancer.cy.js b/cypress/e2e/iva/variant-browser-grid-cancer.cy.js
index 3c8778ce10..d1feb85e3e 100644
--- a/cypress/e2e/iva/variant-browser-grid-cancer.cy.js
+++ b/cypress/e2e/iva/variant-browser-grid-cancer.cy.js
@@ -69,7 +69,7 @@ context("Variant Browser Grid Cancer", () => {
                 });
         });
 
-        it("should hidden columns [Variant,Gene,Type]",() => {
+        it("should hide columns [Variant,Gene,Type]",() => {
             const columns = ["Variant","Gene","Type"];
             cy.get("variant-browser-grid thead th")
                 .as("headerColumns");
diff --git a/cypress/e2e/iva/variant-browser-grid-germline.cy.js b/cypress/e2e/iva/variant-browser-grid-germline.cy.js
index 7d8d43a5aa..fd586c02d4 100644
--- a/cypress/e2e/iva/variant-browser-grid-germline.cy.js
+++ b/cypress/e2e/iva/variant-browser-grid-germline.cy.js
@@ -69,7 +69,7 @@ context("Variant Browser Grid Germline", () => {
                 });
         });
 
-        it("should hidden columns [Type,Consequence Type,Gene]",() => {
+        it("should hide columns [Type,Consequence Type,Gene]",() => {
             const columns = ["Type","Consequence Type","Gene"];
             cy.get("variant-browser-grid thead th")
                 .as("headerColumns");
diff --git a/cypress/e2e/iva/variant-interpreter-grid-cancer-cnv.cy.js b/cypress/e2e/iva/variant-interpreter-grid-cancer-cnv.cy.js
index 5f641ec015..69a0d24e5c 100644
--- a/cypress/e2e/iva/variant-interpreter-grid-cancer-cnv.cy.js
+++ b/cypress/e2e/iva/variant-interpreter-grid-cancer-cnv.cy.js
@@ -64,7 +64,7 @@ context("Variant Interpreter Grid Cancer CNV", () => {
                 });
         });
 
-        it("should hidden columns [Type,Role in Cancer,Cohort Stats]",() => {
+        it("should hide columns [Type,Role in Cancer,Cohort Stats]",() => {
             const columns = ["Type","Role in Cancer","Cohort Stats"];
             cy.get("variant-interpreter-grid thead th").as("headerColumns");
             columns.forEach(col => {
diff --git a/cypress/e2e/iva/variant-interpreter-grid-cancer.cy.js b/cypress/e2e/iva/variant-interpreter-grid-cancer.cy.js
index fcacff7031..03ba4ecceb 100644
--- a/cypress/e2e/iva/variant-interpreter-grid-cancer.cy.js
+++ b/cypress/e2e/iva/variant-interpreter-grid-cancer.cy.js
@@ -68,7 +68,7 @@ context("Variant Interpreter Grid Cancer", () => {
                 });
         });
 
-        it("should hidden columns [Type,Consequence Type,Gene]",() => {
+        it("should hide columns [Type,Consequence Type,Gene]",() => {
             const columns = ["Consequence Type","Gene"];
             cy.get("variant-interpreter-grid thead th")
                 .as("headerColumns");
diff --git a/cypress/e2e/iva/variant-interpreter-grid-germline.cy.js b/cypress/e2e/iva/variant-interpreter-grid-germline.cy.js
index 2392e85498..692c424bbf 100644
--- a/cypress/e2e/iva/variant-interpreter-grid-germline.cy.js
+++ b/cypress/e2e/iva/variant-interpreter-grid-germline.cy.js
@@ -70,7 +70,7 @@ context("Variant Interpreter Grid Germiline", () => {
                 });
         });
 
-        it("should hidden columns [Type,Consequence Type,Gene]",() => {
+        it("should hide columns [Type,Consequence Type,Gene]",() => {
             const columns = ["Type","Consequence Type","Gene"];
             cy.get("variant-interpreter-grid thead th")
                 .as("headerColumns");
diff --git a/src/sites/test-app/test-app.js b/src/sites/test-app/test-app.js
index 37d26f73b3..22160850eb 100644
--- a/src/sites/test-app/test-app.js
+++ b/src/sites/test-app/test-app.js
@@ -668,10 +668,8 @@ class TestApp extends LitElement {
                 ${this.config.enabledComponents["file-browser-grid"] ? html`
                     <div class="content" id="file-browser-grid">
                         <file-browser-grid-test
-                            testFile="files-chinese"
-                            testDataVersion="${this.testDataVersion || ""}"
-                            .opencgaSession="${this.opencgaSession || {}}"
-                            .config="${this.config}">
+                            testDataVersion="${this.testDataVersion}"
+                            .opencgaSession="${this.opencgaSession}">
                         </file-browser-grid-test>
                     </div>
                 ` : nothing}
@@ -679,10 +677,8 @@ class TestApp extends LitElement {
                 ${this.config.enabledComponents["individual-browser-grid"] ? html`
                     <div class="content" id="individual-browser-grid">
                         <individual-browser-grid-test
-                            testFile="individuals-platinum"
-                            testDataVersion="${this.testDataVersion || ""}"
-                            .opencgaSession="${this.opencgaSession}"
-                            .config="${this.config}">
+                            testDataVersion="${this.testDataVersion}"
+                            .opencgaSession="${this.opencgaSession}">
                         </individual-browser-grid-test>
                     </div>
                 ` : nothing}
@@ -690,10 +686,8 @@ class TestApp extends LitElement {
                 ${this.config.enabledComponents["family-browser-grid"] ? html`
                     <div class="content" id="family-browser-grid">
                         <family-browser-grid-test
-                            testFile="families-platinum"
-                            testDataVersion="${this.testDataVersion || ""}"
-                            .opencgaSession="${this.opencgaSession || {}}"
-                            .config="${this.config}">
+                            testDataVersion="${this.testDataVersion}"
+                            .opencgaSession="${this.opencgaSession}">
                         </family-browser-grid-test>
                     </div>
                 ` : nothing}
@@ -701,10 +695,8 @@ class TestApp extends LitElement {
                 ${this.config.enabledComponents["cohort-browser-grid"] ? html`
                     <div class="content" id="cohort-browser-grid">
                         <cohort-browser-grid-test
-                            testFile="cohorts-1000G"
-                            testDataVersion="${this.testDataVersion || ""}"
-                            .opencgaSession="${this.opencgaSession || {}}"
-                            .config="${this.config}">
+                            testDataVersion="${this.testDataVersion}"
+                            .opencgaSession="${this.opencgaSession}">
                         </cohort-browser-grid-test>
                     </div>
                 ` : nothing}
@@ -712,10 +704,8 @@ class TestApp extends LitElement {
                 ${this.config.enabledComponents["sample-browser-grid"] ? html`
                     <div class="content" id="sample-browser-grid">
                         <sample-browser-grid-test
-                            testFile="samples-platinum"
-                            testDataVersion="${this.testDataVersion || ""}"
-                            .opencgaSession="${this.opencgaSession || {}}"
-                            .config="${this.config}">
+                            testDataVersion="${this.testDataVersion}"
+                            .opencgaSession="${this.opencgaSession}">
                         </sample-browser-grid-test>
                     </div>
                 ` : nothing}
@@ -723,10 +713,8 @@ class TestApp extends LitElement {
                 ${this.config.enabledComponents["job-browser-grid"] ? html`
                     <div class="content" id="job-browser-grid">
                         <job-browser-grid-test
-                            testFile="job-1000G"
-                            testDataVersion="${this.testDataVersion || ""}"
-                            .opencgaSession="${this.opencgaSession || {}}"
-                            .config="${this.config}">
+                            testDataVersion="${this.testDataVersion}"
+                            .opencgaSession="${this.opencgaSession}">
                         </job-browser-grid-test>
                     </div>
                 ` : nothing}
@@ -734,10 +722,8 @@ class TestApp extends LitElement {
                 ${this.config.enabledComponents["disease-panel-browser-grid"] ? html`
                     <div class="content" id="disease-panel-browser-grid">
                         <disease-panel-browser-grid-test
-                            testFile="disease-panels-platinum"
-                            testDataVersion="${this.testDataVersion || ""}"
-                            .opencgaSession="${this.opencgaSession || {}}"
-                            .config="${this.config}">
+                            testDataVersion="${this.testDataVersion}"
+                            .opencgaSession="${this.opencgaSession}">
                         </disease-panel-browser-grid-test>
                     </div>
                 ` : nothing}
diff --git a/src/sites/test-app/webcomponents/cohort-browser-grid-test.js b/src/sites/test-app/webcomponents/cohort-browser-grid-test.js
index abf65df515..de4960e3fe 100644
--- a/src/sites/test-app/webcomponents/cohort-browser-grid-test.js
+++ b/src/sites/test-app/webcomponents/cohort-browser-grid-test.js
@@ -17,7 +17,6 @@
 
 import {html, LitElement} from "lit";
 import UtilsNew from "../../../core/utils-new.js";
-import "../../../webcomponents/loading-spinner.js";
 import "../../../webcomponents/cohort/cohort-grid.js";
 import "../../../webcomponents/cohort/cohort-detail.js";
 import "../../../webcomponents/cohort/cohort-view.js";
@@ -38,149 +37,133 @@ class CohortBrowserGridTest extends LitElement {
 
     static get properties() {
         return {
-            testFile: {
-                type: String
-            },
             opencgaSession: {
                 type: Object
             },
             testDataVersion: {
                 type: String
             },
-            config: {
-                type: Object
-            },
-            _selectRow: {
-                type: Object,
-                state: true
-            },
         };
     }
 
     #init() {
         this.COMPONENT_ID = "cohort-browser";
-        this.isLoading = false;
-        this.data = [];
-        this._config = {};
-    }
-
-    #setLoading(value) {
-        this.isLoading = value;
-        this.requestUpdate();
+        this.FILES = [
+            "cohorts-1000G.json",
+        ];
+        this._data = null;
+        this._selectedRow = null;
+        this._config = this.getDefaultConfig();
     }
 
     update(changedProperties) {
-        if (changedProperties.has("testFile") &&
-            changedProperties.has("testDataVersion") &&
-            changedProperties.has("opencgaSession")) {
+        if (changedProperties.has("testDataVersion") || changedProperties.has("opencgaSession")) {
             this.opencgaSessionObserver();
         }
+
         super.update(changedProperties);
     }
 
     opencgaSessionObserver() {
-        this.#setLoading(true);
-        UtilsNew.importJSONFile(`./test-data/${this.testDataVersion}/${this.testFile}.json`)
-            .then(content => {
-                this.cohorts = content;
-                this.mutate();
-            })
-            .catch(err => {
-                console.log(err);
-            })
-            .finally(() => {
-                this.#setLoading(false);
+        if (this.opencgaSession && this.testDataVersion) {
+            const allPromises = this.FILES.map(file => {
+                return UtilsNew.importJSONFile(`./test-data/${this.testDataVersion}/${file}`);
             });
-    }
-
-    onSettingsUpdate() {
-        this._config = {
-            ...this.opencgaSession?.user?.configs?.IVA?.settings?.[this.COMPONENT_ID]?.grid,
-        };
-        this.opencgaSessionObserver();
-    }
 
-    getDefaultTabsConfig() {
-        return {
-            title: "Cohort",
-            showTitle: true,
-            items: [
-                {
-                    id: "cohort-view",
-                    name: "Overview",
-                    active: true,
-                    render: (cohort, active, opencgaSession) => {
-                        return html`
-                            <cohort-view
-                                .opencgaSession="${opencgaSession}"
-                                .cohort="${cohort}">
-                            </cohort-view>
-                        `;
-                    }
-                },
-                // {
-                //     id: "sample-view",
-                //     name: "Samples",
-                //     render: (cohort, active, opencgaSession) => {
-                //         return html`
-                //             <sample-grid
-                //                 .opencgaSession="${opencgaSession}"
-                //                 .query="${{cohortIds: cohort.id}}"
-                //                 .config="${{showSelectCheckbox: false}}"
-                //                 .active="${active}">
-                //             </sample-grid>
-                //         `;
-                //     }
-                // },
-                {
-                    id: "json-view",
-                    name: "JSON Data",
-                    render: (cohort, active, opencgaSession) => {
-                        return html`
-                            <json-viewer
-                                .data="${cohort}"
-                                .active="${active}">
-                            </json-viewer>
-                        `;
-                    }
-                }
-            ]
-        };
+            Promise.all(allPromises)
+                .then(data => {
+                    this._data = data[0];
+                    this._selectedRow = this._data[0];
+                    this.mutate();
+                    this.requestUpdate();
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        }
     }
 
     mutate() {
         return null;
     }
 
-    selectRow(e) {
-        this._selectRow = {...e.detail.row};
+    onSettingsUpdate() {
+        this._config.grid = {
+            ...this._config.grid,
+            ...this.opencgaSession?.user?.configs?.IVA?.settings?.[this.COMPONENT_ID]?.grid,
+        };
+        this.requestUpdate();
+    }
+
+    onSelectRow(e) {
+        this._selectedRow = e.detail.row;
+        this.requestUpdate();
     }
 
     render() {
-        if (this.isLoading) {
-            return html`<loading-spinner></loading-spinner>`;
+        if (!this._data) {
+            return "Loading...";
         }
 
         return html`
-            <h2 style="font-weight: bold;">
-                Catalog Browser Grid (${this.testFile})
-            </h2>
-            <cohort-grid
-                .toolId="${this.COMPONENT_ID}"
-                .cohorts="${this.cohorts}"
-                .opencgaSession="${this.opencgaSession}"
-                .config="${this._config}"
-                @settingsUpdate="${() => this.onSettingsUpdate()}"
-                @selectrow="${e => this.selectRow(e)}">
-            </cohort-grid>
-            <cohort-detail
-                .cohort="${this._selectRow}"
-                .opencgaSession="${this.opencgaSession}"
-                .config="${this.getDefaultTabsConfig()}">
-            </cohort-detail>
+            <div data-cy="cohort-browser">
+                <h2 style="font-weight: bold;">
+                    Cohort Browser Grid (${this.FILES[0]})
+                </h2>
+                <cohort-grid
+                    .toolId="${this.COMPONENT_ID}"
+                    .cohorts="${this._data}"
+                    .opencgaSession="${this.opencgaSession}"
+                    .config="${this._config.grid}"
+                    @settingsUpdate="${() => this.onSettingsUpdate()}"
+                    @selectrow="${e => this.onSelectRow(e)}">
+                </cohort-grid>
+                <cohort-detail
+                    .cohort="${this._selectedRow}"
+                    .opencgaSession="${this.opencgaSession}"
+                    .config="${this._config.detail}">
+                </cohort-detail>
+            </div>
         `;
     }
 
+    getDefaultConfig() {
+        return {
+            grid: {},
+            detail: {
+                title: "Cohort",
+                showTitle: true,
+                items: [
+                    {
+                        id: "cohort-view",
+                        name: "Overview",
+                        active: true,
+                        render: (cohort, active, opencgaSession) => {
+                            return html`
+                                <cohort-view
+                                    .opencgaSession="${opencgaSession}"
+                                    .cohort="${cohort}">
+                                </cohort-view>
+                            `;
+                        }
+                    },
+                    {
+                        id: "json-view",
+                        name: "JSON Data",
+                        render: (cohort, active) => {
+                            return html`
+                                <json-viewer
+                                    .data="${cohort}"
+                                    .active="${active}">
+                                </json-viewer>
+                            `;
+                        }
+                    }
+                ],
+            },
+        };
+    }
+
 }
 
 customElements.define("cohort-browser-grid-test", CohortBrowserGridTest);
diff --git a/src/sites/test-app/webcomponents/disease-panel-browser-grid-test.js b/src/sites/test-app/webcomponents/disease-panel-browser-grid-test.js
index d9b1751444..e7af4241e3 100644
--- a/src/sites/test-app/webcomponents/disease-panel-browser-grid-test.js
+++ b/src/sites/test-app/webcomponents/disease-panel-browser-grid-test.js
@@ -15,16 +15,12 @@
  */
 
 import {html, LitElement} from "lit";
-
 import UtilsNew from "../../../core/utils-new.js";
-
 import "../../../webcomponents/disease-panel/disease-panel-grid.js";
 import "../../../webcomponents/disease-panel/disease-panel-detail.js";
 import "../../../webcomponents/disease-panel/disease-panel-create.js";
 import "../../../webcomponents/disease-panel/disease-panel-update.js";
 
-import NotificationUtils from "../../../webcomponents/commons/utils/notification-utils.js";
-
 
 class DiseasePanelBrowserGridTest extends LitElement {
 
@@ -45,43 +41,19 @@ class DiseasePanelBrowserGridTest extends LitElement {
             testDataVersion: {
                 type: String
             },
-            _ready: {
-                type: Boolean,
-                state: true,
-            }
         };
     }
 
     #init() {
         this.COMPONENT_ID = "disease-panel-browser";
-        this._ready = false;
         this.FILES = [
             "disease-panels-platinum.json",
         ];
-        this._data = [];
-        this._selectedInstance = {};
-
-        this._config = {
-            pageSize: 10,
-            pageList: [10, 25, 50],
-            multiSelection: false,
-            showSelectCheckbox: false,
-            toolbar: {
-                showColumns: true,
-                showDownload: false,
-                showExport: false,
-                showSettings: false,
-                exportTabs: ["download", "link", "code"]
-            },
-        };
+        this._data = null;
+        this._selectedRow = {};
+        this._config = this.getDefaultConfig();
     }
 
-    // TODO: The Sample Browser Test needs to test two things:
-    //   1. The view:
-    //      - The sample browser: table grid and details
-    //      - The sample browser facet
-    //  2. The filters
-
     update(changedProperties) {
         if (changedProperties.has("testDataVersion") || changedProperties.has("opencgaSession")) {
             this.propertyObserver();
@@ -96,51 +68,39 @@ class DiseasePanelBrowserGridTest extends LitElement {
                 return UtilsNew.importJSONFile(`./test-data/${this.testDataVersion}/${file}`);
             });
 
-            // Import all files
             Promise.all(promises)
                 .then(data => {
                     this._data = data[0];
-                    this._selectedInstance = this._data[0];
-                    // Mutate data and update
+                    this._selectedRow = this._data[0];
                     this.mutate();
                     this.requestUpdate();
                 })
                 .catch(error => {
-                    NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, error);
-                }).finally(() => {
-                    this._ready = true;
+                    console.error(error);
                 });
         }
     }
 
+    mutate() {
+        return null;
+    }
+
     onSettingsUpdate() {
-        this._config = {
-            ...this._config,
+        this._config.grid = {
+            ...this._config.grid,
             ...this.opencgaSession?.user?.configs?.IVA?.settings?.[this.COMPONENT_ID]?.grid,
         };
-
-        this.propertyObserver();
-    }
-
-    mutate() {
-        // 1. Mutations related to date
-        // this._data[3].id = "";
-        // this._data[1].creationDate = "";
-        // this._data[2].creationDate = "20540101"; // No valid format
-        // this._data[2].creationDate = "20210527101416"; // Valid format
-
-        // Finally, we update samples mem address to force a rendering
-        // this._data = [...this._data];
+        this.requestUpdate();
     }
 
-    selectInstance(e) {
-        this._selectedInstance = e.detail.row;
+    onSelectRow(e) {
+        this._selectedRow = e.detail.row;
         this.requestUpdate();
     }
 
     render() {
-        if (!this._ready) {
-            return html `Processing`;
+        if (!this._data) {
+            return "Loading...";
         }
 
         return html`
@@ -152,46 +112,61 @@ class DiseasePanelBrowserGridTest extends LitElement {
                     .toolId="${this.COMPONENT_ID}"
                     .diseasePanels="${this._data}"
                     .opencgaSession="${this.opencgaSession}"
-                    .config="${this._config}"
+                    .config="${this._config.grid}"
                     @settingsUpdate="${() => this.onSettingsUpdate()}"
-                    @selectrow="${e => this.selectInstance(e)}">
+                    @selectrow="${e => this.onSelectRow(e)}">
                 </disease-panel-grid>
                 <disease-panel-detail
-                    .diseasePanel="${this._selectedInstance}"
+                    .diseasePanel="${this._selectedRow}"
                     .opencgaSession="${this.opencgaSession}"
-                    .config="${this.getDefaultTabsConfig()}">
+                    .config="${this._config.detail}">
                 </disease-panel-detail>
             </div>
         `;
     }
 
-    getDefaultTabsConfig() {
+    getDefaultConfig() {
         return {
-            title: "Disease Panel",
-            showTitle: true,
-            items: [
-                {
-                    id: "disease-panel-view",
-                    name: "Summary",
-                    active: true,
-                    render: (diseasePanel, _active, opencgaSession) => html`
-                        <disease-panel-summary
-                            .diseasePanel="${diseasePanel}"
-                            .opencgaSession="${opencgaSession}">
-                        </disease-panel-summary>
-                    `,
+            grid: {
+                pageSize: 10,
+                pageList: [10, 25, 50],
+                multiSelection: false,
+                showSelectCheckbox: false,
+                toolbar: {
+                    showColumns: true,
+                    showDownload: false,
+                    showExport: false,
+                    showSettings: false,
+                    exportTabs: ["download", "link", "code"]
                 },
-                {
-                    id: "json-view",
-                    name: "JSON Data",
-                    render: (diseasePanel, active) => html`
-                        <json-viewer
+            },
+            detail: {
+                title: "Disease Panel",
+                showTitle: true,
+                items: [
+                    {
+                        id: "disease-panel-view",
+                        name: "Summary",
+                        active: true,
+                        render: (diseasePanel, _active, opencgaSession) => html`
+                            <disease-panel-summary
+                                .diseasePanel="${diseasePanel}"
+                                .opencgaSession="${opencgaSession}">
+                            </disease-panel-summary>
+                        `,
+                    },
+                    {
+                        id: "json-view",
+                        name: "JSON Data",
+                        render: (diseasePanel, active) => html`
+                            <json-viewer
                                 .data="${diseasePanel}"
                                 .active="${active}">
-                        </json-viewer>
-                    `,
-                },
-            ]
+                            </json-viewer>
+                        `,
+                    },
+                ]
+            },
         };
     }
 
diff --git a/src/sites/test-app/webcomponents/family-browser-grid-test.js b/src/sites/test-app/webcomponents/family-browser-grid-test.js
index 5a14687361..f5091368e1 100644
--- a/src/sites/test-app/webcomponents/family-browser-grid-test.js
+++ b/src/sites/test-app/webcomponents/family-browser-grid-test.js
@@ -17,7 +17,6 @@
 
 import {html, LitElement} from "lit";
 import UtilsNew from "../../../core/utils-new.js";
-import "../../../webcomponents/loading-spinner.js";
 import "../../../webcomponents/family/family-grid.js";
 import "../../../webcomponents/family/family-detail.js";
 import "../../../webcomponents/family/family-view.js";
@@ -38,139 +37,131 @@ class FamilyBrowserGridTest extends LitElement {
 
     static get properties() {
         return {
-            testFile: {
-                type: String
-            },
             opencgaSession: {
                 type: Object
             },
             testDataVersion: {
                 type: String
             },
-            config: {
-                type: Object
-            },
-            _selectRow: {
-                type: Object,
-                state: true
-            },
-            _ready: {
-                type: Boolean,
-                state: true
-            }
         };
     }
 
     #init() {
         this.COMPONENT_ID = "family-browser";
-        this._ready = false;
-        this.data = [];
-        this._config = {};
+        this.FILES = [
+            "families-platinum.json",
+        ];
+        this._data = null;
+        this._selectedRow = null;
+        this._config = this.getDefaultConfig();
     }
 
-
     update(changedProperties) {
-        if (changedProperties.has("testFile") &&
-            changedProperties.has("testDataVersion") &&
-            changedProperties.has("opencgaSession")) {
+        if (changedProperties.has("testDataVersion") || changedProperties.has("opencgaSession")) {
             this.opencgaSessionObserver();
         }
-        super.update(changedProperties);
-    }
 
-    #setLoading(value) {
-        this.isLoading = value;
-        this.requestUpdate();
+        super.update(changedProperties);
     }
 
     opencgaSessionObserver() {
-        this.#setLoading(true);
-        UtilsNew.importJSONFile(`./test-data/${this.testDataVersion}/${this.testFile}.json`)
-            .then(content => {
-                this.families = content;
-                this.mutate();
-            })
-            .catch(err => {
-                console.log(err);
-            })
-            .finally(() => {
-                this.#setLoading(false);
+        if (this.opencgaSession && this.testDataVersion) {
+            const allPromises = this.FILES.map(file => {
+                return UtilsNew.importJSONFile(`./test-data/${this.testDataVersion}/${file}`);
             });
-    }
-
-    onSettingsUpdate() {
-        this._config = {
-            ...this.opencgaSession?.user?.configs?.IVA?.settings?.[this.COMPONENT_ID]?.grid,
-        };
-        this.opencgaSessionObserver();
-    }
 
-    getDefaultTabsConfig() {
-        return {
-            title: "Family",
-            showTitle: true,
-            items: [
-                {
-                    id: "family-view",
-                    name: "Overview",
-                    active: true,
-                    // visible:
-                    render: (family, active, opencgaSession) => html`
-                        <family-view
-                            .opencgaSession="${opencgaSession}"
-                            .family="${family}"
-                            @settingsUpdate="${() => this.onSettingsUpdate()}"
-                            .settings="${{}}">
-                        </family-view>
-                    `,
-                },
-                {
-                    id: "json-view",
-                    name: "JSON Data",
-                    render: (family, active, opencgaSession) => html`
-                        <json-viewer
-                            .data="${family}"
-                            .active="${active}">
-                        </json-viewer>
-                    `,
-                }
-            ]
-        };
+            Promise.all(allPromises)
+                .then(data => {
+                    this._data = data[0];
+                    this._selectedRow = this._data[0];
+                    this.mutate();
+                    this.requestUpdate();
+                })
+                .catch(err => {
+                    console.error(err);
+                });
+        }
     }
 
     mutate() {
         return null;
     }
 
-    selectRow(e) {
-        this._selectRow = {...e.detail.row};
+    onSettingsUpdate() {
+        this._config.grid = {
+            ...this._config.grid,
+            ...this.opencgaSession?.user?.configs?.IVA?.settings?.[this.COMPONENT_ID]?.grid,
+        };
+        this.requestUpdate();
+    }
+
+    onSelectRow(e) {
+        this._selectedRow = e.detail.row;
+        this.requestUpdate();
     }
 
     render() {
-        if (this.isLoading) {
-            return html`<loading-spinner></loading-spinner>`;
+        if (!this._data) {
+            return "Loading...";
         }
 
         return html`
-            <h2 style="font-weight: bold;">
-                Catalog Browser Grid (${this.testFile})
-            </h2>
-            <family-grid
-                .toolId="${this.COMPONENT_ID}"
-                .families="${this.families}"
-                .opencgaSession="${this.opencgaSession}"
-                .config="${this._config}"
-                @settingsUpdate="${() => this.onSettingsUpdate()}"
-                @selectrow="${e => this.selectRow(e)}">
-            </family-grid>
-            <family-detail
-                .family="${this._selectRow}"
-                .opencgaSession="${this.opencgaSession}"
-                .config="${this.getDefaultTabsConfig()}">
-            </family-detail>
+            <div data-cy="family-browser">
+                <h2 style="font-weight: bold;">
+                    Family Browser Grid (${this.FILES[0]})
+                </h2>
+                <family-grid
+                    .toolId="${this.COMPONENT_ID}"
+                    .families="${this._data}"
+                    .opencgaSession="${this.opencgaSession}"
+                    .config="${this._config.grid}"
+                    @settingsUpdate="${() => this.onSettingsUpdate()}"
+                    @selectrow="${e => this.onSelectRow(e)}">
+                </family-grid>
+                <family-detail
+                    .family="${this._selectedRow}"
+                    .opencgaSession="${this.opencgaSession}"
+                    .config="${this._config.detail}">
+                </family-detail>
+            </div>
         `;
     }
 
+    getDefaultConfig() {
+        return {
+            grid: {},
+            detail: {
+                title: "Family",
+                showTitle: true,
+                items: [
+                    {
+                        id: "family-view",
+                        name: "Overview",
+                        active: true,
+                        render: (family, active, opencgaSession) => html`
+                            <family-view
+                                .opencgaSession="${opencgaSession}"
+                                .family="${family}"
+                                @settingsUpdate="${() => this.onSettingsUpdate()}"
+                                .settings="${{}}">
+                            </family-view>
+                        `,
+                    },
+                    {
+                        id: "json-view",
+                        name: "JSON Data",
+                        render: (family, active) => html`
+                            <json-viewer
+                                .data="${family}"
+                                .active="${active}">
+                            </json-viewer>
+                        `,
+                    }
+                ],
+            },
+        };
+    }
+
 }
 
 customElements.define("family-browser-grid-test", FamilyBrowserGridTest);
diff --git a/src/sites/test-app/webcomponents/file-browser-grid-test.js b/src/sites/test-app/webcomponents/file-browser-grid-test.js
index 28fddfe505..b9ceeadd5a 100644
--- a/src/sites/test-app/webcomponents/file-browser-grid-test.js
+++ b/src/sites/test-app/webcomponents/file-browser-grid-test.js
@@ -17,7 +17,6 @@
 
 import {html, LitElement} from "lit";
 import UtilsNew from "../../../core/utils-new.js";
-import "../../../webcomponents/loading-spinner.js";
 import "../../../webcomponents/file/file-grid.js";
 import "../../../webcomponents/file/file-detail.js";
 
@@ -35,103 +34,103 @@ class FileBrowserGridTest extends LitElement {
 
     static get properties() {
         return {
-            testFile: {
-                type: String
-            },
             opencgaSession: {
                 type: Object
             },
             testDataVersion: {
                 type: String
             },
-            config: {
-                type: Object
-            },
-            _selectRow: {
-                type: Object,
-                state: true
-            },
         };
     }
 
     #init() {
         this.COMPONENT_ID = "file-browser";
-        this.isLoading = false;
-        this.data = [];
-        this._config = {};
-    }
-
-    #setLoading(value) {
-        this.isLoading = value;
-        this.requestUpdate();
+        this.FILES = [
+            "files-chinese.json",
+        ];
+        this._data = null;
+        this._selectedRow = null;
+        this._config = this.getDefaultConfig();
     }
 
     update(changedProperties) {
-        if (changedProperties.has("testFile") &&
-            changedProperties.has("testDataVersion") &&
-            changedProperties.has("opencgaSession")) {
+        if (changedProperties.has("testDataVersion") || changedProperties.has("opencgaSession")) {
             this.opencgaSessionObserver();
         }
+
         super.update(changedProperties);
     }
 
     opencgaSessionObserver() {
-        this.#setLoading(true);
-        UtilsNew.importJSONFile(`./test-data/${this.testDataVersion}/${this.testFile}.json`)
-            .then(content => {
-                this.files = content;
-                this.mutate();
-            })
-            .catch(err => {
-                console.log(err);
-            })
-            .finally(() => {
-                this.#setLoading(false);
+        if (this.opencgaSession && this.testDataVersion) {
+            const allPromises = this.FILES.map(file => {
+                return UtilsNew.importJSONFile(`./test-data/${this.testDataVersion}/${file}`);
             });
-    }
 
+            Promise.all(allPromises)
+                .then(data => {
+                    this._data = data[0];
+                    this._selectedRow = this._data[0];
+                    this.mutate();
+                    this.requestUpdate();
+                })
+                .catch(err => {
+                    console.error(err);
+                });
+        }
+    }
 
     mutate() {
         return null;
     }
 
-    selectRow(e) {
-        this._selectRow = {...e.detail.row};
+    onSelectRow(e) {
+        this._selectedRow = e.detail.row;
+        this.requestUpdate();
     }
 
     onSettingsUpdate() {
-        this._config = {
+        this._config.grid = {
+            ...this._config.grid,
             ...this.opencgaSession?.user?.configs?.IVA?.settings?.[this.COMPONENT_ID]?.grid,
         };
-        this.opencgaSessionObserver();
+        this.requestUpdate();
     }
 
-
     render() {
-        if (this.isLoading) {
-            return html`<loading-spinner></loading-spinner>`;
+        if (!this._data) {
+            return "Loading...";
         }
 
         return html`
-            <h2 style="font-weight: bold;">
-                Catalog Browser Grid (${this.testFile})
-            </h2>
-            <file-grid
-                .toolId="${this.COMPONENT_ID}"
-                .files="${this.files}"
-                .opencgaSession="${this.opencgaSession}"
-                .config="${this._config}"
-                @settingsUpdate="${() => this.onSettingsUpdate()}"
-                @selectrow="${e => this.selectRow(e)}">
-            </file-grid>
-            <file-detail
-                .file="${this._selectRow}"
-                .opencgaSession="${this.opencgaSession}">
-            </file-detail>
-
+            <div data-cy="file-browser">
+                <h2 style="font-weight: bold;">
+                    File Browser Grid (${this.FILES[0]})
+                </h2>
+                <file-grid
+                    .toolId="${this.COMPONENT_ID}"
+                    .files="${this._data}"
+                    .opencgaSession="${this.opencgaSession}"
+                    .config="${this._config.grid}"
+                    @settingsUpdate="${() => this.onSettingsUpdate()}"
+                    @selectrow="${e => this.onSelectRow(e)}">
+                </file-grid>
+                <file-detail
+                    .file="${this._selectedRow}"
+                    .opencgaSession="${this.opencgaSession}"
+                    .config="${this._config.detail}">
+                </file-detail>
+            </div>
         `;
     }
 
+    getDefaultConfig() {
+        return {
+            grid: {},
+            detail: {},
+        };
+    }
+
 }
 
 customElements.define("file-browser-grid-test", FileBrowserGridTest);
diff --git a/src/sites/test-app/webcomponents/individual-browser-grid-test.js b/src/sites/test-app/webcomponents/individual-browser-grid-test.js
index b0b68b9e19..efc9224f7d 100644
--- a/src/sites/test-app/webcomponents/individual-browser-grid-test.js
+++ b/src/sites/test-app/webcomponents/individual-browser-grid-test.js
@@ -21,7 +21,6 @@ import "../../../webcomponents/individual/individual-grid.js";
 import "../../../webcomponents/individual/individual-detail.js";
 import "../../../webcomponents/individual/individual-view.js";
 import "../../../webcomponents/commons/json-viewer.js";
-import NotificationUtils from "../../../webcomponents/commons/utils/notification-utils.js";
 import "../../../webcomponents/individual/individual-update.js";
 import "../../../webcomponents/individual/individual-create.js";
 
@@ -54,17 +53,12 @@ class IndividualBrowserGridTest extends LitElement {
             "individuals-platinum.json",
         ];
         this._data = null;
-        this._selectedInstance = {};
+        this._selectedRow = {};
 
-        this._config = {};
+        this._config = this.getDefaultConfig();
     }
 
     update(changedProperties) {
-        /* if (changedProperties.has("testFile") &&
-            changedProperties.has("testDataVersion") &&
-            changedProperties.has("opencgaSession")) {
-            this.opencgaSessionObserver();
-        } */
         if (changedProperties.has("testDataVersion") || changedProperties.has("opencgaSession")) {
             this.propertyObserver();
         }
@@ -82,56 +76,17 @@ class IndividualBrowserGridTest extends LitElement {
             Promise.all(promises)
                 .then(data => {
                     this._data = data[0];
-                    this._selectedInstance = this._data[0];
+                    this._selectedRow = this._data[0];
                     // Mutate data and update
                     this.mutate();
                     this.requestUpdate();
                 })
                 .catch(error => {
-                    NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, error);
+                    console.error(error);
                 });
         }
     }
 
-    onSettingsUpdate() {
-        this._config = {
-            ...this.opencgaSession?.user?.configs?.IVA?.settings?.[this.COMPONENT_ID]?.grid,
-        };
-        // this.propertyObserver();
-        this.requestUpdate();
-    }
-
-    getDefaultTabsConfig() {
-        return {
-            title: "Individual",
-            showTitle: true,
-            items: [
-                {
-                    id: "individual-view",
-                    name: "Overview",
-                    active: true,
-                    render: (individual, active, opencgaSession) => html`
-                        <individual-view
-                            .individual="${individual}"
-                            .active="${active}"
-                            .opencgaSession="${opencgaSession}">
-                        </individual-view>
-                    `,
-                },
-                {
-                    id: "json-view",
-                    name: "JSON Data",
-                    render: (individual, active, opencgaSession) => html`
-                        <json-viewer
-                            .data="${individual}"
-                            .active="${active}">
-                        </json-viewer>
-                    `,
-                }
-            ]
-        };
-    }
-
     mutate() {
         // return null;
         // Mutation 1: The first individual has annotations with the variable sets defined for the study
@@ -299,7 +254,7 @@ class IndividualBrowserGridTest extends LitElement {
 
         // Mutation 3: annotation columns enabled through the admin interface in filter.result.grid
         // See example of use in browser.settings.js, INDIVIDUAL_BROWSER
-        this._config.annotations = [
+        this._config.grid.annotations = [
             {
                 title: "Cardiology Tests",
                 position: 6,
@@ -317,8 +272,16 @@ class IndividualBrowserGridTest extends LitElement {
 
     }
 
-    selectInstance(e) {
-        this._selectedInstance = e.detail.row;
+    onSettingsUpdate() {
+        this._config.grid = {
+            ...this._config.grid,
+            ...this.opencgaSession?.user?.configs?.IVA?.settings?.[this.COMPONENT_ID]?.grid,
+        };
+        this.requestUpdate();
+    }
+
+    onSelectRow(e) {
+        this._selectedRow = e.detail.row;
         this.requestUpdate();
     }
 
@@ -336,19 +299,53 @@ class IndividualBrowserGridTest extends LitElement {
                     .toolId="${this.COMPONENT_ID}"
                     .individuals="${this._data}"
                     .opencgaSession="${this.opencgaSession}"
-                    .config="${this._config}"
+                    .config="${this._config.grid}"
                     @settingsUpdate="${() => this.onSettingsUpdate()}"
-                    @selectrow="${this.selectInstance}">
+                    @selectrow="${e => this.onSelectRow(e)}">
                 </individual-grid>
                 <individual-detail
-                    .individual="${this._selectedInstance}"
+                    .individual="${this._selectedRow}"
                     .opencgaSession="${this.opencgaSession}"
-                    .config="${this.getDefaultTabsConfig()}">
+                    .config="${this._config.detail}">
                 </individual-detail>
             </div>
         `;
     }
 
+    getDefaultConfig() {
+        return {
+            grid: {},
+            detail: {
+                title: "Individual",
+                showTitle: true,
+                items: [
+                    {
+                        id: "individual-view",
+                        name: "Overview",
+                        active: true,
+                        render: (individual, active, opencgaSession) => html`
+                            <individual-view
+                                .individual="${individual}"
+                                .active="${active}"
+                                .opencgaSession="${opencgaSession}">
+                            </individual-view>
+                        `,
+                    },
+                    {
+                        id: "json-view",
+                        name: "JSON Data",
+                        render: (individual, active) => html`
+                            <json-viewer
+                                .data="${individual}"
+                                .active="${active}">
+                            </json-viewer>
+                        `,
+                    }
+                ],
+            },
+        };
+    }
+
 }
 
 customElements.define("individual-browser-grid-test", IndividualBrowserGridTest);
diff --git a/src/sites/test-app/webcomponents/job-browser-grid-test.js b/src/sites/test-app/webcomponents/job-browser-grid-test.js
index c197e27527..dd2cab1a62 100644
--- a/src/sites/test-app/webcomponents/job-browser-grid-test.js
+++ b/src/sites/test-app/webcomponents/job-browser-grid-test.js
@@ -17,7 +17,6 @@
 
 import {html, LitElement} from "lit";
 import UtilsNew from "../../../core/utils-new.js";
-import "../../../webcomponents/loading-spinner.js";
 import "../../../webcomponents/job/job-grid.js";
 import "../../../webcomponents/job/job-detail.js";
 
@@ -35,98 +34,103 @@ class JobBrowserGridTest extends LitElement {
 
     static get properties() {
         return {
-            testFile: {
-                type: String
-            },
             opencgaSession: {
                 type: Object
             },
             testDataVersion: {
                 type: String
             },
-            config: {
-                type: Object
-            },
-            _selectRow: {
-                type: Object,
-                state: true
-            },
         };
     }
 
     #init() {
         this.COMPONENT_ID = "job-browser";
-        this.isLoading = false;
-        this.data = [];
-        this._config = {};
-    }
-
-    #setLoading(value) {
-        this.isLoading = value;
-        this.requestUpdate();
+        this.FILES = [
+            "job-1000G.json",
+        ];
+        this._data = null;
+        this._selectedRow = null;
+        this._config = this.getDefaultConfig();
     }
 
     update(changedProperties) {
-        if (changedProperties.has("testFile") &&
-            changedProperties.has("testDataVersion") &&
-            changedProperties.has("opencgaSession")) {
+        if (changedProperties.has("testDataVersion") || changedProperties.has("opencgaSession")) {
             this.opencgaSessionObserver();
         }
+
         super.update(changedProperties);
     }
 
     opencgaSessionObserver() {
-        this.#setLoading(true);
-        UtilsNew.importJSONFile(`./test-data/${this.testDataVersion}/${this.testFile}.json`)
-            .then(content => {
-                this.jobs = content;
-                this.mutate();
-            })
-            .catch(err => {
-                console.log(err);
-            })
-            .finally(() => {
-                this.#setLoading(false);
+        if (this.opencgaSession && this.testDataVersion) {
+            const allPromises = this.FILES.map(file => {
+                return UtilsNew.importJSONFile(`./test-data/${this.testDataVersion}/${file}`);
             });
+
+            Promise.all(allPromises)
+                .then(data => {
+                    this._data = data[0];
+                    this._selectedRow = this._data[0];
+                    this.mutate();
+                    this.requestUpdate();
+                })
+                .catch(err => {
+                    console.log(err);
+                });
+        }
     }
 
     mutate() {
         return null;
     }
 
-    selectRow(e) {
-        this._selectRow = {...e.detail.row};
+    onSelectRow(e) {
+        this._selectedRow = e.detail.row;
+        this.requestUpdate();
     }
 
     onSettingsUpdate() {
-        this._config = {...this.opencgaSession?.user?.configs?.IVA?.settings?.[this.COMPONENT_ID]?.grid};
-        this.opencgaSessionObserver();
+        this._config.grid = {
+            ...this._config.grid,
+            ...this.opencgaSession?.user?.configs?.IVA?.settings?.[this.COMPONENT_ID]?.grid,
+        };
+        this.requestUpdate();
     }
 
     render() {
-        if (this.isLoading) {
-            return html`<loading-spinner></loading-spinner>`;
+        if (!this._data) {
+            return "Loading...";
         }
 
         return html`
-            <h2 style="font-weight: bold;">
-                Catalog Browser Grid (${this.testFile})
-            </h2>
-            <job-grid
-                .toolId="${this.COMPONENT_ID}"
-                .jobs="${this.jobs}"
-                .opencgaSession="${this.opencgaSession}"
-                .config="${this._config}"
-                @settingsUpdate="${() => this.onSettingsUpdate()}"
-                @selectrow="${e => this.selectRow(e)}">
-            </job-grid>
-            <job-detail
-                .job="${this._selectRow}"
-                .opencgaSession="${this.opencgaSession}">
-            </job-detail>
+            <div data-cy="job-browser">
+                <h2 style="font-weight: bold;">
+                    Job Browser Grid (${this.FILES[0]})
+                </h2>
+                <job-grid
+                    .toolId="${this.COMPONENT_ID}"
+                    .jobs="${this._data}"
+                    .opencgaSession="${this.opencgaSession}"
+                    .config="${this._config.grid}"
+                    @settingsUpdate="${() => this.onSettingsUpdate()}"
+                    @selectrow="${e => this.onSelectRow(e)}">
+                </job-grid>
+                <job-detail
+                    .job="${this._selectedRow}"
+                    .opencgaSession="${this.opencgaSession}"
+                    .config="${this._config.detail}">
+                </job-detail>
+            </div>
         `;
     }
 
+    getDefaultConfig() {
+        return {
+            grid: {},
+            detail: {},
+        };
+    }
+
 }
 
 customElements.define("job-browser-grid-test", JobBrowserGridTest);
diff --git a/src/sites/test-app/webcomponents/sample-browser-grid-test.js b/src/sites/test-app/webcomponents/sample-browser-grid-test.js
index 9a1f431568..85e255b27b 100644
--- a/src/sites/test-app/webcomponents/sample-browser-grid-test.js
+++ b/src/sites/test-app/webcomponents/sample-browser-grid-test.js
@@ -20,7 +20,6 @@ import UtilsNew from "../../../core/utils-new.js";
 
 import "../../../webcomponents/sample/sample-grid.js";
 import "../../../webcomponents/sample/sample-detail.js";
-import NotificationUtils from "../../../webcomponents/commons/utils/notification-utils.js";
 import "../../../webcomponents/sample/sample-update.js";
 import "../../../webcomponents/sample/sample-create.js";
 
@@ -44,23 +43,18 @@ class SampleBrowserGridTest extends LitElement {
             testDataVersion: {
                 type: String
             },
-            _ready: {
-                type: Boolean,
-                state: true,
-            }
         };
     }
 
     #init() {
         this.COMPONENT_ID = "sample-browser";
-        this._ready = false;
         this.FILES = [
             "samples-platinum.json",
         ];
-        this._data = [];
-        this._selectedInstance = {};
+        this._data = null;
+        this._selectedRow = {};
 
-        this._config = {};
+        this._config = this.getDefaultConfig();
     }
 
     // TODO: The Sample Browser Test needs to test two things:
@@ -79,7 +73,6 @@ class SampleBrowserGridTest extends LitElement {
 
     propertyObserver() {
         if (this.opencgaSession && this.testDataVersion) {
-
             const promises = this.FILES.map(file => {
                 return UtilsNew.importJSONFile(`./test-data/${this.testDataVersion}/${file}`);
             });
@@ -88,57 +81,17 @@ class SampleBrowserGridTest extends LitElement {
             Promise.all(promises)
                 .then(data => {
                     this._data = data[0];
-                    this._selectedInstance = this._data[0];
+                    this._selectedRow = this._data[0];
                     // Mutate data and update
                     this.mutate();
                     this.requestUpdate();
                 })
                 .catch(error => {
-                    NotificationUtils.dispatch(this, NotificationUtils.NOTIFY_RESPONSE, error);
-                }).finally(() => {
-                    this._ready = true;
+                    console.error(error);
                 });
         }
     }
 
-    onSettingsUpdate() {
-        this._config = {
-            ...this.opencgaSession?.user?.configs?.IVA?.settings?.[this.COMPONENT_ID]?.grid,
-        };
-        this.propertyObserver();
-    }
-
-    getDefaultTabsConfig() {
-        return {
-            title: "Sample",
-            showTitle: true,
-            items: [
-                {
-                    id: "sample-view",
-                    name: "Overview",
-                    active: true,
-                    render: (sample, active, opencgaSession) => html`
-                                <sample-view
-                                    .sample="${sample}"
-                                    .active="${active}"
-                                    .opencgaSession="${opencgaSession}">
-                                </sample-view>
-                            `,
-                },
-                {
-                    id: "json-view",
-                    name: "JSON Data",
-                    render: (sample, active) => html`
-                        <json-viewer
-                            .data="${sample}"
-                            .active="${active}">
-                        </json-viewer>
-                    `,
-                }
-            ]
-        };
-    }
-
     mutate() {
         // 1. Mutations related to date
         // this._data[3].id = "";
@@ -150,14 +103,22 @@ class SampleBrowserGridTest extends LitElement {
         this._data = [...this._data];
     }
 
-    selectInstance(e) {
-        this._selectedInstance = e.detail.row;
+    onSettingsUpdate() {
+        this._config.grid = {
+            ...this._config.grid,
+            ...this.opencgaSession?.user?.configs?.IVA?.settings?.[this.COMPONENT_ID]?.grid,
+        };
+        this.requestUpdate();
+    }
+
+    onSelectRow(e) {
+        this._selectedRow = e.detail.row;
         this.requestUpdate();
     }
 
     render() {
-        if (!this._ready) {
-            return html `Processing`;
+        if (!this._data) {
+            return html`Processing...`;
         }
 
         return html`
@@ -169,19 +130,53 @@ class SampleBrowserGridTest extends LitElement {
                     .toolId="${this.COMPONENT_ID}"
                     .samples="${this._data}"
                     .opencgaSession="${this.opencgaSession}"
-                    .config="${this._config}"
+                    .config="${this._config?.grid}"
                     @settingsUpdate="${() => this.onSettingsUpdate()}"
-                    @selectrow="${this.selectInstance}">
+                    @selectrow="${e => this.onSelectRow(e)}">
                 </sample-grid>
                 <sample-detail
-                    .sample="${this._selectedInstance}"
+                    .sample="${this._selectedRow}"
                     .opencgaSession="${this.opencgaSession}"
-                    .config="${this.getDefaultTabsConfig()}">
+                    .config="${this._config?.detail}">
                 </sample-detail>
             </div>
         `;
     }
 
+    getDefaultConfig() {
+        return {
+            grid: {},
+            detail: {
+                title: "Sample",
+                showTitle: true,
+                items: [
+                    {
+                        id: "sample-view",
+                        name: "Overview",
+                        active: true,
+                        render: (sample, active, opencgaSession) => html`
+                            <sample-view
+                                .sample="${sample}"
+                                .active="${active}"
+                                .opencgaSession="${opencgaSession}">
+                            </sample-view>
+                        `,
+                    },
+                    {
+                        id: "json-view",
+                        name: "JSON Data",
+                        render: (sample, active) => html`
+                            <json-viewer
+                                .data="${sample}"
+                                .active="${active}">
+                            </json-viewer>
+                        `,
+                    }
+                ],
+            },
+        };
+    }
+
 }
 
 customElements.define("sample-browser-grid-test", SampleBrowserGridTest);