From 057d4254faf4d49e879c48ad39a5ba9152266da9 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Thu, 12 Jul 2018 20:41:15 -0300
Subject: [PATCH] Add tests

---
 .../framework/lib/bootstrap/TalkContext.tsx   |  2 +-
 .../client/stream/components/App.spec.tsx     | 22 ++++++++++
 .../stream/components/Comment/TopBar.spec.tsx | 44 +++++++++++++++++++
 .../components/Comment/Username.spec.tsx      | 40 +++++++++++++++--
 .../__snapshots__/TopBar.spec.tsx.snap        | 21 +++++++++
 .../__snapshots__/Username.spec.tsx.snap      | 16 +++++++
 .../client/stream/components/Indent.spec.tsx  | 15 +++++++
 .../__snapshots__/App.spec.tsx.snap           | 18 ++++++++
 .../__snapshots__/Indent.spec.tsx.snap        | 11 +++++
 .../stream/containers/AppContainer.spec.tsx   | 16 +++++++
 .../client/stream/containers/AppContainer.tsx |  2 +-
 .../containers/CommentContainer.spec.tsx      |  1 +
 .../__snapshots__/AppContainer.spec.tsx.snap  |  7 +++
 .../CommentContainer.spec.tsx.snap            |  1 +
 src/core/client/stream/test/loadMore.spec.tsx |  1 +
 .../client/stream/test/renderReplies.spec.tsx |  1 +
 .../client/stream/test/renderStream.spec.tsx  |  1 +
 .../stream/test/showAllReplies.spec.tsx       |  1 +
 .../components/MatchMedia/MatchMedia.spec.tsx |  2 +-
 .../ui/components/MatchMedia/MatchMedia.tsx   | 16 +++++--
 .../ui/components/UIContext/UIContext.ts      |  8 ++--
 .../client/ui/components/UIContext/index.ts   |  2 +-
 src/core/client/ui/components/index.ts        |  2 +-
 23 files changed, 235 insertions(+), 15 deletions(-)
 create mode 100644 src/core/client/stream/components/App.spec.tsx
 create mode 100644 src/core/client/stream/components/Comment/TopBar.spec.tsx
 create mode 100644 src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
 create mode 100644 src/core/client/stream/components/Indent.spec.tsx
 create mode 100644 src/core/client/stream/components/__snapshots__/App.spec.tsx.snap
 create mode 100644 src/core/client/stream/components/__snapshots__/Indent.spec.tsx.snap
 create mode 100644 src/core/client/stream/containers/AppContainer.spec.tsx
 create mode 100644 src/core/client/stream/containers/__snapshots__/AppContainer.spec.tsx.snap

diff --git a/src/core/client/framework/lib/bootstrap/TalkContext.tsx b/src/core/client/framework/lib/bootstrap/TalkContext.tsx
index cfa8c50c5..29c80607a 100644
--- a/src/core/client/framework/lib/bootstrap/TalkContext.tsx
+++ b/src/core/client/framework/lib/bootstrap/TalkContext.tsx
@@ -13,7 +13,7 @@ export interface TalkContext {
   localeMessages: MessageContext[];
 
   // formatter for timeago.
-  timeagoFormatter: Formatter;
+  timeagoFormatter: Formatter | null;
 }
 
 const { Provider, Consumer } = React.createContext<TalkContext>({} as any);
diff --git a/src/core/client/stream/components/App.spec.tsx b/src/core/client/stream/components/App.spec.tsx
new file mode 100644
index 000000000..9b91a8974
--- /dev/null
+++ b/src/core/client/stream/components/App.spec.tsx
@@ -0,0 +1,22 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import App from "./App";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof App> = {
+    asset: {},
+  };
+  const wrapper = shallow(<App {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
+
+it("renders correctly when asset is null", () => {
+  const props: PropTypesOf<typeof App> = {
+    asset: null,
+  };
+  const wrapper = shallow(<App {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/Comment/TopBar.spec.tsx b/src/core/client/stream/components/Comment/TopBar.spec.tsx
new file mode 100644
index 000000000..2f33c6ab8
--- /dev/null
+++ b/src/core/client/stream/components/Comment/TopBar.spec.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { UIContext, UIContextProps } from "talk-ui/components";
+
+import TopBar from "./TopBar";
+
+it("renders correctly on small screens", () => {
+  const props = {
+    children: <div>Hello World</div>,
+  };
+
+  const context: UIContextProps = {
+    mediaQueryValues: {
+      width: 320,
+    },
+  };
+
+  const testRenderer = TestRenderer.create(
+    <UIContext.Provider value={context}>
+      <TopBar {...props} />
+    </UIContext.Provider>
+  );
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders correctly on big screens", () => {
+  const props = {
+    children: <div>Hello World</div>,
+  };
+
+  const context: UIContextProps = {
+    mediaQueryValues: {
+      width: 1600,
+    },
+  };
+
+  const testRenderer = TestRenderer.create(
+    <UIContext.Provider value={context}>
+      <TopBar {...props} />
+    </UIContext.Provider>
+  );
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/Comment/Username.spec.tsx b/src/core/client/stream/components/Comment/Username.spec.tsx
index c4f1c1dfe..5092f5688 100644
--- a/src/core/client/stream/components/Comment/Username.spec.tsx
+++ b/src/core/client/stream/components/Comment/Username.spec.tsx
@@ -1,12 +1,44 @@
-import { shallow } from "enzyme";
 import React from "react";
+import TestRenderer from "react-test-renderer";
+
+import { UIContext, UIContextProps } from "talk-ui/components";
 
 import Username from "./Username";
 
-it("renders correctly", () => {
+it("renders correctly on small screens", () => {
   const props = {
     children: "Marvin",
   };
-  const wrapper = shallow(<Username {...props} />);
-  expect(wrapper).toMatchSnapshot();
+
+  const context: UIContextProps = {
+    mediaQueryValues: {
+      width: 320,
+    },
+  };
+
+  const testRenderer = TestRenderer.create(
+    <UIContext.Provider value={context}>
+      <Username {...props} />
+    </UIContext.Provider>
+  );
+  expect(testRenderer.toJSON()).toMatchSnapshot();
+});
+
+it("renders correctly on big screens", () => {
+  const props = {
+    children: "Marvin",
+  };
+
+  const context: UIContextProps = {
+    mediaQueryValues: {
+      width: 1600,
+    },
+  };
+
+  const testRenderer = TestRenderer.create(
+    <UIContext.Provider value={context}>
+      <Username {...props} />
+    </UIContext.Provider>
+  );
+  expect(testRenderer.toJSON()).toMatchSnapshot();
 });
diff --git a/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
new file mode 100644
index 000000000..9253404bd
--- /dev/null
+++ b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly on big screens 1`] = `
+<div
+  className="Flex-root TopBar-root Flex-itemGutter Flex-alignBaseline Flex-directionRow"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
+
+exports[`renders correctly on small screens 1`] = `
+<div
+  className="Flex-root TopBar-root Flex-halfItemGutter Flex-alignBaseline Flex-directionColumn"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap
index 0521c3357..3836a45be 100644
--- a/src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap
+++ b/src/core/client/stream/components/Comment/__snapshots__/Username.spec.tsx.snap
@@ -5,3 +5,19 @@ exports[`renders correctly 1`] = `
   minWidth="xs"
 />
 `;
+
+exports[`renders correctly on big screens 1`] = `
+<span
+  className="Typography-root Typography-heading2 Username-root"
+>
+  Marvin
+</span>
+`;
+
+exports[`renders correctly on small screens 1`] = `
+<span
+  className="Typography-root Typography-heading3 Username-root"
+>
+  Marvin
+</span>
+`;
diff --git a/src/core/client/stream/components/Indent.spec.tsx b/src/core/client/stream/components/Indent.spec.tsx
new file mode 100644
index 000000000..fbf442bd6
--- /dev/null
+++ b/src/core/client/stream/components/Indent.spec.tsx
@@ -0,0 +1,15 @@
+import { shallow } from "enzyme";
+import { noop } from "lodash";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import Indent from "./Indent";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof Indent> = {
+    children: <div>Hello World</div>,
+  };
+  const wrapper = shallow(<Indent {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap
new file mode 100644
index 000000000..6a12e4e09
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/App.spec.tsx.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<Flex
+  className="App-root"
+  justifyContent="center"
+>
+  <Relay(StreamContainer)
+    asset={Object {}}
+  />
+</Flex>
+`;
+
+exports[`renders correctly when asset is null 1`] = `
+<div>
+  Asset not found 
+</div>
+`;
diff --git a/src/core/client/stream/components/__snapshots__/Indent.spec.tsx.snap b/src/core/client/stream/components/__snapshots__/Indent.spec.tsx.snap
new file mode 100644
index 000000000..910c819b2
--- /dev/null
+++ b/src/core/client/stream/components/__snapshots__/Indent.spec.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<div
+  className="Indent-root Indent-level0"
+>
+  <div>
+    Hello World
+  </div>
+</div>
+`;
diff --git a/src/core/client/stream/containers/AppContainer.spec.tsx b/src/core/client/stream/containers/AppContainer.spec.tsx
new file mode 100644
index 000000000..17a0a676d
--- /dev/null
+++ b/src/core/client/stream/containers/AppContainer.spec.tsx
@@ -0,0 +1,16 @@
+import { shallow } from "enzyme";
+import React from "react";
+
+import { PropTypesOf } from "talk-framework/types";
+
+import { AppContainer } from "./AppContainer";
+
+it("renders correctly", () => {
+  const props: PropTypesOf<typeof AppContainer> = {
+    data: {
+      asset: {},
+    },
+  };
+  const wrapper = shallow(<AppContainer {...props} />);
+  expect(wrapper).toMatchSnapshot();
+});
diff --git a/src/core/client/stream/containers/AppContainer.tsx b/src/core/client/stream/containers/AppContainer.tsx
index 8b84660ca..90eb1e1c6 100644
--- a/src/core/client/stream/containers/AppContainer.tsx
+++ b/src/core/client/stream/containers/AppContainer.tsx
@@ -11,7 +11,7 @@ interface InnerProps {
   data: Data;
 }
 
-const AppContainer: StatelessComponent<InnerProps> = props => {
+export const AppContainer: StatelessComponent<InnerProps> = props => {
   return <App {...props.data} />;
 };
 
diff --git a/src/core/client/stream/containers/CommentContainer.spec.tsx b/src/core/client/stream/containers/CommentContainer.spec.tsx
index 94ffb7392..184d6454c 100644
--- a/src/core/client/stream/containers/CommentContainer.spec.tsx
+++ b/src/core/client/stream/containers/CommentContainer.spec.tsx
@@ -10,6 +10,7 @@ it("renders username and body", () => {
         username: "Marvin",
       },
       body: "Woof",
+      createdAt: new Date("December 17, 1995 03:24:00").toISOString(),
     },
   };
 
diff --git a/src/core/client/stream/containers/__snapshots__/AppContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/AppContainer.spec.tsx.snap
new file mode 100644
index 000000000..f9a5c5316
--- /dev/null
+++ b/src/core/client/stream/containers/__snapshots__/AppContainer.spec.tsx.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<App
+  asset={Object {}}
+/>
+`;
diff --git a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
index 6ce053179..af2754b54 100644
--- a/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
+++ b/src/core/client/stream/containers/__snapshots__/CommentContainer.spec.tsx.snap
@@ -8,5 +8,6 @@ exports[`renders username and body 1`] = `
     }
   }
   body="Woof"
+  createdAt="1995-12-17T06:24:00.000Z"
 />
 `;
diff --git a/src/core/client/stream/test/loadMore.spec.tsx b/src/core/client/stream/test/loadMore.spec.tsx
index 6f63edcfc..2fc10ccff 100644
--- a/src/core/client/stream/test/loadMore.spec.tsx
+++ b/src/core/client/stream/test/loadMore.spec.tsx
@@ -72,6 +72,7 @@ const environment = createEnvironment({
 
 const context: TalkContext = {
   relayEnvironment: environment,
+  timeagoFormatter: null,
   localeMessages: [],
 };
 
diff --git a/src/core/client/stream/test/renderReplies.spec.tsx b/src/core/client/stream/test/renderReplies.spec.tsx
index 9c535520f..de718c44c 100644
--- a/src/core/client/stream/test/renderReplies.spec.tsx
+++ b/src/core/client/stream/test/renderReplies.spec.tsx
@@ -31,6 +31,7 @@ const environment = createEnvironment({
 
 const context: TalkContext = {
   relayEnvironment: environment,
+  timeagoFormatter: null,
   localeMessages: [],
 };
 
diff --git a/src/core/client/stream/test/renderStream.spec.tsx b/src/core/client/stream/test/renderStream.spec.tsx
index 998058cce..1a37036c0 100644
--- a/src/core/client/stream/test/renderStream.spec.tsx
+++ b/src/core/client/stream/test/renderStream.spec.tsx
@@ -31,6 +31,7 @@ const environment = createEnvironment({
 
 const context: TalkContext = {
   relayEnvironment: environment,
+  timeagoFormatter: null,
   localeMessages: [],
 };
 
diff --git a/src/core/client/stream/test/showAllReplies.spec.tsx b/src/core/client/stream/test/showAllReplies.spec.tsx
index 3e929b5b0..1686f9a77 100644
--- a/src/core/client/stream/test/showAllReplies.spec.tsx
+++ b/src/core/client/stream/test/showAllReplies.spec.tsx
@@ -88,6 +88,7 @@ const environment = createEnvironment({
 
 const context: TalkContext = {
   relayEnvironment: environment,
+  timeagoFormatter: null,
   localeMessages: [],
 };
 
diff --git a/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx b/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx
index 3c4879015..1e600dd76 100644
--- a/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx
+++ b/src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx
@@ -3,7 +3,7 @@ import React from "react";
 
 import { PropTypesOf } from "talk-ui/types";
 
-import MatchMedia from "./MatchMedia";
+import { MatchMedia } from "./MatchMedia";
 
 it("renders correctly", () => {
   const props: PropTypesOf<typeof MatchMedia> = {
diff --git a/src/core/client/ui/components/MatchMedia/MatchMedia.tsx b/src/core/client/ui/components/MatchMedia/MatchMedia.tsx
index e7ca58f6a..43d900dfe 100644
--- a/src/core/client/ui/components/MatchMedia/MatchMedia.tsx
+++ b/src/core/client/ui/components/MatchMedia/MatchMedia.tsx
@@ -1,8 +1,9 @@
 import React from "react";
 import { ReactNode, StatelessComponent } from "react";
-import Responsive from "react-responsive";
+import Responsive, { MediaQueryMatchers } from "react-responsive";
 
 import theme from "../../theme/variables";
+import UIContext from "../UIContext";
 
 type Breakpoints = keyof typeof theme.breakpoints;
 
@@ -20,9 +21,10 @@ interface InnerProps {
   print?: boolean;
   screen?: boolean;
   speech?: boolean;
+  values?: Partial<MediaQueryMatchers>;
 }
 
-const MatchMedia: StatelessComponent<InnerProps> = props => {
+export const MatchMedia: StatelessComponent<InnerProps> = props => {
   const { speech, minWidth, maxWidth, ...rest } = props;
   const mapped = {
     // TODO: Temporarily map newer speech to older aural type until
@@ -34,4 +36,12 @@ const MatchMedia: StatelessComponent<InnerProps> = props => {
   return <Responsive {...rest} {...mapped} />;
 };
 
-export default MatchMedia;
+const MatchMediaWithContext: StatelessComponent<InnerProps> = props => (
+  <UIContext.Consumer>
+    {({ mediaQueryValues }) => (
+      <MatchMedia {...props} values={mediaQueryValues} />
+    )}
+  </UIContext.Consumer>
+);
+
+export default MatchMediaWithContext;
diff --git a/src/core/client/ui/components/UIContext/UIContext.ts b/src/core/client/ui/components/UIContext/UIContext.ts
index b3f4fd338..b8372d1f3 100644
--- a/src/core/client/ui/components/UIContext/UIContext.ts
+++ b/src/core/client/ui/components/UIContext/UIContext.ts
@@ -1,10 +1,12 @@
 import React from "react";
+import { MediaQueryMatchers } from "react-responsive";
 import { Formatter } from "react-timeago";
 
-export interface UIContext {
-  timeagoFormatter: Formatter;
+export interface UIContextProps {
+  timeagoFormatter?: Formatter | null;
+  mediaQueryValues?: Partial<MediaQueryMatchers>;
 }
 
-const UIContext = React.createContext<UIContext>({} as any);
+const UIContext = React.createContext<UIContextProps>({} as any);
 
 export default UIContext;
diff --git a/src/core/client/ui/components/UIContext/index.ts b/src/core/client/ui/components/UIContext/index.ts
index fb7f47676..86504f205 100644
--- a/src/core/client/ui/components/UIContext/index.ts
+++ b/src/core/client/ui/components/UIContext/index.ts
@@ -1 +1 @@
-export { default } from "./UIContext";
+export { default, UIContextProps } from "./UIContext";
diff --git a/src/core/client/ui/components/index.ts b/src/core/client/ui/components/index.ts
index f8a7732f3..3d81f1aba 100644
--- a/src/core/client/ui/components/index.ts
+++ b/src/core/client/ui/components/index.ts
@@ -2,6 +2,6 @@ export { default as BaseButton } from "./BaseButton";
 export { default as Button } from "./Button";
 export { default as Typography } from "./Typography";
 export { default as RelativeTime } from "./RelativeTime";
-export { default as UIContext } from "./UIContext";
+export { default as UIContext, UIContextProps } from "./UIContext";
 export { default as Flex } from "./Flex";
 export { default as MatchMedia } from "./MatchMedia";