Skip to content

Commit 1a742ec

Browse files
dv297CompuIves
dv297
authored and
CompuIves
committed
Add Expand/Collapse to Tests (codesandbox#1256)
* Add @dv297 as a contributor * Add expand/collapse for TestElement
1 parent 1765f54 commit 1a742ec

File tree

4 files changed

+74
-23
lines changed

4 files changed

+74
-23
lines changed

‎.all-contributorsrc‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -643,6 +643,15 @@
643643
"bug",
644644
"code"
645645
]
646+
},
647+
{
648+
"login": "dv297",
649+
"name": "Daniel Vu",
650+
"avatar_url": "https://avatars2.githubusercontent.com/u/5365325?v=4",
651+
"profile": "https://twitter.com/dvv297",
652+
"contributions": [
653+
"code"
654+
]
646655
}
647656
],
648657
"repoType": "github"

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-66-orange.svg?style=flat-square)](#contributors) [![CircleCI](https://circleci.com/gh/CompuIves/codesandbox-client.svg?style=svg)](https://circleci.com/gh/CompuIves/codesandbox-client) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
1+
# [CodeSandbox](https://codesandbox.io) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/KE3TbEZ) [![All Contributors](https://img.shields.io/badge/all_contributors-67-orange.svg?style=flat-square)](#contributors) [![CircleCI](https://circleci.com/gh/CompuIves/codesandbox-client.svg?style=svg)](https://circleci.com/gh/CompuIves/codesandbox-client) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/)
22
[![Backers on Open Collective](https://opencollective.com/codesandbox/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/codesandbox/sponsors/badge.svg)](#sponsors)
33

44
![Banner](https://codesandbox.io/static/img/banner.png)
@@ -50,7 +50,7 @@ Thanks goes to these wonderful people
5050
| [<img src="https://avatars0.githubusercontent.com/u/1820292?v=4" width="100px;"/><br /><sub><b>Michel Weststrate</b></sub>](https://twitter.com/mweststrate)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=mweststrate "Code") | [<img src="https://avatars0.githubusercontent.com/u/52824?v=4" width="100px;"/><br /><sub><b>Oleg</b></sub>](https://kof.github.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=kof "Code") | [<img src="https://avatars0.githubusercontent.com/u/1127037?v=4" width="100px;"/><br /><sub><b>Paul Sherman</b></sub>](https://www.pshrmn.com)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Apshrmn "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=pshrmn "Code") | [<img src="https://avatars2.githubusercontent.com/u/9244507?v=4" width="100px;"/><br /><sub><b>Ro Savage</b></sub>](https://github.com/ro-savage)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=ro-savage "Code") | [<img src="https://avatars3.githubusercontent.com/u/13242392?v=4" width="100px;"/><br /><sub><b>Sam Denty</b></sub>](https://samdd.me)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=samdenty99 "Code") | [<img src="https://avatars1.githubusercontent.com/u/3087225?v=4" width="100px;"/><br /><sub><b>Zephraph</b></sub>](https://github.com/zephraph)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=zephraph "Code") | [<img src="https://avatars1.githubusercontent.com/u/1900735?v=4" width="100px;"/><br /><sub><b>Josh Waller</b></sub>](https://www.joshwaller.me)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Amdxprograms "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=mdxprograms "Code") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=mdxprograms "Documentation") |
5151
| [<img src="https://avatars0.githubusercontent.com/u/1195863?v=4" width="100px;"/><br /><sub><b>Joe Ng'ethe</b></sub>](http://joey.co.ke)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=joeynimu "Code") | [<img src="https://avatars0.githubusercontent.com/u/576935?v=4" width="100px;"/><br /><sub><b>Carles Codony</b></sub>](https://github.com/bitblitter)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bitblitter "Code") | [<img src="https://avatars2.githubusercontent.com/u/468006?v=4" width="100px;"/><br /><sub><b>Vytenis</b></sub>](https://github.com/FDiskas)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=FDiskas "Code") | [<img src="https://avatars1.githubusercontent.com/u/894149?v=4" width="100px;"/><br /><sub><b>Manuel Dugué</b></sub>](http://manueldugue.de)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Amdugue "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=mdugue "Code") | [<img src="https://avatars2.githubusercontent.com/u/5346497?v=4" width="100px;"/><br /><sub><b>Demian Dekoninck</b></sub>](https://dem.be)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=DemianD "Code") | [<img src="https://avatars2.githubusercontent.com/u/3144549?v=4" width="100px;"/><br /><sub><b>Drake Costa</b></sub>](http://www.saeris.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Saeris "Code") | [<img src="https://avatars2.githubusercontent.com/u/433394?v=4" width="100px;"/><br /><sub><b>Marko Stijak</b></sub>](https://cxjs.io/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=mstijak "Code") |
5252
| [<img src="https://avatars2.githubusercontent.com/u/10588170?v=4" width="100px;"/><br /><sub><b>Ilya</b></sub>](https://twitter.com/ilya_komar0ff)<br />[💬](#question-Komar0ff "Answering Questions") [🤔](#ideas-Komar0ff "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/10627086?v=4" width="100px;"/><br /><sub><b>Emerson Laurentino</b></sub>](https://twitter.com/elaurent_)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=emersonlaurentino "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Aemersonlaurentino "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/180963?v=4" width="100px;"/><br /><sub><b>Aaron Reisman</b></sub>](https://github.com/lifeiscontent)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Alifeiscontent "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=lifeiscontent "Code") [📦](#platform-lifeiscontent "Packaging/porting to new platform") | [<img src="https://avatars2.githubusercontent.com/u/19484365?v=4" width="100px;"/><br /><sub><b>Colton Colcleasure</b></sub>](https://github.com/colshacol)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=colshacol "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Acolshacol "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/497242?v=4" width="100px;"/><br /><sub><b>PJ Walker</b></sub>](https://github.com/PJWalker)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3APJWalker "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=PJWalker "Code") | [<img src="https://avatars2.githubusercontent.com/u/29819102?v=4" width="100px;"/><br /><sub><b>Satya Rohith</b></sub>](https://satya.tech)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=satyarohith "Code") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=satyarohith "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/17421347?v=4" width="100px;"/><br /><sub><b>Melanie Seltzer</b></sub>](https://www.melanieseltzer.io/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=melanieseltzer "Code") |
53-
| [<img src="https://avatars1.githubusercontent.com/u/23313266?v=4" width="100px;"/><br /><sub><b>ZYSzys</b></sub>](http://zyszys.top)<br />[📖](https://github.com/CompuIves/codesandbox-client/commits?author=ZYSzys "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1051509?v=4" width="100px;"/><br /><sub><b>Sara Vieira</b></sub>](http://iamsaravieira.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=SaraVieira "Code") [🎨](#design-SaraVieira "Design") [🤔](#ideas-SaraVieira "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/6137112?v=4" width="100px;"/><br /><sub><b>François Chalifour</b></sub>](https://francoischalifour.com)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Afrancoischalifour "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=francoischalifour "Code") |
53+
| [<img src="https://avatars1.githubusercontent.com/u/23313266?v=4" width="100px;"/><br /><sub><b>ZYSzys</b></sub>](http://zyszys.top)<br />[📖](https://github.com/CompuIves/codesandbox-client/commits?author=ZYSzys "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1051509?v=4" width="100px;"/><br /><sub><b>Sara Vieira</b></sub>](http://iamsaravieira.com)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=SaraVieira "Code") [🎨](#design-SaraVieira "Design") [🤔](#ideas-SaraVieira "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/6137112?v=4" width="100px;"/><br /><sub><b>François Chalifour</b></sub>](https://francoischalifour.com)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Afrancoischalifour "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=francoischalifour "Code") | [<img src="https://avatars2.githubusercontent.com/u/5365325?v=4" width="100px;"/><br /><sub><b>Daniel Vu</b></sub>](https://twitter.com/dvv297)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=dv297 "Code") |
5454
<!-- ALL-CONTRIBUTORS-LIST:END -->
5555

5656
## Backers

‎packages/app/src/app/components/Preview/DevTools/Tests/TestElement/index.js‎

Lines changed: 41 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import Tooltip from 'common/components/Tooltip';
44

55
import PlayIcon from 'react-icons/lib/go/playback-play';
66
import FileIcon from 'react-icons/lib/md/insert-drive-file';
7+
import ExpandTestsIcon from 'react-icons/lib/fa/expand';
8+
import CollapseTestsIcon from 'react-icons/lib/fa/minus';
79

810
import type { File, Status } from '../';
911

@@ -28,13 +30,19 @@ type Props = {
2830
status: Status,
2931
runTests: (file: File) => void,
3032
openFile: (path: string) => void,
33+
isExpanded: Boolean,
34+
onFileExpandToggle: (file: File) => void,
3135
};
3236

3337
class TestElement extends Component<Props> {
3438
selectFile = () => {
3539
this.props.selectFile(this.props.file);
3640
};
3741

42+
toggleFileExpansion = () => {
43+
this.props.onFileExpandToggle(this.props.file);
44+
};
45+
3846
runTests = (e: MouseEvent) => {
3947
e.preventDefault();
4048
this.props.runTests(this.props.file);
@@ -72,29 +80,41 @@ class TestElement extends Component<Props> {
7280
<Tooltip title="Run Tests">
7381
<PlayIcon onClick={this.runTests} />
7482
</Tooltip>
83+
<Tooltip
84+
title={this.props.isExpanded ? 'Collapse Tests' : 'Expand Tests'}
85+
>
86+
{this.props.isExpanded ? (
87+
<CollapseTestsIcon onClick={this.toggleFileExpansion} />
88+
) : (
89+
<ExpandTestsIcon onClick={this.toggleFileExpansion} />
90+
)}
91+
</Tooltip>
7592
</Actions>
7693
</FileData>
77-
78-
<Tests>
79-
{testKeys.filter(t => file.tests[t].status === 'fail').map(tName => {
80-
const test = file.tests[tName];
81-
82-
const TestStatusElement = StatusElements[test.status];
83-
const testParts = [...test.testName];
84-
const testName = testParts.pop();
85-
return (
86-
<Test key={tName}>
87-
<TestStatusElement />
88-
{testParts.map((part, i) => (
89-
<Block last={i === testParts.length - 1} key={part}>
90-
<span style={{ zIndex: 10 }}>{part}</span>
91-
</Block>
92-
))}
93-
<TestName>{testName}</TestName>
94-
</Test>
95-
);
96-
})}
97-
</Tests>
94+
{this.props.isExpanded && (
95+
<Tests>
96+
{testKeys
97+
.filter(t => file.tests[t].status === 'fail')
98+
.map(tName => {
99+
const test = file.tests[tName];
100+
101+
const TestStatusElement = StatusElements[test.status];
102+
const testParts = [...test.testName];
103+
const testName = testParts.pop();
104+
return (
105+
<Test key={tName}>
106+
<TestStatusElement />
107+
{testParts.map((part, i) => (
108+
<Block last={i === testParts.length - 1} key={part}>
109+
<span style={{ zIndex: 10 }}>{part}</span>
110+
</Block>
111+
))}
112+
<TestName>{testName}</TestName>
113+
</Test>
114+
);
115+
})}
116+
</Tests>
117+
)}
98118
</Container>
99119
);
100120
}

‎packages/app/src/app/components/Preview/DevTools/Tests/index.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,9 @@ export type File = {
6666

6767
type State = {
6868
selectedFilePath: ?string,
69+
fileExpansionState: {
70+
[path: string]: Boolean,
71+
},
6972
files: {
7073
[path: string]: File,
7174
},
@@ -76,6 +79,7 @@ type State = {
7679
const INITIAL_STATE = {
7780
files: {},
7881
selectedFilePath: null,
82+
fileExpansionState: {},
7983
running: true,
8084
watching: true,
8185
};
@@ -121,6 +125,16 @@ class Tests extends React.Component<Props, State> {
121125
});
122126
};
123127

128+
toggleFileExpansion = (file: File) => {
129+
this.setState(
130+
immer(this.state, state => {
131+
state.fileExpansionState[file.fileName] = !state.fileExpansionState[
132+
file.fileName
133+
];
134+
})
135+
);
136+
};
137+
124138
handleMessage = (data: Object) => {
125139
if (data.type === 'done' && (!this.props.hidden || this.props.standalone)) {
126140
this.runAllTests();
@@ -188,6 +202,8 @@ class Tests extends React.Component<Props, State> {
188202
tests: {},
189203
fileName: data.path,
190204
};
205+
206+
state.fileExpansionState[data.path] = true;
191207
})
192208
);
193209
break;
@@ -198,6 +214,8 @@ class Tests extends React.Component<Props, State> {
198214
if (state.files[data.path]) {
199215
delete state.files[data.path];
200216
}
217+
218+
delete state.fileExpansionState[data.path];
201219
})
202220
);
203221
break;
@@ -230,6 +248,8 @@ class Tests extends React.Component<Props, State> {
230248
tests: {},
231249
fileName: data.path,
232250
};
251+
252+
state.fileExpansionState[data.path] = true;
233253
}
234254

235255
state.files[data.path].tests[testName.join('||||')] = {
@@ -437,6 +457,8 @@ class Tests extends React.Component<Props, State> {
437457
key={fileName}
438458
runTests={this.runTests}
439459
openFile={this.openFile}
460+
isExpanded={this.state.fileExpansionState[fileName]}
461+
onFileExpandToggle={this.toggleFileExpansion}
440462
/>
441463
))}
442464
</div>

0 commit comments

Comments
 (0)