-
Notifications
You must be signed in to change notification settings - Fork 2.3k
/
index.tsx
100 lines (87 loc) · 2.77 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
// @flow
import * as React from 'react';
import FileIcon from 'react-icons/lib/md/insert-drive-file';
import PlayIcon from 'react-icons/lib/go/playback-play';
import Tooltip from '@codesandbox/common/lib/components/Tooltip';
import { File, Status } from '../';
import { Action, TestName, TestTitle, Blocks, ErrorNotice } from './elements';
import { StatusElements, Tests } from '../elements';
import TestBlock from './TestBlock';
import ErrorDetails from './ErrorDetails';
import TestSummaryText from '../TestSummaryText';
import TestProgressBar from '../TestProgressBar';
type Props = {
file: File;
status: Status;
openFile: (path: string) => void;
runTests: (file: File) => void;
};
export default ({ file, status, openFile, runTests }: Props) => {
if (file == null) {
return <div>No file has been selected</div>;
}
const parts = file.fileName.split('/');
const title = parts.pop();
const Element = StatusElements[status];
const passedCount = Object.keys(file.tests).filter(
f => file.tests[f].status === 'pass'
).length;
const failedCount = Object.keys(file.tests).filter(
f => file.tests[f].status === 'fail'
).length;
const idleCount = Object.keys(file.tests).filter(
f => file.tests[f].status === 'idle'
).length;
const totalCount = Object.keys(file.tests).length;
const totalDuration = Object.keys(file.tests).reduce(
(prev, next) => prev + file.tests[next].duration || 0,
0
);
return (
<div style={{ height: '100%' }}>
<TestTitle>
<Element />
<Blocks>{parts.join('/')}/</Blocks>
<TestName>{title}</TestName>
{!file.fileError && (
<TestSummaryText
failedCount={failedCount}
passedCount={passedCount}
totalCount={totalCount}
totalDuration={totalDuration}
/>
)}
<Action>
<Tooltip content="Open File">
<FileIcon onClick={() => openFile(file.fileName)} />
</Tooltip>
</Action>
<Action>
<Tooltip content="Run Tests">
<PlayIcon onClick={() => runTests(file)} />
</Tooltip>
</Action>
</TestTitle>
<TestProgressBar
failedCount={failedCount}
passedCount={passedCount}
idleCount={idleCount}
/>
<Tests>
{file.fileError ? (
<ErrorNotice>
<div style={{ marginBottom: '1rem' }}>
There was an error while evaluating the file:
</div>
<ErrorDetails path={file.fileName} error={file.fileError} />
</ErrorNotice>
) : (
Object.keys(file.tests).map(tName => {
const test = file.tests[tName];
return <TestBlock key={tName} test={test} />;
})
)}
</Tests>
</div>
);
};