Add tests

packages/gatsby-plugin/.gitignore

@@ -0,0 +1,3 @@
+coverage
+.cache
+public

packages/gatsby-plugin/.npmignore

@@ -0,0 +1,4 @@
+.cache
+coverage
+public
+test

packages/gatsby-plugin/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react',
+  ],
+}

packages/gatsby-plugin/package.json

@@ -27,8 +27,15 @@
     "theme-ui": "^0.3.0-alpha.6"
   },
   "devDependencies": {
+    "@babel/core": "^7.8.4",
+    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-react": "^7.8.3",
+    "@testing-library/react": "^9.4.0",
     "cypress": "^3.4.0",
-    "lerna": "^3.13.1"
+    "jest": "^25.1.0",
+    "jest-emotion": "^10.0.27",
+    "lerna": "^3.13.1",
+    "react-test-renderer": "^16.12.0"
   },
   "jest": {
     "testMatch": [
@@ -38,6 +45,9 @@
       "/node_modules/",
       "/fixtures/"
     ],
+    "snapshotSerializers": [
+      "jest-emotion"
+    ],
     "coverageReporters": [
       "lcov",
       "text",

packages/gatsby-plugin/src/components.js

@@ -106,7 +106,6 @@ export const Horizontal = ({
   ...props
 }) => {
   const children = React.Children.toArray(props.children)
-  console.log(children.length)
   return (
     <div
       {...props}

packages/gatsby-plugin/src/context.js

@@ -1,5 +1,5 @@
 import React from 'react'
 
-export const Context = React.createContext()
+export const Context = React.createContext({})
 
 export const useDeck = () => React.useContext(Context)

packages/gatsby-plugin/test/__snapshots__/components.js.snap

@@ -0,0 +1,273 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Color renders 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: tomato;
+}
+
+.emotion-0 a {
+  color: inherit;
+}
+
+<div
+  className="emotion-0"
+/>
+`;
+
+exports[`FullScreenCode renders 1`] = `
+.emotion-0 {
+  width: 100%;
+  height: 100%;
+}
+
+.emotion-0 pre {
+  margin: 0 !important;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+<div
+  className="emotion-0"
+>
+  Hi
+</div>
+`;
+
+exports[`Horizontal renders 1`] = `
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+  text-align: center;
+}
+
+.emotion-0 {
+  width: 50%;
+}
+
+.emotion-0 img {
+  height: auto;
+}
+
+<div
+  className="emotion-2"
+>
+  <div
+    className="emotion-0"
+  >
+    <div>
+      A
+    </div>
+  </div>
+  <div
+    className="emotion-0"
+  >
+    <div>
+      B
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Image renders 1`] = `
+.emotion-0 {
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-image: url(kittens.png);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+<div
+  className="emotion-0"
+/>
+`;
+
+exports[`Invert renders 1`] = `
+.emotion-0 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  color: background;
+  background-color: text;
+}
+
+.emotion-0 a {
+  color: inherit;
+}
+
+<div
+  className="emotion-0"
+/>
+`;
+
+exports[`Split renders 1`] = `
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+  text-align: center;
+}
+
+.emotion-0 {
+  width: 50%;
+}
+
+.emotion-0 img {
+  height: auto;
+}
+
+<div
+  className="emotion-2"
+>
+  <div
+    className="emotion-0"
+  >
+    <div>
+      A
+    </div>
+  </div>
+  <div
+    className="emotion-0"
+  >
+    <div>
+      B
+    </div>
+  </div>
+</div>
+`;
+
+exports[`SplitRight renders 1`] = `
+.emotion-2 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  height: 100%;
+  text-align: center;
+}
+
+.emotion-0 {
+  width: 50%;
+}
+
+.emotion-0 img {
+  height: auto;
+}
+
+<div
+  className="emotion-2"
+>
+  <div
+    className="emotion-0"
+  >
+    <div>
+      B
+    </div>
+  </div>
+  <div
+    className="emotion-0"
+  >
+    <div>
+      A
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Steps renders 1`] = `
+Array [
+  <div
+    style={
+      Object {
+        "visibility": "visible",
+      }
+    }
+  >
+    One
+  </div>,
+  <div
+    style={
+      Object {
+        "visibility": "visible",
+      }
+    }
+  >
+    Two
+  </div>,
+]
+`;
+
+exports[`Steps renders with list 1`] = `
+<ul
+  originalType="ul"
+>
+  <li
+    style={
+      Object {
+        "visibility": "visible",
+      }
+    }
+  >
+    One
+  </li>
+  <li
+    style={
+      Object {
+        "visibility": "visible",
+      }
+    }
+  >
+    Two
+  </li>
+</ul>
+`;

packages/gatsby-plugin/test/clock.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import Clock from '../src/clock'
+
+const render = el => renderer.create(el).toJSON()
+
+test('renders time', () => {
+  const tree = render(<Clock />)
+  expect(tree).toMatch(/\d\d:\d\d/)
+})

packages/gatsby-plugin/test/components.js

@@ -0,0 +1,101 @@
+import React from 'react'
+import renderer from 'react-test-renderer'
+import {
+  Notes,
+  Head,
+  Header,
+  Footer,
+  Color,
+  Invert,
+  Steps,
+  Image,
+  Horizontal,
+  Split,
+  SplitRight,
+  FullScreenCode,
+} from '../src/components'
+
+const render = el => renderer.create(el).toJSON()
+
+test('Color renders', () => {
+  const json = render(
+    <Color bg='tomato' />
+  )
+  expect(json).toMatchSnapshot()
+})
+
+test('Invert renders', () => {
+  const json = render(
+    <Invert />
+  )
+  expect(json).toMatchSnapshot()
+})
+
+test('Steps renders', () => {
+  const json = render(
+    <Steps>
+      <div>One</div>
+      <div>Two</div>
+    </Steps>
+  )
+  expect(json).toMatchSnapshot()
+})
+
+test('Steps renders with list', () => {
+  const json = render(
+    <Steps>
+      <ul originalType='ul'>
+        <li>One</li>
+        <li>Two</li>
+      </ul>
+    </Steps>
+  )
+  expect(json).toMatchSnapshot()
+})
+
+test('Image renders', () => {
+  const json = render(
+    <Image src='kittens.png' />
+  )
+  expect(json).toMatchSnapshot()
+})
+
+test('Horizontal renders', () => {
+  const json = render(
+    <Horizontal>
+      <div>A</div>
+      <div>B</div>
+    </Horizontal>
+  )
+  expect(json).toMatchSnapshot()
+})
+
+test('Split renders', () => {
+  const json = render(
+    <Split>
+      <div>A</div>
+      <div>B</div>
+    </Split>
+  )
+  expect(json).toMatchSnapshot()
+})
+
+test('SplitRight renders', () => {
+  const json = render(
+    <SplitRight>
+      <div>A</div>
+      <div>B</div>
+    </SplitRight>
+  )
+  expect(json).toMatchSnapshot()
+})
+
+test('FullScreenCode renders', () => {
+  const json = render(
+    <FullScreenCode>
+      Hi
+    </FullScreenCode>
+  )
+  expect(json).toMatchSnapshot()
+})
+

packages/gatsby-plugin/test/deck.js

@@ -5,8 +5,267 @@ import {
   cleanup
 } from '@testing-library/react'
 import Deck from '../src/deck'
+import {
+  Steps,
+  Header,
+  Footer,
+} from '../src'
 
 afterEach(cleanup)
 
+let __key = 0
+const Comp = ({
+  originalType,
+  mdxType,
+  ...props
+}) => <div {...props} />
+
+const x = (tag, props, children) =>
+  React.createElement(Comp, {
+    key: __key++,
+    originalType: tag,
+    mdxType: tag,
+    ...props
+  }, children)
+
+const mdx = [
+  x('div', null, 'One'),
+  x('hr', null),
+  x('div', null, 'Two'),
+]
+
+const deckProps = {
+  children: mdx,
+  location: {
+    hash: '',
+    pathname: '/',
+  },
+  navigate: jest.fn()
+}
+
 test('renders', () => {
+  const tree = render(
+    <Deck {...deckProps} />
+  )
+  const text = tree.getByText('One')
+  expect(text).toBeTruthy()
+})
+
+test('advances one slide with right arrow key', () => {
+  const tree =render (
+    <Deck {...deckProps} />
+  )
+  fireEvent.keyDown(document.body, {
+    keyCode: 39,
+  })
+  const text = tree.getByText('Two')
+  expect(text).toBeTruthy()
+})
+
+test('advances one slide with down arrow key', () => {
+  const tree =render (
+    <Deck {...deckProps} />
+  )
+  fireEvent.keyDown(document.body, {
+    keyCode: 40,
+  })
+  const text = tree.getByText('Two')
+  expect(text).toBeTruthy()
+})
+
+test('advances one slide with spacebar key', () => {
+  const tree =render (
+    <Deck {...deckProps} />
+  )
+  fireEvent.keyDown(document.body, {
+    keyCode: 32,
+  })
+  const text = tree.getByText('Two')
+  expect(text).toBeTruthy()
+})
+
+test('advances one slide with page down key', () => {
+  const tree =render (
+    <Deck {...deckProps} />
+  )
+  fireEvent.keyDown(document.body, {
+    keyCode: 34,
+  })
+  const text = tree.getByText('Two')
+  expect(text).toBeTruthy()
+})
+
+test('goes back one slide with left arrow key', () => {
+  const tree =render (
+    <Deck
+      {...deckProps}
+      location={{
+        hash: '#2',
+      }}
+    />
+  )
+  fireEvent.keyDown(document.body, {
+    keyCode: 37,
+  })
+  const text = tree.getByText('One')
+  expect(text).toBeTruthy()
+})
+
+test('goes back one slide with up arrow key', () => {
+  const tree =render (
+    <Deck
+      {...deckProps}
+      location={{
+        hash: '#2',
+      }}
+    />
+  )
+  fireEvent.keyDown(document.body, {
+    keyCode: 38,
+  })
+  const text = tree.getByText('One')
+  expect(text).toBeTruthy()
+})
+
+test('goes back one slide with page up key', () => {
+  const tree =render (
+    <Deck
+      {...deckProps}
+      location={{
+        hash: '#2',
+      }}
+    />
+  )
+  fireEvent.keyDown(document.body, {
+    keyCode: 33,
+  })
+  const text = tree.getByText('One')
+  expect(text).toBeTruthy()
+})
+
+test('goes back one slide with shift + space bar', () => {
+  const tree =render (
+    <Deck
+      {...deckProps}
+      location={{
+        hash: '#2',
+      }}
+    />
+  )
+  fireEvent.keyDown(document.body, {
+    shiftKey: true,
+    keyCode: 32,
+  })
+  const text = tree.getByText('One')
+  expect(text).toBeTruthy()
+})
+
+test('ignores meta keys', () => {
+  const tree =render (
+    <Deck {...deckProps} />
+  )
+  fireEvent.keyDown(document.body, {
+    metaKey: true,
+    keyCode: 39,
+  })
+  const text = tree.getByText('One')
+  expect(text).toBeTruthy()
+})
+
+test('ignores ctrl keys', () => {
+  const tree =render (
+    <Deck {...deckProps} />
+  )
+  fireEvent.keyDown(document.body, {
+    ctrlKey: true,
+    keyCode: 39,
+  })
+  const text = tree.getByText('One')
+  expect(text).toBeTruthy()
+})
+
+test('initializes print mode', () => {
+  const tree =render (
+    <Deck
+      {...deckProps}
+      location={{
+        hash: '',
+        pathname: '/print'
+      }}
+    />
+  )
+  const one = tree.getByText('One')
+  const two = tree.getByText('Two')
+  expect(one).toBeTruthy()
+  expect(two).toBeTruthy()
+})
+
+describe('steps', () => {
+  const children = [
+    x('div', null,
+      <Steps>
+        <div>A</div>
+        <div>B</div>
+        <div>C</div>
+      </Steps>
+    ),
+    x('hr', null),
+    x('div', null, 'Two'),
+  ]
+
+  test('increments step', () => {
+    const tree =render (
+      <Deck
+        {...deckProps}
+        children={children}
+      />
+    )
+    fireEvent.keyDown(document.body, {
+      keyCode: 39,
+    })
+    const a = tree.getByText('A')
+    const b = tree.getByText('B')
+    expect(a.style.visibility).toBe('visible')
+    expect(b.style.visibility).toBe('hidden')
+  })
+
+  test('decrements step', () => {
+    const tree =render (
+      <Deck
+        {...deckProps}
+        children={children}
+      />
+    )
+    fireEvent.keyDown(document.body, { keyCode: 39 })
+    fireEvent.keyDown(document.body, { keyCode: 39 })
+    fireEvent.keyDown(document.body, { keyCode: 37 })
+    const a = tree.getByText('A')
+    const b = tree.getByText('B')
+    expect(a.style.visibility).toBe('visible')
+    expect(b.style.visibility).toBe('hidden')
+  })
+})
+
+test('renders with Header and Footer', () => {
+  const children = [
+    x(Header, null, 'Header'),
+    x(Footer, null, 'Footer'),
+    x('div', null, 'Beep'),
+    x('hr', null),
+    x('div', null, 'Two'),
+  ]
+  const tree =render (
+    <Deck
+      {...deckProps}
+      children={children}
+    />
+  )
+  const header = tree.getByText('Header')
+  const footer = tree.getByText('Footer')
+  expect(header).toBeTruthy()
+  expect(footer).toBeTruthy()
+})
+
+test('option + p toggles presenter mode', () => {
+  let context
 })