Storybook addon Jest angular suport #3532

klimentru1986 · 2018-05-05T05:55:33Z

What I did

remove Karma and add Jest in Angular example app
add addon Jest configuration and story in Angular example app
update addon Jest documentation for Angular
update addons support table Jest+Angular

Hypnosphi · 2018-05-05T18:33:52Z

igor-dv · 2018-05-05T21:02:03Z

examples/angular-cli/package.json

@@ -28,6 +32,7 @@
    "@angular/cli": "1.7.4",
    "@angular/compiler-cli": "^5.2.10",
    "@storybook/addon-actions": "4.0.0-alpha.4",
+    "@storybook/addon-jest": "^3.4.3",


please update to the 4.0.0-alpha (and bootstrap again, because lock file is wrong now)

codecov · 2018-05-05T22:31:03Z

Codecov Report

Merging #3532 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff           @@
##           master   #3532   +/-   ##
======================================
  Coverage    92.5%   92.5%           
======================================
  Files           6       6           
  Lines          40      40           
  Branches        2       2           
======================================
  Hits           37      37           
  Misses          2       2           
  Partials        1       1

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e9d423d...507ec7b. Read the comment docs.

igor-dv · 2018-05-06T07:08:44Z

addons/jest/README.md

+
+Assuming that you have created a test files `my.component.spec.ts` and `my-other.comonent.spec.ts`
+
+Config Jest with [jest-preset-angular](https://www.npmjs.com/package/jest-preset-angular)


igor-dv · 2018-05-06T07:09:38Z

addons/jest/README.md

+
+Config Jest with [jest-preset-angular](https://www.npmjs.com/package/jest-preset-angular)
+
+In project `typings.d.ts` add


*In project's typings.d.ts add

igor-dv · 2018-05-06T07:12:39Z

addons/jest/README.md

+
+storiesOf('MyComponent', module)
+  .addDecorator(wTests('my.component', 'my-other.component'))
+  .add('This story shows test results from MyComponent.test.js and MyOtherComponent.test.js', () => (


my.component.spec.ts, my-other.comonent.spec.ts ?

Need only name.
Extension added in withTests.ts

In addons\jest\src\index.js it look like

new RegExp(`${name}${jestTestFilesExt}`).test(t.name)

I mean, you wrote above

Assuming that you have created a test files my.component.spec.ts and my-other.comonent.spec.ts

So I think it's better to have the same naming

igor-dv · 2018-05-06T07:18:25Z

examples/angular-cli/.jest-test-results.json

@@ -0,0 +1 @@
+{"numFailedTestSuites":0,"numFailedTests":0,"numPassedTestSuites":1,"numPassedTests":3,"numPendingTestSuites":0,"numPendingTests":0,"numRuntimeErrorTestSuites":0,"numTotalTestSuites":1,"numTotalTests":3,"snapshot":{"added":0,"didUpdate":false,"failure":false,"filesAdded":0,"filesRemoved":0,"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeys":[],"unmatched":0,"updated":0},"startTime":1525561826280,"success":true,"testResults":[{"assertionResults":[{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should create the app","location":null,"status":"passed","title":"should create the app"},{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should have as title 'app'","location":null,"status":"passed","title":"should have as title 'app'"},{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should render title in a h1 tag","location":null,"status":"passed","title":"should render title in a h1 tag"}],"endTime":1525561829266,"message":"","name":"/home/kliment/Projects/storybook/examples/angular-cli/src/app/app.component.spec.ts","startTime":1525561827019,"status":"passed","summary":""}],"wasInterrupted":false}


shouldn't this be gitignored?

circleci tests are crash when ignore .jest-test-results.json
because the file was not found

But it should be generated on a build command, shouldn't it?

it`s work in angular-cli application and generate output for angular-cli application.

yarn test --core run before build and crash

Summary of all failing tests FAIL examples/angular-cli/angularshots.test.js ● Test suite failed to run Cannot find module '../.jest-test-results.json' from 'withTests.ts'

How can i fix it? Maybe write separate task for angular in scripts/test.js? How can i run it before yarn test --core?

Maybe leave .jest-test-results.json in this example project?

fixed. .jest-test-results.json removed and test crashed.

Let's commit then. Just checked we have a similar file for the React example, so it's ok. Let's just call it "addon-jest.testresults.json" for the convention.

Hypnosphi · 2018-05-12T21:48:16Z

released as 4.0.0-alpha.6

klimentru1986 added 4 commits May 5, 2018 07:57

remove karma and add jest

dfab0e1

add adon-jest configuration and story

f8ff98d

update addons-jest readme

b2b1b9f

update addons support jest

a06dc24

klimentru1986 requested review from alterx, igor-dv and renaudtertrais as code owners May 5, 2018 05:55

wuweiweiwu added feature request addon: jest labels May 5, 2018

klimentru1986 added 3 commits May 5, 2018 22:43

fix story name error, update addon-jest.stories.storyshot

7bdc6e8

add prebuild to build-storybook

068e9ba

yarn bootstrap --reset --core

499d43f

igor-dv reviewed May 5, 2018

View reviewed changes

update package.json jest config

193a053

klimentru1986 added 2 commits May 6, 2018 02:12

remove jest-test-results from gitignore (need for tests)

2c99646

lint

4ca019a

igor-dv reviewed May 6, 2018

View reviewed changes

klimentru1986 added 6 commits May 6, 2018 10:52

README review remarks fix

db61595

review fix

76fad9b

review fix

489ca4c

Merge branch 'master' into master

0ca9f06

added jest-test-results to gitignore and remove it

c735809

addon-jest.testresults.json

507ec7b

igor-dv approved these changes May 7, 2018

View reviewed changes

igor-dv merged commit c25731f into storybookjs:master May 7, 2018

dependencies bot mentioned this pull request Jan 15, 2021

Update 25 dependencies from npm #2724

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Storybook addon Jest angular suport #3532

Storybook addon Jest angular suport #3532

klimentru1986 commented May 5, 2018

Hypnosphi commented May 5, 2018

igor-dv May 5, 2018 •

edited

Loading

klimentru1986 May 6, 2018

codecov bot commented May 5, 2018 •

edited

Loading

igor-dv May 6, 2018

klimentru1986 May 6, 2018

igor-dv May 6, 2018

klimentru1986 May 6, 2018

igor-dv May 6, 2018

klimentru1986 May 6, 2018

igor-dv May 6, 2018

klimentru1986 May 6, 2018

igor-dv May 6, 2018

klimentru1986 May 6, 2018

igor-dv May 6, 2018

klimentru1986 May 6, 2018

klimentru1986 May 6, 2018

klimentru1986 May 7, 2018

igor-dv May 7, 2018

klimentru1986 May 7, 2018

Hypnosphi commented May 12, 2018


		Assuming that you have created a test files `my.component.spec.ts` and `my-other.comonent.spec.ts`

		Config Jest with [jest-preset-angular](https://www.npmjs.com/package/jest-preset-angular)


		Config Jest with [jest-preset-angular](https://www.npmjs.com/package/jest-preset-angular)

		In project `typings.d.ts` add

		@@ -0,0 +1 @@
		{"numFailedTestSuites":0,"numFailedTests":0,"numPassedTestSuites":1,"numPassedTests":3,"numPendingTestSuites":0,"numPendingTests":0,"numRuntimeErrorTestSuites":0,"numTotalTestSuites":1,"numTotalTests":3,"snapshot":{"added":0,"didUpdate":false,"failure":false,"filesAdded":0,"filesRemoved":0,"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeys":[],"unmatched":0,"updated":0},"startTime":1525561826280,"success":true,"testResults":[{"assertionResults":[{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should create the app","location":null,"status":"passed","title":"should create the app"},{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should have as title 'app'","location":null,"status":"passed","title":"should have as title 'app'"},{"ancestorTitles":["AppComponent"],"failureMessages":[],"fullName":"AppComponent should render title in a h1 tag","location":null,"status":"passed","title":"should render title in a h1 tag"}],"endTime":1525561829266,"message":"","name":"/home/kliment/Projects/storybook/examples/angular-cli/src/app/app.component.spec.ts","startTime":1525561827019,"status":"passed","summary":""}],"wasInterrupted":false}

Storybook addon Jest angular suport #3532

Storybook addon Jest angular suport #3532

Conversation

klimentru1986 commented May 5, 2018

What I did

Hypnosphi commented May 5, 2018

igor-dv May 5, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codecov bot commented May 5, 2018 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Hypnosphi commented May 12, 2018

igor-dv May 5, 2018 •

edited

Loading

codecov bot commented May 5, 2018 •

edited

Loading