From 5a826373823a013cb53b83f7ee41d4a1545d7d78 Mon Sep 17 00:00:00 2001 From: Sebastian Sdorra Date: Fri, 11 Oct 2019 14:09:22 +0200 Subject: [PATCH] use snapshot tests for ui-component stories --- scm-ui/jest-preset/jest-preset.js | 13 ++- scm-ui/jest-preset/package.json | 4 +- scm-ui/jest-preset/src/__mocks__/fileMock.js | 1 + scm-ui/jest-preset/src/__mocks__/styleMock.js | 1 + scm-ui/jest-preset/src/index.js | 8 +- scm-ui/jest-preset/src/setup.js | 2 + .../src/__snapshots__/storyshots.test.js.snap | 99 +++++++++++++++++++ .../src/buttons/Button.stories.js | 16 ++- scm-ui/ui-components/src/storyshots.test.js | 11 +-- yarn.lock | 12 +-- 10 files changed, 146 insertions(+), 21 deletions(-) create mode 100644 scm-ui/jest-preset/src/__mocks__/fileMock.js create mode 100644 scm-ui/jest-preset/src/__mocks__/styleMock.js create mode 100644 scm-ui/jest-preset/src/setup.js create mode 100644 scm-ui/ui-components/src/__snapshots__/storyshots.test.js.snap diff --git a/scm-ui/jest-preset/jest-preset.js b/scm-ui/jest-preset/jest-preset.js index 1856cbda4a..7c6189ffed 100644 --- a/scm-ui/jest-preset/jest-preset.js +++ b/scm-ui/jest-preset/jest-preset.js @@ -1,10 +1,21 @@ const path = require("path"); const rootDir = path.resolve(__dirname, ".."); const reportDirectory = path.join(rootDir, "target", "jest-reports"); +const mockDirectory = path.resolve(__dirname, "src", "__mocks__"); module.exports = { rootDir, - transform: { "^.+\\.js$": "@scm-manager/jest-preset" }, + transform: { + "^.+\\.js$": "@scm-manager/jest-preset" + }, + moduleNameMapper: { + "\\.(png|svg|jpg|gif|woff2?|eot|ttf)$": path.join( + mockDirectory, + "fileMock.js" + ), + "\\.(css|scss|sass)$": path.join(mockDirectory, "styleMock.js") + }, + setupFiles: [path.resolve(__dirname, "src", "setup.js")], collectCoverage: true, coverageDirectory: path.join(reportDirectory, "coverage"), coveragePathIgnorePatterns: ["src/tests/.*"], diff --git a/scm-ui/jest-preset/package.json b/scm-ui/jest-preset/package.json index 0a6194d0b0..2174dfbb6e 100644 --- a/scm-ui/jest-preset/package.json +++ b/scm-ui/jest-preset/package.json @@ -8,7 +8,9 @@ "private": false, "dependencies": { "babel-jest": "^24.9.0", + "babel-plugin-require-context-hook": "^1.0.0", "jest": "^24.9.0", "jest-junit": "^8.0.0" - } + }, + "devDependencies": {} } diff --git a/scm-ui/jest-preset/src/__mocks__/fileMock.js b/scm-ui/jest-preset/src/__mocks__/fileMock.js new file mode 100644 index 0000000000..0a445d0600 --- /dev/null +++ b/scm-ui/jest-preset/src/__mocks__/fileMock.js @@ -0,0 +1 @@ +module.exports = "test-file-stub"; diff --git a/scm-ui/jest-preset/src/__mocks__/styleMock.js b/scm-ui/jest-preset/src/__mocks__/styleMock.js new file mode 100644 index 0000000000..f053ebf797 --- /dev/null +++ b/scm-ui/jest-preset/src/__mocks__/styleMock.js @@ -0,0 +1 @@ +module.exports = {}; diff --git a/scm-ui/jest-preset/src/index.js b/scm-ui/jest-preset/src/index.js index f283d8cd2e..0fb56315e6 100644 --- a/scm-ui/jest-preset/src/index.js +++ b/scm-ui/jest-preset/src/index.js @@ -1,11 +1,15 @@ const { createTransformer } = require("babel-jest"); const transformer = createTransformer({ - presets: ["@scm-manager/babel-preset"] + presets: ["@scm-manager/babel-preset"], + plugins: ["require-context-hook"] }); module.exports = { process(src, filename) { - if (!filename.includes("node_modules") || filename.includes("@scm-manager")) { + if ( + !filename.includes("node_modules") || + filename.includes("@scm-manager") + ) { return transformer.process(...arguments); } return src; diff --git a/scm-ui/jest-preset/src/setup.js b/scm-ui/jest-preset/src/setup.js new file mode 100644 index 0000000000..ffb0ddb8c0 --- /dev/null +++ b/scm-ui/jest-preset/src/setup.js @@ -0,0 +1,2 @@ +import registerRequireContextHook from "babel-plugin-require-context-hook/register"; +registerRequireContextHook(); diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.js.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.js.snap new file mode 100644 index 0000000000..32fb9a2e1d --- /dev/null +++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.js.snap @@ -0,0 +1,99 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Storyshots Button Colors 1`] = ` +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+`; + +exports[`Storyshots DateFromNow Default 1`] = ` +
+

+ +

+

+ +

+
+`; diff --git a/scm-ui/ui-components/src/buttons/Button.stories.js b/scm-ui/ui-components/src/buttons/Button.stories.js index 104405f41f..951e165273 100644 --- a/scm-ui/ui-components/src/buttons/Button.stories.js +++ b/scm-ui/ui-components/src/buttons/Button.stories.js @@ -4,7 +4,19 @@ import { storiesOf } from "@storybook/react"; import StoryRouter from "storybook-react-router"; import styled from "styled-components"; -const colors = ["primary", "success", "info", "warning", "danger", "black"]; +const colors = [ + "primary", + "link", + "info", + "success", + "warning", + "danger", + "white", + "light", + "dark", + "black", + "text" +]; const Spacing = styled.div` padding: 1em; @@ -15,7 +27,7 @@ storiesOf("Button", module) .add("Colors", () => (
{colors.map(color => ( - +