Skip to content

Commit dcf4f58

Browse files
pashidlospashidlos
authored
Merge pull request #3 from Visual-Regression-Tracker/9-testVariations
9 test variations
2 parents 68d36d2 + 97ab679 commit dcf4f58

21 files changed

+394
-114
lines changed

‎src/Router.jsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import PrivateRoute from "./components/PrivateRoute";
77
import { routes } from "./constants";
88
import RegisterPage from "./pages/RegisterPage";
99
import ProfilePage from "./pages/ProfilePage";
10+
import TestVariationListPage from "./pages/TestVariationListPage";
11+
import TestVariationDetailsPage from "./pages/TestVariationDetailsPage";
1012

1113
function Router() {
1214
return (
@@ -28,6 +30,16 @@ function Router() {
2830
path={`${routes.HOME}:projectId`}
2931
component={() => <ProjectPage />}
3032
/>
33+
<PrivateRoute
34+
exact
35+
path={`${routes.VARIATION_LIST_PAGE}/:projectId`}
36+
component={() => <TestVariationListPage />}
37+
/>
38+
<PrivateRoute
39+
exact
40+
path={`${routes.VARIATION_DETAILS_PAGE}/:testVariationId`}
41+
component={() => <TestVariationDetailsPage />}
42+
/>
3143
<PrivateRoute
3244
exact
3345
path={`${routes.HOME}`}

‎src/_helpers/route.helpers.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
import { TestRun } from "../types"
1+
import { TestRun, TestVariation } from "../types"
2+
import { routes } from "../constants"
3+
4+
export const buildTestRunUrl = (testVariation: TestVariation, testRun: TestRun) =>
5+
`${routes.HOME}${testVariation.projectId}?buildId=${testRun.buildId}&testId=${testRun.id}`
26

37
export const buildTestRunLocation = (testRun: TestRun) => ({
48
search: `buildId=${testRun.buildId}&testId=${testRun.id}`,

‎src/components/Filters.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,15 +35,15 @@ const Filters: React.FunctionComponent<IProps> = ({
3535
const [testStatus, setTestStatus] = testStatusState;
3636

3737
const osList = testRuns
38-
.map((t) => t.testVariation.os)
38+
.map((t) => t.os)
3939
.filter((v, i, array) => v && array.indexOf(v) === i);
4040

4141
const browserList = testRuns
42-
.map((t) => t.testVariation.browser)
42+
.map((t) => t.browser)
4343
.filter((v, i, array) => v && array.indexOf(v) === i);
4444

4545
const viewportList = testRuns
46-
.map((t) => t.testVariation.viewport)
46+
.map((t) => t.viewport)
4747
.filter((v, i, array) => v && array.indexOf(v) === i);
4848

4949
const testStatusList = testRuns

‎src/components/TestDetailsModal.tsx‎

Lines changed: 31 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
} from "@material-ui/core";
1313
import { TestRun } from "../types";
1414
import { createStyles, makeStyles, Theme } from "@material-ui/core/styles";
15-
import { testsService } from "../services";
15+
import { testRunService, testVariationService } from "../services";
1616
import DrawArea from "./DrawArea";
1717
import { TestStatus } from "../types/testStatus";
1818
import { useHistory, Prompt } from "react-router-dom";
@@ -36,17 +36,15 @@ const TestDetailsModal: React.FunctionComponent<{
3636
const history = useHistory();
3737
const classes = useStyles();
3838

39-
const [isDiffShown, setIsDiffShown] = useState(
40-
testRun.status === TestStatus.unresolved
41-
);
39+
const [isDiffShown, setIsDiffShown] = useState(!!testRun.diffName);
4240
const [selectedRectId, setSelectedRectId] = React.useState<string>();
4341

4442
const [ignoreAreas, setIgnoreAreas] = React.useState<IgnoreArea[]>(
45-
JSON.parse(testRun.testVariation.ignoreAreas)
43+
JSON.parse(testRun.ignoreAreas)
4644
);
4745

4846
React.useEffect(() => {
49-
setIgnoreAreas(JSON.parse(testRun.testVariation.ignoreAreas));
47+
setIgnoreAreas(JSON.parse(testRun.ignoreAreas));
5048
}, [testRun]);
5149

5250
const removeSelection = (event: KonvaEventObject<MouseEvent>) => {
@@ -72,7 +70,7 @@ const TestDetailsModal: React.FunctionComponent<{
7270
};
7371

7472
const isIgnoreAreasSaved = () => {
75-
return testRun.testVariation.ignoreAreas === JSON.stringify(ignoreAreas);
73+
return testRun.ignoreAreas === JSON.stringify(ignoreAreas);
7674
};
7775

7876
return (
@@ -85,24 +83,22 @@ const TestDetailsModal: React.FunctionComponent<{
8583
<Toolbar>
8684
<Grid container justify="space-between">
8785
<Grid item>
88-
<Typography variant="h6">{testRun.testVariation.name}</Typography>
86+
<Typography variant="h6">{testRun.name}</Typography>
87+
</Grid>
88+
<Grid item>
89+
<Switch
90+
checked={isDiffShown}
91+
onChange={() => setIsDiffShown(!isDiffShown)}
92+
name="Show diff"
93+
/>
8994
</Grid>
90-
{testRun.status === TestStatus.unresolved && (
91-
<Grid item>
92-
<Switch
93-
checked={isDiffShown}
94-
onChange={() => setIsDiffShown(!isDiffShown)}
95-
name="Show diff"
96-
/>
97-
</Grid>
98-
)}
9995
{(testRun.status === TestStatus.unresolved ||
10096
testRun.status === TestStatus.new) && (
10197
<Grid item>
10298
<Button
10399
color="inherit"
104100
onClick={() =>
105-
testsService.approve(testRun.id).then((testRun) => {
101+
testRunService.approve(testRun.id).then((testRun) => {
106102
updateTestRun(testRun);
107103
})
108104
}
@@ -112,7 +108,7 @@ const TestDetailsModal: React.FunctionComponent<{
112108
<Button
113109
color="secondary"
114110
onClick={() =>
115-
testsService
111+
testRunService
116112
.reject(testRun.id)
117113
.then((testRun) => updateTestRun(testRun))
118114
}
@@ -135,30 +131,24 @@ const TestDetailsModal: React.FunctionComponent<{
135131
<Paper variant="outlined">
136132
<Grid container spacing={2}>
137133
<Grid item>
138-
<Typography>OS: {testRun.testVariation.os}</Typography>
134+
<Typography>OS: {testRun.os}</Typography>
139135
</Grid>
140136
<Grid item>
141-
<Typography>
142-
Browser: {testRun.testVariation.browser}
143-
</Typography>
137+
<Typography>Browser: {testRun.browser}</Typography>
144138
</Grid>
145139
<Grid item>
146-
<Typography>
147-
Viewport: {testRun.testVariation.viewport}
148-
</Typography>
140+
<Typography>Viewport: {testRun.viewport}</Typography>
149141
</Grid>
150142
<Grid item>
151-
<Typography>
152-
Diff: {testRun.diffPercent}%
153-
</Typography>
143+
<Typography>Diff: {testRun.diffPercent}%</Typography>
154144
</Grid>
155145
<Grid item>
156146
<Typography>
157147
Diff tollerance: {testRun.diffTollerancePercent}%
158148
</Typography>
159149
</Grid>
160150
<Grid item>
161-
<Typography display='inline'>Status: </Typography>
151+
<Typography display="inline">Status: </Typography>
162152
<TestStatusChip status={testRun.status} />
163153
</Grid>
164154
</Grid>
@@ -202,14 +192,16 @@ const TestDetailsModal: React.FunctionComponent<{
202192
<IconButton
203193
disabled={isIgnoreAreasSaved()}
204194
onClick={() => {
205-
testsService
206-
.setIgnoreAreas(testRun.testVariation.id, ignoreAreas)
207-
.then((testVariation) =>
208-
updateTestRun({
209-
...testRun,
210-
testVariation,
211-
})
212-
);
195+
// update in test run
196+
testRunService
197+
.setIgnoreAreas(testRun.id, ignoreAreas)
198+
.then((testRun) => updateTestRun(testRun));
199+
200+
// update in variation
201+
testVariationService.setIgnoreAreas(
202+
testRun.testVariationId,
203+
ignoreAreas
204+
);
213205
}}
214206
>
215207
<Save />
@@ -225,7 +217,7 @@ const TestDetailsModal: React.FunctionComponent<{
225217
<DrawArea
226218
width={stageWidth}
227219
height={stageHeigth}
228-
imageUrl={testRun.testVariation.baselineName}
220+
imageUrl={testRun.baselineName}
229221
ignoreAreas={[]}
230222
setIgnoreAreas={setIgnoreAreas}
231223
selectedRectId={selectedRectId}

‎src/components/TestRunList.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,16 +63,16 @@ const TestRunList: React.FunctionComponent<{
6363
history.push(buildTestRunLocation(test));
6464
}}
6565
>
66-
<Typography>{test.testVariation.name}</Typography>
66+
<Typography>{test.name}</Typography>
6767
</TableCell>
6868
<TableCell>
69-
<Typography>{test.testVariation.os}</Typography>
69+
<Typography>{test.os}</Typography>
7070
</TableCell>
7171
<TableCell>
72-
<Typography>{test.testVariation.browser}</Typography>
72+
<Typography>{test.browser}</Typography>
7373
</TableCell>
7474
<TableCell>
75-
<Typography>{test.testVariation.viewport}</Typography>
75+
<Typography>{test.viewport}</Typography>
7676
</TableCell>
7777
<TableCell>
7878
<TestStatusChip status={test.status} />

‎src/components/TestVariationList.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from "react";
2+
import { TestVariation } from "../types";
3+
import {
4+
Card,
5+
Grid,
6+
CardMedia,
7+
CardContent,
8+
Typography,
9+
makeStyles,
10+
CardActions,
11+
Button,
12+
} from "@material-ui/core";
13+
import { staticService } from "../services";
14+
import { Link } from "react-router-dom";
15+
import { routes } from "../constants";
16+
17+
interface IProps {
18+
items: TestVariation[];
19+
}
20+
21+
const useStyles = makeStyles({
22+
card: {
23+
maxWidth: 345,
24+
},
25+
media: {
26+
height: 140,
27+
},
28+
});
29+
30+
const TestVariationList: React.FunctionComponent<IProps> = ({ items }) => {
31+
const classes = useStyles();
32+
33+
return (
34+
<Grid container>
35+
{items.map((t) => (
36+
<Grid item key={t.id} xs={4}>
37+
<Card className={classes.card}>
38+
<CardMedia
39+
className={classes.media}
40+
image={staticService.getImage(t.baselineName)}
41+
title={t.name}
42+
/>
43+
<CardContent>
44+
<Typography>{t.name}</Typography>
45+
46+
<Grid container spacing={2}>
47+
<Grid item>
48+
<Typography>OS: {t.os}</Typography>
49+
</Grid>
50+
<Grid item>
51+
<Typography>Browser: {t.browser}</Typography>
52+
</Grid>
53+
<Grid item>
54+
<Typography>Viewport: {t.viewport}</Typography>
55+
</Grid>
56+
</Grid>
57+
</CardContent>
58+
<CardActions>
59+
<Button
60+
color="primary"
61+
component={Link}
62+
to={`${routes.VARIATION_DETAILS_PAGE}/${t.id}`}
63+
>
64+
History
65+
</Button>
66+
</CardActions>
67+
</Card>
68+
</Grid>
69+
))}
70+
</Grid>
71+
);
72+
};
73+
74+
export default TestVariationList;

‎src/constants/routes.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,6 @@ export const routes = {
77
HOME: "/",
88
PROFILE_PAGE: "/profile",
99
PROJECT_LIST_PAGE: "/projects",
10-
// PROJECT: "/project",
10+
VARIATION_LIST_PAGE: "/variations",
11+
VARIATION_DETAILS_PAGE: "/variations/details",
1112
};

‎src/pages/ProjectListPage.tsx‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {
33
Grid,
44
Typography,
55
Card,
6-
CardActionArea,
76
IconButton,
87
CardContent,
98
CardActions,
@@ -27,6 +26,7 @@ import {
2726
} from "../contexts/project.context";
2827
import { Link } from "react-router-dom";
2928
import { Delete, Add } from "@material-ui/icons";
29+
import { routes } from "../constants";
3030

3131
const ProjectsListPage = () => {
3232
const theme = useTheme();
@@ -114,14 +114,24 @@ const ProjectsListPage = () => {
114114
<Card>
115115
<CardContent>
116116
<Typography>Key: {project.id}</Typography>
117+
<Typography>Name: {project.name}</Typography>
118+
<Typography>Updated: {project.updatedAt}</Typography>
117119
</CardContent>
118-
<CardActionArea component={Link} to={`${project.id}`}>
119-
<CardContent>
120-
<Typography>Name: {project.name}</Typography>
121-
<Typography>Updated: {project.updatedAt}</Typography>
122-
</CardContent>
123-
</CardActionArea>
124120
<CardActions>
121+
<Button
122+
color="primary"
123+
component={Link}
124+
to={`${project.id}`}
125+
>
126+
Builds
127+
</Button>
128+
<Button
129+
color="primary"
130+
component={Link}
131+
to={`${routes.VARIATION_LIST_PAGE}/${project.id}`}
132+
>
133+
Variations
134+
</Button>
125135
<IconButton
126136
onClick={(event: React.MouseEvent<HTMLElement>) => {
127137
deleteProject(projectDispatch, project.id);

0 commit comments

Comments
 (0)