Addon-jest: UI Redesign #7424

CodeByAlex · 2019-07-16T02:42:13Z

What I did

Redesigned and refactored the Jest addon to follow the pattern of the accessibility addon.
Parsing now works with new jest output format as well as the old format.
Continuation of #7395

There is more data coming to this addon but this is just a redesign.

Desktop, tablet, and wide phones [UPDATED]:

Mobile [UPDATED]:

How to test

Is this testable with Jest or Chromatic screenshots? yes
Does this need a new example in the kitchen sink apps? no
Does this need an update to the documentation? no

If your answer is yes to any of these, please make sure to include it in your PR.

…similar to the accessibility addon for a more cohesive experience

…rybook

…o add color to the expected and received values

Removed console log

…/storybook into feature/jest-redesign

…unction that returns an object

…s (ex. no longer checking for expected/result/etc.). Made it backwards compatible with previous result format.

…(one included breaks between title and value and the other outputs both in one line)

…eature/jest-redesign # Conflicts: # package.json # yarn.lock

domyen · 2019-07-17T17:27:52Z

👏 This looks amazing @CodeByAlex!

Things I noticed from a visual design POV:

Remove the extra horizontal borders (It looks like there are two between the subheader and first item)
Reduce the dimensions of the status gauge to 30x6 (i.e., make it shorter)
Do we need the % passed? I can see how this is useful in aggregate across a whole app, but it doesn't add much information at the component level. I'm likely only encountering a handful of tests at the component level.

shilman

Awesome improvement -- this is so much better! 💯

Left a couple code changes. The unit tests are for documentation more than anything in this case, I'm assuming they work.

addons/jest/src/components/Result.tsx

shilman · 2019-07-17T17:35:57Z

addons/jest/src/components/Message.tsx

+  return [msg];
+};
+
+const getConvertedText: (msg: string) => MsgElement[] = (msg: string) => {


Can you add a couple unit tests for this?

shilman · 2019-07-17T17:36:06Z

addons/jest/src/components/Message.tsx

+  return elementArray;
+};
+
+const getTestDetail: (msg: string) => TestDetail = (msg: string) => {


Can you add a couple unit tests for this?

addons/jest/src/components/Message.tsx

addons/jest/src/components/Panel.tsx

domyen · 2019-07-17T17:39:18Z

addons/jest/src/components/Panel.tsx

+                  ) : null}
+                </SuiteHead>
+                <TabsState initial="failing-tests" backgroundColor="rgba(0,0,0,.05)">
+                  <div id="failing-tests" title={`${failedNumber} Failed`} color="#FF4400">


This should use the theme colors rather than being hardcoded in.

domyen · 2019-07-17T17:39:31Z

addons/jest/src/components/Panel.tsx

+                      })}
+                    </List>
+                  </div>
+                  <div id="passing-tests" title={`${successNumber} Passed`} color="#66BF3C">


Theme colors 🙏

domyen · 2019-07-17T17:41:06Z

addons/jest/src/components/Result.tsx

+              <Icon
+                icon="chevrondown"
+                size={10}
+                color="#9DA5AB"


theme.color.mediumdark

CodeByAlex · 2019-07-17T20:13:50Z

Thanks, @dom. I'll get those colors turned over to tokens asap. And it does look cleaner with your suggestions so I'll commit those changes.

Cheers, @shilman. Ill turn the component into a hook so you don't 🤢 and add some unit tests

…storybook into feature/jest-redesign

ndelangen · 2019-07-19T11:58:51Z

addons/jest/src/components/Panel.tsx

+    {tests ? (
+      <ContentWithTheme tests={tests} />
+    ) : (
+      <NoTests>This story has no tests configured</NoTests>


It would be nice to add some documentation here, on how to get it set up so there ARE tests.

ndelangen · 2019-07-19T11:59:30Z

addons/jest/src/components/Result.tsx

+              icon="chevrondown"
+              size={10}
+              color="#9DA5AB"
+              style={{


I think this should be in a rotate prop.

ndelangen · 2019-07-19T12:01:04Z

Code looks good as is, some improvements would be good, but I'd be ok merging as is, and improving it later.

# Conflicts: # yarn.lock

CodeByAlex · 2019-07-19T14:11:59Z

Code looks good as is, some improvements would be good, but I'd be ok merging as is, and improving it later.

@ndelangen Sounds good. I can definitely add more tests, docs, and tweaks in the next PR based on these comments if that works for everyone. Would like to get feedback as soon as possible from users.

fabiradi · 2019-07-22T13:23:12Z

Unfortunately, the redesign handles skipped tests (pending) and todos (todo) differently: They currently don't show up in the list. Previously, they were counted as "failed", but shown in "green" (like "passed"). This was still not perfect, but – at least – they were displayed.

test.todo('This is a todo');
xit('This is a skipped test', () => {});

ℹ️ jest test lists skipped tests and todo separately in its summary.

It would be nice to have all tests listed, either as passed or failed. Displaying skipped tests as todos differently is something for a feature report ...

ndelangen · 2019-07-22T13:27:18Z

Should be easy to add a few extra tabs for those types of tests reports I think.

Would you be interested in contributing that feature @fabiradi ?

fabiradi · 2019-07-22T22:02:24Z

Should be easy to add a few extra tabs for those types of tests reports I think.

Would you be interested in contributing that feature @fabiradi ?

😃 I actually thought about it and already took a peek into the source code. The counts are "simple" filters on strings and should be easy to duplicate for a couple of more tabs – fixing the wrong "failed" count.

const successNumber = result.assertionResults
    .filter(({ status }) => status === 'passed').length;
const failedNumber = result.assertionResults.length - successNumber;

I have three questions up front:

Colors: Where can I find suitable color definitions? The Storybook brand colors are not used for red (failed) and green (passed) tests. How would a get a yellow and violet? I could use "Gold" and "Purple" from the brand guide.
Visiblity of Tabs: Would the tabs for "skipped" and "todo" be displayed all the time or hidden when the count = 0? The failed tab seems to be visible even when no test failed. I'm not sure if that would be okay for skipped and todo ...
Form of Contribution: Where/how would I contribute? Is this a separate issue or an addition to this issue?

👋 As this would be my first contribution, I still have to take a look into the contribution guide...

CodeByAlex · 2019-07-22T23:15:12Z

@fabiradi That sounds great!

You can check out the brand colors here: https://storybook-design-system.netlify.com/?path=/docs/design-system-color--all
I think the tabs should be persistent in the same way that the a11y addon tabs are.
The form of contribution is up to you. Maybe create a feature request and then reference it in the PR.

Looking forward to seeing this addition 👍

CodeByAlex and others added 30 commits June 18, 2019 05:51

removed color file from message class

c68deb5

removed colors file from jest addon

eb42c1a

removed indicator component from jest addon

20d3f8e

modified panel and result of the jest testing addon to look and feel …

08fc66f

…similar to the accessibility addon for a more cohesive experience

removed console.log from message component

3a93467

changed green and red progress colors to theme colors

58e3d6e

changed tab button to accept text color variable

189f785

added story for tab components to show button text color being set

616dbbb

used textColor in the panel to set tab buttons

bca648b

added background color prop to bar props

4847b51

added background color in tabs component

8586060

added background color to panel where tabs component is used

3f0bc57

modified jest config so that jest tests could run in the official sto…

660178e

…rybook

refactored message component to reduce code complexity - still need t…

6a0961d

…o add color to the expected and received values

Update Message.tsx

35dbfbb

Removed console log

added test vs tests condition for display value

1cad06a

hide pointer and hover state on passing tests

59a78ea

Merge branch 'feature/jest-redesign' of https://github.com/CodeByAlex…

6af0198

…/storybook into feature/jest-redesign

added trim to stack trace and !== instead of !=

b74209c

pulled out message parse functionality from component into separate f…

2a7a2cf

…unction that returns an object

colorized text in message component of the jest addon

071a69c

bumped jest versions in official example

c55b0da

Merge branch 'next' into feature/jest-redesign

bd3f0fa

updated message component to be less specific in the result condition…

9f232c5

…s (ex. no longer checking for expected/result/etc.). Made it backwards compatible with previous result format.

changed variable name i to index

847d90d

Ensured backwards compatibility with previous test result formatting …

aaa476b

…(one included breaks between title and value and the other outputs both in one line)

used theme colors where possible and fixed commit hook errors

b8f709d

removed unused code

f969b5f

Merge branch 'next' of https://github.com/storybooks/storybook into f…

c61518a

…eature/jest-redesign # Conflicts: # package.json # yarn.lock

removed console log

9eabbbb

CodeByAlex added addon: jest feature request labels Jul 16, 2019

CodeByAlex requested a review from leoyli July 16, 2019 02:54

Removed @ts-ignore from jest panel

c197a9b

vercel bot had a problem deploying to staging July 17, 2019 17:10 Failure

shilman requested changes Jul 17, 2019

View reviewed changes

domyen requested changes Jul 17, 2019

View reviewed changes

CodeByAlex added 2 commits July 17, 2019 16:28

converted colors to tokens and removed passing rate

9c57cfa

Merge branch 'feature/jest-redesign' of ssh://github.com/storybookjs/…

0669a80

…storybook into feature/jest-redesign

vercel bot had a problem deploying to staging July 17, 2019 20:36 Failure

corrected theme usage

1948cc2

vercel bot deployed to staging July 17, 2019 23:33 View deployment

convert result component to hook

b1d31db

ndelangen reviewed Jul 19, 2019

View reviewed changes

ndelangen approved these changes Jul 19, 2019

View reviewed changes

ndelangen self-assigned this Jul 19, 2019

Merge branch 'next' into feature/jest-redesign

214504a

# Conflicts: # yarn.lock

vercel bot deployed to staging July 19, 2019 13:58 View deployment

shilman changed the title ~~Feature/jest redesign~~ Addon-jest: UI Redesign Jul 20, 2019

shilman merged commit 81e3996 into next Jul 20, 2019

shilman deleted the feature/jest-redesign branch July 20, 2019 03:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Addon-jest: UI Redesign #7424

Addon-jest: UI Redesign #7424

CodeByAlex commented Jul 16, 2019 •

edited

Loading

domyen commented Jul 17, 2019

shilman left a comment

shilman Jul 17, 2019

shilman Jul 17, 2019

domyen Jul 17, 2019

domyen Jul 17, 2019

domyen Jul 17, 2019

CodeByAlex commented Jul 17, 2019

ndelangen Jul 19, 2019

ndelangen Jul 19, 2019

ndelangen commented Jul 19, 2019

CodeByAlex commented Jul 19, 2019 •

edited

Loading

fabiradi commented Jul 22, 2019

ndelangen commented Jul 22, 2019

fabiradi commented Jul 22, 2019

CodeByAlex commented Jul 22, 2019

Addon-jest: UI Redesign #7424

Addon-jest: UI Redesign #7424

Conversation

CodeByAlex commented Jul 16, 2019 • edited Loading

What I did

How to test

domyen commented Jul 17, 2019

shilman left a comment

Choose a reason for hiding this comment

shilman Jul 17, 2019

Choose a reason for hiding this comment

shilman Jul 17, 2019

Choose a reason for hiding this comment

domyen Jul 17, 2019

Choose a reason for hiding this comment

domyen Jul 17, 2019

Choose a reason for hiding this comment

domyen Jul 17, 2019

Choose a reason for hiding this comment

CodeByAlex commented Jul 17, 2019

ndelangen Jul 19, 2019

Choose a reason for hiding this comment

ndelangen Jul 19, 2019

Choose a reason for hiding this comment

ndelangen commented Jul 19, 2019

CodeByAlex commented Jul 19, 2019 • edited Loading

fabiradi commented Jul 22, 2019

ndelangen commented Jul 22, 2019

fabiradi commented Jul 22, 2019

CodeByAlex commented Jul 22, 2019

CodeByAlex commented Jul 16, 2019 •

edited

Loading

CodeByAlex commented Jul 19, 2019 •

edited

Loading