combine python percy tests and storybook tests (#53)

Author: Marc-Andre-Rivet

packages/dash-table/.circleci/config.yml

@@ -33,10 +33,10 @@ jobs:
                 name: Install requirements
                 command: |
                     . venv/bin/activate
-                    pip install -r tests/python_fixtures/requirements.txt --quiet
+                    pip install -r .circleci/python-requirements.txt --quiet
 
             - save_cache:
-                key: deps1-{{ .Branch }}-{{ checksum "tests/python_fixtures/requirements.txt" }}
+                key: deps1-{{ .Branch }}-{{ checksum ".circleci/python-requirements.txt" }}
                 paths:
                     - "venv"
 
@@ -101,10 +101,10 @@ jobs:
                 name: Install requirements
                 command: |
                     . venv/bin/activate
-                    pip install -r tests/python_fixtures/requirements.txt --quiet
+                    pip install -r .circleci/python-requirements.txt --quiet
 
             - save_cache:
-                key: deps1-{{ .Branch }}-{{ checksum "tests/python_fixtures/requirements.txt" }}
+                key: deps1-{{ .Branch }}-{{ checksum ".circleci/python-requirements.txt" }}
                 paths:
                     - "venv"
 
@@ -122,13 +122,6 @@ jobs:
                     flake8 usage.py tests
                 when: always
 
-            - run:
-                name: Integration Tests
-                command: |
-                    . venv/bin/activate
-                    python -m unittest tests.python_fixtures.test_render
-                when: always
-
 
 workflows:
     version: 2

packages/dash-table/tests/python_fixtures/requirements.txt renamed to packages/dash-table/.circleci/python-requirements.txt

@@ -11,4 +11,4 @@ pandas
 percy
 selenium
 flake8
-pylint
+pylint

packages/dash-table/demo/App.js

@@ -3,8 +3,6 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {Table} from 'dash-table';
 import {mockData} from './data';
-import Dropdown from 'react-select';
-import TestFixtures from 'tests/python_fixtures/fixtures.json';
 import {merge} from 'ramda';
 import { memoizeOne } from 'core/memoizer';
 
@@ -14,8 +12,6 @@ class App extends Component {
     constructor() {
         super();
 
-        this.onChange = this.onChange.bind(this);
-
         this.state = {
             filter: '',
             tableProps: {
@@ -43,17 +39,9 @@ class App extends Component {
                         }))
                     }
                 ],
-            },
-            selectedFixture: null,
+            }
         };
 
-        const getOptions = memoizeOne(fixtures => {
-            return fixtures.map(t => ({
-                label: t.name,
-                value: JSON.stringify(t.props),
-            }));
-        });
-
         const setProps = memoizeOne(() => {
             return newProps => {
                 console.info('--->', newProps);
@@ -63,53 +51,17 @@ class App extends Component {
             };
         });
 
-        Object.defineProperty(this, 'options', {
-            get: () => getOptions(TestFixtures)
-        });
-
         Object.defineProperty(this, 'setProps', {
             get: () => setProps()
         });
     }
 
-    onChange(e) {
-        this.setState({
-            tableProps: JSON.parse(e.value),
-            selectedFixture: e.value,
-        })
-    }
-
     render() {
-        return (
-            <div>
-                {<div>
-                    <label>Load test case</label>
-                    <Dropdown
-                        options={this.options}
-                        onChange={this.onChange}
-                        value={this.state.selectedFixture}
-                    />
-                </div>}
-
-                <hr />
-                <label>test events:{'\u00A0\u00A0'}</label>
-                <input type="text" />
-                <input type="text" />
-                <input type="text" />
-                <hr />
-
-                <input
-                    type='text'
-                    value={this.state.filter}
-                    onChange={e => this.setState({ filter: e.target.value })}
-                />
-                <Table
-                    setProps={this.setProps}
-                    {...this.state.tableProps}
-                    {...{ filtering: 'fe', filtering_settings: this.state.filter }}
-                />
-            </div>
-        );
+        return (<Table
+            setProps={this.setProps}
+            {...this.state.tableProps}
+            {...{ filtering: 'fe', filtering_settings: this.state.filter }}
+        />);
     }
 }