Austenem/CAT-957 Basic page tests

CHANGELOG-basic-page-tests.md

@@ -0,0 +1 @@
+- Add end-to-end tests that check whether all page types load successfully.

context/app/static/js/components/home/Title/Title.tsx

@@ -7,7 +7,7 @@ import { StyledDiv } from './style';
 function Title() {
   return (
     <StyledDiv>
-      <PageTitle>Human BioMolecular Atlas Program Data Portal</PageTitle>
+      <PageTitle data-testid="home-page-title">Human BioMolecular Atlas Program Data Portal</PageTitle>
       <Typography variant="h4" component="h2" color="secondary">
         An open platform to discover, visualize and download standardized healthy single-cell tissue data
       </Typography>

context/app/static/js/components/organ/OrganTile/OrganTile.tsx

@@ -35,6 +35,7 @@ function OrganTile({ organ: { name, uberon_short, icon, descendantCounts }, path
       footerContent={<EntityTileFooter descendantCounts={descendantCounts} />}
       tileWidth={tileWidth}
       invertColors={selected}
+      data-testid="organ-tile"
     />
   );
 }

context/app/static/js/components/searchPage/ResultsTable/ResultsTable.jsx

@@ -26,7 +26,7 @@ function ResultsTable({ hits, resultFields, detailsUrlPrefix, idField, sortOptio
             {resultFields.map((field) => (
               <StyledTableCell key={field.id}>
                 {field.id === 'hubmap_id' ? (
-                  <InternalLink href={detailsUrlPrefix + hit._source[idField]}>
+                  <InternalLink href={detailsUrlPrefix + hit._source[idField]} data-testid="hubmap-id-link">
                     {getByPath(hit._source, field)}
                   </InternalLink>
                 ) : (

context/app/static/js/components/workspaces/TemplateGrid/TemplateGrid.tsx

@@ -54,6 +54,7 @@ function TemplateGrid({
                     label: title,
                   })
                 }
+                data-testid="template-card"
               >
                 {title}
               </InternalLink>

context/app/static/js/components/workspaces/WorkspacesTitle/WorkspacesTitle.jsx

@@ -4,7 +4,11 @@ import IconPageTitle from 'js/shared-styles/pages/IconPageTitle';
 import WorkspacesIcon from 'assets/svg/workspaces.svg';
 
 function WorkspacesTitle() {
-  return <IconPageTitle icon={WorkspacesIcon}>My Workspaces</IconPageTitle>;
+  return (
+    <IconPageTitle icon={WorkspacesIcon} data-testid="my-workspaces-title">
+      My Workspaces
+    </IconPageTitle>
+  );
 }
 
 export default WorkspacesTitle;

context/app/static/js/pages/Biomarkers/Biomarkers.tsx

@@ -10,7 +10,7 @@ import BiomarkersPanelList from 'js/components/biomarkers/BiomarkersPanelList';
 export default function Biomarkers() {
   return (
     <BiomarkersSearchProvider>
-      <PanelListLandingPage title="Biomarkers" description={<Description />} noIcon>
+      <PanelListLandingPage title="Biomarkers" description={<Description />} noIcon data-testid="biomarkers-title">
         <BiomarkerSearchBar />
         <BiomarkersPanelList />
       </PanelListLandingPage>

context/app/static/js/pages/Cells/Cells.tsx

@@ -36,7 +36,9 @@ function Cells() {
   return (
     <AccordionStepsProvider stepsLength={steps.length}>
       <CellsTutorial setParametersButtonRef={setParametersButtonRef} runQueryButtonRef={runQueryButtonRef} />
-      <PageTitle color="primary">Datasets: Molecular Data Queries (BETA)</PageTitle>
+      <PageTitle data-testid="molecular-data-queries-title" color="primary">
+        Datasets: Molecular Data Queries (BETA)
+      </PageTitle>
       <Stack component={SectionPaper} direction="column" spacing={2}>
         <Typography>
           Retrieve datasets based on the abundance of transcriptomic, epigenomic, and proteomic biomarkers across cells,

context/app/static/js/pages/Collections/Collections.tsx

@@ -15,6 +15,7 @@ function Collections() {
       title="Collections"
       subtitle={panelsProps.length > 0 ? `${panelsProps.length} Collections` : undefined}
       description={description}
+      data-testid="collections-title"
     >
       <PanelList panelsProps={panelsProps} />
     </PanelListLandingPage>

context/app/static/js/pages/Diversity/Diversity.jsx

@@ -9,7 +9,7 @@ function Diversity() {
   return (
     <>
       <PageTitleWrapper>
-        <PageTitle>HuBMAP Donor Diversity</PageTitle>
+        <PageTitle data-testid="diversity-title">HuBMAP Donor Diversity</PageTitle>
         <DescriptionPaper>
           <Typography>
             The goal of HuBMAP is to develop an open and global platform to map healthy cells in the human body. To

context/app/static/js/pages/Organ/Organ.tsx

@@ -101,7 +101,7 @@ function Organ({ organ }: OrganProps) {
 
   return (
     <DetailLayout sections={shouldDisplaySection}>
-      <Typography variant="subtitle1" component="h1" color="primary">
+      <Typography variant="subtitle1" component="h1" color="primary" data-testid="entity-title">
         Organ
       </Typography>
       <Typography variant="h1" component="h2">

context/app/static/js/pages/Organs/Organs.jsx

@@ -19,7 +19,7 @@ function Organs({ organs }) {
   return (
     <SectionContainer>
       <RedirectAlert messageTemplate={organNotFoundMessageTemplate} />
-      <SectionHeader variant="h1" component="h1">
+      <SectionHeader data-testid="organs-title" variant="h1" component="h1">
         Organs
       </SectionHeader>
       <StyledTypography variant="subtitle1" component="h2" color="primary">

context/app/static/js/pages/Publications/Publications.jsx

@@ -37,6 +37,7 @@ function Publications() {
       title="Publications"
       subtitle={publicationsCount > 0 && `${publicationsCount} Publications`}
       description={<Description />}
+      data-testid="publications-title"
     >
       <StyledTabs
         data-testid="publication-tabs"

context/app/static/js/pages/SavedLists/SavedLists.jsx

@@ -39,7 +39,7 @@ function SavedLists() {
           Items successfully added to list.
         </StyledAlert>
       )}
-      <StyledHeader variant="h2" component="h1">
+      <StyledHeader variant="h2" component="h1" data-testid="my-lists-title">
         My Lists
       </StyledHeader>
       <SpacingDiv>

context/app/static/js/pages/Services/Services.jsx

@@ -14,7 +14,7 @@ function Services() {
   return (
     <>
       <SectionContainer>
-        <SectionHeader variant="h1" component="h1">
+        <SectionHeader variant="h1" component="h1" data-testid="services-title">
           Services
         </SectionHeader>
         <Description>

context/app/static/js/pages/Templates/Templates.tsx

@@ -10,7 +10,9 @@ import { WorkspacesEventCategories } from 'js/components/workspaces/types';
 function Templates() {
   return (
     <Stack spacing={3}>
-      <IconPageTitle icon={WorkspacesIcon}>Templates</IconPageTitle>
+      <IconPageTitle icon={WorkspacesIcon} data-testid="templates-title">
+        Templates
+      </IconPageTitle>
       <TemplatePreviewSection trackingInfo={{ category: WorkspacesEventCategories.WorkspaceTemplateLandingPage }} />
     </Stack>
   );

context/app/static/js/pages/Tutorial/Tutorial.tsx

@@ -29,7 +29,7 @@ function Tutorial({ tutorialName }: TutorialProps) {
   const { title, description, iframeLink } = tutorials[tutorialName];
   return (
     <Stack spacing={2}>
-      <PageTitle>{title}</PageTitle>
+      <PageTitle data-testid="tutorial-title">{title}</PageTitle>
       <SectionPaper>{description}</SectionPaper>
       <StyledIframe src={iframeLink} title={title} />
     </Stack>

context/app/static/js/pages/Tutorials/Tutorials.tsx

@@ -26,13 +26,19 @@ const StyledLink = styled('a')(({ theme }) => ({
 function Tutorials() {
   return (
     <Stack spacing={2}>
-      <PageTitle>Tutorials</PageTitle>
+      <PageTitle data-testid="tutorials-title">Tutorials</PageTitle>
       <SectionPaper>Browse tutorials of how to navigate the HuBMAP Data Portal for your specific needs.</SectionPaper>
       <Grid container alignItems="stretch">
         {Object.values(tutorials).map(({ title, description, tags, route }) => (
           <Grid item xs={4} key={title} aria-label={`${title} tutorial`}>
             <StyledLink href={`/tutorials/${route}`}>
-              <SelectableCard title={title} description={description} cardKey={title} tags={tags} />
+              <SelectableCard
+                title={title}
+                description={description}
+                cardKey={title}
+                tags={tags}
+                data-testid="tutorial-card"
+              />
             </StyledLink>
           </Grid>
         ))}

context/app/static/js/pages/search/DevSearch.jsx

@@ -118,7 +118,7 @@ function DevSearch() {
   );
   return (
     <>
-      <SearchHeader component="h1" variant="h2">
+      <SearchHeader component="h1" variant="h2" data-testid="dev-search-title">
         Dev Search
       </SearchHeader>
       <Alert severity="info" $marginBottom="16">

context/app/static/js/pages/search/Search.jsx

@@ -83,7 +83,7 @@ function Search({ title }) {
   return (
     <>
       <SearchHeader component="h1" variant="h2">
-        <SearchEntityHeader data-testid="entity-header">
+        <SearchEntityHeader data-testid="search-header">
           <StyledSvgIcon component={entityIconMap[capitalizedType]} color="primary" />
           {title}
         </SearchEntityHeader>

context/app/static/js/shared-styles/alerts/LoginAlert.tsx

@@ -28,6 +28,7 @@ export default function LoginAlert({ featureName, trackingInfo }: LoginAlertProp
           Log in
         </Button>
       }
+      data-testid="login-alert"
     >
       You must be logged in to access {featureName}.
       {featureName === 'workspaces'

context/app/static/js/shared-styles/panels/PanelListLandingPage/PanelListLandingPage.tsx

@@ -11,10 +11,10 @@ interface PanelListLandingPageProps extends PropsWithChildren {
   noIcon?: boolean;
 }
 
-function PanelListLandingPage({ title, subtitle, description, children, noIcon }: PanelListLandingPageProps) {
+function PanelListLandingPage({ title, subtitle, description, children, noIcon, ...rest }: PanelListLandingPageProps) {
   return (
     <PageWrapper>
-      <PageTitle data-testid="landing-page-title">{title}</PageTitle>
+      <PageTitle {...rest}>{title}</PageTitle>
       <Typography variant="subtitle1" color="primary" data-testid="landing-page-subtitle">
         {subtitle}
       </Typography>

context/app/static/js/shared-styles/tiles/Tile/Tile.tsx

@@ -13,9 +13,18 @@ interface TileProps {
   tileWidth: number;
 }
 
-function Tile({ href, icon, invertColors = false, bodyContent, footerContent, tileWidth, onClick }: TileProps) {
+function Tile({
+  href,
+  icon,
+  invertColors = false,
+  bodyContent,
+  footerContent,
+  tileWidth,
+  onClick,
+  ...rest
+}: TileProps) {
   const tile = (
-    <StyledPaper $invertColors={invertColors} $tileWidth={tileWidth} onClick={onClick}>
+    <StyledPaper $invertColors={invertColors} $tileWidth={tileWidth} onClick={onClick} {...rest}>
       <Stack p={1} boxSizing="content-box" direction="row">
         {icon}
         <FlexGrow>{bodyContent}</FlexGrow>

end-to-end/cypress/e2e/maintenance/maintenance.cy.js

@@ -3,4 +3,4 @@ describe("portal-ui-maintenance", () => {
     cy.visit("http://localhost:8000");
     cy.contains("Portal Maintenance");
   });
-});
+});

end-to-end/cypress/e2e/portal/dataset-search-tutorial.cy.js → end-to-end/cypress/e2e/portal/flows/dataset-search-tutorial.cy.js

@@ -1,10 +1,10 @@
-import defaultSearch from "../../fixtures/dataset-search/default";
-import limitedDataTypesSearch from "../../fixtures/dataset-search/fewer-than-5-organs";
+import defaultSearch from "../../../fixtures/dataset-search/default";
+import limitedDataTypesSearch from "../../../fixtures/dataset-search/fewer-than-5-organs";
 
 import {
   defaultSteps,
   stepToAddIfViewMoreExists,
-} from "../../../../context/app/static/js/components/tutorials/SearchDatasetTutorial/config";
+} from "../../../../../context/app/static/js/components/tutorials/SearchDatasetTutorial/config";
 
 function traverseSteps(steps) {
   cy.wrap(steps).each((step, i) => {

end-to-end/cypress/e2e/portal/load-all-pages.cy.js

@@ -0,0 +1,91 @@
+/******************************************************************************************
+ * 
+ *  Tests whether all page types load successfully.
+ * 
+ *  Description:
+ *  ----------------------------------------------------------------------------
+ *  Checks that the title element of each page type is visible. Navigates to an example of
+ *  each detail page by clicking on the first available option from the list/table.
+ * 
+ ******************************************************************************************/
+
+describe("Landing pages all load", () => {
+  const pages = [
+    { name: "Biomarkers", url: "/biomarkers", testId: "biomarkers-title" },
+    { name: "Collections", url: "/collections", testId: "collections-title" },
+    { name: "Datasets", url: "/search?entity_type[0]=Dataset", testId: "search-header" },
+    { name: "Dev Search", url: "/dev-search", testId: "dev-search-title" },
+    { name: "Donor Diversity", url: "/diversity", testId: "diversity-title" },
+    { name: "Donors", url: "/search?entity_type[0]=Donor", testId: "search-header" },
+    { name: "Home", url: "/", testId: "home-page-title" },
+    { name: "My Lists", url: "/my-lists", testId: "my-lists-title" },
+    { name: "My Workspaces", url: "/workspaces", testId: "my-workspaces-title" },
+    { name: "Molecular Data Queries", url: "/cells", testId: "molecular-data-queries-title" },
+    { name: "Organs", url: "/organ", testId: "organs-title" },
+    { name: "Profile", url: "/profile", testId: "login-alert" },
+    { name: "Publications", url: "/publications", testId: "publications-title" },
+    { name: "Samples", url: "/search?entity_type[0]=Sample", testId: "search-header" },
+    { name: "Services", url: "/services", testId: "services-title" },
+    { name: "Templates", url: "/templates", testId: "templates-title" },
+    { name: "Tutorials", url: "/tutorials", testId: "tutorials-title" },
+  ];  
+
+  context("macbook-size", () => {
+    beforeEach(() => {
+      cy.viewport("macbook-15");
+    });
+
+    pages.forEach((page) => {
+      it(`loads ${page.name} page`, () => {
+        cy.visit(page.url);
+        cy.findByTestId(page.testId).should("exist").and("be.visible");
+      });
+    });
+  });
+});
+
+describe("Entity detail page all load", () => {
+  const pages = [
+    { name: "Collection", url: "/collections", testId: "panel-title" },
+    { name: "Dataset", url: "/search?entity_type[0]=Dataset", testId: "hubmap-id-link" },
+    { name: "Donor", url: "/search?entity_type[0]=Donor", testId: "hubmap-id-link" },
+    { name: "Organ", url: "/organ", testId: "organ-tile" },
+    { name: "Publication", url: "/publications", testId: "panel-title" },
+    { name: "Sample", url: "/search?entity_type[0]=Sample", testId: "hubmap-id-link" },
+  ];  
+
+  context("macbook-size", () => {
+    beforeEach(() => {
+      cy.viewport("macbook-15");
+    });
+
+    pages.forEach((page) => {
+      it(`loads a ${page.name} detail page`, () => {
+        cy.visit(page.url);
+        cy.findAllByTestId(page.testId).first().click();
+        cy.findByTestId("entity-title").should("exist").and("be.visible");
+      });
+    });
+  });
+});
+
+describe("Other detail pages all load", () => {
+  const pages = [
+    { name: "Tutorial", url: "/tutorials", testId: "tutorial-card", titleTestId: "tutorial-title" },
+    { name: "Template", url: "/templates", testId: "template-card", titleTestId: "entity-title" },
+  ];  
+
+  context("macbook-size", () => {
+    beforeEach(() => {
+      cy.viewport("macbook-15");
+    });
+
+    pages.forEach((page) => {
+      it(`loads a ${page.name} page`, () => {
+        cy.visit(page.url);
+        cy.findAllByTestId(page.testId).first().click();
+        cy.findByTestId(page.titleTestId).should("exist").and("be.visible");
+      });
+    });
+  });
+});

end-to-end/cypress/e2e/portal/portal-ui.cy.js → end-to-end/cypress/e2e/portal/pages/home.cy.js

@@ -53,5 +53,22 @@ describe("portal-ui", () => {
       // cy.contains('Warning!');
       // cy.contains('Mock Entity');
     });
+
+    it("has working preview pages", () => {
+      cy.visit("/");
+      cy.contains("Resources").click();
+      cy.contains("Cell Type Annotations").click();
+      cy.contains("HuBMAP Data Portal Previews demonstrate functionality");
+      cy.contains("Rahul Satija");
+      // Vitessce loads, pulling data from the network.
+      // Are incidental network requests ok, as long as tests don't depend on them?
+    });
+    it("has links to docs pages", () => {
+      cy.visit("/");
+      cy.contains("Resources").click();
+      cy.contains("FAQ");
+      cy.contains("About");
+      cy.contains("Technical");
+    });
   });
 });