Add UI test suite

strudel-taskflows/src/pages/compare-data/_tests/compare-data.cy.ts

@@ -0,0 +1,26 @@
+describe('The Compare Data Task Flow', () => {
+  beforeEach(() => {
+    cy.visit('/compare-data');
+  });
+
+  it('successfully loads', () => {
+    cy.get('h1').contains('Compare Data')
+  });
+
+  it('selects two rows and compares them', () => {
+    cy.get('.MuiCheckbox-root').eq(1).click();
+    cy.get('button[data-testid="cpd-compare-button"]').should('be.disabled')
+    cy.get('.MuiCheckbox-root').eq(2).click();
+    cy.get('button[data-testid="cpd-compare-button"]')
+      .contains('Compare Scenarios (2)', { matchCase: false })
+      .click();
+    cy.get('.MuiDataGrid-columnHeader').should('have.length', 3)
+  });
+
+  it('opens the new item page and closes it', () => {
+    cy.get('button[data-testid="cpd-new-button"]').click();
+    cy.get('button[data-testid="cpd-cancel-button"]');
+    cy.get('button[data-testid="cpd-save-button"]').click();
+    cy.get('button[data-testid="cpd-compare-button"]');
+  });
+});

strudel-taskflows/src/pages/compare-data/index.tsx

@@ -2,11 +2,11 @@ import { Box, Button, Container, Link, Paper, Stack } from '@mui/material';
 import { GridToolbar } from '@mui/x-data-grid';
 import React from 'react';
 import { Link as RouterLink } from 'react-router-dom';
-import { DataGrid } from '@mui/x-data-grid';
 import { PageHeader } from '../../components/PageHeader';
 import { useCompareData } from './_context/ContextProvider';
 import { setSelectedRows } from './_context/actions';
 import { taskflow } from './_config/taskflow.config';
+import { SciDataGrid } from '../../components/SciDataGrid';
 
 /**
  * List page to show comparable items in the compare-data Task Flow.
@@ -27,26 +27,29 @@ const ScenarioList: React.FC = () => {
         actions={
           <Stack direction="row">
             <Box>
-              <Link component={RouterLink} to="compare">
-                {state.selectedRows.length === 0 && (
-                  <Button 
-                    variant="outlined"
-                  >
-                    Compare {taskflow.properties.itemNamePlural}
-                  </Button>
-                )}
-                {state.selectedRows.length > 0 && (
+              {state.selectedRows.length < 2 && (
+                <Button 
+                  variant="outlined"
+                  disabled
+                  data-testid="cpd-compare-button"
+                >
+                  Compare {taskflow.properties.itemNamePlural}
+                </Button>
+              )}
+              {state.selectedRows.length > 1 && (
+                <Link component={RouterLink} to="compare">
                   <Button 
-                    variant={state.selectedRows.length > 1 ? 'contained' : 'outlined' }
+                    variant="contained"
+                    data-testid="cpd-compare-button"
                   >
                     Compare {taskflow.properties.itemNamePlural} ({state.selectedRows.length})
                   </Button>
-                )}
-              </Link>
+                </Link>
+              )}
             </Box>
             <Box>
               <Link component={RouterLink} to="new">
-                <Button variant="contained">
+                <Button variant="contained" data-testid="cpd-new-button">
                   New {taskflow.properties.itemName}
                 </Button>
               </Link>
@@ -61,12 +64,12 @@ const ScenarioList: React.FC = () => {
       <Container
         maxWidth="xl"
         sx={{
-          marginTop: 3,
-          marginBottom: 3,
+          paddingTop: 3,
+          paddingBottom: 3,
         }}
       >
         <Paper>
-          <DataGrid
+          <SciDataGrid
             rows={state.data}
             getRowId={(row) => row[state.dataIdField]}
             columns={state.columns}
@@ -76,6 +79,9 @@ const ScenarioList: React.FC = () => {
             disableRowSelectionOnClick
             disableDensitySelector
             disableColumnFilter
+            initialState={{
+              pagination: { paginationModel: { page: 1, pageSize: 25 } }
+            }}
             slots={{ toolbar: GridToolbar }}
             slotProps={{
               toolbar: {

strudel-taskflows/src/pages/compare-data/new.tsx

@@ -36,14 +36,14 @@ export const NewScenario: React.FC = () => {
           <Stack direction="row">
             <Box>
               <Link component={RouterLink} to="..">
-                <Button variant="contained" color="warning">
+                <Button variant="contained" color="warning" data-testid="cpd-cancel-button">
                   Cancel
                 </Button>
               </Link>
             </Box>
             <Box>
               <Link component={RouterLink} to="..">
-                <Button variant="contained">
+                <Button variant="contained" data-testid="cpd-save-button">
                   Save {taskflow.properties.itemName}
                 </Button>
               </Link>

strudel-taskflows/src/pages/contribute-data/_tests/contribute-data.cy.ts

@@ -0,0 +1,32 @@
+describe('The Contribute Data Task Flow', () => {
+  beforeEach(() => {
+    cy.visit('/contribute-data');
+  });
+
+  it('successfully loads', () => {
+    cy.get('h1').contains('Register')
+  });
+
+  it('publishes a new dataset', () => {
+    cy.get('button[data-testid="ctd-submit-button"]').click();
+    cy.get('button[data-testid="ctd-new-button"]').click();
+    cy.get('h2').first().contains('Metadata');
+    cy.get('h2').eq(1).contains('Dataset Files');
+    cy.get('button[data-testid="ctd-save-button"]').click();
+    cy.get('.MuiAlert-colorSuccess');
+    cy.get('h2').should('have.length', 2);
+    cy.get('button[data-testid="ctd-checks-button"]').click();
+    cy.wait(6000);
+    cy.get('button[data-testid="ctd-publish-button"]').click();
+    cy.get('button[data-testid="ctd-new-button"]');
+  });
+
+  it('edits and cancels a dataset', () => {
+    cy.get('button[data-testid="ctd-submit-button"]').click();
+    cy.get('button[data-testid="ctd-new-button"]').click();
+    cy.get('button[data-testid="ctd-save-button"]').click();
+    cy.get('button[data-testid="ctd-edit-button"]').click();
+    cy.get('button[data-testid="ctd-cancel-button"]').click();
+    cy.get('button[data-testid="ctd-new-button"]');
+  });
+});

strudel-taskflows/src/pages/contribute-data/index.tsx

@@ -78,7 +78,7 @@ const Register: React.FC = () => {
             </Box>
             <Box>
               <Link component={RouterLink} to="portal">
-                <Button variant="contained">
+                <Button variant="contained" data-testid="ctd-submit-button">
                   Submit Registration
                 </Button>
               </Link>

strudel-taskflows/src/pages/contribute-data/new.tsx

@@ -31,14 +31,14 @@ const NewDataset: React.FC = () => {
           <Stack direction="row">
             <Box>
               <Link component={RouterLink} to="../portal">
-                <Button variant="contained" color="warning">
+                <Button variant="contained" color="warning" data-testid="ctd-cancel-button">
                   Cancel
                 </Button>
               </Link>
             </Box>
             <Box>
               <Link component={RouterLink} to="../review">
-                <Button variant="contained" sx={{ whiteSpace: 'nowrap' }}>
+                <Button variant="contained" data-testid="ctd-save-button" sx={{ whiteSpace: 'nowrap' }}>
                   Save Dataset
                 </Button>
               </Link>

strudel-taskflows/src/pages/contribute-data/portal.tsx

@@ -31,7 +31,7 @@ const ContributorPortal: React.FC = () => {
             {taskflow.pages.portal.title}
           </Typography>
           <Link component={RouterLink} to="../new">
-            <Button variant="contained">
+            <Button variant="contained" data-testid="ctd-new-button">
               New Dataset
             </Button>
           </Link>

strudel-taskflows/src/pages/contribute-data/review.tsx

@@ -72,7 +72,7 @@ const ReviewDataset: React.FC = () => {
             <Stack direction="row">
               <Box>
                 <Link component={RouterLink} to="../new">
-                  <Button variant="contained" sx={{ whiteSpace: 'nowrap' }}>
+                  <Button variant="contained" data-testid="ctd-edit-button" sx={{ whiteSpace: 'nowrap' }}>
                     Edit Dataset
                   </Button>
                 </Link>
@@ -81,6 +81,7 @@ const ReviewDataset: React.FC = () => {
                 <Button
                   variant="contained"
                   onClick={() => startRunChecks()}
+                  data-testid="ctd-checks-button"
                   sx={{ whiteSpace: 'nowrap' }}
                 >
                   Run Checks
@@ -89,7 +90,7 @@ const ReviewDataset: React.FC = () => {
               {state.checksComplete && (
                 <Box>
                   <Link component={RouterLink} to="../portal">
-                    <Button variant="contained" sx={{ whiteSpace: 'nowrap' }}>
+                    <Button variant="contained" data-testid="ctd-publish-button" sx={{ whiteSpace: 'nowrap' }}>
                       Publish Dataset
                     </Button>
                   </Link>

strudel-taskflows/src/pages/monitor-activities/_config/taskflow.config.ts

@@ -16,7 +16,7 @@ export const taskflow: MonitorActivitiesConfig = {
       /**
        * Source of the data for the detail view of a single item. 
        */
-      source: "default/monitor-activities/experiment_detail.json",
+      source: "data/default/monitor-activities/experiment_detail.json",
       /**
        * Field name for the unique ID in the data source.
        */

strudel-taskflows/src/pages/monitor-activities/_tests/monitor-activities.cy.ts

@@ -0,0 +1,25 @@
+describe('The Monitor Activities Task Flow', () => {
+  beforeEach(() => {
+    cy.visit('/monitor-activities');
+  });
+
+  it('successfully loads', () => {
+    cy.get('h1').contains('Experiments')
+  });
+
+  it('drills into a row and shows details', () => {
+    cy.get('.MuiDataGrid-columnHeader').should('have.length', 4);
+    cy.get('.MuiDataGrid-row').eq(1).click();
+    cy.get('button[data-testid="mna-back-button"]');
+    cy.get('.MuiDataGrid-columnHeader').should('have.length', 3);
+    cy.get('h2').contains('Notes');
+    cy.get('.js-plotly-plot');
+
+  });
+
+  it('drills into a row and goes back', () => {
+    cy.get('.MuiDataGrid-row').eq(1).click();
+    cy.get('button[data-testid="mna-back-button"]').click();
+    cy.get('.MuiDataGrid-columnHeader').should('have.length', 4);
+  });
+});

strudel-taskflows/src/pages/monitor-activities/detail.tsx

@@ -39,7 +39,7 @@ const ActivityDetail: React.FC = () => {
       <Stack>
         <Stack direction="row" alignItems="center">
           <Link component={RouterLink} to="../">
-            <IconButton>
+            <IconButton data-testid="mna-back-button">
               <ArrowBackIcon />
             </IconButton>
           </Link> 
@@ -75,7 +75,7 @@ const ActivityDetail: React.FC = () => {
                   }}
                 >
                   <Stack>
-                    <Typography>Notes</Typography>
+                    <Typography variant="h6" component="h2">Notes</Typography>
                     {experiment && (
                       <LabelValueTable
                         rows={getNoteRows(experiment.notes)}

strudel-taskflows/src/pages/run-computation/[id]/_layout.tsx

@@ -25,7 +25,7 @@ const ComputationLayout: React.FC = () => {
           <Toolbar variant="dense">
             <Stack direction="row" alignItems="center" sx={{ flexGrow: 1 }}>
               <Breadcrumbs aria-label="breadcrumb" separator={<ChevronRightIcon fontSize="small" />}>
-                <Link underline="hover" color="inherit" to=".." component={RouterLink}>
+                <Link underline="hover" color="inherit" to=".." component={RouterLink} data-testid="rnc-list-link">
                   {taskflow.properties.itemName} List
                 </Link>
                 <Typography color="text.primary">Optimization Scenario 1</Typography>

strudel-taskflows/src/pages/run-computation/[id]/data-inputs.tsx

@@ -150,7 +150,7 @@ const DataInputsPage: React.FC = () => {
         }}
       >
         <Link component={RouterLink} to="../settings">
-          <Button variant="contained">Continue to {taskflow.pages.settings.title}</Button>
+          <Button variant="contained" data-testid="rnc-settings-next-button">Continue to {taskflow.pages.settings.title}</Button>
         </Link>
       </Box>
     </Stack>

strudel-taskflows/src/pages/run-computation/[id]/running.tsx

@@ -87,7 +87,7 @@ const RunningComputationPage: React.FC = () => {
                 <Typography>Your results are ready to view.</Typography>
               </Box>
               <Link component={RouterLink} to="../results">
-                <Button variant="contained" size="large">Continue to Results</Button>
+                <Button variant="contained" size="large" data-testid="rnc-results-button">Continue to Results</Button>
               </Link>
               <Typography color="neutral.dark">
                 Started 05/24/2023 9:32:33 AM, Ended 05/24/2023 11:47:03 AM

strudel-taskflows/src/pages/run-computation/[id]/settings.tsx

@@ -128,7 +128,7 @@ const SettingsPage: React.FC = () => {
             )}
             <Box textAlign="right">
               <Link component={RouterLink} to="../running">
-                <Button variant="contained" sx={{ marginTop: 4 }}>
+                <Button variant="contained" data-testid="rnc-run-button" sx={{ marginTop: 4 }}>
                   Run {taskflow.properties.itemName}
                 </Button>
               </Link>

strudel-taskflows/src/pages/run-computation/_components/NewScenarioModal.tsx

@@ -83,7 +83,7 @@ export const NewScenarioModal: React.FC<Props> = ({
         />
         <Box textAlign="right">
           <Link component={RouterLink} to="scenario/data-inputs">
-            <Button variant="contained" >
+            <Button variant="contained" data-testid="rnc-create-button">
               Create
             </Button>
           </Link>

strudel-taskflows/src/pages/run-computation/_tests/run-computation.cy.ts

@@ -0,0 +1,39 @@
+describe('The Run Computation Task Flow', () => {
+  beforeEach(() => {
+    cy.visit('/run-computation');
+  });
+
+  it('successfully loads', () => {
+    cy.get('h1').contains('Scenario List')
+  });
+
+  it('runs a new computation', () => {
+    cy.get('button[data-testid="rnc-new-button"]').click();
+    cy.get('button[data-testid="rnc-create-button"]').click();
+    cy.get('.MuiStepLabel-label').first().should('have.class', 'Mui-active');
+    cy.get('.MuiStepLabel-label').eq(1).should('have.class', 'Mui-disabled');
+    cy.get('.MuiStepLabel-label').eq(2).should('have.class', 'Mui-disabled');
+    cy.get('button[data-testid="rnc-settings-next-button"]').click();
+    cy.get('button[data-testid="rnc-run-button"]').click();
+    cy.get('h2').contains('Running');
+    cy.get('.MuiStepLabel-label').first().should('have.class', 'Mui-completed');
+    cy.get('.MuiStepLabel-label').eq(1).should('have.class', 'Mui-active');
+    cy.get('.MuiStepLabel-label').eq(2).should('have.class', 'Mui-disabled');
+    cy.wait(5000);
+    cy.get('button[data-testid="rnc-results-button"]').click();
+    cy.get('.MuiStepLabel-label').first().should('have.class', 'Mui-completed');
+    cy.get('.MuiStepLabel-label').eq(1).should('have.class', 'Mui-completed');
+    cy.get('.MuiStepLabel-label').eq(2).should('have.class', 'Mui-active');
+    cy.get('.js-plotly-plot').should('have.length', 2);
+  });
+
+  it('goes back to the scenario list', () => {
+    cy.get('button[data-testid="rnc-new-button"]').click();
+    cy.get('button[data-testid="rnc-create-button"]').click();
+    cy.get('.MuiStepLabel-label').first().should('have.class', 'Mui-active');
+    cy.get('.MuiStepLabel-label').eq(1).should('have.class', 'Mui-disabled');
+    cy.get('.MuiStepLabel-label').eq(2).should('have.class', 'Mui-disabled');
+    cy.get('a[data-testid="rnc-list-link"]').click();
+    cy.get('button[data-testid="rnc-new-button"]');
+  });
+});

strudel-taskflows/src/pages/run-computation/index.tsx

@@ -55,6 +55,7 @@ export const ListPage: React.FC = () => {
             <Button
               variant="contained"
               onClick={handleNewScenario}
+              data-testid="rnc-new-button"
             >
               New {taskflow.properties.itemName}
             </Button>