Merge pull request #102 from skellock/storyshots

Storyshots support

Author: skellock

.storybook/config.js

@@ -1,4 +1,4 @@
-import { configure } from '@storybook/react'
+const { configure } = require('@storybook/react')
 
 const req = require.context('../src', true, /story\.tsx?$/)
 

.storybook/webpack.config.js

@@ -10,7 +10,7 @@ module.exports = (config, env) => {
     exclude: /node_modules/,
     include: path.resolve(__dirname, '..', 'src'),
   })
-
+  
   myConfig.resolve.extensions.unshift('.tsx')
   myConfig.resolve.extensions.unshift('.ts')
 

README.md

@@ -39,7 +39,7 @@ You have to bring your own awesome.  But here's a picture* after `npm i` and `np
 * lean production bundles
 * integrated storybook support
 * unit tests with mocking
-* 100% code coverage with examples on how to keep it there
+* storybook snapshot testing
 * code linting & formatting
 
 ### Documentation & Samples  🖨

docs/stack.md

@@ -89,6 +89,8 @@ Start your app only when your gut says, "You'll fuck this up long before your st
 
 Provides a sandbox to work on your components with whatever props you can dream of wanting set to make sure your components are in tip top shape before and during use in your application. If you are writing a component you should be writing stories about it.
 
+Also the storyshots addon for working with `jest` is a great way to add snapshot testing for your React components by using your stories. (Like we needed another reason to use storybook!!)
+
 ## Animations
 
 > **react-transition-group**

package.json

@@ -79,6 +79,9 @@
     "react-transition-group": "^2.2.1"
   },
   "devDependencies": {
+    "@storybook/addon-actions": "^3.2.15",
+    "@storybook/addon-links": "^3.2.15",
+    "@storybook/addon-storyshots": "^3.2.15",
     "@storybook/react": "^3.2.15",
     "@types/electron-is-dev": "^0.3.0",
     "@types/electron-store": "^1.2.0",
@@ -99,6 +102,7 @@
     "lint-staged": "^5.0.0",
     "npm-run-all": "^4.1.2",
     "prettier": "^1.8.2",
+    "react-powerplug": "^0.1.2",
     "react-test-renderer": "^16.0.0",
     "ts-jest": "^21.2.1",
     "ts-loader": "^3.1.1",
@@ -113,19 +117,25 @@
     "transform": {
       ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
     },
+    "moduleNameMapper": {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/mock-file.ts",
+      "\\.(css|less)$": "<rootDir>/test/mock-style.ts"
+    },
     "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
     "moduleFileExtensions": [
       "ts",
       "tsx",
-      "js"
+      "js",
+      "json"
     ],
     "coveragePathIgnorePatterns": [
-      "/node_modules/",
-      "/test/",
-      "/out/",
-      "/build/",
-      "/dist/",
-      "/docs/"
+      "./node_modules",
+      "./out",
+      "./build",
+      "./dist",
+      "./test",
+      "./docs",
+      "\\.story.tsx$"
     ],
     "coverageThreshold": {
       "global": {

src/renderer/features/example-using-tabs/welcome-screen/sample-tabs.tsx

@@ -19,9 +19,9 @@ export interface SampleTabsProps {
   onChangeTab: (tab: SampleTabType) => void
 }
 
-const KEY_1 = `${commandOrControlKey}+1`
-const KEY_2 = `${commandOrControlKey}+2`
-const KEY_3 = `${commandOrControlKey}+3`
+const KEY_1 = `${commandOrControlKey()}+1`
+const KEY_2 = `${commandOrControlKey()}+2`
+const KEY_3 = `${commandOrControlKey()}+3`
 
 // an extra layer just for the drag style due to electron bug
 const ROOT = css(styles.windowDrag)

src/renderer/platform/components/centered-content/centered-content.story.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import { StorybookStory as Story, StorybookGroup as Group } from '../storybook'
+import { storiesOf } from '@storybook/react'
+import { CenteredContent } from './index'
+
+storiesOf('CenteredContent', module).add('default', () => (
+  <Story>
+    <Group title='default'>
+      <CenteredContent>
+        <p>i am in the middle</p>
+        <p>i am also a really strange component and shouldn't exist.</p>
+      </CenteredContent>
+    </Group>
+  </Story>
+))

src/renderer/platform/components/enter-animation/enter-animation.story.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { StorybookStory as Story, StorybookGroup as Group } from '../storybook'
+
+import { storiesOf } from '@storybook/react'
+import { EnterAnimation } from './index'
+// import { Value } from 'react-powerplug'
+
+storiesOf('EnterAnimation', module).add('default', () => (
+  <Story>
+    <Group title='grow'>
+      <EnterAnimation animation='grow'>
+        <p>hi</p>
+      </EnterAnimation>
+    </Group>
+    <Group title='slide'>
+      <EnterAnimation animation='slide'>
+        <p>hi</p>
+      </EnterAnimation>
+    </Group>
+  </Story>
+))

src/renderer/platform/components/enter-animation/enter-animation.tsx

@@ -28,6 +28,7 @@ const FINISH = cssProps({ transform: `translate(0, 0) scale(1, 1)` })
 export class EnterAnimation extends React.Component<EnterAnimationProps, EnterAnimationState> {
   state: EnterAnimationState = {}
 
+  // istanbul ignore next
   componentDidMount() {
     setTimeout(() => this.setState({ mounted: true }), 1)
   }
@@ -55,6 +56,7 @@ export class EnterAnimation extends React.Component<EnterAnimationProps, EnterAn
 
     // style props
     const starting = css(cssProps({ transform, transition }))
+    // istanbul ignore next
     const finishing = css(mounted && FINISH)
 
     return (

src/renderer/platform/components/scrollable-content/scrollable-content.story.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { StorybookStory as Story, StorybookGroup as Group } from '../storybook'
+import { storiesOf } from '@storybook/react'
+import { ScrollableContent } from './index'
+
+storiesOf('ScrollableContent', module).add('default', () => (
+  <Story>
+    <Group title='default'>
+      <ScrollableContent style={{ height: 100 }}>
+        <p>hi</p>
+        <p>hi</p>
+        <p>hi</p>
+        <p>hi</p>
+        <p>hi</p>
+        <p>hi</p>
+        <p>hi</p>
+        <p>hi</p>
+        <p>hi</p>
+        <p>hi</p>
+        <p>hi</p>
+        <p>hi</p>
+      </ScrollableContent>
+    </Group>
+  </Story>
+))

src/renderer/platform/components/spin-animation/spin-animation-state.test.ts

@@ -10,8 +10,15 @@ test('next', () => {
 
 test('createSpinStates', () => {
   const states = createSpinStates({})
+  expect(typeof states.forward).toBe('function')
   expect(typeof states.back).toBe('function')
 
+  const forwardResults = states.forward({ value: { get: () => 1 } })
+  expect(forwardResults.current).toBe(1)
+
+  const backResults = states.back({ value: { get: () => 1 } })
+  expect(backResults.current).toBe(1)
+
   const value: any = () => {}
   value.get = () => 1
   value.previousState = 'back'

src/renderer/platform/components/tab/tab.story.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { StorybookStory as Story, StorybookGroup as Group } from '../storybook'
+
+import { storiesOf } from '@storybook/react'
+import { Tab } from './index'
+import { Value } from 'react-powerplug'
+
+storiesOf('Tab', module).add('Tab', () => (
+  <Story>
+    <Group title='inactive'>
+      <Value initial='three'>
+        {({ value, setValue }) => (
+          <div style={{ flexDirection: 'row', display: 'flex' }}>
+            <Tab text='One' active={value === 'one'} onClick={() => setValue('one')} />
+            <Tab text='Two' active={value === 'two'} onClick={() => setValue('two')} />
+            <Tab text='Three' active={value === 'three'} onClick={() => setValue('three')} />
+            <Tab text='Four' active={value === 'four'} onClick={() => setValue('four')} />
+          </div>
+        )}
+      </Value>
+    </Group>
+  </Story>
+))

src/renderer/platform/components/text/text.story.tsx

@@ -6,13 +6,17 @@ import { storiesOf } from '@storybook/react'
 import { Text } from './index'
 
 storiesOf('Text', module)
-  .add('text styles', () =>
+  .add('text styles', () => (
     <Story>
       <Group title='regular text'>
         <Text>Hello World!</Text>
         <Text>$123.45</Text>
         <Text>The quick brown fox jumped over the slow lazy dog.</Text>
       </Group>
+      <Group title='with text property'>
+        <Text text='Passed in text property' />
+      </Group>
+
       <Group title='huge paragraph'>
         <Text>
           Wayfarers intelligentsia salvia sartorial keffiyeh locavore direct trade flexitarian
@@ -45,9 +49,9 @@ storiesOf('Text', module)
       <Group title='style={{ color: &quot;red&quot; }}'>
         <Text style={{ color: 'red' }}>Hello World!</Text>
       </Group>
-    </Story>,
-  )
-  .add('with nested children', () =>
+    </Story>
+  ))
+  .add('with nested children', () => (
     <Story>
       <Group title='with nested children'>
         <Text>
@@ -62,5 +66,5 @@ storiesOf('Text', module)
           </p>
         </Text>
       </Group>
-    </Story>,
-  )
+    </Story>
+  ))

src/renderer/platform/utils/keyboard/keyboard.test.ts

@@ -11,7 +11,6 @@ jest.mock('../../../../shared', () => {
 })
 
 import * as Mousetrap from 'mousetrap'
-// import * as platform from '../../../../shared/utils/platform/platform'
 
 test('changes tabs', () => {
   const fn = () => true
@@ -25,13 +24,13 @@ test('changes tabs', () => {
 
 test('mac is command key', () => {
   const { commandOrControlKey } = require('./keyboard')
-  expect(commandOrControlKey).toBe('command')
+  expect(commandOrControlKey()).toBe('command')
 })
 
 test('non-mac is control', () => {
-  jest.resetModules()
+  // jest.resetModules()
   const shared = require('../../../../shared')
   shared.isMac = jest.fn().mockReturnValue(false)
   const { commandOrControlKey } = require('./keyboard')
-  expect(commandOrControlKey).toBe('ctrl')
+  expect(commandOrControlKey()).toBe('ctrl')
 })

src/renderer/platform/utils/keyboard/keyboard.ts

@@ -11,11 +11,11 @@ export type KeyboardAction = 'keypress' | 'keydown' | 'keyup'
 //   Mousetrap.prototype.stopCallback = () => false
 // }
 
-export const commandOrControlKey = isMac() ? 'command' : 'ctrl'
+export const commandOrControlKey = () => (isMac() ? 'command' : 'ctrl')
 
 /**
  * Binds a keystroke to a function.
- * 
+ *
  * @param keys The keystroke.
  * @param callback The function to fire.
  * @param action Optional keyboard event to further constraint.
@@ -30,7 +30,7 @@ export function bindKey(
 
 /**
  * Removes a keybind.
- * 
+ *
  * @param keys The keystroke.
  * @param action Optional keyboard event to further constraint.
  */

src/shared/utils/platform/platform.ts

@@ -1,11 +1,11 @@
-export function isLinux() {
-  return process.platform === 'linux'
+export function isLinux(platform = process.platform) {
+  return platform === 'linux'
 }
 
-export function isWindows() {
-  return process.platform === 'win32'
+export function isWindows(platform = process.platform) {
+  return platform === 'win32'
 }
 
-export function isMac() {
-  return process.platform === 'darwin'
+export function isMac(platform = process.platform) {
+  return platform === 'darwin'
 }