use snapshot tests for ui-component stories

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/.*"],

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": {}
 }

scm-ui/jest-preset/src/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = "test-file-stub";

scm-ui/jest-preset/src/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

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;

scm-ui/jest-preset/src/setup.js

@@ -0,0 +1,2 @@
+import registerRequireContextHook from "babel-plugin-require-context-hook/register";
+registerRequireContextHook();

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`] = `
+<div>
+  <div
+    className="sc-bwzfXH EEAiO"
+  >
+    <button
+      className="button is-primary"
+      onClick={[Function]}
+      type="button"
+    >
+      primary
+       
+    </button>
+  </div>
+  <div
+    className="sc-bwzfXH EEAiO"
+  >
+    <button
+      className="button is-success"
+      onClick={[Function]}
+      type="button"
+    >
+      success
+       
+    </button>
+  </div>
+  <div
+    className="sc-bwzfXH EEAiO"
+  >
+    <button
+      className="button is-info"
+      onClick={[Function]}
+      type="button"
+    >
+      info
+       
+    </button>
+  </div>
+  <div
+    className="sc-bwzfXH EEAiO"
+  >
+    <button
+      className="button is-warning"
+      onClick={[Function]}
+      type="button"
+    >
+      warning
+       
+    </button>
+  </div>
+  <div
+    className="sc-bwzfXH EEAiO"
+  >
+    <button
+      className="button is-danger"
+      onClick={[Function]}
+      type="button"
+    >
+      danger
+       
+    </button>
+  </div>
+  <div
+    className="sc-bwzfXH EEAiO"
+  >
+    <button
+      className="button is-black"
+      onClick={[Function]}
+      type="button"
+    >
+      black
+       
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots DateFromNow Default 1`] = `
+<div>
+  <p>
+    <time
+      className="sc-bdVaJa dkavpQ"
+      title="2009-06-30 18:30:00"
+    >
+      over 10 years ago
+    </time>
+  </p>
+  <p>
+    <time
+      className="sc-bdVaJa dkavpQ"
+      title="2019-06-30 18:30:00"
+    >
+      3 months ago
+    </time>
+  </p>
+</div>
+`;

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", () => (
     <div>
       {colors.map(color => (
-        <Spacing>
+        <Spacing key={color}>
           <Button color={color} label={color} />
         </Spacing>
       ))}

scm-ui/ui-components/src/storyshots.test.js

@@ -1,12 +1,5 @@
-/*import initStoryshots from "@storybook/addon-storyshots";
+import initStoryshots from "@storybook/addon-storyshots";
 
 initStoryshots({
-});*/
+  /* configuration options */
-
-describe("noop", () => {
-
-  it("is all good", () => {
-
-  });
-
 });

yarn.lock

@@ -2516,11 +2516,6 @@ babel-code-frame@^6.22.0:
     esutils "^2.0.2"
     js-tokens "^3.0.2"
 
-babel-core@7.0.0-bridge.0:
-  version "7.0.0-bridge.0"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
-  integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
-
 babel-eslint@^10.0.3:
   version "10.0.3"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.3.tgz#81a2c669be0f205e19462fed2482d33e4687a88a"
@@ -2753,6 +2748,11 @@ babel-plugin-react-docgen@^3.0.0:
     react-docgen "^4.1.0"
     recast "^0.14.7"
 
+babel-plugin-require-context-hook@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-require-context-hook/-/babel-plugin-require-context-hook-1.0.0.tgz#3f0e7cce87c338f53639b948632fd4e73834632d"
+  integrity sha512-EMZD1563QUqLhzrqcThk759RhuNVX/ZJdrtGK6drwzgvnR+ARjWyXIHPbu+tUNaMGtPz/gQeAM2M6VUw2UiUeA==
+
 "babel-plugin-styled-components@>= 1":
   version "1.10.6"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz#f8782953751115faf09a9f92431436912c34006b"
@@ -5855,7 +5855,7 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
-gitdiff-parser@^0.1.2, "gitdiff-parser@https://github.com/cloudogu/gitdiff-parser#3a72da4a8e3d9bfb4b9e01a43e85628c19f26cc4":
+gitdiff-parser@^0.1.2:
   version "0.1.2"
   resolved "https://github.com/cloudogu/gitdiff-parser#3a72da4a8e3d9bfb4b9e01a43e85628c19f26cc4"