From c9be00149a80ce463495cf52f35b849672c97df2 Mon Sep 17 00:00:00 2001 From: Brent Jackson Date: Mon, 18 Feb 2019 18:39:09 -0500 Subject: [PATCH] Clean up tests --- babel.config.js | 10 + lib/config.js | 12 +- package.json | 1 + src/index.js | 2 +- test/Image.js | 21 -- test/__snapshots__/Image.js.snap | 18 -- test/__snapshots__/components.js.snap | 186 ----------- test/__snapshots__/index.js.snap | 450 +++----------------------- test/components.js | 22 -- test/index.js | 167 +--------- test/updaters.js | 129 -------- 11 files changed, 58 insertions(+), 960 deletions(-) create mode 100644 babel.config.js delete mode 100644 test/Image.js delete mode 100644 test/__snapshots__/Image.js.snap delete mode 100644 test/__snapshots__/components.js.snap delete mode 100644 test/components.js delete mode 100644 test/updaters.js diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..72090ee --- /dev/null +++ b/babel.config.js @@ -0,0 +1,10 @@ +module.exports = { + presets: ['@babel/preset-env', '@babel/preset-react'].map(require.resolve), + plugins: [ + '@babel/plugin-proposal-class-properties', + '@babel/plugin-proposal-export-default-from', + '@babel/plugin-proposal-export-namespace-from', + '@babel/plugin-syntax-dynamic-import', + 'babel-plugin-styled-components', + ].map(require.resolve), +} diff --git a/lib/config.js b/lib/config.js index 51270ae..e8731f8 100644 --- a/lib/config.js +++ b/lib/config.js @@ -10,17 +10,7 @@ const remark = { unwrapImages: require('remark-unwrap-images'), } const HTMLPlugin = require('./html-plugin') - -const babel = { - presets: ['@babel/preset-env', '@babel/preset-react'].map(require.resolve), - plugins: [ - '@babel/plugin-proposal-class-properties', - '@babel/plugin-proposal-export-default-from', - '@babel/plugin-proposal-export-namespace-from', - '@babel/plugin-syntax-dynamic-import', - 'babel-plugin-styled-components', - ].map(require.resolve), -} +const babel = require('../babel.config') const rules = [ { diff --git a/package.json b/package.json index 25f3b5a..30adce1 100644 --- a/package.json +++ b/package.json @@ -64,6 +64,7 @@ }, "devDependencies": { "@rebass/grid": "^6.0.0-7", + "babel-jest": "^24.1.0", "husky": "^1.3.1", "jest": "^24.1.0", "jest-styled-components": "^6.3.1", diff --git a/src/index.js b/src/index.js index 81056d8..c22ab9c 100644 --- a/src/index.js +++ b/src/index.js @@ -370,7 +370,7 @@ export class MDXDeck extends React.Component { const { headTags, theme, components } = this.props const { slides, mode } = this.state const index = this.getIndex() - const { meta = {} } = slides[index] + const meta = this.getMeta(index) const context = { ...this.state, register: this.register, diff --git a/test/Image.js b/test/Image.js deleted file mode 100644 index 5a8b967..0000000 --- a/test/Image.js +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' -import { create as render } from 'react-test-renderer' -import 'jest-styled-components' -import Image from '../src/Image' - -describe('Image', () => { - test('renders', () => { - const json = render().toJSON() - expect(json).toMatchSnapshot() - }) - - test('renders with image', () => { - const json = render().toJSON() - expect(json).toHaveStyleRule('background-image', 'url(kitten.png)') - }) - - test('renders with custom css', () => { - const json = render().toJSON() - expect(json).toHaveStyleRule('background-color', 'tomato') - }) -}) diff --git a/test/__snapshots__/Image.js.snap b/test/__snapshots__/Image.js.snap deleted file mode 100644 index 59d25bb..0000000 --- a/test/__snapshots__/Image.js.snap +++ /dev/null @@ -1,18 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Image renders 1`] = ` -.c0 { - background-position: center; - background-repeat: no-repeat; - background-size: cover; - background-image: url(undefined); - width: 100vw; - height: 100vh; -} - -
-`; diff --git a/test/__snapshots__/components.js.snap b/test/__snapshots__/components.js.snap deleted file mode 100644 index 2a01369..0000000 --- a/test/__snapshots__/components.js.snap +++ /dev/null @@ -1,186 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`renders a 1`] = ` -.c0 { - color: link; -} - - -`; - -exports[`renders blockquote 1`] = ` -.c0 { - text-align: left; - font-weight: bold; - font-size: 16px; - margin-left: 0px; - margin-right: 0px; - padding-left: 0px; - padding-right: 0px; - color: quote; -} - -
-`; - -exports[`renders code 1`] = ` -.c0 { - text-align: left; - white-space: pre-wrap; - font-size: 14px; - margin: 0px; - padding: 8px; - color: pre; - background-color: preBackground; -} - -
-`;
-
-exports[`renders h1 1`] = `
-.c0 {
-  line-height: 1.25;
-  font-size: 24px;
-}
-
-

-`;
-
-exports[`renders h2 1`] = `
-.c0 {
-  line-height: 1.25;
-  font-size: 20px;
-}
-
-

-`;
-
-exports[`renders h3 1`] = `
-.c0 {
-  line-height: 1.25;
-  font-size: 16px;
-}
-
-

-`;
-
-exports[`renders h4 1`] = `
-

-`;
-
-exports[`renders h5 1`] = `
-

-`;
-
-exports[`renders h6 1`] = `
-

-`;
-
-exports[`renders inlineCode 1`] = `
-.c0 {
-  color: code;
-  background-color: codeBackground;
-}
-
-
-`;
-
-exports[`renders li 1`] = `
-
  • 
-`;
-
-exports[`renders ol 1`] = `
-.c0 {
-  text-align: left;
-  font-size: 16px;
-}
-
-
      
-`;
-
-exports[`renders p 1`] = `
-.c0 {
-  font-size: 16px;
-}
-
-
      
-`;
-
-exports[`renders table 1`] = `
-.c0 {
-  overflow-x: auto;
-}
-
-.c1 {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-}
-
-.c1 td,
-.c1 th {
-  text-align: left;
-  padding-right: .5em;
-  padding-top: .25em;
-  padding-bottom: .25em;
-  border-bottom: 1px solid;
-  vertical-align: top;
-}
-
-
      
-  
-
-`;
-
-exports[`renders ul 1`] = `
-.c0 {
-  text-align: left;
-  font-size: 16px;
-}
-
-
        
-`;
diff --git a/test/__snapshots__/index.js.snap b/test/__snapshots__/index.js.snap
index 84636be..9a2fe44 100644
--- a/test/__snapshots__/index.js.snap
+++ b/test/__snapshots__/index.js.snap
@@ -1,254 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`components Carousel renders 1`] = `
-.c0 {
-  overflow-x: hidden;
-  width: 100%;
-  height: 100%;
-}
-
+exports[`MDXDeck renders 1`] = `
 .c1 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  width: 100%;
-  height: 100%;
-  -webkit-transition-property: -webkit-transform;
-  -webkit-transition-property: transform;
-  transition-property: transform;
-  -webkit-transition-timing-function: ease-out;
-  transition-timing-function: ease-out;
-  -webkit-transition-duration: .3s;
-  transition-duration: .3s;
-  -webkit-transform: translate3d(-100%,0,0);
-  -ms-transform: translate3d(-100%,0,0);
-  transform: translate3d(-100%,0,0);
-}
-
-@media print {
-  .c0 {
-    height: auto;
-    overflow-x: visible;
-  }
-}
-
-@media print {
-  .c1 {
-    height: auto;
-    display: block;
-  }
-}
-
-
        
-  
        
-    Hi
-  
        
-
        
-`;
-
-exports[`components Dots renders 1`] = `
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c1 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 4px solid transparent;
-  background-clip: padding-box;
-  border-radius: 9999px;
-  width: 8px;
-  height: 8px;
-  color: inherit;
-  opacity: 0.5;
-  margin: 0px;
-  padding: 4px;
-  color: text;
-  background-color: text;
-}
-
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 1px;
-}
-
-@media print {
-  .c0 {
-    display: none;
-  }
-}
-
-
        
-  
        
-`;
-
-exports[`components Dots renders with index 1`] = `
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-}
-
-.c1 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 4px solid transparent;
-  background-clip: padding-box;
-  border-radius: 9999px;
-  width: 8px;
-  height: 8px;
-  color: inherit;
-  opacity: 0.5;
-  margin: 0px;
-  padding: 4px;
-  color: text;
-  background-color: text;
-}
-
-.c1:focus {
-  outline: none;
-  box-shadow: 0 0 0 1px;
-}
-
-.c2 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border: 4px solid transparent;
-  background-clip: padding-box;
-  border-radius: 9999px;
-  width: 8px;
-  height: 8px;
-  color: inherit;
-  opacity: 0.125;
-  margin: 0px;
-  padding: 4px;
-  color: text;
-  background-color: text;
-}
-
-.c2:focus {
-  outline: none;
-  box-shadow: 0 0 0 1px;
-}
-
-@media print {
-  .c0 {
-    display: none;
-  }
-}
-
-
        
-  
        
-`;
-
-exports[`components Root renders 1`] = `
-.c0 {
-  color: text;
-  background-color: background;
-}
-
-@media print {
-  .c0 {
-    font-size: 24px;
-    height: auto;
-  }
-}
-
-
        
-  Hi
-
        
-`;
-
-exports[`components Slide renders 1`] = `
-.c0 {
-  -webkit-flex: none;
-  -ms-flex: none;
-  flex: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -257,82 +19,14 @@ exports[`components Slide renders 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  padding-left: 32px;
-  padding-right: 32px;
-}
-
-@media print {
-  .c0 {
-    width: 100vw;
-    height: 100vh;
-    page-break-after: always;
-    page-break-inside: avoid;
-    -webkit-print-color-adjust: exact;
-  }
-}
-
-@media screen and (min-width:40em) {
-  .c0 {
-    padding-left: 64px;
-    padding-right: 64px;
-  }
-}
-
-@media screen and (min-width:52em) {
-  .c0 {
-    padding-left: 128px;
-    padding-right: 128px;
-  }
-}
-
-
        
-  Hi
-
        
-`;
-
-exports[`components SlideDeck renders 1`] = `
-Array [
-  .c1 {
-  overflow-x: hidden;
-  width: 100%;
-  height: 100%;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-  height: 100%;
-  -webkit-transition-property: -webkit-transform;
-  -webkit-transition-property: transform;
-  transition-property: transform;
-  -webkit-transition-timing-function: ease-out;
-  transition-timing-function: ease-out;
-  -webkit-transition-duration: .3s;
-  transition-duration: .3s;
-  -webkit-transform: translate3d(0%,0,0);
-  -ms-transform: translate3d(0%,0,0);
-  transform: translate3d(0%,0,0);
 }
 
 .c0 {
   font-family: system-ui,sans-serif;
-  font-size: 16px;
-  text-align: center;
-  width: 100vw;
-  height: 100vh;
   color: #000;
   background-color: white;
+  font-size: 1.5em;
+  text-align: center;
 }
 
 .c0 li > ul,
@@ -345,121 +39,53 @@ Array [
   margin: 0;
 }
 
-@media print {
-  .c1 {
-    height: auto;
-    overflow-x: visible;
-  }
+.c0 ul {
+  text-align: left;
 }
 
-@media print {
-  .c2 {
-    height: auto;
-    display: block;
-  }
-}
-
-@media print {
-  .c0 {
-    font-size: 24px;
-    height: auto;
-  }
+.c0 ol {
+  text-align: left;
 }
 
 @media screen and (min-width:64em) {
   .c0 {
-    font-size: 32px;
+    font-size: 3em;
   }
 }
 
 
        
+  
        
     
        
       
        
         
        
+          role="group"
+          style={
+            Object {
+              "outline": "none",
+            }
+          }
+          tabIndex="-1"
+        >
+          
        
+            hi
+          
        
+        
        
       
        
     
        
-  
        ,
-  .c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  margin-bottom: 8px;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.c0 {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-@media print {
-  .c1 {
-    display: none;
-  }
-}
-
-
        
-    
        
-  
        ,
-  .c0 {
-  cursor: pointer;
-  width: 64px;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-}
-
-
        ,
-  .c0 {
-  cursor: pointer;
-  width: 64px;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-}
-
-
        ,
-]
+  
        
+
        
 `;
diff --git a/test/components.js b/test/components.js
deleted file mode 100644
index d7d205a..0000000
--- a/test/components.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react'
-import { create as render } from 'react-test-renderer'
-import 'jest-styled-components'
-import { ThemeProvider } from 'styled-components'
-import components from '../src/components'
-
-const blacklist = {
-  pre: true,
-  img: true
-}
-
-test.each(
-  Object.keys(components)
-    .filter(key => !blacklist[key])
-    .map(key => {
-      const Component = components[key]
-      return [ key,  ]
-    })
-)('renders %s', (name, el) => {
-  const json = render(el).toJSON()
-  expect(json).toMatchSnapshot()
-})
diff --git a/test/index.js b/test/index.js
index 13a8c59..0aefd09 100644
--- a/test/index.js
+++ b/test/index.js
@@ -1,168 +1,15 @@
+import 'jest-styled-components'
 import React from 'react'
 import { create as render } from 'react-test-renderer'
-import { renderIntoDocument, Simulate } from 'react-dom/test-utils'
-import 'jest-styled-components'
-import Carousel from '../src/Carousel'
-import Slide from '../src/Slide'
-import Dots from '../src/Dots'
-import Root from '../src/Root'
-import GoogleFonts from '../src/GoogleFonts'
-import { SlideDeck } from '../src'
+import { MDXDeck } from '../src'
 
 const renderJSON = el => render(el).toJSON()
 
-describe('components', () => {
-  describe('Carousel', () => {
-    test('renders', () => {
-      const json = renderJSON(Hi)
-      expect(json).toMatchSnapshot()
-    })
+describe('MDXDeck', () => {
+  test('renders', () => {
+    const json = renderJSON( 
        hi
        ]} />)
+    expect(json).toMatchSnapshot(``)
   })
 
-  describe('Slide', () => {
-    test('renders', () => {
-      const json = renderJSON(Hi)
-      expect(json).toMatchSnapshot()
-    })
-  })
-
-  describe('Dots', () => {
-    test('renders', () => {
-      const json = renderJSON()
-      expect(json).toMatchSnapshot()
-    })
-
-    test('renders with index', () => {
-      const json = renderJSON()
-      expect(json).toMatchSnapshot()
-    })
-  })
-
-  describe('Root', () => {
-    test('renders', () => {
-      const json = renderJSON(Hi)
-      expect(json).toMatchSnapshot()
-    })
-
-    test('renders with font', () => {
-      const json = renderJSON(
-        
-      )
-      expect(json).toHaveStyleRule('font-family', 'Roboto')
-    })
-
-    test('renders with colors', () => {
-      const json = renderJSON(
-        
-      )
-      expect(json).toHaveStyleRule('color', 'tomato')
-      expect(json).toHaveStyleRule('background-color', 'black')
-    })
-  })
-
-  describe('GoogleFonts', () => {
-    test('renders with link tag', () => {
-      const json = renderJSON(
-        
-      )
-      expect(json.type).toBe('link')
-    })
-
-    test('renders with two link tags', () => {
-      const json = renderJSON(
-        
-      )
-      expect(json.length).toBe(2)
-    })
-  })
-
-  describe('SlideDeck', () => {
-    test('renders', () => {
-      const json = renderJSON()
-      expect(json).toMatchSnapshot(``)
-    })
-
-    test('renders with slides', () => {
-      const Hello = () => 
        Hello
        
-      const root = render().root
-      const hello = root.findByType(Hello)
-      expect(hello)
-    })
-
-    test('initializes state from window.location.hash', () => {
-      window.history.pushState(null, null, '/#2')
-      const root = renderIntoDocument()
-      expect(root.state.index).toBe(2)
-    })
-
-    test('handles keydown events', () => {
-      window.history.pushState(null, null, '/')
-      const root = renderIntoDocument(
-         false, () => false]} />
-      )
-      const e = new KeyboardEvent('keydown', {
-        keyCode: 39
-      })
-      expect(root.state.index).toBe(0)
-      document.body.dispatchEvent(e)
-      expect(root.state.index).toBe(1)
-    })
-
-    test('handles left arrow keydown', () => {
-      window.history.pushState(null, null, '/#1')
-      const root = renderIntoDocument(
-         false, () => false]} />
-      )
-      const e = new KeyboardEvent('keydown', {
-        keyCode: 37
-      })
-      expect(root.state.index).toBe(1)
-      document.body.dispatchEvent(e)
-      expect(root.state.index).toBe(0)
-    })
-
-    test('ignoreKeyEvents does not fire handle events when set to true', () => {
-      window.history.pushState(null, null, '/#1')
-      const root = renderIntoDocument(
-         false, () => false]} />
-      )
-      const e = new KeyboardEvent('keydown', {
-        keyCode: 37
-      })
-      expect(root.state.index).toBe(1)
-      document.body.dispatchEvent(e)
-      expect(root.state.index).toBe(1)
-    })
-
-    test.skip('handles hashchange events', () => {
-      window.history.pushState(null, null, '/')
-      const root = renderIntoDocument(
-         false, () => false]} />
-      )
-      expect(root.state.index).toBe(0)
-      window.location.hash = '#1'
-      expect(root.state.index).toBe(1)
-    })
-  })
+  test.todo('handles keydown events')
 })
-
diff --git a/test/updaters.js b/test/updaters.js
deleted file mode 100644
index 516898b..0000000
--- a/test/updaters.js
+++ /dev/null
@@ -1,129 +0,0 @@
-import {
-  toggleMode,
-  inc,
-  dec,
-  previous,
-  next,
-  incrementIndex,
-  decrementIndex,
-  incrementStep,
-  decrementStep
-} from '../src/updaters'
-
-describe('updaters', () => {
-  test.skip('toggleMode', () => {})
-  test('next', () => {
-    const state = next({ index: 0, length: 8 })
-    expect(state.index).toBe(1)
-  })
-
-  test('next at last slide', () => {
-    const state = next({ index: 7, length: 8 })
-    expect(state).toBe(null)
-  })
-
-  test('previous', () => {
-    const state = previous({ index: 2, length: 8 })
-    expect(state.index).toBe(1)
-  })
-
-  test('previous at first slide', () => {
-    const state = previous({ index: 0, length: 8 })
-    expect(state).toBe(null)
-  })
-
-  describe('with steps', () => {
-    test('next at first step', () => {
-      const state = next({
-        index: 2,
-        step: 0,
-        length: 8,
-        metadata: {
-          2: {
-            steps: 4
-          }
-        }
-      })
-      expect(state.step).toBe(1)
-    })
-
-    test('next at last step', () => {
-      const state = next({
-        index: 2,
-        step: 4,
-        length: 8,
-        metadata: {
-          2: {
-            steps: 4
-          }
-        }
-      })
-      expect(state.index).toBe(3)
-      expect(state.step).toBe(0)
-    })
-
-    test('previous at first step', () => {
-      const state = previous({
-        index: 2,
-        step: 0,
-        length: 8,
-        metadata: {
-          2: {
-            steps: 4
-          }
-        }
-      })
-      expect(state.index).toBe(1)
-      expect(state.step).toBe(0)
-    })
-
-    test('previous at last step', () => {
-      const state = previous({
-        index: 2,
-        step: 3,
-        length: 8,
-        metadata: {
-          2: {
-            steps: 4
-          }
-        }
-      })
-      expect(state.step).toBe(2)
-    })
-
-    test('previous at first step with steps in previous slide', () => {
-      const state = previous({
-        index: 2,
-        step: 0,
-        length: 8,
-        metadata: {
-          1: {
-            steps: 3
-          },
-          2: {
-            steps: 4
-          }
-        }
-      })
-      expect(state.index).toBe(1)
-      expect(state.step).toBe(3)
-    })
-  })
-
-  describe('shims', () => {
-    test('inc', () => {
-      const state = inc({ index: 0, length: 8 })
-      expect(state.index).toBe(1)
-    })
-
-    test('dec', () => {
-      const state = dec({ index: 1, length: 8 })
-      expect(state.index).toBe(0)
-    })
-
-    test('dec 0', () => {
-      const state = dec({ index: 0, length: 8 })
-      expect(state).toBe(null)
-    })
-  })
-})