mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-09-20 11:27:14 +03:00
Clean up tests
This commit is contained in:
Brent Jackson
parent
d0115b826b
commit
c9be00149a
10
babel.config.js
Normal file
10
babel.config.js
Normal file
@ -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),
|
||||
}
|
||||
@ -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 = [
|
||||
{
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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(<Image />).toJSON()
|
||||
expect(json).toMatchSnapshot()
|
||||
})
|
||||
|
||||
test('renders with image', () => {
|
||||
const json = render(<Image src="kitten.png" />).toJSON()
|
||||
expect(json).toHaveStyleRule('background-image', 'url(kitten.png)')
|
||||
})
|
||||
|
||||
test('renders with custom css', () => {
|
||||
const json = render(<Image css={{ backgroundColor: 'tomato' }} />).toJSON()
|
||||
expect(json).toHaveStyleRule('background-color', 'tomato')
|
||||
})
|
||||
})
|
||||
@ -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;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
height="100vh"
|
||||
width="100vw"
|
||||
/>
|
||||
`;
|
||||
@ -1,186 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders a 1`] = `
|
||||
.c0 {
|
||||
color: link;
|
||||
}
|
||||
|
||||
<a
|
||||
className="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;
|
||||
}
|
||||
|
||||
<blockquote
|
||||
className="c0"
|
||||
color="quote"
|
||||
fontSize={2}
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`renders code 1`] = `
|
||||
.c0 {
|
||||
text-align: left;
|
||||
white-space: pre-wrap;
|
||||
font-size: 14px;
|
||||
margin: 0px;
|
||||
padding: 8px;
|
||||
color: pre;
|
||||
background-color: preBackground;
|
||||
}
|
||||
|
||||
<pre
|
||||
className="c0"
|
||||
color="pre"
|
||||
fontSize={1}
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`renders h1 1`] = `
|
||||
.c0 {
|
||||
line-height: 1.25;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
<h1
|
||||
className="-h1 c0"
|
||||
fontSize={4}
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`renders h2 1`] = `
|
||||
.c0 {
|
||||
line-height: 1.25;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
<h2
|
||||
className="-h2 c0"
|
||||
fontSize={3}
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`renders h3 1`] = `
|
||||
.c0 {
|
||||
line-height: 1.25;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
<h3
|
||||
className="-h3 c0"
|
||||
fontSize={2}
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`renders h4 1`] = `
|
||||
<h4
|
||||
className=""
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`renders h5 1`] = `
|
||||
<h5
|
||||
className=""
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`renders h6 1`] = `
|
||||
<h6
|
||||
className=""
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`renders inlineCode 1`] = `
|
||||
.c0 {
|
||||
color: code;
|
||||
background-color: codeBackground;
|
||||
}
|
||||
|
||||
<code
|
||||
className="c0"
|
||||
color="code"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`renders li 1`] = `
|
||||
<li
|
||||
className=""
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`renders ol 1`] = `
|
||||
.c0 {
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
<ol
|
||||
className="c0"
|
||||
fontSize={2}
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`renders p 1`] = `
|
||||
.c0 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
<p
|
||||
className="c0"
|
||||
fontSize={2}
|
||||
/>
|
||||
`;
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<table
|
||||
className="c1"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ul 1`] = `
|
||||
.c0 {
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
<ul
|
||||
className="c0"
|
||||
fontSize={2}
|
||||
/>
|
||||
`;
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
Hi
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<button
|
||||
className="c1"
|
||||
color="text"
|
||||
onClick={[Function]}
|
||||
title="go to: 0"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<button
|
||||
className="c1"
|
||||
color="text"
|
||||
onClick={[Function]}
|
||||
title="go to: 0"
|
||||
/>
|
||||
<button
|
||||
className="c1"
|
||||
color="text"
|
||||
onClick={[Function]}
|
||||
title="go to: 1"
|
||||
/>
|
||||
<button
|
||||
className="c1"
|
||||
color="text"
|
||||
onClick={[Function]}
|
||||
title="go to: 2"
|
||||
/>
|
||||
<button
|
||||
className="c1"
|
||||
color="text"
|
||||
onClick={[Function]}
|
||||
title="go to: 3"
|
||||
/>
|
||||
<button
|
||||
className="c2"
|
||||
color="text"
|
||||
onClick={[Function]}
|
||||
title="go to: 4"
|
||||
/>
|
||||
<button
|
||||
className="c2"
|
||||
color="text"
|
||||
onClick={[Function]}
|
||||
title="go to: 5"
|
||||
/>
|
||||
<button
|
||||
className="c2"
|
||||
color="text"
|
||||
onClick={[Function]}
|
||||
title="go to: 6"
|
||||
/>
|
||||
<button
|
||||
className="c2"
|
||||
color="text"
|
||||
onClick={[Function]}
|
||||
title="go to: 7"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components Root renders 1`] = `
|
||||
.c0 {
|
||||
color: text;
|
||||
background-color: background;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.c0 {
|
||||
font-size: 24px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
color="text"
|
||||
>
|
||||
Hi
|
||||
</div>
|
||||
`;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
Hi
|
||||
</div>
|
||||
`;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
onMouseDown={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c0"
|
||||
color="text"
|
||||
height="100vh"
|
||||
mode="NORMAL"
|
||||
step={0}
|
||||
width="100vw"
|
||||
role="group"
|
||||
style={
|
||||
Object {
|
||||
"outline": "none",
|
||||
}
|
||||
}
|
||||
tabIndex="-1"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
/>
|
||||
role="group"
|
||||
style={
|
||||
Object {
|
||||
"outline": "none",
|
||||
}
|
||||
}
|
||||
tabIndex="-1"
|
||||
>
|
||||
<h1>
|
||||
hi
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
/>
|
||||
</div>,
|
||||
.c0 {
|
||||
cursor: pointer;
|
||||
width: 64px;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
onClick={[Function]}
|
||||
role="button"
|
||||
title="Previous Slide"
|
||||
/>,
|
||||
.c0 {
|
||||
cursor: pointer;
|
||||
width: 64px;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
onClick={[Function]}
|
||||
role="button"
|
||||
title="Next Slide"
|
||||
/>,
|
||||
]
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -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, <ThemeProvider theme={{}}><Component /></ThemeProvider> ]
|
||||
})
|
||||
)('renders %s', (name, el) => {
|
||||
const json = render(el).toJSON()
|
||||
expect(json).toMatchSnapshot()
|
||||
})
|
||||
167
test/index.js
167
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(<Carousel index={1}>Hi</Carousel>)
|
||||
expect(json).toMatchSnapshot()
|
||||
})
|
||||
describe('MDXDeck', () => {
|
||||
test('renders', () => {
|
||||
const json = renderJSON(<MDXDeck slides={[() => <h1>hi</h1>]} />)
|
||||
expect(json).toMatchSnapshot(``)
|
||||
})
|
||||
|
||||
describe('Slide', () => {
|
||||
test('renders', () => {
|
||||
const json = renderJSON(<Slide index={1}>Hi</Slide>)
|
||||
expect(json).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Dots', () => {
|
||||
test('renders', () => {
|
||||
const json = renderJSON(<Dots index={0} length={1} />)
|
||||
expect(json).toMatchSnapshot()
|
||||
})
|
||||
|
||||
test('renders with index', () => {
|
||||
const json = renderJSON(<Dots index={3} length={8} />)
|
||||
expect(json).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
||||
describe('Root', () => {
|
||||
test('renders', () => {
|
||||
const json = renderJSON(<Root>Hi</Root>)
|
||||
expect(json).toMatchSnapshot()
|
||||
})
|
||||
|
||||
test('renders with font', () => {
|
||||
const json = renderJSON(
|
||||
<Root
|
||||
theme={{
|
||||
font: 'Roboto'
|
||||
}}
|
||||
/>
|
||||
)
|
||||
expect(json).toHaveStyleRule('font-family', 'Roboto')
|
||||
})
|
||||
|
||||
test('renders with colors', () => {
|
||||
const json = renderJSON(
|
||||
<Root
|
||||
theme={{
|
||||
colors: {
|
||||
text: 'tomato',
|
||||
background: 'black'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
)
|
||||
expect(json).toHaveStyleRule('color', 'tomato')
|
||||
expect(json).toHaveStyleRule('background-color', 'black')
|
||||
})
|
||||
})
|
||||
|
||||
describe('GoogleFonts', () => {
|
||||
test('renders with link tag', () => {
|
||||
const json = renderJSON(
|
||||
<GoogleFonts
|
||||
theme={{
|
||||
font: '"Roboto Mono"'
|
||||
}}
|
||||
/>
|
||||
)
|
||||
expect(json.type).toBe('link')
|
||||
})
|
||||
|
||||
test('renders with two link tags', () => {
|
||||
const json = renderJSON(
|
||||
<GoogleFonts
|
||||
theme={{
|
||||
font: '"Roboto"',
|
||||
monospace: '"Roboto Mono"'
|
||||
}}
|
||||
/>
|
||||
)
|
||||
expect(json.length).toBe(2)
|
||||
})
|
||||
})
|
||||
|
||||
describe('SlideDeck', () => {
|
||||
test('renders', () => {
|
||||
const json = renderJSON(<SlideDeck slides={[]} />)
|
||||
expect(json).toMatchSnapshot(``)
|
||||
})
|
||||
|
||||
test('renders with slides', () => {
|
||||
const Hello = () => <h1>Hello</h1>
|
||||
const root = render(<SlideDeck slides={[Hello]} />).root
|
||||
const hello = root.findByType(Hello)
|
||||
expect(hello)
|
||||
})
|
||||
|
||||
test('initializes state from window.location.hash', () => {
|
||||
window.history.pushState(null, null, '/#2')
|
||||
const root = renderIntoDocument(<SlideDeck />)
|
||||
expect(root.state.index).toBe(2)
|
||||
})
|
||||
|
||||
test('handles keydown events', () => {
|
||||
window.history.pushState(null, null, '/')
|
||||
const root = renderIntoDocument(
|
||||
<SlideDeck slides={[() => 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(
|
||||
<SlideDeck slides={[() => 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(
|
||||
<SlideDeck ignoreKeyEvents={true} slides={[() => 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(
|
||||
<SlideDeck slides={[() => false, () => false]} />
|
||||
)
|
||||
expect(root.state.index).toBe(0)
|
||||
window.location.hash = '#1'
|
||||
expect(root.state.index).toBe(1)
|
||||
})
|
||||
})
|
||||
test.todo('handles keydown events')
|
||||
})
|
||||
|
||||
|
||||
129
test/updaters.js
129
test/updaters.js
@ -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)
|
||||
})
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user