diff --git a/__tests__/snapshots.test.js b/__tests__/snapshots.test.js deleted file mode 100644 index 31d12f76b..000000000 --- a/__tests__/snapshots.test.js +++ /dev/null @@ -1,36 +0,0 @@ -const renderer = require('react-test-renderer'); -const fs = require('fs'); -const path = require('path'); -const glob = require('glob'); -const { h } = require('../packages/x-engine'); - -const { workspaces } = require('../package.json'); - -const packagesGlob = workspaces.length > 1 - ? `{${workspaces.join(',')}}` - : workspaces[0]; - -const packageDirs = glob.sync(packagesGlob); - -for(const pkg of packageDirs) { - const pkgDir = path.resolve(pkg); - const storiesDir = path.resolve(pkgDir, 'stories'); - - if(fs.existsSync(storiesDir)) { - const { package: pkg, stories, component } = require(storiesDir); - const { presets = { default: {} } } = require(pkgDir); - const name = path.basename(pkg.name); - - describe(pkg.name, () => { - for (const { title, data } of stories) { - for (const [preset, options] of Object.entries(presets)) { - it(`renders a ${preset} ${title} ${name}`, () => { - const props = { ...data, ...options }; - const tree = renderer.create(h(component, props)).toJSON(); - expect(tree).toMatchSnapshot(); - }); - } - } - }); - } -} diff --git a/components/x-increment/__tests__/__snapshots__/x-increment.test.jsx.snap b/components/x-increment/__tests__/__snapshots__/x-increment.test.jsx.snap new file mode 100644 index 000000000..63b69eda9 --- /dev/null +++ b/components/x-increment/__tests__/__snapshots__/x-increment.test.jsx.snap @@ -0,0 +1,29 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`x-increment snapshots renders a default Async 1`] = ` +
+ + 1 + + +
+`; + +exports[`x-increment snapshots renders a default Increment 1`] = ` +
+ + 1 + + +
+`; diff --git a/components/x-increment/__tests__/x-increment.test.jsx b/components/x-increment/__tests__/x-increment.test.jsx index 544f6726b..bf778585a 100644 --- a/components/x-increment/__tests__/x-increment.test.jsx +++ b/components/x-increment/__tests__/x-increment.test.jsx @@ -1,5 +1,7 @@ const { h } = require('@financial-times/x-engine'); const { mount } = require('@financial-times/x-test-utils/enzyme'); +const snapshots = require('@financial-times/x-test-utils/snapshots'); +const stories = require('../stories'); const { Increment } = require('../'); @@ -27,4 +29,8 @@ describe('x-increment', () => { expect(Date.now() - start).toBeCloseTo(1000, -2); // negative precision ⇒ left of decimal point expect(subject.find('span').text()).toEqual('2'); }); + + describe('snapshots', () => { + snapshots(stories); + }) }); diff --git a/components/x-styling-demo/__tests__/__snapshots__/x-styling-demo.test.jsx.snap b/components/x-styling-demo/__tests__/__snapshots__/x-styling-demo.test.jsx.snap new file mode 100644 index 000000000..5c36ea418 --- /dev/null +++ b/components/x-styling-demo/__tests__/__snapshots__/x-styling-demo.test.jsx.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`x-styling-demo renders a default Styling 1`] = ` + +`; diff --git a/components/x-styling-demo/__tests__/x-styling-demo.test.jsx b/components/x-styling-demo/__tests__/x-styling-demo.test.jsx new file mode 100644 index 000000000..75538dc6c --- /dev/null +++ b/components/x-styling-demo/__tests__/x-styling-demo.test.jsx @@ -0,0 +1,6 @@ +const snapshots = require('@financial-times/x-test-utils/snapshots'); +const stories = require('../stories'); + +describe('x-styling-demo', () => { + snapshots(stories); +}); diff --git a/components/x-styling-demo/package.json b/components/x-styling-demo/package.json index bf0444556..8de482168 100644 --- a/components/x-styling-demo/package.json +++ b/components/x-styling-demo/package.json @@ -16,7 +16,8 @@ "author": "", "license": "ISC", "devDependencies": { - "@financial-times/x-rollup": "file:../../packages/x-rollup" + "@financial-times/x-rollup": "file:../../packages/x-rollup", + "@financial-times/x-test-utils": "file:../../packages/x-test-utils" }, "dependencies": { "@financial-times/x-engine": "file:../../packages/x-engine", diff --git a/__tests__/__snapshots__/snapshots.test.js.snap b/components/x-teaser/__tests__/__snapshots__/x-teaser.test.jsx.snap similarity index 95% rename from __tests__/__snapshots__/snapshots.test.js.snap rename to components/x-teaser/__tests__/__snapshots__/x-teaser.test.jsx.snap index 2248d5399..722fbc857 100644 --- a/__tests__/__snapshots__/snapshots.test.js.snap +++ b/components/x-teaser/__tests__/__snapshots__/x-teaser.test.jsx.snap @@ -1,42 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`@financial-times/x-increment renders a default Async x-increment 1`] = ` -
- - 1 - - -
-`; - -exports[`@financial-times/x-increment renders a default Increment x-increment 1`] = ` -
- - 1 - - -
-`; - -exports[`@financial-times/x-styling-demo renders a default Styling x-styling-demo 1`] = ` - -`; - -exports[`@financial-times/x-teaser renders a Hero Article x-teaser 1`] = ` +exports[`x-teaser renders a Hero Article 1`] = `
`; -exports[`@financial-times/x-teaser renders a Hero Content Package x-teaser 1`] = ` +exports[`x-teaser renders a Hero Content Package 1`] = `
`; -exports[`@financial-times/x-teaser renders a Hero Opinion Piece x-teaser 1`] = ` +exports[`x-teaser renders a Hero Opinion Piece 1`] = `
`; -exports[`@financial-times/x-teaser renders a Hero Package item x-teaser 1`] = ` +exports[`x-teaser renders a Hero Package item 1`] = `
`; -exports[`@financial-times/x-teaser renders a Hero Paid Post x-teaser 1`] = ` +exports[`x-teaser renders a Hero Paid Post 1`] = `
`; -exports[`@financial-times/x-teaser renders a Hero Podcast x-teaser 1`] = ` +exports[`x-teaser renders a Hero Podcast 1`] = `
`; -exports[`@financial-times/x-teaser renders a Hero Top Story x-teaser 1`] = ` +exports[`x-teaser renders a Hero Top Story 1`] = `
`; -exports[`@financial-times/x-teaser renders a Hero Video x-teaser 1`] = ` +exports[`x-teaser renders a Hero Video 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroNarrow Article x-teaser 1`] = ` +exports[`x-teaser renders a HeroNarrow Article 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroNarrow Content Package x-teaser 1`] = ` +exports[`x-teaser renders a HeroNarrow Content Package 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroNarrow Opinion Piece x-teaser 1`] = ` +exports[`x-teaser renders a HeroNarrow Opinion Piece 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroNarrow Package item x-teaser 1`] = ` +exports[`x-teaser renders a HeroNarrow Package item 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroNarrow Paid Post x-teaser 1`] = ` +exports[`x-teaser renders a HeroNarrow Paid Post 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroNarrow Podcast x-teaser 1`] = ` +exports[`x-teaser renders a HeroNarrow Podcast 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroNarrow Top Story x-teaser 1`] = ` +exports[`x-teaser renders a HeroNarrow Top Story 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroNarrow Video x-teaser 1`] = ` +exports[`x-teaser renders a HeroNarrow Video 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroOverlay Article x-teaser 1`] = ` +exports[`x-teaser renders a HeroOverlay Article 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroOverlay Content Package x-teaser 1`] = ` +exports[`x-teaser renders a HeroOverlay Content Package 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroOverlay Opinion Piece x-teaser 1`] = ` +exports[`x-teaser renders a HeroOverlay Opinion Piece 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroOverlay Package item x-teaser 1`] = ` +exports[`x-teaser renders a HeroOverlay Package item 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroOverlay Paid Post x-teaser 1`] = ` +exports[`x-teaser renders a HeroOverlay Paid Post 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroOverlay Podcast x-teaser 1`] = ` +exports[`x-teaser renders a HeroOverlay Podcast 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroOverlay Top Story x-teaser 1`] = ` +exports[`x-teaser renders a HeroOverlay Top Story 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroOverlay Video x-teaser 1`] = ` +exports[`x-teaser renders a HeroOverlay Video 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroVideo Article x-teaser 1`] = ` +exports[`x-teaser renders a HeroVideo Article 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroVideo Content Package x-teaser 1`] = ` +exports[`x-teaser renders a HeroVideo Content Package 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroVideo Opinion Piece x-teaser 1`] = ` +exports[`x-teaser renders a HeroVideo Opinion Piece 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroVideo Package item x-teaser 1`] = ` +exports[`x-teaser renders a HeroVideo Package item 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroVideo Paid Post x-teaser 1`] = ` +exports[`x-teaser renders a HeroVideo Paid Post 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroVideo Podcast x-teaser 1`] = ` +exports[`x-teaser renders a HeroVideo Podcast 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroVideo Top Story x-teaser 1`] = ` +exports[`x-teaser renders a HeroVideo Top Story 1`] = `
`; -exports[`@financial-times/x-teaser renders a HeroVideo Video x-teaser 1`] = ` +exports[`x-teaser renders a HeroVideo Video 1`] = `
`; -exports[`@financial-times/x-teaser renders a Large Article x-teaser 1`] = ` +exports[`x-teaser renders a Large Article 1`] = `
`; -exports[`@financial-times/x-teaser renders a Large Content Package x-teaser 1`] = ` +exports[`x-teaser renders a Large Content Package 1`] = `
`; -exports[`@financial-times/x-teaser renders a Large Opinion Piece x-teaser 1`] = ` +exports[`x-teaser renders a Large Opinion Piece 1`] = `
`; -exports[`@financial-times/x-teaser renders a Large Package item x-teaser 1`] = ` +exports[`x-teaser renders a Large Package item 1`] = `
`; -exports[`@financial-times/x-teaser renders a Large Paid Post x-teaser 1`] = ` +exports[`x-teaser renders a Large Paid Post 1`] = `
`; -exports[`@financial-times/x-teaser renders a Large Podcast x-teaser 1`] = ` +exports[`x-teaser renders a Large Podcast 1`] = `
`; -exports[`@financial-times/x-teaser renders a Large Top Story x-teaser 1`] = ` +exports[`x-teaser renders a Large Top Story 1`] = `
`; -exports[`@financial-times/x-teaser renders a Large Video x-teaser 1`] = ` +exports[`x-teaser renders a Large Video 1`] = `
`; -exports[`@financial-times/x-teaser renders a Small Article x-teaser 1`] = ` +exports[`x-teaser renders a Small Article 1`] = `
`; -exports[`@financial-times/x-teaser renders a Small Content Package x-teaser 1`] = ` +exports[`x-teaser renders a Small Content Package 1`] = `
`; -exports[`@financial-times/x-teaser renders a Small Opinion Piece x-teaser 1`] = ` +exports[`x-teaser renders a Small Opinion Piece 1`] = `
`; -exports[`@financial-times/x-teaser renders a Small Package item x-teaser 1`] = ` +exports[`x-teaser renders a Small Package item 1`] = `
`; -exports[`@financial-times/x-teaser renders a Small Paid Post x-teaser 1`] = ` +exports[`x-teaser renders a Small Paid Post 1`] = `
`; -exports[`@financial-times/x-teaser renders a Small Podcast x-teaser 1`] = ` +exports[`x-teaser renders a Small Podcast 1`] = `
`; -exports[`@financial-times/x-teaser renders a Small Top Story x-teaser 1`] = ` +exports[`x-teaser renders a Small Top Story 1`] = `
`; -exports[`@financial-times/x-teaser renders a Small Video x-teaser 1`] = ` +exports[`x-teaser renders a Small Video 1`] = `
`; -exports[`@financial-times/x-teaser renders a SmallHeavy Article x-teaser 1`] = ` +exports[`x-teaser renders a SmallHeavy Article 1`] = `
`; -exports[`@financial-times/x-teaser renders a SmallHeavy Content Package x-teaser 1`] = ` +exports[`x-teaser renders a SmallHeavy Content Package 1`] = `
`; -exports[`@financial-times/x-teaser renders a SmallHeavy Opinion Piece x-teaser 1`] = ` +exports[`x-teaser renders a SmallHeavy Opinion Piece 1`] = `
`; -exports[`@financial-times/x-teaser renders a SmallHeavy Package item x-teaser 1`] = ` +exports[`x-teaser renders a SmallHeavy Package item 1`] = `
`; -exports[`@financial-times/x-teaser renders a SmallHeavy Paid Post x-teaser 1`] = ` +exports[`x-teaser renders a SmallHeavy Paid Post 1`] = `
`; -exports[`@financial-times/x-teaser renders a SmallHeavy Podcast x-teaser 1`] = ` +exports[`x-teaser renders a SmallHeavy Podcast 1`] = `
`; -exports[`@financial-times/x-teaser renders a SmallHeavy Top Story x-teaser 1`] = ` +exports[`x-teaser renders a SmallHeavy Top Story 1`] = `
`; -exports[`@financial-times/x-teaser renders a SmallHeavy Video x-teaser 1`] = ` +exports[`x-teaser renders a SmallHeavy Video 1`] = `
`; -exports[`@financial-times/x-teaser renders a TopStory Article x-teaser 1`] = ` +exports[`x-teaser renders a TopStory Article 1`] = `
`; -exports[`@financial-times/x-teaser renders a TopStory Content Package x-teaser 1`] = ` +exports[`x-teaser renders a TopStory Content Package 1`] = `
`; -exports[`@financial-times/x-teaser renders a TopStory Opinion Piece x-teaser 1`] = ` +exports[`x-teaser renders a TopStory Opinion Piece 1`] = `
`; -exports[`@financial-times/x-teaser renders a TopStory Package item x-teaser 1`] = ` +exports[`x-teaser renders a TopStory Package item 1`] = `
`; -exports[`@financial-times/x-teaser renders a TopStory Paid Post x-teaser 1`] = ` +exports[`x-teaser renders a TopStory Paid Post 1`] = `
`; -exports[`@financial-times/x-teaser renders a TopStory Podcast x-teaser 1`] = ` +exports[`x-teaser renders a TopStory Podcast 1`] = `
`; -exports[`@financial-times/x-teaser renders a TopStory Top Story x-teaser 1`] = ` +exports[`x-teaser renders a TopStory Top Story 1`] = `
`; -exports[`@financial-times/x-teaser renders a TopStory Video x-teaser 1`] = ` +exports[`x-teaser renders a TopStory Video 1`] = `
`; -exports[`@financial-times/x-teaser renders a TopStoryLandscape Article x-teaser 1`] = ` +exports[`x-teaser renders a TopStoryLandscape Article 1`] = `
`; -exports[`@financial-times/x-teaser renders a TopStoryLandscape Content Package x-teaser 1`] = ` +exports[`x-teaser renders a TopStoryLandscape Content Package 1`] = `
`; -exports[`@financial-times/x-teaser renders a TopStoryLandscape Opinion Piece x-teaser 1`] = ` +exports[`x-teaser renders a TopStoryLandscape Opinion Piece 1`] = `
`; -exports[`@financial-times/x-teaser renders a TopStoryLandscape Package item x-teaser 1`] = ` +exports[`x-teaser renders a TopStoryLandscape Package item 1`] = `
`; -exports[`@financial-times/x-teaser renders a TopStoryLandscape Paid Post x-teaser 1`] = ` +exports[`x-teaser renders a TopStoryLandscape Paid Post 1`] = `
`; -exports[`@financial-times/x-teaser renders a TopStoryLandscape Podcast x-teaser 1`] = ` +exports[`x-teaser renders a TopStoryLandscape Podcast 1`] = `
`; -exports[`@financial-times/x-teaser renders a TopStoryLandscape Top Story x-teaser 1`] = ` +exports[`x-teaser renders a TopStoryLandscape Top Story 1`] = `
`; -exports[`@financial-times/x-teaser renders a TopStoryLandscape Video x-teaser 1`] = ` +exports[`x-teaser renders a TopStoryLandscape Video 1`] = `
{ + snapshots(stories); +}); diff --git a/components/x-teaser/package.json b/components/x-teaser/package.json index 5852abacb..36cf4a0f4 100644 --- a/components/x-teaser/package.json +++ b/components/x-teaser/package.json @@ -21,7 +21,8 @@ "dateformat": "^3.0.3" }, "devDependencies": { - "@financial-times/x-rollup": "file:../../packages/x-rollup" + "@financial-times/x-rollup": "file:../../packages/x-rollup", + "@financial-times/x-test-utils": "file:../../packages/x-test-utils" }, "repository": { "type": "git", diff --git a/components/x-teaser/stories/index.js b/components/x-teaser/stories/index.js index 63b6fac6d..06d5bcb3f 100644 --- a/components/x-teaser/stories/index.js +++ b/components/x-teaser/stories/index.js @@ -1,6 +1,7 @@ -const { Teaser } = require('../'); +const { Teaser, presets } = require('../'); exports.component = Teaser; +exports.presets = presets; exports.package = require('../package.json'); diff --git a/package.json b/package.json index d1f5b1608..ada6f0dc8 100644 --- a/package.json +++ b/package.json @@ -22,8 +22,8 @@ "eslint-plugin-react": "^7.10.0", "espree": "^4.1.0", "fetch-mock": "^6.5.2", - "react": "^16.3.1", - "react-test-renderer": "^16.3.1" + "jest": "^24.7.1", + "react": "^16.3.1" }, "x-dash": { "engine": { @@ -38,8 +38,5 @@ "components/*", "packages/*", "tools/*" - ], - "devDependencies": { - "jest": "^24.7.1" - } + ] } diff --git a/packages/x-test-utils/package.json b/packages/x-test-utils/package.json index 193cd74db..b353f91da 100644 --- a/packages/x-test-utils/package.json +++ b/packages/x-test-utils/package.json @@ -11,10 +11,12 @@ "author": "", "license": "ISC", "dependencies": { + "@financial-times/x-engine": "file:../x-engine", "enzyme": "^3.6.0", "enzyme-adapter-react-16": "^1.5.0", "jest-enzyme": "^6.0.4", "react": "^16.5.0", - "react-dom": "^16.5.0" + "react-dom": "^16.5.0", + "react-test-renderer": "^16.8.6" } } diff --git a/packages/x-test-utils/snapshots.js b/packages/x-test-utils/snapshots.js new file mode 100644 index 000000000..71dd77e43 --- /dev/null +++ b/packages/x-test-utils/snapshots.js @@ -0,0 +1,14 @@ +const renderer = require('react-test-renderer'); +const { h } = require('@financial-times/x-engine'); + +module.exports = ({ stories, component, presets = { default: {} } }) => { + for (const { title, data } of stories) { + for (const [preset, options] of Object.entries(presets)) { + it(`renders a ${preset} ${title}`, () => { + const props = { ...data, ...options }; + const tree = renderer.create(h(component, props)).toJSON(); + expect(tree).toMatchSnapshot(); + }); + } + } +}