Skip to content

Commit 97ab679

Browse files
pashidlospashidlos
committed
Baseline history added
1 parent 8b8556b commit 97ab679

File tree

10 files changed

+148
-21
lines changed

10 files changed

+148
-21
lines changed

‎src/Router.jsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +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 TestVariationPage from "./pages/TestVariationPage";
10+
import TestVariationListPage from "./pages/TestVariationListPage";
11+
import TestVariationDetailsPage from "./pages/TestVariationDetailsPage";
1112

1213
function Router() {
1314
return (
@@ -32,7 +33,12 @@ function Router() {
3233
<PrivateRoute
3334
exact
3435
path={`${routes.VARIATION_LIST_PAGE}/:projectId`}
35-
component={() => <TestVariationPage />}
36+
component={() => <TestVariationListPage />}
37+
/>
38+
<PrivateRoute
39+
exact
40+
path={`${routes.VARIATION_DETAILS_PAGE}/:testVariationId`}
41+
component={() => <TestVariationDetailsPage />}
3642
/>
3743
<PrivateRoute
3844
exact

‎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/TestDetailsModal.tsx‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,7 @@ 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[]>(
@@ -87,15 +85,13 @@ const TestDetailsModal: React.FunctionComponent<{
8785
<Grid item>
8886
<Typography variant="h6">{testRun.name}</Typography>
8987
</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-
)}
88+
<Grid item>
89+
<Switch
90+
checked={isDiffShown}
91+
onChange={() => setIsDiffShown(!isDiffShown)}
92+
name="Show diff"
93+
/>
94+
</Grid>
9995
{(testRun.status === TestStatus.unresolved ||
10096
testRun.status === TestStatus.new) && (
10197
<Grid item>

‎src/components/TestVariationList.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,12 @@ import {
77
CardContent,
88
Typography,
99
makeStyles,
10+
CardActions,
11+
Button,
1012
} from "@material-ui/core";
1113
import { staticService } from "../services";
14+
import { Link } from "react-router-dom";
15+
import { routes } from "../constants";
1216

1317
interface IProps {
1418
items: TestVariation[];
@@ -51,6 +55,15 @@ const TestVariationList: React.FunctionComponent<IProps> = ({ items }) => {
5155
</Grid>
5256
</Grid>
5357
</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>
5467
</Card>
5568
</Grid>
5669
))}

‎src/constants/routes.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,5 @@ export const routes = {
88
PROFILE_PAGE: "/profile",
99
PROJECT_LIST_PAGE: "/projects",
1010
VARIATION_LIST_PAGE: "/variations",
11+
VARIATION_DETAILS_PAGE: "/variations/details",
1112
};

‎src/pages/TestVariationDetailsPage.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React from "react";
2+
import { useParams, Link } from "react-router-dom";
3+
import { TestVariation } from "../types";
4+
import { testVariationService, staticService } from "../services";
5+
import {
6+
Container,
7+
Box,
8+
Grid,
9+
Typography,
10+
Card,
11+
CardMedia,
12+
makeStyles,
13+
CardActions,
14+
Button,
15+
} from "@material-ui/core";
16+
import { buildTestRunUrl } from "../_helpers/route.helpers";
17+
18+
const useStyles = makeStyles({
19+
media: {
20+
height: 600,
21+
backgroundSize: "contain",
22+
},
23+
});
24+
25+
const TestVariationDetailsPage: React.FunctionComponent = () => {
26+
const classes = useStyles();
27+
const { testVariationId } = useParams();
28+
const [testVariation, setTestVariation] = React.useState<TestVariation>();
29+
30+
React.useEffect(() => {
31+
if (testVariationId) {
32+
testVariationService.getDetails(testVariationId).then((item) => {
33+
setTestVariation(item);
34+
});
35+
}
36+
}, [testVariationId]);
37+
38+
return (
39+
<React.Fragment>
40+
<Container>
41+
<Box mt={2}>
42+
{testVariation && (
43+
<Grid container direction="column" spacing={2}>
44+
<Typography>{testVariation.name}</Typography>
45+
46+
<Grid container spacing={2}>
47+
<Grid item>
48+
<Typography>OS: {testVariation.os}</Typography>
49+
</Grid>
50+
<Grid item>
51+
<Typography>Browser: {testVariation.browser}</Typography>
52+
</Grid>
53+
<Grid item>
54+
<Typography>Viewport: {testVariation.viewport}</Typography>
55+
</Grid>
56+
</Grid>
57+
{testVariation.baselines.map((baseline) => (
58+
<Grid item key={baseline.id}>
59+
<Card>
60+
<CardActions>
61+
<Button
62+
color="primary"
63+
component={Link}
64+
to={buildTestRunUrl(testVariation, baseline.testRun)}
65+
>
66+
{baseline.createdAt}
67+
</Button>
68+
</CardActions>
69+
<CardMedia
70+
className={classes.media}
71+
image={staticService.getImage(baseline.baselineName)}
72+
/>
73+
</Card>
74+
</Grid>
75+
))}
76+
</Grid>
77+
)}
78+
</Box>
79+
</Container>
80+
</React.Fragment>
81+
);
82+
};
83+
84+
export default TestVariationDetailsPage;

‎src/pages/TestVariationPage.tsx‎ renamed to ‎src/pages/TestVariationListPage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@ import { testVariationService } from "../services";
66
import { Container, Box, Grid, Typography } from "@material-ui/core";
77
import ProjectSelect from "../components/ProjectSelect";
88

9-
const TestVariationPage: React.FunctionComponent = () => {
9+
const TestVariationListPage: React.FunctionComponent = () => {
1010
const { projectId } = useParams();
1111
const [testVariations, setTestVariations] = React.useState<TestVariation[]>(
1212
[]
1313
);
1414

1515
React.useEffect(() => {
1616
if (projectId) {
17-
testVariationService.get(projectId).then((testVariations) => {
17+
testVariationService.getList(projectId).then((testVariations) => {
1818
setTestVariations(testVariations);
1919
});
2020
}
@@ -39,4 +39,4 @@ const TestVariationPage: React.FunctionComponent = () => {
3939
);
4040
};
4141

42-
export default TestVariationPage;
42+
export default TestVariationListPage;

‎src/services/testVariation.service.ts‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ import { IgnoreArea } from "../types/ignoreArea";
66
const ENDPOINT_URL = "/test-variations"
77

88
export const testVariationService = {
9-
get,
9+
getList,
10+
getDetails,
1011
setIgnoreAreas
1112
};
1213

13-
function get(projectId: String): Promise<TestVariation[]> {
14+
function getList(projectId: String): Promise<TestVariation[]> {
1415
const requestOptions = {
1516
method: "GET",
1617
headers: authHeader(),
@@ -19,6 +20,15 @@ function get(projectId: String): Promise<TestVariation[]> {
1920
return fetch(`${API_URL}${ENDPOINT_URL}?projectId=${projectId}`, requestOptions).then(handleResponse);
2021
}
2122

23+
function getDetails(id: String): Promise<TestVariation> {
24+
const requestOptions = {
25+
method: "GET",
26+
headers: authHeader(),
27+
};
28+
29+
return fetch(`${API_URL}${ENDPOINT_URL}/${id}`, requestOptions).then(handleResponse);
30+
}
31+
2232
function setIgnoreAreas(
2333
variationId: string,
2434
ignoreAreas: IgnoreArea[]

‎src/types/baseline.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { TestRun } from "./testRun";
2+
3+
export interface Baseline {
4+
id: string;
5+
baselineName: string;
6+
testRunId: string;
7+
testVariationId: string;
8+
createdAt: Date;
9+
updatedAt: Date;
10+
testRun: TestRun;
11+
}

‎src/types/testVariation.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { IgnoreArea } from "./ignoreArea";
1+
import { Baseline } from "./baseline";
22

33
export interface TestVariation {
44
id: string;
@@ -9,4 +9,6 @@ export interface TestVariation {
99
viewport: string;
1010
device: string;
1111
ignoreAreas: string;
12+
projectId: string;
13+
baselines: Baseline[]
1214
}

0 commit comments

Comments
 (0)