Implement missing tests for already existing style-only components

GH-76

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 <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * 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 <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * 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();
+  });
+});

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

@@ -0,0 +1,27 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * Project:    Nord Docs
+ * Repository: https://github.com/arcticicestudio/nord-docs
+ * License:    MIT
+ */
+
+import React from "react";
+
+import { renderWithTheme } from "nord-docs-test-utils";
+import LogoCaption from "organisms/core/Header/styled/LogoCaption";
+
+describe("behavior", () => {
+  test("is invisible in pinned Mode", () => {
+    const { container } = renderWithTheme(<LogoCaption isPinned />);
+    expect(container.firstChild).not.toBeVisible();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test("is visible in unpinned Mode", () => {
+    const { container } = renderWithTheme(<LogoCaption isPinned={false} />);
+    expect(container.firstChild).toBeVisible();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * 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 NavList from "organisms/core/Header/styled/NavList";
+import { media } from "styles/theme";
+
+describe("theme styles", () => {
+  test("has required CSS breakpoints", () => {
+    const { container } = renderWithTheme(<NavList />);
+    const mediaQuery = `(min-width: ${em(media.breakpoints.tabletPortraitLowerBoundary)})`;
+
+    expect(container.firstChild).toHaveStyleRule("display", "none");
+    expect(container.firstChild).toHaveStyleRule("display", "flex", {
+      media: mediaQuery
+    });
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2018-present Arctic Ice Studio <development@arcticicestudio.com>
+ * Copyright (C) 2018-present Sven Greb <development@svengreb.de>
+ *
+ * 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 SlideMenuBox from "organisms/core/Header/styled/SlideMenuBox";
+import { HEADER_HEIGHT, HEADER_HEIGHT_PINNED } from "organisms/core/Header";
+import { media } from "styles/theme";
+
+describe("theme styles", () => {
+  test("has required CSS breakpoints", () => {
+    const { container } = renderWithTheme(<SlideMenuBox />);
+    const mediaQuery = `(min-width: ${em(media.breakpoints.tabletPortraitLowerBoundary)})`;
+
+    expect(container.firstChild).toHaveStyleRule("display", "none", {
+      media: mediaQuery
+    });
+  });
+
+  test("has correct top position based on header height in unpinned mode", () => {
+    const { container } = renderWithTheme(<SlideMenuBox isPinned={false} />);
+
+    expect(container.firstChild).toHaveStyleRule("top", em(HEADER_HEIGHT));
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test("has correct top position based on the header height in pinned mode", () => {
+    const { container } = renderWithTheme(<SlideMenuBox isPinned />);
+
+    expect(container.firstChild).toHaveStyleRule("top", em(HEADER_HEIGHT_PINNED));
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});