Add tests

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);

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();
+});

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();
+});

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();
 });

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>
+`;

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>
+`;

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();
+});

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>
+`;

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>
+`;

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();
+});

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} />;
 };
 

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(),
     },
   };
 

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 {}}
+/>
+`;

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"
 />
 `;

src/core/client/stream/test/loadMore.spec.tsx

@@ -72,6 +72,7 @@ const environment = createEnvironment({
 
 const context: TalkContext = {
   relayEnvironment: environment,
+  timeagoFormatter: null,
   localeMessages: [],
 };
 

src/core/client/stream/test/renderReplies.spec.tsx

@@ -31,6 +31,7 @@ const environment = createEnvironment({
 
 const context: TalkContext = {
   relayEnvironment: environment,
+  timeagoFormatter: null,
   localeMessages: [],
 };
 

src/core/client/stream/test/renderStream.spec.tsx

@@ -31,6 +31,7 @@ const environment = createEnvironment({
 
 const context: TalkContext = {
   relayEnvironment: environment,
+  timeagoFormatter: null,
   localeMessages: [],
 };
 

src/core/client/stream/test/showAllReplies.spec.tsx

@@ -88,6 +88,7 @@ const environment = createEnvironment({
 
 const context: TalkContext = {
   relayEnvironment: environment,
+  timeagoFormatter: null,
   localeMessages: [],
 };
 

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> = {

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;

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;

src/core/client/ui/components/UIContext/index.ts

@@ -1 +1 @@
-export { default } from "./UIContext";
+export { default, UIContextProps } from "./UIContext";

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";