Skip to content

Add theme support to tests tab #1793

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 7 commits into from
Apr 30, 2019
Merged

Add theme support to tests tab #1793

merged 7 commits into from
Apr 30, 2019

Conversation

@SaraVieira
Copy link
Contributor

@SaraVieira SaraVieira commented Apr 21, 2019 •
edited
Loading

Screenshot 2019-04-21 at 12 38 06
Screenshot 2019-04-21 at 12 38 00
Screenshot 2019-04-21 at 12 37 54
Screenshot 2019-04-21 at 12 37 48
Screenshot 2019-04-21 at 12 37 43

@SaraVieira SaraVieira requested a review from CompuIves April 21, 2019 10:37
@CompuIves
Copy link
Member

CompuIves commented Apr 21, 2019 •
edited
Loading

Ohh wow this is great!

Is it possible to keep a darker background on these? I love the arrow concept on it.

image

Comparison:

image

Also for light themes it seems that the arrows are showing a bit weird:
image

I'm using http://pr1793.cs.lbogdan.tk/s/github/reduxjs/redux/tree/master/examples/todomvc to test

@CompuIves
Copy link
Member

CompuIves commented Apr 26, 2019 •
edited
Loading

The main thing that I'd like to see before we can merge this are the blocks set out:
image

I think the blocks give a better overview and look cleaner. This is pretty hard to do with themes, but maybe we can actually use Color to create some variations in the theme. Alternatively, we can invent some new names for the theme, like props => props.theme["tests.blockBackground"]. Almost no theme has these values, but we can add them to the CodeSandbox theme and if they don't exist we can default to sideBar.background like we do now. Hopefully some VSCode themes will then add these keys in the future to customize how CodeSandbox looks 😄.

Which approach do you think would be best?

SaraVieira and others added 7 commits April 30, 2019 12:16
@SaraVieira
add themes to the tests tab
9b434ce
@SaraVieira
clea clors
6c6169b
@SaraVieira
clean more colors
5808081
@SaraVieira
fix arrows
8adc91f
@SaraVieira
fix other arrow
3983f68
@CompuIves @SaraVieira
Use jsdom instead of window in jest test (#1812)
3e0d0dd 
* Hacky implementation of jsdom inside jest tests

* Update path to jsdom

* Properly set globals according to jest defaults

* Properly set global to jsdom window

* Make globals dynamic

* Improve scrolling of tests view

* Proper fix for the styling of tests

* Convert jest-lite to typescript

* Fix scrolling for the full test details

* Deduplicate Tests container

* Properly mark errors as jest errors, clear them on new start

* Move clear error to less spammy place

* Fix error loading later on in the editor
@SaraVieira
add bg
e016803
@SaraVieira
Copy link
Contributor Author

SaraVieira commented Apr 30, 2019

All ideas implemented

Screenshot 2019-04-30 at 12 12 23
Screenshot 2019-04-30 at 12 11 19
Screenshot 2019-04-30 at 12 10 55
Screenshot 2019-04-30 at 12 10 47
Screenshot 2019-04-30 at 12 10 37
Screenshot 2019-04-30 at 12 10 05

@SaraVieira SaraVieira merged commit 6422f69 into master Apr 30, 2019
@SaraVieira SaraVieira deleted the themes-in-tests branch May 14, 2019 09:51
@snyk-bot snyk-bot mentioned this pull request Dec 15, 2020
Open
@snyk-bot snyk-bot mentioned this pull request Jan 17, 2022
Open
This was referenced Apr 7, 2022
Open
Open
Open
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@CompuIves CompuIves Awaiting requested review from CompuIves

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@SaraVieira @CompuIves