diff --git a/packages/themes/src/stories/ThemeGrid.test.tsx b/packages/themes/src/stories/ThemeGrid.test.tsx new file mode 100644 index 0000000..e54d4b3 --- /dev/null +++ b/packages/themes/src/stories/ThemeGrid.test.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import { render } from "@testing-library/react"; + +import { ThemeGrid } from "./ThemeGrid"; +import { chrome } from "../themes"; +import styles from "./ThemeGrid.css"; + +describe("ThemeGrid", () => { + test("Create Component with chrome theme", () => { + const name = "Chrome"; + const { container } = render(); + + const themeElements = container.getElementsByClassName(styles.theme); + const themeHeadings = container.getElementsByTagName("h1"); + + expect(themeElements).toHaveLength(1); + expect(themeHeadings[0].textContent).toBe(`${name} - Light`); + expect(themeHeadings[1].textContent).toBe(`${name} - Dark`); + }); + test("It matches the snapshot", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/packages/themes/src/stories/__snapshots__/ThemeGrid.test.tsx.snap b/packages/themes/src/stories/__snapshots__/ThemeGrid.test.tsx.snap new file mode 100644 index 0000000..f194d02 --- /dev/null +++ b/packages/themes/src/stories/__snapshots__/ThemeGrid.test.tsx.snap @@ -0,0 +1,1002 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ThemeGrid It matches the snapshot 1`] = ` +
+
+
+

+ Chrome + - Light +

+
    +
  • +
    +
    +

    + backgroundColor +

    +

    + #FFFFFF +

    +
    +
    • +
  • +
    +
    +

    + error +

    +

    + #EC3941 +

    +
    +
    • +
  • +
    +
    +

    + errorBackground +

    +

    + #FEF1F0 +

    +
    +
    • +
  • +
    +
    +

    + errorBorder +

    +

    + #FED7D6 +

    +
    +
    • +
  • +
    +
    +

    + errorText +

    +

    + #FF0000 +

    +
    +
    • +
  • +
    +
    +

    + textColor +

    +

    + #303942 +

    +
    +
    • +
  • +
    +
    +

    + warning +

    +

    + #F5BD00 +

    +
    +
    • +
  • +
    +
    +

    + warningBackground +

    +

    + #FFFBE5 +

    +
    +
    • +
  • +
    +
    +

    + warningBorder +

    +

    + #FFF5C2 +

    +
    +
    • +
  • +
    +
    +

    + warningText +

    +

    + #5C3D00 +

    +
    +
    • +
  • +
    +
    +

    + blue01 +

    +

    + #EDF2FC +

    +
    +
    • +
  • +
    +
    +

    + blue02 +

    +

    + #CFE8FC +

    +
    +
    • +
  • +
    +
    +

    + blue03 +

    +

    + #1A73E8 +

    +
    +
    • +
  • +
    +
    +

    + blue04 +

    +

    + #3646B6 +

    +
    +
    • +
  • +
    +
    +

    + blue05 +

    +

    + #2D0BC9 +

    +
    +
    • +
  • +
    +
    +

    + brown01 +

    +

    + #994400 +

    +
    +
    • +
  • +
    +
    +

    + gray01 +

    +

    + #F3F3F3 +

    +
    +
    • +
  • +
    +
    +

    + gray02 +

    +

    + #E9E9E9 +

    +
    +
    • +
  • +
    +
    +

    + gray03 +

    +

    + #CDCDCD +

    +
    +
    • +
  • +
    +
    +

    + gray04 +

    +

    + #C0C0C0 +

    +
    +
    • +
  • +
    +
    +

    + gray05 +

    +

    + #8E8E8E +

    +
    +
    • +
  • +
    +
    +

    + gray06 +

    +

    + #444444 +

    +
    +
    • +
  • +
    +
    +

    + green01 +

    +

    + #317632 +

    +
    +
    • +
  • +
    +
    +

    + purple01 +

    +

    + #AE97BB +

    +
    +
    • +
  • +
    +
    +

    + purple02 +

    +

    + #BD84C2 +

    +
    +
    • +
  • +
    +
    +

    + purple03 +

    +

    + #881280 +

    +
    +
    • +
  • +
    +
    +

    + red01 +

    +

    + #CF4B49 +

    +
    +
    • +
+
+
+

+ Chrome + - Dark +

+
    +
  • +
    +
    +

    + backgroundColor +

    +

    + #252525 +

    +
    +
    • +
  • +
    +
    +

    + error +

    +

    + #EC3941 +

    +
    +
    • +
  • +
    +
    +

    + errorBackground +

    +

    + #290000 +

    +
    +
    • +
  • +
    +
    +

    + errorBorder +

    +

    + #5C0100 +

    +
    +
    • +
  • +
    +
    +

    + errorText +

    +

    + #FD7E7E +

    +
    +
    • +
  • +
    +
    +

    + textColor +

    +

    + #EDEEEE +

    +
    +
    • +
  • +
    +
    +

    + warning +

    +

    + #F5BD00 +

    +
    +
    • +
  • +
    +
    +

    + warningBackground +

    +

    + #332B00 +

    +
    +
    • +
  • +
    +
    +

    + warningBorder +

    +

    + #665500 +

    +
    +
    • +
  • +
    +
    +

    + warningText +

    +

    + #FDFCF8 +

    +
    +
    • +
  • +
    +
    +

    + blue01 +

    +

    + #9ABBDB +

    +
    +
    • +
  • +
    +
    +

    + blue02 +

    +

    + #59A6C9 +

    +
    +
    • +
  • +
    +
    +

    + blue03 +

    +

    + #0E639C +

    +
    +
    • +
  • +
    +
    +

    + blue04 +

    +

    + #093D69 +

    +
    +
    • +
  • +
    +
    +

    + blue05 +

    +

    + #192538 +

    +
    +
    • +
  • +
    +
    +

    + gray01 +

    +

    + #C8C8C8 +

    +
    +
    • +
  • +
    +
    +

    + gray02 +

    +

    + #B7B7B7 +

    +
    +
    • +
  • +
    +
    +

    + gray03 +

    +

    + #848484 +

    +
    +
    • +
  • +
    +
    +

    + gray04 +

    +

    + #3C3D3C +

    +
    +
    • +
  • +
    +
    +

    + gray05 +

    +

    + #2A2A2D +

    +
    +
    • +
  • +
    +
    +

    + gray06 +

    +

    + #202020 +

    +
    +
    • +
  • +
    +
    +

    + orange01 +

    +

    + #F29766 +

    +
    +
    • +
  • +
    +
    +

    + orange02 +

    +

    + #EE8953 +

    +
    +
    • +
  • +
    +
    +

    + pink01 +

    +

    + #F6D9F8 +

    +
    +
    • +
  • +
    +
    +

    + pink02 +

    +

    + #AB98AC +

    +
    +
    • +
  • +
    +
    +

    + purple01 +

    +

    + #D0D6FB +

    +
    +
    • +
  • +
    +
    +

    + purple02 +

    +

    + #987FFD +

    +
    +
    • +
+
+
+
+`;