TestVariationPage added

Author: pashidlos

src/Router.jsx

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

src/components/TestVariationList.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { TestVariation } from "../types";
+import {
+  Card,
+  Grid,
+  CardMedia,
+  CardContent,
+  Typography,
+  makeStyles,
+} from "@material-ui/core";
+import { staticService } from "../services";
+
+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>
+          </Card>
+        </Grid>
+      ))}
+    </Grid>
+  );
+};
+
+export default TestVariationList;

src/constants/routes.ts

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

src/pages/ProjectListPage.tsx

@@ -27,6 +27,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();
@@ -122,6 +123,13 @@ const ProjectsListPage = () => {
                 </CardContent>
               </CardActionArea>
               <CardActions>
+                <Button
+                  color="primary"
+                  component={Link}
+                  to={`${routes.VARIATION_LIST_PAGE}/${project.id}`}
+                >
+                  Variations
+                </Button>
                 <IconButton
                   onClick={(event: React.MouseEvent<HTMLElement>) => {
                     deleteProject(projectDispatch, project.id);

src/pages/ProjectPage.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Grid, Dialog, IconButton, Box } from "@material-ui/core";
+import { Grid, Dialog, IconButton, Box, Typography } from "@material-ui/core";
 import { useParams, useLocation, useHistory } from "react-router-dom";
 import { Build, TestRun } from "../types";
 import { projectsService, buildsService, testsService } from "../services";
@@ -119,6 +119,7 @@ const ProjectPage = () => {
       <Grid item xs={3}>
         <Grid container direction="column">
           <Grid item>
+            <Typography display="inline">Project: </Typography>
             <ProjectSelect selectedId={projectId} />
           </Grid>
         </Grid>

src/pages/TestVariationPage.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import TestVariationList from "../components/TestVariationList";
+import { useParams } from "react-router-dom";
+import { TestVariation } from "../types";
+import { testVariationService } from "../services";
+import { Container, Box, Grid, Typography } from "@material-ui/core";
+import ProjectSelect from "../components/ProjectSelect";
+
+const TestVariationPage: React.FunctionComponent = () => {
+  const { projectId } = useParams();
+  const [testVariations, setTestVariations] = React.useState<TestVariation[]>(
+    []
+  );
+
+  React.useEffect(() => {
+    if (projectId) {
+      testVariationService.get(projectId).then((testVariations) => {
+        setTestVariations(testVariations);
+      });
+    }
+  }, [projectId]);
+
+  return (
+    <React.Fragment>
+      <Container>
+        <Box mt={2}>
+          <Grid container direction="column" spacing={2}>
+            <Grid item>
+              <Typography display="inline">Project: </Typography>
+              <ProjectSelect selectedId={projectId} />
+            </Grid>
+            <Grid item>
+              <TestVariationList items={testVariations} />
+            </Grid>
+          </Grid>
+        </Box>
+      </Container>
+    </React.Fragment>
+  );
+};
+
+export default TestVariationPage;

src/services/index.ts

@@ -2,4 +2,5 @@ export * from './users.service';
 export * from './projects.service'
 export * from './builds.service'
 export * from './tests.service'
-export * from './static.service'
+export * from './static.service'
+export * from './testVariation.service'

src/services/testVariation.service.ts

@@ -0,0 +1,16 @@
+import { TestVariation } from "../types";
+import { handleResponse, authHeader } from "../_helpers/service.helpers";
+import { API_URL } from "../_config/api.config";
+
+export const testVariationService = {
+  get,
+};
+
+function get(projectId: String): Promise<TestVariation[]> {
+  const requestOptions = {
+    method: "GET",
+    headers: authHeader(),
+  };
+
+  return fetch(`${API_URL}/test-variations?projectId=${projectId}`, requestOptions).then(handleResponse);
+}

src/types/index.ts

@@ -1,4 +1,5 @@
 export * from './user'
 export * from './project'
 export * from './build'
-export * from './testRun'
+export * from './testRun'
+export * from './testVariation'