Skip to content

Commit

Permalink
Merge pull request #137 from codytodonnell/feature/tests
Browse files Browse the repository at this point in the history
Add UI test suite
  • Loading branch information
codytodonnell authored Oct 24, 2024
2 parents f9475dd + c29c8b6 commit fd18db6
Show file tree
Hide file tree
Showing 18 changed files with 163 additions and 33 deletions.
26 changes: 26 additions & 0 deletions strudel-taskflows/src/pages/compare-data/_tests/compare-data.cy.ts
Original file line number Diff line number Diff line change
@@ -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"]');
});
});
40 changes: 23 additions & 17 deletions strudel-taskflows/src/pages/compare-data/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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>
Expand All @@ -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}
Expand All @@ -76,6 +79,9 @@ const ScenarioList: React.FC = () => {
disableRowSelectionOnClick
disableDensitySelector
disableColumnFilter
initialState={{
pagination: { paginationModel: { page: 1, pageSize: 25 } }
}}
slots={{ toolbar: GridToolbar }}
slotProps={{
toolbar: {
Expand Down
4 changes: 2 additions & 2 deletions strudel-taskflows/src/pages/compare-data/new.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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"]');
});
});
2 changes: 1 addition & 1 deletion strudel-taskflows/src/pages/contribute-data/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions strudel-taskflows/src/pages/contribute-data/new.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion strudel-taskflows/src/pages/contribute-data/portal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions strudel-taskflows/src/pages/contribute-data/review.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -81,6 +81,7 @@ const ReviewDataset: React.FC = () => {
<Button
variant="contained"
onClick={() => startRunChecks()}
data-testid="ctd-checks-button"
sx={{ whiteSpace: 'nowrap' }}
>
Run Checks
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down
Original file line number Diff line number Diff line change
@@ -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);
});
});
4 changes: 2 additions & 2 deletions strudel-taskflows/src/pages/monitor-activities/detail.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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"]');
});
});
1 change: 1 addition & 0 deletions strudel-taskflows/src/pages/run-computation/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export const ListPage: React.FC = () => {
<Button
variant="contained"
onClick={handleNewScenario}
data-testid="rnc-new-button"
>
New {taskflow.properties.itemName}
</Button>
Expand Down

0 comments on commit fd18db6

Please sign in to comment.