9 test variations

src/Router.jsx

@@ -7,6 +7,8 @@ import PrivateRoute from "./components/PrivateRoute";
 import { routes } from "./constants";
 import RegisterPage from "./pages/RegisterPage";
 import ProfilePage from "./pages/ProfilePage";
+import TestVariationListPage from "./pages/TestVariationListPage";
+import TestVariationDetailsPage from "./pages/TestVariationDetailsPage";
 
 function Router() {
   return (
@@ -28,6 +30,16 @@ function Router() {
         path={`${routes.HOME}:projectId`}
         component={() => <ProjectPage />}
       />
+      <PrivateRoute
+        exact
+        path={`${routes.VARIATION_LIST_PAGE}/:projectId`}
+        component={() => <TestVariationListPage />}
+      />
+      <PrivateRoute
+        exact
+        path={`${routes.VARIATION_DETAILS_PAGE}/:testVariationId`}
+        component={() => <TestVariationDetailsPage />}
+      />
       <PrivateRoute
         exact
         path={`${routes.HOME}`}

src/_helpers/route.helpers.ts

@@ -1,4 +1,8 @@
-import { TestRun } from "../types"
+import { TestRun, TestVariation } from "../types"
+import { routes } from "../constants"
+
+export const buildTestRunUrl = (testVariation: TestVariation, testRun: TestRun) =>
+    `${routes.HOME}${testVariation.projectId}?buildId=${testRun.buildId}&testId=${testRun.id}`
 
 export const buildTestRunLocation = (testRun: TestRun) => ({
     search: `buildId=${testRun.buildId}&testId=${testRun.id}`,

src/components/Filters.tsx

@@ -35,15 +35,15 @@ const Filters: React.FunctionComponent<IProps> = ({
   const [testStatus, setTestStatus] = testStatusState;
 
   const osList = testRuns
-    .map((t) => t.testVariation.os)
+    .map((t) => t.os)
     .filter((v, i, array) => v && array.indexOf(v) === i);
 
   const browserList = testRuns
-    .map((t) => t.testVariation.browser)
+    .map((t) => t.browser)
     .filter((v, i, array) => v && array.indexOf(v) === i);
 
   const viewportList = testRuns
-    .map((t) => t.testVariation.viewport)
+    .map((t) => t.viewport)
     .filter((v, i, array) => v && array.indexOf(v) === i);
 
   const testStatusList = testRuns

src/components/TestDetailsModal.tsx

@@ -12,7 +12,7 @@ import {
 } from "@material-ui/core";
 import { TestRun } from "../types";
 import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
-import { testsService } from "../services";
+import { testRunService, testVariationService } from "../services";
 import DrawArea from "./DrawArea";
 import { TestStatus } from "../types/testStatus";
 import { useHistory, Prompt } from "react-router-dom";
@@ -36,17 +36,15 @@ const TestDetailsModal: React.FunctionComponent<{
   const history = useHistory();
   const classes = useStyles();
 
-  const [isDiffShown, setIsDiffShown] = useState(
-    testRun.status === TestStatus.unresolved
-  );
+  const [isDiffShown, setIsDiffShown] = useState(!!testRun.diffName);
   const [selectedRectId, setSelectedRectId] = React.useState<string>();
 
   const [ignoreAreas, setIgnoreAreas] = React.useState<IgnoreArea[]>(
-    JSON.parse(testRun.testVariation.ignoreAreas)
+    JSON.parse(testRun.ignoreAreas)
   );
 
   React.useEffect(() => {
-    setIgnoreAreas(JSON.parse(testRun.testVariation.ignoreAreas));
+    setIgnoreAreas(JSON.parse(testRun.ignoreAreas));
   }, [testRun]);
 
   const removeSelection = (event: KonvaEventObject<MouseEvent>) => {
@@ -72,7 +70,7 @@ const TestDetailsModal: React.FunctionComponent<{
   };
 
   const isIgnoreAreasSaved = () => {
-    return testRun.testVariation.ignoreAreas === JSON.stringify(ignoreAreas);
+    return testRun.ignoreAreas === JSON.stringify(ignoreAreas);
   };
 
   return (
@@ -85,24 +83,22 @@ const TestDetailsModal: React.FunctionComponent<{
         <Toolbar>
           <Grid container justify="space-between">
             <Grid item>
-              <Typography variant="h6">{testRun.testVariation.name}</Typography>
+              <Typography variant="h6">{testRun.name}</Typography>
+            </Grid>
+            <Grid item>
+              <Switch
+                checked={isDiffShown}
+                onChange={() => setIsDiffShown(!isDiffShown)}
+                name="Show diff"
+              />
             </Grid>
-            {testRun.status === TestStatus.unresolved && (
-              <Grid item>
-                <Switch
-                  checked={isDiffShown}
-                  onChange={() => setIsDiffShown(!isDiffShown)}
-                  name="Show diff"
-                />
-              </Grid>
-            )}
             {(testRun.status === TestStatus.unresolved ||
               testRun.status === TestStatus.new) && (
               <Grid item>
                 <Button
                   color="inherit"
                   onClick={() =>
-                    testsService.approve(testRun.id).then((testRun) => {
+                    testRunService.approve(testRun.id).then((testRun) => {
                       updateTestRun(testRun);
                     })
                   }
@@ -112,7 +108,7 @@ const TestDetailsModal: React.FunctionComponent<{
                 <Button
                   color="secondary"
                   onClick={() =>
-                    testsService
+                    testRunService
                       .reject(testRun.id)
                       .then((testRun) => updateTestRun(testRun))
                   }
@@ -135,30 +131,24 @@ const TestDetailsModal: React.FunctionComponent<{
             <Paper variant="outlined">
               <Grid container spacing={2}>
                 <Grid item>
-                  <Typography>OS: {testRun.testVariation.os}</Typography>
+                  <Typography>OS: {testRun.os}</Typography>
                 </Grid>
                 <Grid item>
-                  <Typography>
-                    Browser: {testRun.testVariation.browser}
-                  </Typography>
+                  <Typography>Browser: {testRun.browser}</Typography>
                 </Grid>
                 <Grid item>
-                  <Typography>
-                    Viewport: {testRun.testVariation.viewport}
-                  </Typography>
+                  <Typography>Viewport: {testRun.viewport}</Typography>
                 </Grid>
                 <Grid item>
-                  <Typography>
-                    Diff: {testRun.diffPercent}%
-                  </Typography>
+                  <Typography>Diff: {testRun.diffPercent}%</Typography>
                 </Grid>
                 <Grid item>
                   <Typography>
                     Diff tollerance: {testRun.diffTollerancePercent}%
                   </Typography>
                 </Grid>
                 <Grid item>
-                  <Typography display='inline'>Status: </Typography>
+                  <Typography display="inline">Status: </Typography>
                   <TestStatusChip status={testRun.status} />
                 </Grid>
               </Grid>
@@ -202,14 +192,16 @@ const TestDetailsModal: React.FunctionComponent<{
                   <IconButton
                     disabled={isIgnoreAreasSaved()}
                     onClick={() => {
-                      testsService
-                        .setIgnoreAreas(testRun.testVariation.id, ignoreAreas)
-                        .then((testVariation) =>
-                          updateTestRun({
-                            ...testRun,
-                            testVariation,
-                          })
-                        );
+                      // update in test run
+                      testRunService
+                        .setIgnoreAreas(testRun.id, ignoreAreas)
+                        .then((testRun) => updateTestRun(testRun));
+
+                      // update in variation
+                      testVariationService.setIgnoreAreas(
+                        testRun.testVariationId,
+                        ignoreAreas
+                      );
                     }}
                   >
                     <Save />
@@ -225,7 +217,7 @@ const TestDetailsModal: React.FunctionComponent<{
           <DrawArea
             width={stageWidth}
             height={stageHeigth}
-            imageUrl={testRun.testVariation.baselineName}
+            imageUrl={testRun.baselineName}
             ignoreAreas={[]}
             setIgnoreAreas={setIgnoreAreas}
             selectedRectId={selectedRectId}

src/components/TestRunList.tsx

@@ -63,16 +63,16 @@ const TestRunList: React.FunctionComponent<{
                     history.push(buildTestRunLocation(test));
                   }}
                 >
-                  <Typography>{test.testVariation.name}</Typography>
+                  <Typography>{test.name}</Typography>
                 </TableCell>
                 <TableCell>
-                  <Typography>{test.testVariation.os}</Typography>
+                  <Typography>{test.os}</Typography>
                 </TableCell>
                 <TableCell>
-                  <Typography>{test.testVariation.browser}</Typography>
+                  <Typography>{test.browser}</Typography>
                 </TableCell>
                 <TableCell>
-                  <Typography>{test.testVariation.viewport}</Typography>
+                  <Typography>{test.viewport}</Typography>
                 </TableCell>
                 <TableCell>
                   <TestStatusChip status={test.status} />

src/components/TestVariationList.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { TestVariation } from "../types";
+import {
+  Card,
+  Grid,
+  CardMedia,
+  CardContent,
+  Typography,
+  makeStyles,
+  CardActions,
+  Button,
+} from "@material-ui/core";
+import { staticService } from "../services";
+import { Link } from "react-router-dom";
+import { routes } from "../constants";
+
+interface IProps {
+  items: TestVariation[];
+}
+
+const useStyles = makeStyles({
+  card: {
+    maxWidth: 345,
+  },
+  media: {
+    height: 140,
+  },
+});
+
+const TestVariationList: React.FunctionComponent<IProps> = ({ items }) => {
+  const classes = useStyles();
+
+  return (
+    <Grid container>
+      {items.map((t) => (
+        <Grid item key={t.id} xs={4}>
+          <Card className={classes.card}>
+            <CardMedia
+              className={classes.media}
+              image={staticService.getImage(t.baselineName)}
+              title={t.name}
+            />
+            <CardContent>
+              <Typography>{t.name}</Typography>
+
+              <Grid container spacing={2}>
+                <Grid item>
+                  <Typography>OS: {t.os}</Typography>
+                </Grid>
+                <Grid item>
+                  <Typography>Browser: {t.browser}</Typography>
+                </Grid>
+                <Grid item>
+                  <Typography>Viewport: {t.viewport}</Typography>
+                </Grid>
+              </Grid>
+            </CardContent>
+            <CardActions>
+              <Button
+                color="primary"
+                component={Link}
+                to={`${routes.VARIATION_DETAILS_PAGE}/${t.id}`}
+              >
+                History
+              </Button>
+            </CardActions>
+          </Card>
+        </Grid>
+      ))}
+    </Grid>
+  );
+};
+
+export default TestVariationList;

src/constants/routes.ts

@@ -7,5 +7,6 @@ export const routes = {
   HOME: "/",
   PROFILE_PAGE: "/profile",
   PROJECT_LIST_PAGE: "/projects",
-  // PROJECT: "/project",
+  VARIATION_LIST_PAGE: "/variations",
+  VARIATION_DETAILS_PAGE: "/variations/details",
 };

src/pages/ProjectListPage.tsx

@@ -3,7 +3,6 @@ import {
   Grid,
   Typography,
   Card,
-  CardActionArea,
   IconButton,
   CardContent,
   CardActions,
@@ -27,6 +26,7 @@ import {
 } from "../contexts/project.context";
 import { Link } from "react-router-dom";
 import { Delete, Add } from "@material-ui/icons";
+import { routes } from "../constants";
 
 const ProjectsListPage = () => {
   const theme = useTheme();
@@ -114,14 +114,24 @@ const ProjectsListPage = () => {
             <Card>
               <CardContent>
                 <Typography>Key: {project.id}</Typography>
+                <Typography>Name: {project.name}</Typography>
+                <Typography>Updated: {project.updatedAt}</Typography>
               </CardContent>
-              <CardActionArea component={Link} to={`${project.id}`}>
-                <CardContent>
-                  <Typography>Name: {project.name}</Typography>
-                  <Typography>Updated: {project.updatedAt}</Typography>
-                </CardContent>
-              </CardActionArea>
               <CardActions>
+                <Button
+                  color="primary"
+                  component={Link}
+                  to={`${project.id}`}
+                >
+                  Builds
+                </Button>
+                <Button
+                  color="primary"
+                  component={Link}
+                  to={`${routes.VARIATION_LIST_PAGE}/${project.id}`}
+                >
+                  Variations
+                </Button>
                 <IconButton
                   onClick={(event: React.MouseEvent<HTMLElement>) => {
                     deleteProject(projectDispatch, project.id);