From e1148b3f570dd9de10db8aeb6c0eaf8576363388 Mon Sep 17 00:00:00 2001 From: Jeff Date: Thu, 2 Jun 2016 15:04:13 -0600 Subject: [PATCH 1/3] re-indentation also added editor config and eslint --- .editorconfig | 13 ++++++++ .eslintrc | 43 +++++++++++++++++++++++++ package.json | 3 ++ src/Container.js | 74 ++++++++++++++++++++++--------------------- src/components.js | 57 +++++++++++++++++++++++++++------ src/namespaceStore.js | 38 +++++++++++----------- 6 files changed, 164 insertions(+), 64 deletions(-) create mode 100644 .editorconfig create mode 100644 .eslintrc diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..9055741 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +# This file is for unifying the coding style for different editors and IDEs. +# More information at http://EditorConfig.org + +# No .editorconfig files above the root directory +root = true + +[*] +indent_style = space +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true +indent_size = 2 diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..8ab3eaf --- /dev/null +++ b/.eslintrc @@ -0,0 +1,43 @@ +{ + "parserOptions": { + "ecmaVersion": 6, + "sourceType": "module", + "ecmaFeatures": { + "jsx": true, + "experimentalObjectRestSpread": true + } + }, + "env": { + "browser": true, + "jasmine": true, + "es6": true, + "node": true + }, + "rules": { + "react/jsx-uses-react": [1], + "camelcase": [0, {"properties": "always"}], + "indent": [2, 2], // 2 spaces indentation + "semi": [2, "always"], + "keyword-spacing": [2], + "space-before-function-paren": [2, "never"], + "space-before-blocks": [2, "always"], + "space-infix-ops": [2, {"int32Hint": false}], + "quotes": [1, "single", "avoid-escape"], + "max-len": [2, 100, 4], + "eqeqeq": [2, "allow-null"], + "strict": 0, + "no-nested-ternary": [2], + "no-underscore-dangle": 0, + "comma-style": [2], + "one-var": [2, "never"], + "brace-style": [2, "1tbs", { "allowSingleLine": true }], + "consistent-this": [0, "self"] + }, + "plugins": [ + "react" + ], + "globals": { + "jest": true, + "React": true + } +} diff --git a/package.json b/package.json index 988e722..4bd3603 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,8 @@ "babel-preset-react": "^6.5.0", "babel-preset-stage-2": "^6.5.0", "css-loader": "^0.23.1", + "eslint": "^2.11.1", + "eslint-plugin-react": "^5.1.1", "istanbul": "^1.0.0-alpha", "jsdom": "^9.1.0", "less": "^2.7.1", @@ -32,6 +34,7 @@ "deep-equal": "^1.0.1", "enzyme": "^2.3.0", "history": "^2.1.1", + "lodash": "^4.12.0", "myro": "^0.6.2", "react": "^15.0.2", "react-addons-test-utils": "^15.0.2", diff --git a/src/Container.js b/src/Container.js index 878c31d..62ab440 100644 --- a/src/Container.js +++ b/src/Container.js @@ -8,31 +8,31 @@ import style from './style.less' export default class Container extends Component { constructor(props) { - super(props) - this.state = { activeNamespace : null, routes: this.createRoutes() } - this.unlisten = null + super(props) + this.state = { activeNamespace : null, routes: this.createRoutes() } + this.unlisten = null } componentWillMount() { - const history = this.props.history? this.props.history : createHistory() - this.unlisten = history.listen((location) => { - this.setState({activeNamespace: location.hash.replace('#/', '')}) - }) + const history = this.props.history? this.props.history : createHistory() + this.unlisten = history.listen((location) => { + this.setState({activeNamespace: location.hash.replace('#/', '')}) + }) } componentWillUnmount() { - this.unlisten() + this.unlisten() } createRoutes() { - return myro({ - '#': { - name: 'index' - }, - '#/:namespace': { - name: 'namespace' - } - }) + return myro({ + '#': { + name: 'index' + }, + '#/:namespace': { + name: 'namespace' + } + }) } render() { @@ -40,29 +40,31 @@ export default class Container extends Component { const { routes, activeNamespace } = this.state const cards = namespaces[activeNamespace] const navCard = this.renderNavCard(routes, activeNamespace) - return
-

React Cards

- {cards - ?
- { [navCard, ...cards] } -
- :
- - {map(namespaces, (namespace, key) => ( - - - { key } - - - ))} - -
- } -
+ return ( +
+

React Cards

+ {cards + ?
+ { [navCard, ...cards] } +
+ :
+ + {map(namespaces, (namespace, key) => ( + + + { key } + + + ))} + +
+ } +
+ ) } renderNavCard(routes, ns) { return ( - +
home  /  diff --git a/src/components.js b/src/components.js index b3632d0..685a0d1 100644 --- a/src/components.js +++ b/src/components.js @@ -1,6 +1,10 @@ -import React from 'react' +import React ,{Component} from 'react' +import ReactDOM from 'react-dom' import showdown from 'showdown' import style from './style.less' +import Frame from 'react-frame-component' +import {iframeResizer} from 'iframe-resizer' +import iframeResizerContentWindow from 'raw!iframe-resizer/js/iframeResizer.contentWindow.min' const markdownToHtml = str => { const conv = new showdown.Converter() @@ -20,13 +24,48 @@ export const CardList = (props) => (
) -export const Card = (props) => ( -
- {props.title ? {props.title} : null} - {props.doc ? {props.doc} : null} - {props.children} -
+export const MarkdownCard = (props) => ( + {props.children} ) -export const MarkdownCard = (props) => - {props.children} +export class Card extends Component { + constructor(props) { + super(props) + } + + componentDidMount() { + if (!this.props.noframe) { + this.iframeNode = ReactDOM.findDOMNode(this.refs.iframe) + iframeResizer({checkOrigin:false},this.iframeNode) + } + } + + componentWillUnmount(){ + if (!this.props.noframe) { + this.iframeNode.iFrameResizer.close() + } + } + + render() { + const props = this.props; + const iframeContent = ` + + +
+ ` + return ( +
+ {props.title ? {props.title} : null} + {props.doc ? {props.doc} : null} + {props.noframe ? +
{props.children}
: + + {props.children} + + } +
+ ); + } +} diff --git a/src/namespaceStore.js b/src/namespaceStore.js index 75af9f1..2a93b85 100644 --- a/src/namespaceStore.js +++ b/src/namespaceStore.js @@ -1,25 +1,25 @@ // a simplified example for handling namespaces and their corresponding changes const namespaceStore = (initialState = {}) => ({ - namespaces: initialState, - listeners: [], - get(namespace) { - return namespace? this.namespaces[namespace] : this.namespaces - }, - set(namespace, cards) { - this.namespaces[namespace] = cards - this.notify() - }, - subscribe(f) { - this.listeners.push(f) - return () => { - this.listeners = this.listeners.filter(l => { - return l !== f - }) - } - }, - notify() { - this.listeners.map(l => l(this.namespaces)) + namespaces: initialState, + listeners: [], + get(namespace) { + return namespace? this.namespaces[namespace] : this.namespaces + }, + set(namespace, cards) { + this.namespaces[namespace] = cards + this.notify() + }, + subscribe(f) { + this.listeners.push(f) + return () => { + this.listeners = this.listeners.filter(l => { + return l !== f + }) } + }, + notify() { + this.listeners.map(l => l(this.namespaces)) + } }) export default namespaceStore From dd624e36d6c34e80633ae78395e73afaf6d483a7 Mon Sep 17 00:00:00 2001 From: Jeff Date: Thu, 2 Jun 2016 15:05:22 -0600 Subject: [PATCH 2/3] fixing iframes --- .eslintrc | 2 -- examples/cards.js | 71 ++++++++++++++++++++++++----------------------- package.json | 3 ++ src/TestCard.js | 2 +- src/style.less | 4 +++ 5 files changed, 45 insertions(+), 37 deletions(-) diff --git a/.eslintrc b/.eslintrc index 8ab3eaf..ad80466 100644 --- a/.eslintrc +++ b/.eslintrc @@ -17,13 +17,11 @@ "react/jsx-uses-react": [1], "camelcase": [0, {"properties": "always"}], "indent": [2, 2], // 2 spaces indentation - "semi": [2, "always"], "keyword-spacing": [2], "space-before-function-paren": [2, "never"], "space-before-blocks": [2, "always"], "space-infix-ops": [2, {"int32Hint": false}], "quotes": [1, "single", "avoid-escape"], - "max-len": [2, 100, 4], "eqeqeq": [2, "allow-null"], "strict": 0, "no-nested-ternary": [2], diff --git a/examples/cards.js b/examples/cards.js index c6d76d6..11af848 100644 --- a/examples/cards.js +++ b/examples/cards.js @@ -11,11 +11,12 @@ export function buildCards() { abc.card(, 'here is a simple example') - demo.card( - `## markdown doc - you can use markdown for card documentation - - foo - - bar`, + demo.card(` +## markdown doc +you can use markdown for card documentation +- foo +- bar + `, ) @@ -23,25 +24,26 @@ export function buildCards() { demo.card(, {title: 'a bar card'}) - demo.card( - `## Counter + demo.card(` +## Counter - This is a stateful counter. If you change the value prop - in the source file it will not update because the new prop will be ignored - and instead the component local state is rendered. +This is a stateful counter. If you change the value prop +in the source file it will not update because the new prop will be ignored +and instead the component local state is rendered. - Implement *componentWillReceiveProps* and override the component local state - if you want this to work as expected.`, +Implement *componentWillReceiveProps* and override the component local state +if you want this to work as expected. + `, ) - demo.card( - `## Stateless Counter - This example shows how to manage state when you have a stateless - component. The card can also dump the current state as JSON if - you set the *inspect* flag to true.`, - + demo.card(` +## Stateless Counter +This example shows how to manage state when you have a stateless +component. The card can also dump the current state as JSON if +you set the *inspect* flag to true. + `, (state) => state.update(items => [...items, {text, done: false}])} @@ -89,17 +91,18 @@ export function buildCards() { ) demo.markdown(` - # a markdown card - this is a simple markdown card - - lorem - - ipsum +# a markdown card +this is a simple markdown card +- lorem +- ipsum `) demo.test(testSimple, {title:'simple tests'}) - demo.test( - `## component tests - Here you can see the results of some component tests.`, + demo.test(` +## component tests +Here you can see the results of some component tests. + `, testComponents ) diff --git a/package.json b/package.json index 4bd3603..9d9ed3f 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "less": "^2.7.1", "less-loader": "^2.2.3", "mocha": "^2.4.5", + "raw-loader": "^0.5.1", "sinon": "^1.17.4", "style-loader": "^0.13.1", "tape": "^4.5.1", @@ -35,10 +36,12 @@ "enzyme": "^2.3.0", "history": "^2.1.1", "lodash": "^4.12.0", + "iframe-resizer": "^3.5.3", "myro": "^0.6.2", "react": "^15.0.2", "react-addons-test-utils": "^15.0.2", "react-dom": "^15.0.2", + "react-frame-component": "^0.6.1", "react-hot-loader": "^3.0.0-alpha.8", "showdown": "^1.3.0" }, diff --git a/src/TestCard.js b/src/TestCard.js index 310385f..55591cb 100644 --- a/src/TestCard.js +++ b/src/TestCard.js @@ -77,7 +77,7 @@ export default class TestCard extends Component { render() { const {title, doc} = this.props return ( - + {this.state.results.map(([result, name], index) => ( result === true ? {name} diff --git a/src/style.less b/src/style.less index 4a74948..436bc3b 100644 --- a/src/style.less +++ b/src/style.less @@ -24,6 +24,10 @@ body { border-radius:2px; font-family:sans-serif; background-color:white; + iframe { + width: 100%; + border: none; + } } :local(.cardHeader) { From 64d589ab3784f64df167287003bd1a098b5f33a4 Mon Sep 17 00:00:00 2001 From: Jeff Date: Thu, 2 Jun 2016 15:21:52 -0600 Subject: [PATCH 3/3] re-indenting all files to match eslint config --- examples/webpack.production.config.js | 12 +-- public/index.html | 8 +- src/Container.js | 120 +++++++++++++------------- src/StatefulCard.js | 6 +- src/TestCard.js | 2 +- src/components.js | 6 +- src/namespaceStore.js | 2 +- test/Container.test.js | 92 ++++++++++---------- test/StatefulCard.test.js | 96 ++++++++++----------- test/TestCard.test.js | 28 +++--- test/cards.test.js | 116 ++++++++++++------------- test/components.test.js | 48 +++++------ test/namespaceStore.test.js | 64 +++++++------- test/setup.js | 10 +-- webpack.config.js | 60 ++++++------- 15 files changed, 334 insertions(+), 336 deletions(-) diff --git a/examples/webpack.production.config.js b/examples/webpack.production.config.js index c2d7349..f84992a 100644 --- a/examples/webpack.production.config.js +++ b/examples/webpack.production.config.js @@ -1,12 +1,12 @@ var path = require('path') module.exports = { - context: path.join(__dirname, ""), + context: path.join(__dirname, ''), entry: [ './main' ], output: { - filename: "app.js", - path: path.join(__dirname, "dist") + filename: 'app.js', + path: path.join(__dirname, 'dist') }, module: { @@ -16,10 +16,10 @@ module.exports = { loaders: ['babel?{presets:["es2015", "react", "stage-2"], plugins:["react-hot-loader/babel"]}'] }, { test: /\.css$/, - loader: "style-loader!css-loader" + loader: 'style-loader!css-loader' }, { test: /\.less$/, - loader: "style-loader!css-loader!less-loader" + loader: 'style-loader!css-loader!less-loader' }, { test: /\.(gif|jpg|jpeg|png)(\?]?.*)?$/, loader: 'url-loader?limit=1024' @@ -31,7 +31,7 @@ module.exports = { }, node: { - fs: "empty" + fs: 'empty' }, // we need this because of enzyme diff --git a/public/index.html b/public/index.html index 650da18..5d57032 100644 --- a/public/index.html +++ b/public/index.html @@ -1,10 +1,10 @@ - - - React Cards - + + + React Cards + diff --git a/src/Container.js b/src/Container.js index 62ab440..42a65e6 100644 --- a/src/Container.js +++ b/src/Container.js @@ -7,70 +7,70 @@ import style from './style.less' export default class Container extends Component { - constructor(props) { - super(props) - this.state = { activeNamespace : null, routes: this.createRoutes() } - this.unlisten = null - } + constructor(props) { + super(props) + this.state = { activeNamespace : null, routes: this.createRoutes() } + this.unlisten = null + } - componentWillMount() { - const history = this.props.history? this.props.history : createHistory() - this.unlisten = history.listen((location) => { - this.setState({activeNamespace: location.hash.replace('#/', '')}) - }) - } + componentWillMount() { + const history = this.props.history ? this.props.history : createHistory() + this.unlisten = history.listen((location) => { + this.setState({activeNamespace: location.hash.replace('#/', '')}) + }) + } - componentWillUnmount() { - this.unlisten() - } + componentWillUnmount() { + this.unlisten() + } - createRoutes() { - return myro({ - '#': { - name: 'index' - }, - '#/:namespace': { - name: 'namespace' - } - }) - } + createRoutes() { + return myro({ + '#': { + name: 'index' + }, + '#/:namespace': { + name: 'namespace' + } + }) + } - render() { - const { namespaces } = this.props - const { routes, activeNamespace } = this.state - const cards = namespaces[activeNamespace] - const navCard = this.renderNavCard(routes, activeNamespace) - return ( -
-

React Cards

- {cards - ?
- { [navCard, ...cards] } -
- :
- - {map(namespaces, (namespace, key) => ( - - - { key } - - - ))} - -
- } + render() { + const { namespaces } = this.props + const { routes, activeNamespace } = this.state + const cards = namespaces[activeNamespace] + const navCard = this.renderNavCard(routes, activeNamespace) + return ( +
+

React Cards

+ {cards + ?
+ { [navCard, ...cards] }
- ) - } - renderNavCard(routes, ns) { - return ( - -
- home -  /  - {ns} + :
+ + {map(namespaces, (namespace, key) => ( + + + { key } + + + ))} +
- - ) - } + } +
+ ) + } + renderNavCard(routes, ns) { + return ( + +
+ home +  /  + {ns} +
+ + ) + } } diff --git a/src/StatefulCard.js b/src/StatefulCard.js index a484d83..d62c8ce 100644 --- a/src/StatefulCard.js +++ b/src/StatefulCard.js @@ -29,7 +29,7 @@ export default class StatefulCard extends Component { } undo() { if (this.state.history.length < 1) return - const last = this.state.history[this.state.history.length-1] + const last = this.state.history[this.state.history.length - 1] this.setState({ model: last, history: this.state.history.slice(0, -1), @@ -38,7 +38,7 @@ export default class StatefulCard extends Component { } redo() { if (this.state.future.length < 1) return - const last = this.state.future[this.state.future.length-1] + const last = this.state.future[this.state.future.length - 1] this.setState({ model: last, future: this.state.future.slice(0, -1), @@ -67,7 +67,7 @@ export default class StatefulCard extends Component { } renderInspect() { return ( -
+

model:

{JSON.stringify(this.getModel(), null, ' ')}
diff --git a/src/TestCard.js b/src/TestCard.js index 55591cb..06bc251 100644 --- a/src/TestCard.js +++ b/src/TestCard.js @@ -68,7 +68,7 @@ export default class TestCard extends Component { try { testModule[name]() results.push([true, name]) - } catch(e) { + } catch (e) { results.push([e, name]) } }) diff --git a/src/components.js b/src/components.js index 685a0d1..f0e5754 100644 --- a/src/components.js +++ b/src/components.js @@ -30,7 +30,7 @@ export const MarkdownCard = (props) => ( export class Card extends Component { constructor(props) { - super(props) + super(props) } componentDidMount() { @@ -40,7 +40,7 @@ export class Card extends Component { } } - componentWillUnmount(){ + componentWillUnmount() { if (!this.props.noframe) { this.iframeNode.iFrameResizer.close() } @@ -54,7 +54,7 @@ export class Card extends Component {
` return ( -
+
{props.title ? {props.title} : null} {props.doc ? {props.doc} : null} {props.noframe ? diff --git a/src/namespaceStore.js b/src/namespaceStore.js index 2a93b85..b420e03 100644 --- a/src/namespaceStore.js +++ b/src/namespaceStore.js @@ -3,7 +3,7 @@ const namespaceStore = (initialState = {}) => ({ namespaces: initialState, listeners: [], get(namespace) { - return namespace? this.namespaces[namespace] : this.namespaces + return namespace ? this.namespaces[namespace] : this.namespaces }, set(namespace, cards) { this.namespaces[namespace] = cards diff --git a/test/Container.test.js b/test/Container.test.js index 2906051..f22352c 100644 --- a/test/Container.test.js +++ b/test/Container.test.js @@ -8,53 +8,53 @@ import { Card, CardList } from '../src/components' const namespaces = { foo: [ , ], bar: [ ] } describe('Testing ', () => { - beforeEach(() => { - history = createHistory() - }) - - it('should show menu when no cards', () => { - const component = shallow() - expect(component.html()).to.contain('react-cards-menu') - }) - - it('should show menu when no active namespace', () => { - const component = shallow() - expect(component.html()).to.contain('react-cards-menu') - }) - - it('should hide menu when active namespace', () => { - history.push('/#/foo') - const component = shallow() - expect(component.html()).to.not.contain('react-cards-menu') - }) - - it('should display no cards if active namespace doesn\'t contain cards', () => { - history.push('/#/foobar') - const component = shallow() - expect(component.find('.react-cards-namespace-cards')).to.have.length(0) - }) - - it('should display all cards for active namespace', () => { - history.push('/#/foo') - const component = mount() - expect(component.find('.react-cards-namespace-cards')).to.have.length(1) + beforeEach(() => { + history = createHistory() + }) + + it('should show menu when no cards', () => { + const component = shallow() + expect(component.html()).to.contain('react-cards-menu') + }) + + it('should show menu when no active namespace', () => { + const component = shallow() + expect(component.html()).to.contain('react-cards-menu') + }) + + it('should hide menu when active namespace', () => { + history.push('/#/foo') + const component = shallow() + expect(component.html()).to.not.contain('react-cards-menu') + }) + + it('should display no cards if active namespace doesn\'t contain cards', () => { + history.push('/#/foobar') + const component = shallow() + expect(component.find('.react-cards-namespace-cards')).to.have.length(0) + }) + + it('should display all cards for active namespace', () => { + history.push('/#/foo') + const component = mount() + expect(component.find('.react-cards-namespace-cards')).to.have.length(1) // 1 nav header card + 2 foo cards - expect(component.find('.react-cards-namespace-cards .reactcards-card')).to.have.length(3) - }) - - it('should display change card when active namespace changes', () => { - history.push('/') - const component = mount() - expect(component.find('.react-cards-namespace-cards')).to.have.length(0) - history.push('/#/foo') - expect(component.find('.react-cards-namespace-cards')).to.have.length(1) + expect(component.find('.react-cards-namespace-cards .reactcards-card')).to.have.length(3) + }) + + it('should display change card when active namespace changes', () => { + history.push('/') + const component = mount() + expect(component.find('.react-cards-namespace-cards')).to.have.length(0) + history.push('/#/foo') + expect(component.find('.react-cards-namespace-cards')).to.have.length(1) // 1 nav header card + 2 foo cards - expect(component.find('.react-cards-namespace-cards .reactcards-card')).to.have.length(3) - history.push('/#/foobar') - expect(component.find('.react-cards-namespace-cards')).to.have.length(0) - history.push('/#/bar') - expect(component.find('.react-cards-namespace-cards')).to.have.length(1) + expect(component.find('.react-cards-namespace-cards .reactcards-card')).to.have.length(3) + history.push('/#/foobar') + expect(component.find('.react-cards-namespace-cards')).to.have.length(0) + history.push('/#/bar') + expect(component.find('.react-cards-namespace-cards')).to.have.length(1) // 1 nav header card + 1 bar card - expect(component.find('.react-cards-namespace-cards .reactcards-card')).to.have.length(2) - }) + expect(component.find('.react-cards-namespace-cards .reactcards-card')).to.have.length(2) + }) }) diff --git a/test/StatefulCard.test.js b/test/StatefulCard.test.js index 63c1fa1..249956b 100644 --- a/test/StatefulCard.test.js +++ b/test/StatefulCard.test.js @@ -4,65 +4,65 @@ import { expect } from 'chai' import StatefulCard from '../src/StatefulCard' const StatelessCounter = props => ( -
- - {props.value} - -
+
+ + {props.value} + +
) const content = (state) => - state.update(x => x + 1)} - dec={() => state.update(x => x - 1)}/> + state.update(x => x + 1)} + dec={() => state.update(x => x - 1)}/> describe('Testing ', () => { - it('should display children content', () => { - const component = shallow({ content }) - expect(component.find(StatelessCounter)).to.be.length(1) - }) + it('should display children content', () => { + const component = shallow({ content }) + expect(component.find(StatelessCounter)).to.be.length(1) + }) - it('should initial value', () => { - const init = 123 - const component = shallow({ content }) - expect(component.html()).to.contain(init) - }) + it('should initial value', () => { + const init = 123 + const component = shallow({ content }) + expect(component.html()).to.contain(init) + }) - it('should display history', () => { - const component = shallow({ content }) - expect(component.find('.react-cards-history-control')).to.be.length(1) - }) + it('should display history', () => { + const component = shallow({ content }) + expect(component.find('.react-cards-history-control')).to.be.length(1) + }) - it('should display inspect', () => { - const component = shallow({ content }) - expect(component.find('.react-cards-inspect')).to.be.length(1) - }) + it('should display inspect', () => { + const component = shallow({ content }) + expect(component.find('.react-cards-inspect')).to.be.length(1) + }) - it('should display current state', () => { - const component = mount({ content }) - expect(component.find('#theCurrentValue').text()).to.be.equal('10') + it('should display current state', () => { + const component = mount({ content }) + expect(component.find('#theCurrentValue').text()).to.be.equal('10') // click on increade button should change the value - const incBtn = component.find('#increase') - incBtn.simulate('click') - expect(component.find('#theCurrentValue').text()).to.be.equal('11') - incBtn.simulate('click') - expect(component.find('#theCurrentValue').text()).to.be.equal('12') - }) + const incBtn = component.find('#increase') + incBtn.simulate('click') + expect(component.find('#theCurrentValue').text()).to.be.equal('11') + incBtn.simulate('click') + expect(component.find('#theCurrentValue').text()).to.be.equal('12') + }) - it('should update state when undo/redo is clicked', () => { - const component = mount({ content }) - expect(component.find('#theCurrentValue').text()).to.be.equal('100') + it('should update state when undo/redo is clicked', () => { + const component = mount({ content }) + expect(component.find('#theCurrentValue').text()).to.be.equal('100') // click on increase button should change the value - const incBtn = component.find('#increase') - incBtn.simulate('click') - expect(component.find('#theCurrentValue').text()).to.be.equal('101') + const incBtn = component.find('#increase') + incBtn.simulate('click') + expect(component.find('#theCurrentValue').text()).to.be.equal('101') // click on undo should change the value - const undoBtn = component.find('#react-cards-undo') - const redoBtn = component.find('#react-cards-redo') - undoBtn.simulate('click') - expect(component.find('#theCurrentValue').text()).to.be.equal('100') - redoBtn.simulate('click') - expect(component.find('#theCurrentValue').text()).to.be.equal('101') - }) + const undoBtn = component.find('#react-cards-undo') + const redoBtn = component.find('#react-cards-redo') + undoBtn.simulate('click') + expect(component.find('#theCurrentValue').text()).to.be.equal('100') + redoBtn.simulate('click') + expect(component.find('#theCurrentValue').text()).to.be.equal('101') + }) }) diff --git a/test/TestCard.test.js b/test/TestCard.test.js index d3aa28a..10531c7 100644 --- a/test/TestCard.test.js +++ b/test/TestCard.test.js @@ -4,27 +4,27 @@ import { assert, expect } from 'chai' import TestCard from '../src/TestCard' function randomSuccessfulTest() { - assert.equal(1, 1) + assert.equal(1, 1) } function randomUnsuccessfulTest() { - assert.equal(1, 2) + assert.equal(1, 2) } const testModule = {randomSuccessfulTest}; describe('Testing ', () => { - it('should display the test name', () => { - const component = mount() - expect(component.text()).to.contain('randomSuccessfulTest') - }) + it('should display the test name', () => { + const component = mount() + expect(component.text()).to.contain('randomSuccessfulTest') + }) - it('should display the correct result when test succeeds', () => { - const component = mount() - expect(component.html()).to.be.contain(('react-card-test-success')) - }) + it('should display the correct result when test succeeds', () => { + const component = mount() + expect(component.html()).to.be.contain(('react-card-test-success')) + }) - it('should display the correct result when test fails', () => { - const component = mount() - expect(component.html()).to.contain('react-card-test-failure') - }) + it('should display the correct result when test fails', () => { + const component = mount() + expect(component.html()).to.contain('react-card-test-failure') + }) }) diff --git a/test/cards.test.js b/test/cards.test.js index a190c23..e51cc73 100644 --- a/test/cards.test.js +++ b/test/cards.test.js @@ -10,73 +10,71 @@ let history const Foo = ({ message }) =>
{ message }
const StatelessCounter = props => ( -
- - {props.value} - -
+
+ + {props.value} + +
) describe('Test React Cards', () => { - beforeEach(() => { - rc = ReactCards('foo'); - history = createHistory() - }) + beforeEach(() => { + rc = ReactCards('foo'); + history = createHistory() + }) - it('Should display the namespace in menu', () => { - rc.card(, 'here is a simple example') - const root = mount() - expect(root.html()).to.contain('foo') - }) + it('Should display the namespace in menu', () => { + rc.card(, 'here is a simple example') + const root = mount() + expect(root.html()).to.contain('foo') + }) - it('Should display the card if namespace is selected', () => { - rc.card(, 'here is a simple example') - history.push('/#/foo') - const root = mount() - expect(root.html()).to.contain('hello this is a test') - }) + it('Should display the card if namespace is selected', () => { + rc.card(, 'here is a simple example') + history.push('/#/foo') + const root = mount() + expect(root.html()).to.contain('hello this is a test') + }) - it('Should display all the cards if namespace is selected', () => { - rc.card(, 'here is a simple example') - rc.card(, 'here is a simple example') - history.push('/#/foo') - const root = mount() - expect(root.html()).to.contain('hello this is a test') - expect(root.html()).to.contain('hello this is another test') - }) + it('Should display all the cards if namespace is selected', () => { + rc.card(, 'here is a simple example') + rc.card(, 'here is a simple example') + history.push('/#/foo') + const root = mount() + expect(root.html()).to.contain('hello this is a test') + expect(root.html()).to.contain('hello this is another test') + }) - it('Should display a statful card if namespace is selected', () => { - rc.card( - (state) => - state.update(x => x + 1)} - dec={() => state.update(x => x - 1)}/>, - { - init: 123 - } - ) - history.push('/#/foo') - const root = mount() - expect(root.find('button')).to.be.length(2) - expect(root.find('#model').text()).to.be.equal('123') + it('Should display a statful card if namespace is selected', () => { + rc.card( (state) => + state.update(x => x + 1)} + dec={() => state.update(x => x - 1)}/>, + { + init: 123 + } + ) + history.push('/#/foo') + const root = mount() + expect(root.find('button')).to.be.length(2) + expect(root.find('#model').text()).to.be.equal('123') + }) - }) + it('Should display a markdown card if namespace is selected', () => { + rc.markdown('_test some random markdown_') + history.push('/#/foo') + const root = mount() + expect(root.html()).to.contain('test some random markdown') + }) - it('Should display a markdown card if namespace is selected', () => { - rc.markdown('_test some random markdown_') - history.push('/#/foo') - const root = mount() - expect(root.html()).to.contain('test some random markdown') - }) - - it('should display a test card if namespace is selected', () => { - const assertSomething = () => assert.equals(1, 1) - rc.test({ assertSomething }, {title:'some random test'}) - history.push('/#/foo') - const root = mount() - expect(root.html()).to.contain('some random test') - expect(root.html()).to.contain('assertSomething') - }) + it('should display a test card if namespace is selected', () => { + const assertSomething = () => assert.equals(1, 1) + rc.test({ assertSomething }, {title:'some random test'}) + history.push('/#/foo') + const root = mount() + expect(root.html()).to.contain('some random test') + expect(root.html()).to.contain('assertSomething') + }) }) diff --git a/test/components.test.js b/test/components.test.js index 1da2f56..3053233 100644 --- a/test/components.test.js +++ b/test/components.test.js @@ -4,34 +4,34 @@ import { expect } from 'chai' import { Card, MarkdownCard } from '../src/components' describe('Testing React Cards components', () => { - describe('', () => { - it('should display title', () => { - const component = shallow() - expect(component.contains('hello')).to.be.true - }) + describe('', () => { + it('should display title', () => { + const component = shallow() + expect(component.contains('hello')).to.be.true + }) - it('should display doc', () => { - const component = shallow() - expect(component.contains('some doc')).to.be.true - }) + it('should display doc', () => { + const component = shallow() + expect(component.contains('some doc')).to.be.true + }) - it('should display children content', () => { - const component = shallow(Some Content) - expect(component.contains('Some Content')).to.be.true - }) + it('should display children content', () => { + const component = shallow(Some Content) + expect(component.contains('Some Content')).to.be.true + }) - it('should display title doc and child components', () => { - const component = shallow(Some Content) - expect(component.contains('hello')).to.be.true - expect(component.contains('some doc')).to.be.true - expect(component.contains('Some Content')).to.be.true - }) + it('should display title doc and child components', () => { + const component = shallow(Some Content) + expect(component.contains('hello')).to.be.true + expect(component.contains('some doc')).to.be.true + expect(component.contains('Some Content')).to.be.true }) + }) - describe('', () => { - it('should return valid html', () => { - const component = mount(_Some Header_) - expect(component.html()).to.contain('Some Header') - }) + describe('', () => { + it('should return valid html', () => { + const component = mount(_Some Header_) + expect(component.html()).to.contain('Some Header') }) + }) }) diff --git a/test/namespaceStore.test.js b/test/namespaceStore.test.js index e2fd5a1..5095ecd 100644 --- a/test/namespaceStore.test.js +++ b/test/namespaceStore.test.js @@ -8,39 +8,39 @@ const fooValue = [{id: 2}] let store; describe('namespaceStore', () => { - beforeEach(() => { - store = namespaceStore() - }) - it('should supply setter/getter for a given namespace', () => { - store.set('bar', barValue) - expect(store.get('bar')).to.be.equal(barValue) - }) + beforeEach(() => { + store = namespaceStore() + }) + it('should supply setter/getter for a given namespace', () => { + store.set('bar', barValue) + expect(store.get('bar')).to.be.equal(barValue) + }) - it('should return all namespace', () => { - store.set('foo', fooValue) - store.set('bar', barValue) - expect(store.get()).to.be.eql({foo: fooValue, bar: barValue}) - }) + it('should return all namespace', () => { + store.set('foo', fooValue) + store.set('bar', barValue) + expect(store.get()).to.be.eql({foo: fooValue, bar: barValue}) + }) - it('should notify any subscriber when state changes', () => { - const subscriberFn = sinon.spy(); - const unsubscribe = store.subscribe(subscriberFn) - store.set('foo', fooValue) - sinon.assert.calledWith(subscriberFn, {foo: fooValue}); - store.set('bar', barValue) - sinon.assert.calledWith(subscriberFn, {foo: fooValue, bar: barValue}); - unsubscribe() - }) + it('should notify any subscriber when state changes', () => { + const subscriberFn = sinon.spy(); + const unsubscribe = store.subscribe(subscriberFn) + store.set('foo', fooValue) + sinon.assert.calledWith(subscriberFn, {foo: fooValue}); + store.set('bar', barValue) + sinon.assert.calledWith(subscriberFn, {foo: fooValue, bar: barValue}); + unsubscribe() + }) - it('should unsubscribe any listener', () => { - const subscriberFn = sinon.spy(); - const unsubscribe = store.subscribe(subscriberFn) - store.set('foo', {id:4}) - sinon.assert.calledWith(subscriberFn, {foo: {id:4}}); + it('should unsubscribe any listener', () => { + const subscriberFn = sinon.spy(); + const unsubscribe = store.subscribe(subscriberFn) + store.set('foo', {id:4}) + sinon.assert.calledWith(subscriberFn, {foo: {id:4}}); // unsubscribe. any notifications from now on should not effect the subscribeFn anymore - unsubscribe() - store.set('bar', {id:5}) - store.set('bar', {id:6}) - sinon.assert.calledOnce(subscriberFn) - }) -}) \ No newline at end of file + unsubscribe() + store.set('bar', {id:5}) + store.set('bar', {id:6}) + sinon.assert.calledOnce(subscriberFn) + }) +}) diff --git a/test/setup.js b/test/setup.js index 573540e..e22324b 100644 --- a/test/setup.js +++ b/test/setup.js @@ -9,14 +9,14 @@ var exposedProperties = ['window', 'navigator', 'document']; global.document = jsdom(''); global.window = document.defaultView; Object.keys(document.defaultView).forEach((property) => { - if (typeof global[property] === 'undefined') { - exposedProperties.push(property); - global[property] = document.defaultView[property]; - } + if (typeof global[property] === 'undefined') { + exposedProperties.push(property); + global[property] = document.defaultView[property]; + } }); global.navigator = { - userAgent: 'node.js' + userAgent: 'node.js' }; documentRef = document; diff --git a/webpack.config.js b/webpack.config.js index 0248f2b..f7fe279 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,37 +1,37 @@ var path = require('path') module.exports = { //devtool: 'source-map', - context: path.join(__dirname, "src"), - entry: [ - 'webpack/hot/only-dev-server', - 'react-hot-loader/patch', - './main' - ], - output: { - filename: "app.js", - path: path.join(__dirname, "public") - }, + context: path.join(__dirname, "src"), + entry: [ + 'webpack/hot/only-dev-server', + 'react-hot-loader/patch', + './main' + ], + output: { + filename: "app.js", + path: path.join(__dirname, "public") + }, - module: { - loaders: [ - { - test: /\.js$/, - exclude: /node_modules/, - loaders: ['babel?{presets:["es2015", "react", "stage-2"], plugins:["react-hot-loader/babel"]}'] - } - ] - }, + module: { + loaders: [ + { + test: /\.js$/, + exclude: /node_modules/, + loaders: ['babel?{presets:["es2015", "react", "stage-2"], plugins:["react-hot-loader/babel"]}'] + } + ] + }, - node: { - fs: "empty" - }, + node: { + fs: "empty" + }, - // we need this because of enzyme - // see https://github.com/airbnb/enzyme/blob/master/docs/guides/webpack.md - externals: { - 'cheerio': 'window', - 'react/addons': true, - 'react/lib/ExecutionEnvironment': true, - 'react/lib/ReactContext': true - } + // we need this because of enzyme + // see https://github.com/airbnb/enzyme/blob/master/docs/guides/webpack.md + externals: { + 'cheerio': 'window', + 'react/addons': true, + 'react/lib/ExecutionEnvironment': true, + 'react/lib/ReactContext': true + } };