Merge pull request #77 from arcticicestudio/feature/gh-76-jest-utilit…

…ies-for-styled-components

Jest utilities for Styled Components

jest.config.js

@@ -64,7 +64,7 @@ module.exports = {
     ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
       "<rootDir>/test/__mocks__/file.js",
     /* Ensure React components loaded from SVG files are mocked correctly. */
-    ".+\\.svg$": "<rootDir>/test/__mocks__/svgr.js"
+    ".+\\.svg$": "<rootDir>/test/__mocks__/svgr.jsx"
   },
 
   /*

package.json

@@ -73,6 +73,7 @@
     "jest": "23.6.0",
     "jest-dom": "2.1.1",
     "jest-junit": "5.2.0",
+    "jest-styled-components": "6.3.1",
     "lint-staged": "8.1.0",
     "npm-run-all": "4.1.5",
     "prettier": "1.15.2",

src/components/organisms/core/Header/index.js

@@ -7,8 +7,8 @@
  * License:    MIT
  */
 
-import { HEADER_HEIGHT, HEADER_HEIGHT_PINNED } from "./shared/styles";
+import { HEADER_BRAND_LOGO_SHRINK_FACTOR, HEADER_HEIGHT, HEADER_HEIGHT_PINNED } from "./shared/styles";
 import Header from "./Header";
 
-export { HEADER_HEIGHT, HEADER_HEIGHT_PINNED };
+export { HEADER_BRAND_LOGO_SHRINK_FACTOR, HEADER_HEIGHT, HEADER_HEIGHT_PINNED };
 export default Header;

src/components/organisms/core/Header/shared/styles.js

@@ -18,6 +18,13 @@ import { rgba } from "polished";
 
 import { colors, themedMode, MODE_BRIGHT_SNOW_FLURRY, MODE_DARK_NIGHT_FROST } from "styles/theme";
 
+/**
+ * The factor with which the branding logo is multiplied by the height of the header based on the pin mode.
+ *
+ * @type {number}
+ */
+const HEADER_BRAND_LOGO_SHRINK_FACTOR = 0.45;
+
 /**
  * The default height (in `px`) of the header when in unpinned mode.
  *
@@ -42,4 +49,10 @@ const linkBackgroundColorHover = themedMode({
   [MODE_DARK_NIGHT_FROST]: rgba(colors.nord3, 0.8)
 });
 
-export { backgroundColor, linkBackgroundColorHover, HEADER_HEIGHT, HEADER_HEIGHT_PINNED };
+export {
+  backgroundColor,
+  linkBackgroundColorHover,
+  HEADER_BRAND_LOGO_SHRINK_FACTOR,
+  HEADER_HEIGHT,
+  HEADER_HEIGHT_PINNED
+};

src/components/organisms/core/Header/styled/Logo.jsx

@@ -12,6 +12,8 @@ import { em } from "polished";
 
 import { Nord } from "atoms/core/vectors/logos";
 
+import { HEADER_BRAND_LOGO_SHRINK_FACTOR } from "../shared/styles";
+
 /**
  * Nord's logo as SVG vector graphic component with a dynamic size based on the given `size` prop.
  *
@@ -21,8 +23,8 @@ import { Nord } from "atoms/core/vectors/logos";
  */
 const Logo = styled(Nord)`
   display: block;
-  width: ${({ size }) => em(size * 0.45)};
-  height: ${({ size }) => em(size * 0.45)};
+  width: ${({ size }) => em(size * HEADER_BRAND_LOGO_SHRINK_FACTOR)};
+  height: ${({ size }) => em(size * HEADER_BRAND_LOGO_SHRINK_FACTOR)};
 `;
 
 export default Logo;

test/__mocks__/svgr.js → test/__mocks__/svgr.jsx

@@ -16,4 +16,8 @@
  * @since 0.3.0
  */
 
-module.exports = { ReactComponent: "SvgrComponent" };
+import React from "react";
+
+const MockedSvg = props => <svg {...props} />;
+
+module.exports = { ReactComponent: MockedSvg };

test/components/atoms/core/HTMLElements/inlineTextSemantics/A.test.jsx

@@ -17,21 +17,21 @@ import { metadataNordDocs } from "data/project";
 describe("snapshot", () => {
   test("renders inernal URLs with `to` prop", () => {
     const { container } = render(<A to={ROUTE_DOCS}>Docs</A>);
-    expect(container).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   test("renders inernal URLs with `href` prop", () => {
     const { container } = render(<A href={ROUTE_DOCS}>Docs</A>);
-    expect(container).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   test("renders external URLs with `href` prop", () => {
     const { container } = render(<A href={metadataNordDocs.homepage}>Docs</A>);
-    expect(container).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   test("renders external URLs with `to` prop", () => {
     const { container } = render(<A to={metadataNordDocs.homepage}>Docs</A>);
-    expect(container).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 });

test/components/atoms/core/HTMLElements/inlineTextSemantics/__snapshots__/A.test.jsx.snap

@@ -1,45 +1,93 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`snapshot renders external URLs with \`href\` prop 1`] = `
-<div>
-  <a
-    class="sc-bdVaJa jEake"
-    href="https://nordtheme.com"
-  >
-    Docs
-  </a>
-</div>
+.c0 {
+  color: inherit;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:active,
+.c0:focus,
+.c0:hover,
+.c0:visited {
+  outline: none;
+}
+
+<a
+  class="c0"
+  href="https://nordtheme.com"
+>
+  Docs
+</a>
 `;
 
 exports[`snapshot renders external URLs with \`to\` prop 1`] = `
-<div>
-  <a
-    class="sc-bdVaJa jEake"
-    href="https://nordtheme.com"
-  >
-    Docs
-  </a>
-</div>
+.c0 {
+  color: inherit;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:active,
+.c0:focus,
+.c0:hover,
+.c0:visited {
+  outline: none;
+}
+
+<a
+  class="c0"
+  href="https://nordtheme.com"
+>
+  Docs
+</a>
 `;
 
 exports[`snapshot renders inernal URLs with \`href\` prop 1`] = `
-<div>
-  <a
-    class="sc-bwzfXH lhDJTy"
-    href="/docs"
-  >
-    Docs
-  </a>
-</div>
+.c0 {
+  color: inherit;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:active,
+.c0:focus,
+.c0:hover,
+.c0:visited {
+  outline: none;
+}
+
+<a
+  class="c0"
+  href="/docs"
+>
+  Docs
+</a>
 `;
 
 exports[`snapshot renders inernal URLs with \`to\` prop 1`] = `
-<div>
-  <a
-    class="sc-bwzfXH lhDJTy"
-    href="/docs"
-  >
-    Docs
-  </a>
-</div>
+.c0 {
+  color: inherit;
+  cursor: pointer;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:active,
+.c0:focus,
+.c0:hover,
+.c0:visited {
+  outline: none;
+}
+
+<a
+  class="c0"
+  href="/docs"
+>
+  Docs
+</a>
 `;

test/components/containers/core/Content/Content.test.jsx

@@ -14,5 +14,5 @@ import Content from "containers/core/Content";
 
 test("snapshot", () => {
   const { container } = renderWithTheme(<Content />);
-  expect(container).toMatchSnapshot();
+  expect(container.firstChild).toMatchSnapshot();
 });

test/components/containers/core/Content/__snapshots__/Content.test.jsx.snap

@@ -1,9 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`snapshot 1`] = `
-<div>
-  <div
-    class="sc-bdVaJa fnJgZO"
-  />
-</div>
+.c0 {
+  width: 100%;
+}
+
+@media (min-width:75em) {
+  .c0 {
+    max-width: 75em;
+  }
+}
+
+<div
+  class="c0"
+/>
 `;

test/components/containers/core/Page/Page.test.jsx

@@ -14,5 +14,5 @@ import Page from "containers/core/Page";
 
 test("snapshot", () => {
   const { container } = render(<Page />);
-  expect(container).toMatchSnapshot();
+  expect(container.firstChild).toMatchSnapshot();
 });

test/components/containers/core/Page/__snapshots__/Page.test.jsx.snap

@@ -1,9 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`snapshot 1`] = `
-<div>
-  <main
-    class="sc-bdVaJa fWIgbF"
-  />
-</div>
+.c0 {
+  -webkit-transition: background-color 400ms ease-in-out;
+  transition: background-color 400ms ease-in-out;
+}
+
+<main
+  class="c0"
+/>
 `;

test/components/organisms/core/Header/styled/Header.test.jsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import { em } from "polished";
+
+import { renderWithTheme } from "nord-docs-test-utils";
+import Header from "organisms/core/Header/styled/Header";
+import { HEADER_HEIGHT, HEADER_HEIGHT_PINNED } from "organisms/core/Header";
+
+describe("theme styles", () => {
+  test("uses flexbox layout", () => {
+    const { container } = renderWithTheme(<Header />);
+    expect(container.firstChild).toHaveStyleRule("display", "flex");
+  });
+
+  test("has fixed position", () => {
+    const { container } = renderWithTheme(<Header />);
+    expect(container.firstChild).toHaveStyleRule("position", "fixed");
+  });
+
+  test("has correct height in unpinned mode", () => {
+    const { container } = renderWithTheme(
+      <Header height={HEADER_HEIGHT} heightPinned={HEADER_HEIGHT_PINNED} isPinned={false} />
+    );
+
+    expect(container.firstChild).toHaveStyleRule("height", em(HEADER_HEIGHT));
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test("has correct height in pinned mode", () => {
+    const { container } = renderWithTheme(
+      <Header height={HEADER_HEIGHT} heightPinned={HEADER_HEIGHT_PINNED} isPinned />
+    );
+
+    expect(container.firstChild).toHaveStyleRule("height", em(HEADER_HEIGHT_PINNED));
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

test/components/organisms/core/Header/styled/Logo.test.jsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <[email protected]>
+ * Copyright (C) 2018-present Sven Greb <[email protected]>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+import { em } from "polished";
+
+import { renderWithTheme } from "nord-docs-test-utils";
+import Logo from "organisms/core/Header/styled/Logo";
+import { HEADER_BRAND_LOGO_SHRINK_FACTOR, HEADER_HEIGHT, HEADER_HEIGHT_PINNED } from "organisms/core/Header";
+
+describe("theme styles", () => {
+  test("adjusts to passed header height in unpinned mode", () => {
+    const { container } = renderWithTheme(<Logo size={HEADER_HEIGHT} />);
+    const expectedSize = em(HEADER_HEIGHT * HEADER_BRAND_LOGO_SHRINK_FACTOR);
+
+    expect(container.firstChild).toHaveStyleRule("width", expectedSize);
+    expect(container.firstChild).toHaveStyleRule("height", expectedSize);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test("adjusts to passed header height in pinned mode", () => {
+    const { container } = renderWithTheme(<Logo size={HEADER_HEIGHT_PINNED} />);
+    const expectedSize = em(HEADER_HEIGHT_PINNED * HEADER_BRAND_LOGO_SHRINK_FACTOR);
+
+    expect(container.firstChild).toHaveStyleRule("width", expectedSize);
+    expect(container.firstChild).toHaveStyleRule("height", expectedSize);
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});