diff --git a/CHANGELOG-hmp-103-round-2.md b/CHANGELOG-hmp-103-round-2.md new file mode 100644 index 0000000000..39434a6191 --- /dev/null +++ b/CHANGELOG-hmp-103-round-2.md @@ -0,0 +1 @@ +- Expanded test suite for Publication pages \ No newline at end of file diff --git a/context/app/static/js/components/detailPage/ContributorsTable/ContributorsTable.jsx b/context/app/static/js/components/detailPage/ContributorsTable/ContributorsTable.jsx index 0481667513..30d9368f2d 100644 --- a/context/app/static/js/components/detailPage/ContributorsTable/ContributorsTable.jsx +++ b/context/app/static/js/components/detailPage/ContributorsTable/ContributorsTable.jsx @@ -21,7 +21,7 @@ function ContributorsTable({ title, contributors = [] }) { ]; return ( - + {title} @@ -29,16 +29,25 @@ function ContributorsTable({ title, contributors = [] }) { {columns.map((column) => ( - {column.label} + + {column.label} + ))} - + ORCID {contributors.map(({ orcid_id, name, affiliation }) => ( - + {name} {affiliation} diff --git a/context/app/static/js/components/detailPage/files/Files/Files.jsx b/context/app/static/js/components/detailPage/files/Files/Files.jsx index 1a15db34c4..8491c9e4d3 100644 --- a/context/app/static/js/components/detailPage/files/Files/Files.jsx +++ b/context/app/static/js/components/detailPage/files/Files/Files.jsx @@ -38,7 +38,7 @@ function Files({ files, uuid, hubmap_id, visLiftedUUID }) { return ( - + Files {files.length > 0 && ( diff --git a/context/app/static/js/components/detailPage/provenance/ProvTabs/ProvTabs.jsx b/context/app/static/js/components/detailPage/provenance/ProvTabs/ProvTabs.jsx index 07a5216f92..fb77340a73 100644 --- a/context/app/static/js/components/detailPage/provenance/ProvTabs/ProvTabs.jsx +++ b/context/app/static/js/components/detailPage/provenance/ProvTabs/ProvTabs.jsx @@ -30,9 +30,9 @@ function ProvTabs({ provData }) { return ( - {shouldDisplayTable && } - - {shouldDisplayDag && } + {shouldDisplayTable && } + + {shouldDisplayDag && } {shouldDisplayTable && ( diff --git a/context/app/static/js/components/publications/PublicationVisualizationsSection/PublicationsVisualizationSection.jsx b/context/app/static/js/components/publications/PublicationVisualizationsSection/PublicationsVisualizationSection.jsx index bc40a13278..98f19f4929 100644 --- a/context/app/static/js/components/publications/PublicationVisualizationsSection/PublicationsVisualizationSection.jsx +++ b/context/app/static/js/components/publications/PublicationVisualizationsSection/PublicationsVisualizationSection.jsx @@ -23,7 +23,7 @@ function PublicationsVisualizationSection({ vignette_json: { vignettes }, uuid } const handleChange = useCallback((i) => (event, isExpanded) => setExpandedIndex(isExpanded ? i : false), []); return ( - + Visualizations {sortedVignettes.map((vignette, i) => { return ( @@ -32,11 +32,16 @@ function PublicationsVisualizationSection({ vignette_json: { vignettes }, uuid } expanded={i === expandedIndex} TransitionProps={{ onEntered: () => setDisplayedVignettes((prev) => ({ ...prev, [i]: true })) }} onChange={handleChange(i)} + data-testid="vignette" > - }> + } + data-testid={`vignette-${i}-button`} + > {`Vignette ${i + 1}: ${vignette.name}`} - + { context("macbook-size", () => { beforeEach(() => { cy.viewport("macbook-15"); - cy.visit(`/browse/publication/${publicationId}`); + cy.intercept( + { + hostname: "hubmapconsortium.org", + url: new RegExp(`.*${publicationId}\/data.*`), + }, + (res) => res.destroy() + ).then(() => { + cy.visit(`/browse/publication/${publicationId}`); + }); }); - it("has a title, abstract, manuscript link, citation, data types, organs, and publication date listed", () => { + it("has a title", () => { cy.findByTestId("entity-title").contains(title); - cy.findByTestId("publication-abstract").should("exist"); - cy.findByTestId("publication-manuscript-link").should("exist"); - cy.findByTestId("publication-citation").should("exist"); - cy.findByTestId("publication-data-types").contains("CODEX"); - cy.findByTestId("publication-organs").contains("Lymph Node"); - cy.findByTestId("publication-date").contains("2023-02-27"); - }); - it("has a table of contents with links to the publication summary, data, files, authors, and provenance", () => { + }); + it("has an abstract", () => { + cy.findByTestId("publication-abstract").contains( + "Vitessce is an open-source interactive visualization framework" + ); + }); + it("has a manuscript link", () => { + cy.findByTestId("publication-manuscript-link").contains( + "https://osf.io/y8thv" + ); + }); + it("has a citation section", () => { + cy.findByTestId("publication-citation") + .should("contain", title) + .and("contain", "Keller"); + }); + it("has data types listed", () => { + cy.findByTestId("publication-data-types") + .should("contain", "CODEX") + .and("contain", "CODEX [Cytokit + SPRM]") + .and("contain", "MALDI IMS"); + }); + it("has organs listed", () => { + cy.findByTestId("publication-organs") + .should("contain", "Kidney (Left)") + .and("contain", "Spleen"); + }); + it("has a publication date", () => { + cy.findByTestId("publication-date").contains("2021-10-18"); + }); + it("has a table of contents with links to the summary, data, visualizations, files, authors, and provenance sections", () => { cy.findByTestId("table-of-contents") .should("contain", "Summary") .and("contain", "Data") + .and("contain", "Visualizations") .and("contain", "Files") .and("contain", "Authors") .and("contain", "Provenance"); @@ -31,80 +63,160 @@ describe("Publication page", () => { cy.findByTestId("donors-tab") .should("exist") .and("contain", "Donors") - .and("contain", "(1)"); - cy.findAllByTestId("donor-row").should("have.length", 1); + .and("contain", "(2)"); + cy.findAllByTestId("donor-row").should("have.length", 2); // Samples tab needs to be clicked to activate cy.findByTestId("samples-tab") .should("exist") + .and("have.attr", "aria-selected", "false") .and("contain", "Samples") - .and("contain", "(3)") + .and("contain", "(7)") .click(); - cy.wait(100); - cy.findAllByTestId("sample-row").should("have.length", 3); + cy.findByTestId("samples-tab").should( + "have.attr", + "aria-selected", + "true" + ); + cy.findAllByTestId("sample-row").should("have.length", 7); // Datasets tab needs to be clicked to activate cy.findByTestId("datasets-tab") .should("exist") + .and("have.attr", "aria-selected", "false") .and("contain", "Datasets") - .and("contain", "(1)") + .and("contain", "(3)") .click(); - cy.wait(100); - cy.findAllByTestId("dataset-row").should("have.length", 1); + + cy.findByTestId("datasets-tab").should( + "have.attr", + "aria-selected", + "true" + ); + cy.findAllByTestId("dataset-row").should("have.length", 3); }); - it('has dynamic links to the search page that change when different tabs in the "Data" section are clicked', () => { - describe("donors tab link", () => { - cy.visit(`/browse/publication/${publicationId}`); - cy.findByTestId("donors-tab") - .should("exist") - .and("have.attr", "aria-selected", "true"); - cy.findByTestId("view-related-data-button") - .invoke("attr", "href") - .then((href) => - cy.visit(href).then(() => { - cy.title().should("include", "Donors"); - }) - ); - }); - describe("samples tab link", () => { - cy.visit(`/browse/publication/${publicationId}`); - cy.findByTestId("samples-tab") - .should("exist") - .and("have.attr", "aria-selected", "false") - .click(); - cy.wait(100); - cy.findByTestId("view-related-data-button") - .invoke("attr", "href") - .then((href) => - cy.visit(href).then(() => { - cy.title().should("include", "Samples"); - }) - ); - }); - describe("datasets tab link", () => { - cy.visit(`/browse/publication/${publicationId}`); - cy.findByTestId("datasets-tab") - .should("exist") - .and("have.attr", "aria-selected", "false") - .click(); - cy.wait(100); - cy.findByTestId("view-related-data-button") - .invoke("attr", "href") - .then((href) => - cy.visit(href).then(() => { - cy.title().should("include", "Datasets"); - }) - ); - }); + it("links to the donors search page when the Donors tab is active", () => { + cy.findByTestId("donors-tab") + .should("exist") + .and("have.attr", "aria-selected", "true"); + cy.findByTestId("view-related-data-button") + .invoke("attr", "href") + .then((href) => + cy.visit(href).then(() => { + cy.title().should("include", "Donors"); + }) + ); + }); + it("links to the samples search page when the Samples tab is active", () => { + cy.findByTestId("samples-tab") + .should("exist") + .and("have.attr", "aria-selected", "false") + .click(); + cy.findByTestId("samples-tab").should( + "have.attr", + "aria-selected", + "true" + ); + cy.findByTestId("view-related-data-button") + .invoke("attr", "href") + .then((href) => + cy.visit(href).then(() => { + cy.title().should("include", "Samples"); + }) + ); + }); + + it("links to the datasets search page when the Datasets tab is active", () => { + cy.findByTestId("datasets-tab") + .should("exist") + .and("have.attr", "aria-selected", "false") + .click(); + cy.findByTestId("datasets-tab").should( + "have.attr", + "aria-selected", + "true" + ); + cy.findByTestId("view-related-data-button") + .invoke("attr", "href") + .then((href) => + cy.visit(href).then(() => { + cy.title().should("include", "Datasets"); + }) + ); }); it("has a visible Entity Header when the user scrolls down the page", () => { cy.findByTestId("entity-header").should("not.exist"); cy.scrollTo("bottom"); + cy.wait(50); cy.findByTestId("entity-header") .should("be.visible") .and("contain", title); }); + + it("has six vignettes", () => { + cy.findAllByTestId("vignette").should("have.length", 6); + }); + + it("has the first vignette expanded by default", () => { + cy.findByTestId("vignette-0-button").should( + "have.attr", + "aria-expanded", + "true" + ); + cy.findByTestId("vignette-0-content").should("be.visible"); + ["1", "2", "3", "4", "5"].forEach((i) => { + cy.findByTestId(`vignette-${i}-button`).should( + "have.attr", + "aria-expanded", + "false" + ); + cy.findByTestId(`vignette-${i}-content`).should("not.be.visible"); + }); + }); + + it("expands other vignettes when they're clicked", () => { + ["1", "2", "3", "4", "5"].forEach((i) => { + // Force it to allow clicking while the button is animating since this is a bit flaky + // Once we switch to `createRoot` this action should be performant enough to remove the { force: true } + cy.findByTestId(`vignette-${i}-button`).click({ force: true }); + cy.findByTestId(`vignette-${i}-button`).should( + "have.attr", + "aria-expanded", + "true" + ); + cy.findByTestId(`vignette-${i}-content`).should("be.visible"); + }); + }); + + it("has a link to the files in Globus", () => { + cy.findByTestId("files") + .should("contain", "Bulk Data Transfer") + .and( + "contain", + "Files are available through the Globus Research Data Management System" + ); + }); + + it('has a "Authors" section with a list of author names, affiliations, and ORCIDs', () => { + cy.findByTestId("authors").should("exist"); + cy.findByTestId("authors-name-header").should("exist"); + cy.findByTestId("authors-affiliation-header").should("exist"); + cy.findByTestId("authors-orcid-header").should("exist"); + cy.findAllByTestId("contributor-row").should("have.length", 6); + }); + + it('has a "Provenance" section with a "graph" tab', () => { + cy.get("#provenance") + .should("exist") + .and("contain", "Provenance") + .and("contain", "Graph"); + cy.findByTestId("prov-graph-tab").should( + "have.attr", + "aria-selected", + "true" + ); + }); }); });