10 |
11 |
13 |
14 |
15 | {answers.map(({ id, name }) => (
16 |
25 | ))}
26 |
27 |
28 | );
29 | };
30 |
31 | PollQuestion.propTypes = {
32 | answers: PropTypes.arrayOf(PropTypes.shape({
33 | id: PropTypes.string,
34 | name: PropTypes.string,
35 | })).isRequired,
36 | selected: PropTypes.string,
37 | handleClick: PropTypes.func.isRequired,
38 | };
39 |
40 | export default PollQuestion;
41 |
--------------------------------------------------------------------------------
/packages/replay/stories/vcr-screen/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable semi, no-unused-vars */
2 | import React, { Component } from 'react';
3 | import { storiesOf, action } from '@kadira/storybook';
4 |
5 | import Centered from '../Centered';
6 | import { VCRScreen } from '../../src/components/VCRScreen';
7 |
8 | storiesOf('VCRScreen', module)
9 | .addDecorator(story => (
10 | Who would you like to see become the next US President?
12 |
11 | {story()}
12 |
13 | ))
14 | .add('Default', () => (
15 |
26 |
32 |
33 | );
34 | };
35 |
36 | Icon.propTypes = {
37 | color: PropTypes.string,
38 | size: PropTypes.number,
39 | value: PropTypes.string.isRequired,
40 | };
41 |
42 | Icon.defaultProps = {
43 | color: '#2f3233',
44 | size: 24,
45 | };
46 |
47 | export default Icon;
48 |
--------------------------------------------------------------------------------
/packages/replay/stories/vcr-button/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable semi, no-unused-vars */
2 | import React, { Component } from 'react';
3 | import { storiesOf, action } from '@kadira/storybook';
4 |
5 | import Centered from '../Centered';
6 | import VCRButton from '../../src/components/VCRButton';
7 |
8 | storiesOf('VCRButton', module)
9 | .addDecorator(story => (
10 |
11 |
12 | {story()}
13 |
14 |
15 | ))
16 | .add('Play', () => (
17 |
11 |
12 | {story()}
13 |
14 |
15 | ))
16 | .add('Default (without name)', () => (
17 |
23 |
26 |
27 |
28 | );
29 | }
30 |
31 | return (
32 |
28 | {!this.props.hasCompletedOnboarding ? (
29 |
42 | );
43 | }
44 | }
45 |
46 | App.propTypes = {
47 | answers: PropTypes.arrayOf(PropTypes.shape({
48 | id: PropTypes.string,
49 | name: PropTypes.string,
50 | })),
51 | selected: PropTypes.string,
52 | hasCompletedOnboarding: PropTypes.bool,
53 | selectAnswer: PropTypes.func.isRequired,
54 | completeOnboarding: PropTypes.func.isRequired,
55 | };
56 |
57 | const mapStateToProps = state => ({
58 | answers: getAnswers(state.answers),
59 | selected: state.answers.selected,
60 | hasCompletedOnboarding: state.onboarding.completed,
61 | });
62 |
63 |
64 | export default connect(
65 | mapStateToProps,
66 | { selectAnswer, completeOnboarding }
67 | )(App);
68 |
--------------------------------------------------------------------------------
/packages/replay/stories/cassette-list/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable semi, no-unused-vars */
2 | import React, { Component } from 'react';
3 | import { storiesOf, action } from '@kadira/storybook';
4 | import { Provider } from 'react-redux';
5 | import { createStore, combineReducers } from 'redux';
6 | import _ from 'lodash';
7 | import { reduxVCRReducer, actionCreators } from 'redux-vcr.shared';
8 |
9 | import Centered from '../Centered';
10 | import CassetteList from '../../src/components/CassetteList';
11 | import sampleWithProbability from '../../src/utils/sample-with-probability';
12 | import themes from '../../src/data/cassette-themes';
13 | import offsets from '../../src/data/cassette-offsets';
14 |
15 |
16 | const cassettesById = _.range(23)
17 | .map(i => ({
18 | id: Math.random() * 1000 + '',
19 | timestamp: Date.now(),
20 | numOfActions: Math.floor(Math.random() * 100),
21 | theme: sampleWithProbability(themes, i),
22 | offset: sampleWithProbability(offsets),
23 | }))
24 | .reduce((memo, cassette) => {
25 | // eslint-disable-next-line no-param-reassign
26 | memo[cassette.id] = cassette;
27 | return memo;
28 | }, {});
29 |
30 | const reducer = combineReducers({ reduxVCR: reduxVCRReducer });
31 | const store = createStore(reducer);
32 |
33 | store.dispatch(actionCreators.cassettesListSuccess({
34 | cassettes: cassettesById,
35 | }));
36 |
37 | storiesOf('CassetteList', module)
38 | .addDecorator(story => (
39 |
41 |
42 | {story()}
43 |
44 |
45 |
57 |
63 | { cassetteStatus === 'selecting' ?
65 |
66 |
73 | );
74 | }
75 | }
76 |
77 |
78 | Replay.propTypes = {
79 | doorLabel: PropTypes.string,
80 | cassettesBackdropColor: PropTypes.string,
81 | cassettesBackdropOpacity: PropTypes.number,
82 | cassetteStatus: PropTypes.string.isRequired,
83 | requiresAuth: PropTypes.bool,
84 | hideCassettes: PropTypes.func,
85 | cassettesListRequest: PropTypes.func,
86 | };
87 |
88 | Replay.defaultProps = {
89 | cassettesBackdropColor: '#FFF',
90 | cassettesBackdropOpacity: 0.9,
91 | };
92 |
93 | const mapStateToProps = state => ({
94 | cassetteStatus: state.reduxVCR.cassettes.status,
95 | requiresAuth: state.reduxVCR.authentication.requiresAuth,
96 | });
97 |
98 |
99 | export default connect(
100 | mapStateToProps,
101 | {
102 | hideCassettes: actionCreators.hideCassettes,
103 | cassettesListRequest: actionCreators.cassettesListRequest,
104 | }
105 | )(Replay);
106 |
--------------------------------------------------------------------------------
/packages/_shared/tests/reducers/actions-reducer-test.js:
--------------------------------------------------------------------------------
1 | import { expect } from 'chai';
2 |
3 | import reducer from '../../src/reducers/actions.reducer';
4 | import {
5 | CASSETTE_ACTIONS_RECEIVE,
6 | INCREMENT_ACTIONS_PLAYED,
7 | STOP_CASSETTE,
8 | cassetteActionsReceive,
9 | incrementActionsPlayed,
10 | stopCassette,
11 | } from '../../src/actions';
12 |
13 |
14 | describe('actions reducer', () => {
15 | describe(CASSETTE_ACTIONS_RECEIVE, () => {
16 | const cassetteActions = [
17 | { type: 'DO_THING', delay: 0 },
18 | { type: 'DO_OTHER_THING', delay: 0 },
19 | ]
20 |
21 | it('populates the list of actions', () => {
22 | const state = reducer({}, {});
23 | const action = cassetteActionsReceive({
24 | id: 'cba',
25 | cassetteActions,
26 | });
27 |
28 | const expectedState = {
29 | ...state,
30 | byId: {
31 | cba: cassetteActions,
32 | },
33 | };
34 | const actualState = reducer(state, action);
35 |
36 | expect(actualState).to.deep.equal(expectedState);
37 | });
38 |
39 | it("doesn't clobber other cassette's actions", () => {
40 | const state = reducer({
41 | byId: {
42 | zyx: [{ type: 'STUFF', delay: 10 }],
43 | },
44 | }, {});
45 | const action = cassetteActionsReceive({
46 | id: 'cba',
47 | cassetteActions,
48 | });
49 |
50 | const expectedState = {
51 | ...state,
52 | byId: {
53 | zyx: [{ type: 'STUFF', delay: 10 }],
54 | cba: cassetteActions,
55 | },
56 | };
57 | const actualState = reducer(state, action);
58 |
59 | expect(actualState).to.deep.equal(expectedState);
60 | });
61 | });
62 |
63 | describe(INCREMENT_ACTIONS_PLAYED, () => {
64 | it('increments currentIndex from a pre-existing value', () => {
65 | const state = reducer({ currentIndex: 5 }, {});
66 | const action = incrementActionsPlayed();
67 |
68 | const expectedState = {
69 | ...state,
70 | currentIndex: 6,
71 | };
72 | const actualState = reducer(state, action);
73 |
74 | expect(actualState).to.deep.equal(expectedState);
75 | });
76 | it('increments currentIndex from 0', () => {
77 | const state = reducer({}, {});
78 | const action = incrementActionsPlayed();
79 |
80 | const expectedState = {
81 | ...state,
82 | currentIndex: 1,
83 | };
84 | const actualState = reducer(state, action);
85 |
86 | expect(actualState).to.deep.equal(expectedState);
87 | });
88 | });
89 |
90 | describe(STOP_CASSETTE, () => {
91 | it('resets currentIndex', () => {
92 | const state = reducer({ currentIndex: 5 }, {});
93 | const action = stopCassette();
94 |
95 | const expectedState = {
96 | ...state,
97 | currentIndex: 0,
98 | };
99 | const actualState = reducer(state, action);
100 |
101 | expect(actualState).to.deep.equal(expectedState);
102 | });
103 | });
104 | });
105 |
--------------------------------------------------------------------------------
/packages/replay/stories/vcr/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable semi, no-unused-vars */
2 | import React, { Component } from 'react';
3 | import { createStore } from 'redux';
4 | import { Provider } from 'react-redux';
5 | import { storiesOf, action } from '@kadira/storybook';
6 |
7 | import Centered from '../Centered';
8 | import { VCR } from '../../src/components/VCR';
9 |
10 | const dummyReducer = (state = {}, action) => {
11 | return state;
12 | };
13 |
14 | const store = createStore(dummyReducer);
15 |
16 | storiesOf('VCR', module)
17 | .addDecorator(story => (
18 |
20 | {story()}
21 |
22 |
84 | Your Component Here :)
85 |
86 | );
87 | };
88 |
89 | ${componentName}.propTypes = {
90 |
91 | };
92 |
93 | ${componentName}.defaultProps = {
94 |
95 | };
96 |
97 | export default ${componentName};\n`;
98 | }
99 |
100 | function buildCSSTemplate(componentName, className) {
101 | return `\
102 | @import '../variables';
103 |
104 | .${className} {
105 |
106 | }\n`;
107 | }
108 |
109 | function buildStoryTemplate(componentName) {
110 | return `\
111 | /* eslint-disable semi, no-unused-vars */
112 | import React from 'react';
113 | import { storiesOf, action } from '@kadira/storybook';
114 | import ${componentName} from '../src/components/${componentName}';
115 |
116 | storiesOf('${componentName}', module)
117 | .add('default', () => (
118 | <${componentName} />
119 | ))
120 | `;
121 | }
122 |
123 | const componentName = process.argv[2];
124 | run(componentName);
125 |
--------------------------------------------------------------------------------
/packages/replay/scripts/add_component/index.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console, no-use-before-define */
2 | const path = require('path');
3 | const fs = require('fs');
4 | const changeCase = require('change-case');
5 |
6 |
7 | function run(componentName) {
8 | if (!componentName) {
9 | throw new Error(`
10 | Please supply a component name!
11 | 'npm run add-component -- YourComponentName'
12 | `);
13 | } else if (!changeCase.upperCaseFirst(componentName)) {
14 | throw new Error(`
15 | Custom React components need to be in PascalCase.
16 | You provided ${componentName}.
17 | Please capitalize the first letter!
18 | `);
19 | }
20 |
21 | const componentDirectory = path.join(
22 | __dirname,
23 | '../../src/components',
24 | componentName
25 | );
26 | createDirectory(componentDirectory);
27 |
28 | const className = changeCase.paramCase(componentName);
29 |
30 | // Create and write JS to file
31 | const componentPath = path.join(componentDirectory, 'index.js');
32 | const componentTemplate = buildJSTemplate(componentName, className);
33 | fs.writeFileSync(componentPath, componentTemplate);
34 |
35 | // Create and write SCSS to file
36 | const scssPath = path.join(componentDirectory, 'index.scss');
37 | const scssTemplate = buildCSSTemplate(componentName, className);
38 | fs.writeFileSync(scssPath, scssTemplate);
39 |
40 | // Create and write a Story to file
41 | const storyDirectory = path.join(
42 | __dirname,
43 | '../../stories',
44 | className
45 | );
46 | createDirectory(storyDirectory);
47 |
48 | const storyPath = path.join(storyDirectory, 'index.js');
49 | const storyTemplate = buildStoryTemplate(componentName);
50 | fs.writeFileSync(storyPath, storyTemplate);
51 |
52 | console.info(`Component ${componentName} successfully created!`);
53 | return true;
54 | }
55 |
56 |
57 | // Helper Methods
58 | function createDirectory(componentDirectory) {
59 | console.info('Creating directory', componentDirectory);
60 | try {
61 | fs.mkdirSync(componentDirectory);
62 | } catch (err) {
63 | throw new Error(`Sorry, it appears the component ${componentName} already exists!`);
64 | }
65 |
66 | return componentDirectory;
67 | }
68 |
69 | function buildJSTemplate(componentName, className) {
70 | // Not digging the break in indentation here,
71 | // but it's needed for the file to render correctly :(
72 | return `\
73 | // eslint-disable-next-line no-unused-vars
74 | import React, { Component, PropTypes } from 'react';
75 | import classNames from 'classnames';
76 |
77 | import './index.scss';
78 |
79 |
80 | const ${componentName} = () => {
81 | const classes = classNames('${className}');
82 |
83 | return (
84 |
85 | Your Component Here :)
86 |
87 | );
88 | };
89 |
90 | ${componentName}.propTypes = {
91 |
92 | };
93 |
94 | ${componentName}.defaultProps = {
95 |
96 | };
97 |
98 | export default ${componentName};\n`;
99 | }
100 |
101 | function buildCSSTemplate(componentName, className) {
102 | return `\
103 | @import '../variables';
104 |
105 | .${className} {
106 |
107 | }\n`;
108 | }
109 |
110 | function buildStoryTemplate(componentName) {
111 | return `\
112 | import React from 'react';
113 | import { storiesOf } from '@kadira/storybook';
114 | import ${componentName} from '../components/${componentName}';
115 |
116 | storiesOf('${componentName}', module)
117 | .add('default', () => (
118 | <${componentName} />
119 | ));
120 | `;
121 | }
122 |
123 | const componentName = process.argv[2];
124 | run(componentName);
125 |
--------------------------------------------------------------------------------
/packages/replay/src/components/VCR/index.scss:
--------------------------------------------------------------------------------
1 | @import '../variables';
2 |
3 | $primary-actions-width: 100px;
4 | $primary-action-button-height: 30px;
5 |
6 | .redux-vcr-component .vcr {
7 | position: relative;
8 | z-index: 2;
9 | width: $vcr-width;
10 | height: $vcr-height;
11 | color: $white;
12 | border-radius: 8px 8px 5px 5px;
13 |
14 | &.asleep {
15 | .vcr-button {
16 | opacity: 0.5;
17 | cursor: default;
18 |
19 | .toggle-indicator.toggled {
20 | background: rgba(0, 0, 0, 0.3);
21 | }
22 | }
23 | }
24 |
25 | .primary-action-buttons, .secondary-action-buttons {
26 | position: absolute;
27 | width: $primary-actions-width;
28 | right: $vcr-standard-padding * 2;
29 | display: flex;
30 | }
31 |
32 | .primary-action-buttons {
33 | justify-content: space-between;
34 | top: $vcr-standard-padding;
35 |
36 | .vcr-button {
37 | height: $primary-action-button-height;
38 | width: ($primary-actions-width / 2) - ($vcr-standard-padding / 2);
39 | }
40 | }
41 |
42 | .secondary-action-buttons {
43 | top: $primary-action-button-height + $vcr-standard-padding * 2;
44 |
45 | .vcr-button {
46 | border-radius: 0;
47 | flex: 1;
48 | }
49 |
50 | .vcr-button:first-of-type {
51 | border-radius: $vcr-button-radius 0 0 $vcr-button-radius;
52 | }
53 |
54 | .vcr-button:last-of-type {
55 | border-radius: 0 $vcr-button-radius $vcr-button-radius 0;
56 | }
57 | }
58 |
59 | .decorative-outputs {
60 | position: absolute;
61 | left: $vcr-standard-padding + 3px;
62 | bottom: $vcr-standard-padding;
63 | border-radius: 30px;
64 | background: rgba(0,0,0,0.3);
65 | padding: 4px;
66 | display: flex;
67 | border-bottom: 1px solid rgba(255,255,255,0.2);
68 |
69 | .decorative-output {
70 | position: relative;
71 | width: 12px;
72 | height: 12px;
73 | margin-right: 4px;
74 | // border: 1px solid rgba(255,255,255,0.25);
75 | box-shadow: inset 0px 1px 0 rgba(255,255,255,0.75);
76 | border-radius: 100%;
77 |
78 | &:after {
79 | content: '';
80 | position: absolute;
81 | top: 0;
82 | left: 0;
83 | right: 0;
84 | bottom: 0;
85 | margin: auto;
86 | width: 4px;
87 | height: 4px;
88 | border-radius: 100%;
89 | background: $darkgray;
90 | }
91 |
92 | &:last-of-type {
93 | margin-right: 0;
94 | }
95 |
96 | &.yellow {
97 | background: $rca-yellow;
98 | }
99 | &.red {
100 | background: $rca-red;
101 | box-shadow: inset 0px 1px 0 rgba(255,255,255,0.35);
102 | }
103 | &.white {
104 | background: $rca-white;
105 | }
106 | }
107 | }
108 |
109 | .vcr-bg {
110 | position: absolute;
111 | top: 0;
112 | left: 0;
113 | right: 0;
114 | bottom: 0;
115 | z-index: -1;
116 | border-radius: 8px 8px 5px 5px;
117 | border-top: 1px solid rgba(255,255,255,0.3);
118 | background: $darkgray;
119 | }
120 |
121 | .vcr-top {
122 | position: absolute;
123 | width: 100%;
124 | height: 30px;
125 | top: -26px;
126 | z-index: -1;
127 | background: lighten($darkgray, 13%);
128 | border-radius: 4px;
129 | transform: perspective(250px) rotateX(45deg);
130 | transform-origin: bottom center;
131 | }
132 |
133 | .vcr-top-edge {
134 | position: absolute;
135 | top: -1px;
136 | left: 0;
137 | right: 0;
138 | height: 5px;
139 | border-radius: 5px 5px 0 0;
140 | border-top: 1px solid rgba(255,255,255,0.05);
141 | }
142 |
143 | .vcr-foot {
144 | position: absolute;
145 | bottom: -4px;
146 | height: 4px;
147 | width: 45px;
148 | border-radius: 0 0 4px 4px;
149 | background: $black;
150 |
151 | &.vcr-foot-left {
152 | left: 4%;
153 | }
154 |
155 | &.vcr-foot-right {
156 | right: 4%;
157 | }
158 | }
159 | }
160 |
--------------------------------------------------------------------------------
/packages/_demo/config/webpack.config.dev.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | var path = require('path');
3 | var autoprefixer = require('autoprefixer');
4 | var webpack = require('webpack');
5 | var HtmlWebpackPlugin = require('html-webpack-plugin');
6 | var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
7 | var paths = require('./paths');
8 |
9 |
10 | var reduxVCRProjectNames = [
11 | 'capture', 'persist', 'retrieve', 'replay', '_shared',
12 | ];
13 |
14 | var reduxVCRPaths = reduxVCRProjectNames.map(function(projectName) {
15 | return path.join(__dirname, '../../' + projectName + '/src');
16 | });
17 |
18 |
19 | module.exports = {
20 | devtool: 'eval',
21 | entry: [
22 | require.resolve('webpack-dev-server/client') + '?/',
23 | require.resolve('webpack/hot/dev-server'),
24 | require.resolve('./polyfills'),
25 | path.join(paths.appSrc, 'index')
26 | ],
27 | output: {
28 | // Next line is not used in dev but WebpackDevServer crashes without it:
29 | path: paths.appBuild,
30 | pathinfo: true,
31 | filename: 'static/js/bundle.js',
32 | publicPath: '/'
33 | },
34 | resolve: {
35 | extensions: ['', '.js', '.json'],
36 | alias: {
37 | // This `alias` section can be safely removed after ejection.
38 | // We do this because `babel-runtime` may be inside `react-scripts`,
39 | // so when `babel-plugin-transform-runtime` imports it, it will not be
40 | // available to the app directly. This is a temporary solution that lets
41 | // us ship support for generators. However it is far from ideal, and
42 | // if we don't have a good solution, we should just make `babel-runtime`
43 | // a dependency in generated projects.
44 | // See https://github.com/facebookincubator/create-react-app/issues/255
45 | 'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator')
46 | }
47 | },
48 | resolveLoader: {
49 | root: paths.ownNodeModules,
50 | moduleTemplates: ['*-loader']
51 | },
52 | module: {
53 | preLoaders: [
54 | {
55 | test: /\.js$/,
56 | loader: 'eslint',
57 | include: paths.appSrc,
58 | }
59 | ],
60 | loaders: [
61 | {
62 | test: /\.js$/,
63 | include: [paths.appSrc].concat(reduxVCRPaths),
64 | loader: 'babel',
65 | query: require('./babel.dev')
66 | },
67 | {
68 | test: /\.css$/,
69 | include: [
70 | paths.appSrc,
71 | paths.appNodeModules,
72 | ].concat(reduxVCRPaths),
73 | loader: 'style!css!postcss'
74 | },
75 | {
76 | test: /\.scss$/,
77 | include: reduxVCRPaths,
78 | loader: 'style!css!postcss!sass'
79 | },
80 | {
81 | test: /\.json$/,
82 | include: [paths.appSrc, paths.appNodeModules],
83 | loader: 'json'
84 | },
85 | {
86 | test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
87 | include: [paths.appSrc, paths.appNodeModules],
88 | loader: 'file',
89 | query: {
90 | name: 'static/media/[name].[ext]'
91 | }
92 | },
93 | {
94 | test: /\.(mp4|webm)(\?.*)?$/,
95 | include: [paths.appSrc, paths.appNodeModules],
96 | loader: 'url',
97 | query: {
98 | limit: 10000,
99 | name: 'static/media/[name].[ext]'
100 | }
101 | }
102 | ]
103 | },
104 | eslint: {
105 | configFile: path.join(__dirname, 'eslint.js'),
106 | useEslintrc: false
107 | },
108 | postcss: function() {
109 | return [autoprefixer];
110 | },
111 | plugins: [
112 | new HtmlWebpackPlugin({
113 | inject: true,
114 | template: paths.appHtml,
115 | favicon: paths.appFavicon,
116 | }),
117 | new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"development"' }),
118 | // Note: only CSS is currently hot reloaded
119 | new webpack.HotModuleReplacementPlugin(),
120 | new CaseSensitivePathsPlugin()
121 | ]
122 | };
123 |
--------------------------------------------------------------------------------
/packages/replay/src/create-replay-middleware.js:
--------------------------------------------------------------------------------
1 | import merge from 'lodash.merge';
2 | import invariant from 'invariant';
3 | import { actionTypes, actionCreators, errors } from 'redux-vcr.shared';
4 |
5 | import createReplayHandler from './create-replay-handler';
6 |
7 | const {
8 | PLAY_CASSETTE,
9 | PAUSE_CASSETTE,
10 | STOP_CASSETTE,
11 | EJECT_CASSETTE,
12 | } = actionTypes;
13 | const {
14 | rewindCassetteAndRestoreApp,
15 | changeMaximumDelay,
16 | updateCassetteInitialState,
17 | } = actionCreators;
18 | const {
19 | playWithNoCassetteSelected,
20 | playWithInvalidCassetteSelected,
21 | } = errors;
22 |
23 | const createReplayMiddleware = ({
24 | replayHandler = createReplayHandler(),
25 | maximumDelay,
26 | overwriteCassetteState,
27 | onPlay,
28 | onPause,
29 | onStop,
30 | onEject,
31 | } = {}) => store => next => {
32 | if (typeof maximumDelay !== 'undefined') {
33 | next(changeMaximumDelay({ maximumDelay }));
34 | }
35 |
36 | return action => {
37 | switch (action.type) {
38 | case PLAY_CASSETTE: {
39 | const state = store.getState().reduxVCR;
40 | const {
41 | play: { status },
42 | cassettes: { byId, selected },
43 | } = state;
44 |
45 | // If the cassette is already playing, no action is needed.
46 | if (status === 'playing') {
47 | break;
48 | }
49 |
50 | // Ensure that a valid cassette is selected.
51 | invariant(
52 | !!selected,
53 | playWithNoCassetteSelected()
54 | );
55 |
56 | invariant(
57 | !!byId[selected],
58 | playWithInvalidCassetteSelected(selected, byId)
59 | );
60 |
61 | // If the cassette is currently `paused`, we can just start playing it.
62 | // However, if the cassette is `stopped`, we need to reset the state,
63 | // so that we can be sure it plays in the right context.
64 | if (status === 'stopped') {
65 | // Update our initial state if an overwrite is provided
66 | if (overwriteCassetteState) {
67 | const { initialState } = byId[selected];
68 |
69 | // If the provided value is an object, we want to deep merge it.
70 | // Otherwise, if the provided value is a function, we want to
71 | // apply it with the initial state.
72 | const newState = typeof overwriteCassetteState === 'function'
73 | ? overwriteCassetteState(initialState)
74 | : merge({}, initialState, overwriteCassetteState);
75 |
76 | next(updateCassetteInitialState({ selected, newState }));
77 | }
78 |
79 | next(rewindCassetteAndRestoreApp());
80 | }
81 |
82 | next(action);
83 |
84 | replayHandler.play({
85 | store,
86 | next,
87 | });
88 |
89 | if (onPlay) { onPlay(store.dispatch, store.getState); }
90 |
91 | break;
92 | }
93 |
94 | case PAUSE_CASSETTE: {
95 | const { status } = store.getState().reduxVCR.play;
96 |
97 | if (status !== 'paused' && onPause) {
98 | onPause(store.dispatch, store.getState);
99 | }
100 |
101 | next(action);
102 | break;
103 | }
104 |
105 | case STOP_CASSETTE: {
106 | const { status } = store.getState().reduxVCR.play;
107 |
108 | next(action);
109 |
110 | if (status !== 'stopped') {
111 | next(rewindCassetteAndRestoreApp());
112 |
113 | if (onStop) { onStop(store.dispatch, store.getState); }
114 | }
115 |
116 | break;
117 | }
118 |
119 | case EJECT_CASSETTE: {
120 | const { status } = store.getState().reduxVCR.cassettes;
121 |
122 | next(action);
123 |
124 | if (status === 'loaded' && onEject) {
125 | onEject(store.dispatch, store.getState);
126 | }
127 |
128 | break;
129 | }
130 |
131 | default: {
132 | next(action);
133 | }
134 | }
135 | };
136 | };
137 |
138 | export default createReplayMiddleware;
139 |
--------------------------------------------------------------------------------
/packages/replay/src/components/Cassette/index.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes } from 'react';
2 | import classNames from 'classnames';
3 |
4 | import themes from '../../data/cassette-themes';
5 | import './index.scss';
6 |
7 |
8 | const Cassette = ({
9 | id,
10 | label,
11 | timestamp,
12 | numOfActions,
13 | handleClick,
14 | theme,
15 | offset,
16 | }) => {
17 | const classes = classNames(
18 | 'cassette',
19 | `theme-${theme}`
20 | );
21 |
22 | const styles = {
23 | transform: `translateX(${offset}px)`,
24 | };
25 |
26 |
27 | let labelHeader;
28 | switch (theme) {
29 | case 'kodak': {
30 | labelHeader = (
31 |
32 | );
33 | break;
34 | }
35 | case 'tdk': {
36 | labelHeader = (
37 |
38 |
39 |
40 | );
41 | break;
42 | }
43 | default: {
44 | // nothing
45 | }
46 | }
47 |
48 | let labelFooter;
49 | switch (theme) {
50 | case 'polaroid': {
51 | labelFooter = (
52 |
53 |
58 | );
59 | break;
60 | }
61 |
62 | case 'kodak': {
63 | labelFooter = (
64 |
54 |
55 |
56 | Polaroid
57 | Kodak
65 | );
66 | break;
67 | }
68 |
69 | case 'tdk': {
70 | labelFooter = (
71 |
72 |
75 | );
76 | break;
77 | }
78 |
79 | default: {
80 | labelFooter = TDK
73 | Made in Japan
74 | VHS
;
81 | break;
82 | }
83 | }
84 |
85 | const dateObject = new Date(timestamp);
86 | const dateString = dateObject.toDateString();
87 | const timeString = dateObject.toTimeString().substr(0, 5);
88 | const dateDisplayString = `${dateString} ${timeString}`;
89 |
90 | return (
91 | handleClick({ id })}
95 | >
96 |
133 | );
134 | };
135 |
136 | Cassette.propTypes = {
137 | id: PropTypes.string.isRequired,
138 | label: PropTypes.string,
139 | timestamp: PropTypes.number.isRequired,
140 | numOfActions: PropTypes.number.isRequired,
141 | handleClick: PropTypes.func,
142 | theme: PropTypes.oneOf(Object.keys(themes)),
143 | offset: PropTypes.oneOfType([
144 | PropTypes.number,
145 | PropTypes.string,
146 | ]),
147 | };
148 |
149 | Cassette.defaultProps = {
150 | handleClick() {},
151 | theme: 'generic',
152 | offset: 0,
153 | };
154 |
155 | export { Cassette };
156 | export default Cassette;
157 |
--------------------------------------------------------------------------------
/packages/_shared/src/reducers/cassettes.reducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import { createSelector } from 'reselect';
3 |
4 | import {
5 | CASSETTES_LIST_SUCCESS,
6 | CASSETTES_LIST_FAILURE,
7 | EJECT_CASSETTE,
8 | GO_TO_NEXT_CASSETTE_PAGE,
9 | GO_TO_PREVIOUS_CASSETTE_PAGE,
10 | UPDATE_CASSETTE_INITIAL_STATE,
11 | HIDE_CASSETTES,
12 | SELECT_CASSETTE,
13 | VIEW_CASSETTES,
14 | } from '../actions';
15 |
16 |
17 | const defaultStates = {
18 | status: 'idle',
19 | selected: null,
20 | byId: {},
21 | page: {
22 | number: 0,
23 | limit: 5,
24 | },
25 | };
26 |
27 |
28 | function statusReducer(state = defaultStates.status, action) {
29 | switch (action.type) {
30 | case VIEW_CASSETTES: return 'selecting';
31 | case CASSETTES_LIST_FAILURE:
32 | case EJECT_CASSETTE:
33 | case HIDE_CASSETTES: return 'idle';
34 | case SELECT_CASSETTE: return 'loaded';
35 | default: return state;
36 | }
37 | }
38 |
39 | function selectedReducer(state = defaultStates.selected, action) {
40 | switch (action.type) {
41 | case SELECT_CASSETTE: return action.id;
42 | case EJECT_CASSETTE: return null;
43 | default: return state;
44 | }
45 | }
46 |
47 | function byIdReducer(state = defaultStates.byId, action) {
48 | switch (action.type) {
49 | case CASSETTES_LIST_SUCCESS: return action.cassettes;
50 | case UPDATE_CASSETTE_INITIAL_STATE: {
51 | const newCassette = {
52 | ...state[action.selected],
53 | initialState: action.newState,
54 | };
55 |
56 | return {
57 | ...state,
58 | [action.selected]: newCassette,
59 | };
60 | }
61 | default: return state;
62 | }
63 | }
64 |
65 | function pageNumberReducer(state = defaultStates.page.number, action) {
66 | switch (action.type) {
67 | case GO_TO_NEXT_CASSETTE_PAGE: return state + 1;
68 | case GO_TO_PREVIOUS_CASSETTE_PAGE: return state - 1;
69 | default: return state;
70 | }
71 | }
72 |
73 | function pageLimitReducer(state = defaultStates.page.limit, action) {
74 | switch (action.type) {
75 | default: return state;
76 | }
77 | }
78 |
79 |
80 | export default combineReducers({
81 | status: statusReducer,
82 | selected: selectedReducer,
83 | byId: byIdReducer,
84 | page: combineReducers({
85 | number: pageNumberReducer,
86 | limit: pageLimitReducer,
87 | }),
88 | });
89 |
90 |
91 | // ////////////////////////
92 | // SELECTORS /////////////
93 | // //////////////////////
94 | const cassettesByIdSelector = state => state.reduxVCR.cassettes.byId;
95 | const selectedIdSelector = state => state.reduxVCR.cassettes.selected;
96 | const cassettePageNumberSelector = state => state.reduxVCR.cassettes.page.number;
97 | const cassettePageLimitSelector = state => state.reduxVCR.cassettes.page.limit;
98 |
99 | export const selectedCassetteSelector = createSelector(
100 | selectedIdSelector,
101 | cassettesByIdSelector,
102 | (selectedId, cassettesById) => cassettesById[selectedId]
103 | );
104 |
105 | export const cassetteListSelector = createSelector(
106 | cassettesByIdSelector,
107 | (cassettesById) => {
108 | const cassetteIds = Object.keys(cassettesById);
109 |
110 | return cassetteIds
111 | .map(id => ({ id, ...cassettesById[id] }))
112 | .sort((a, b) => b.timestamp - a.timestamp);
113 | }
114 | );
115 |
116 | export const paginatedCassetteListSelector = createSelector(
117 | cassetteListSelector,
118 | cassettePageNumberSelector,
119 | cassettePageLimitSelector,
120 | (cassetteList, pageNumber, pageLimit) => {
121 | const startIndex = pageNumber * pageLimit;
122 | const endIndex = startIndex + pageLimit;
123 |
124 | return cassetteList.slice(startIndex, endIndex);
125 | }
126 | );
127 |
128 | export const isFirstPageSelector = createSelector(
129 | cassettePageNumberSelector,
130 | (pageNumber) => pageNumber === 0
131 | );
132 |
133 | export const isLastPageSelector = createSelector(
134 | cassetteListSelector,
135 | cassettePageNumberSelector,
136 | cassettePageLimitSelector,
137 | (cassetteList, pageNumber, pageLimit) => {
138 | // Page numbers are zero-indexed, but we want them to be one-indexed.
139 | const truePageNumber = pageNumber + 1;
140 |
141 | const numOfCassettes = cassetteList.length;
142 | const numOfPages = Math.ceil(numOfCassettes / pageLimit);
143 |
144 | return truePageNumber >= numOfPages;
145 | }
146 | );
147 |
--------------------------------------------------------------------------------
/packages/replay/src/components/CassetteList/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { connect } from 'react-redux';
3 | import classNames from 'classnames';
4 |
5 | import { actionCreators, cassetteSelectors } from 'redux-vcr.shared';
6 | import sampleWithProbability from '../../utils/sample-with-probability';
7 | import cassetteThemes from '../../data/cassette-themes';
8 | import cassetteOffsets from '../../data/cassette-offsets';
9 | import Cassette from '../Cassette';
10 | import Icon from '../Icon';
11 | import './index.scss';
12 |
13 | const {
14 | isFirstPageSelector,
15 | isLastPageSelector,
16 | paginatedCassetteListSelector,
17 | } = cassetteSelectors;
18 |
19 |
20 | class CassetteList extends Component {
21 | constructor(props) {
22 | super(props);
23 |
24 | this.animateCassetteSelection = this.animateCassetteSelection.bind(this);
25 | this.renderCassette = this.renderCassette.bind(this);
26 |
27 | // While the actual `selectedCassette` value lives in the redux store,
28 | // we want to animate the selection process. Therefore, we first set this
29 | // component's local state, base the animation off of it, and when it's
30 | // complete we dispatch the action to change the actual value.
31 | this.state = {
32 | selectedCassette: null,
33 | };
34 | }
35 |
36 | componentWillMount() {
37 | // Fetch an up-to-date list of the cassettes.
38 | this.props.cassettesListRequest();
39 | }
40 |
41 | animateCassetteSelection({ id }) {
42 | this.setState({
43 | selectedCassette: id,
44 | });
45 |
46 | setTimeout(() => {
47 | this.props.selectCassette({ id });
48 | }, 1000);
49 | }
50 |
51 | renderCassette(cassette) {
52 | const { selectedCassette } = this.state;
53 | const { id } = cassette;
54 |
55 | const classes = classNames({
56 | 'cassette-wrapper': true,
57 | 'fading-away': selectedCassette && selectedCassette !== id,
58 | 'selected': selectedCassette === id,
59 | });
60 |
61 | return (
62 |
97 |
98 |
105 |
106 |
99 |
100 |
101 |
102 |
103 |
104 |
107 |
132 |
108 |
109 |
110 |
111 |
112 | {labelHeader}
113 |
131 |
114 |
119 |
115 | Name:
116 | {label || id}
117 |
118 |
120 |
129 | {labelFooter}
130 |
121 | Recorded:
122 | {dateDisplayString}
123 |
124 |
125 | Actions:
126 | {numOfActions}
127 |
128 |
63 |
70 | );
71 | }
72 |
73 | render() {
74 | const {
75 | cassettes,
76 | isFirstPage,
77 | isLastPage,
78 | goToNextCassettePage,
79 | goToPreviousCassettePage,
80 | } = this.props;
81 |
82 | const nextButtonClasses = classNames([
83 | 'vcr-pagination-control',
84 | 'next',
85 | { 'fade-away': !!this.state.selectedCassette },
86 | ]);
87 |
88 | const previousButtonClasses = classNames([
89 | 'vcr-pagination-control',
90 | 'previous',
91 | { 'fade-away': !!this.state.selectedCassette },
92 | ]);
93 |
94 | return (
95 |
96 | {cassettes.map(this.renderCassette)}
97 |
98 |
105 |
112 |
113 | );
114 | }
115 | }
116 |
117 | CassetteList.propTypes = {
118 | cassettes: PropTypes.array,
119 | isFirstPage: PropTypes.bool,
120 | isLastPage: PropTypes.bool,
121 | cassettesListRequest: PropTypes.func.isRequired,
122 | selectCassette: PropTypes.func.isRequired,
123 | goToNextCassettePage: PropTypes.func.isRequired,
124 | goToPreviousCassettePage: PropTypes.func.isRequired,
125 | };
126 |
127 | CassetteList.defaultProps = {
128 | };
129 |
130 | const mapStateToProps = state => {
131 | return {
132 | cassettes: paginatedCassetteListSelector(state),
133 | isFirstPage: isFirstPageSelector(state),
134 | isLastPage: isLastPageSelector(state),
135 | };
136 | };
137 |
138 | export { CassetteList };
139 |
140 | export default connect(mapStateToProps, {
141 | cassettesListRequest: actionCreators.cassettesListRequest,
142 | selectCassette: actionCreators.selectCassette,
143 | goToNextCassettePage: actionCreators.goToNextCassettePage,
144 | goToPreviousCassettePage: actionCreators.goToPreviousCassettePage,
145 | })(CassetteList);
146 |
--------------------------------------------------------------------------------
/packages/replay/src/components/VCRScreen/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 | import { connect } from 'react-redux';
3 | import classNames from 'classnames';
4 |
5 | import './index.scss';
6 |
7 |
8 | class VCRScreen extends Component {
9 | getScreenLabel() {
10 | switch (this.props.screenMode) {
11 | case 'loaded': return 'Selected';
12 | case 'playing': return 'Playing';
13 | case 'paused': return 'Paused';
14 | default: return '';
15 | }
16 | }
17 |
18 | getScreenEffects() {
19 | switch (this.props.screenMode) {
20 | case 'error':
21 | return ['flashing', 'centered'];
22 | case 'unauthenticated':
23 | return ['scrolling', 'centered'];
24 | case 'idle':
25 | case 'selecting':
26 | return ['centered'];
27 | default:
28 | return [];
29 | }
30 | }
31 |
32 | getScreenContents() {
33 | switch (this.props.screenMode) {
34 | case 'error':
35 | return 'ERROR. See console for details.';
36 | case 'unauthenticated':
37 | return 'Click to authenticate with GitHub';
38 | case 'idle':
39 | return 'Click to select a cassette';
40 | case 'selecting':
41 | return 'Selecting...';
42 | case 'loaded':
43 | return this.props.selectedCassetteId;
44 | default:
45 | // TODO: Scrubber
46 | return this.props.selectedCassetteId;
47 | }
48 | }
49 |
50 | render() {
51 | const { screenMode, onClick } = this.props;
52 |
53 | const textColor = screenMode === 'error' ? 'red' : 'green';
54 | const label = this.getScreenLabel();
55 | const effects = this.getScreenEffects();
56 | const contents = this.getScreenContents();
57 |
58 | const bufferClasses = classNames('vcr-screen-buffer', {
59 | vertical: effects.includes('scrolling'),
60 | });
61 | const contentsClasses = classNames([
62 | 'vcr-screen-contents',
63 | textColor,
64 | ...effects,
65 | // If we've supplied a label, we need to make space for it by
66 | // edging our main content down a bit.
67 | { 'edged-down': !!label },
68 | ]);
69 |
70 | return (
71 |
72 |
79 | );
80 | }
81 | }
82 |
83 | VCRScreen.propTypes = {
84 | screenMode: PropTypes.oneOf([
85 | 'error',
86 | 'unauthenticated',
87 | 'idle',
88 | 'selecting',
89 | 'loaded',
90 | 'playing',
91 | 'paused',
92 | ]).isRequired,
93 | selectedCassetteId: PropTypes.string,
94 | numOfActions: PropTypes.number,
95 | onClick: PropTypes.func.isRequired,
96 | };
97 |
98 | VCRScreen.defaultProps = {
99 | textColor: 'green',
100 | effects: [],
101 | };
102 |
103 | const mapStateToProps = state => {
104 | if (process.env.NODE_ENV === 'test') {
105 | return {};
106 | }
107 | // Our VCR screen is capable of displaying a ton of different stuff,
108 | // depending on our state. Initially I was going to use selectors in
109 | // the reducer files, but they span multiple concerns.
110 | //
111 | // If performance is a problem, consider memoizing these computations.
112 | const {
113 | reduxVCR: {
114 | cassettes: {
115 | status: cassetteStatus,
116 | selected: selectedCassetteId,
117 | byId: cassettesById,
118 | },
119 | play: {
120 | status: playStatus,
121 | },
122 | authentication: {
123 | loggedIn: isLoggedIn,
124 | error: hasAuthError,
125 | requiresAuth,
126 | },
127 | },
128 | } = state;
129 |
130 | let screenMode;
131 | if (hasAuthError) {
132 | screenMode = 'error';
133 | } else if (!isLoggedIn && requiresAuth) {
134 | screenMode = 'unauthenticated';
135 | } else if (playStatus === 'playing') {
136 | screenMode = 'playing';
137 | } else if (playStatus === 'paused') {
138 | screenMode = 'paused';
139 | } else {
140 | screenMode = cassetteStatus; // idle, selecting, loaded
141 | }
142 |
143 | const selectedCassette = cassettesById[selectedCassetteId];
144 | const numOfActions = selectedCassette ? selectedCassette.numOfActions : 0;
145 |
146 | return {
147 | screenMode,
148 | selectedCassetteId,
149 | numOfActions,
150 | };
151 | };
152 |
153 |
154 | export { VCRScreen };
155 |
156 | export default connect(mapStateToProps)(VCRScreen);
157 |
--------------------------------------------------------------------------------
/packages/_demo/config/webpack.config.prod.js:
--------------------------------------------------------------------------------
1 | var path = require('path');
2 | var autoprefixer = require('autoprefixer');
3 | var webpack = require('webpack');
4 | var HtmlWebpackPlugin = require('html-webpack-plugin');
5 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
6 | var url = require('url');
7 | var paths = require('./paths');
8 |
9 |
10 | var homepagePath = require(paths.appPackageJson).homepage;
11 | var publicPath = homepagePath ? url.parse(homepagePath).pathname : '/';
12 | if (!publicPath.endsWith('/')) {
13 | // Prevents incorrect paths in file-loader
14 | publicPath += '/';
15 | }
16 |
17 | module.exports = {
18 | bail: true,
19 | devtool: 'source-map',
20 | entry: [
21 | require.resolve('./polyfills'),
22 | path.join(paths.appSrc, 'index')
23 | ],
24 | output: {
25 | path: paths.appBuild,
26 | filename: 'static/js/[name].[chunkhash:8].js',
27 | chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
28 | publicPath: publicPath
29 | },
30 | resolve: {
31 | extensions: ['', '.js', '.json'],
32 | alias: {
33 | // This `alias` section can be safely removed after ejection.
34 | // We do this because `babel-runtime` may be inside `react-scripts`,
35 | // so when `babel-plugin-transform-runtime` imports it, it will not be
36 | // available to the app directly. This is a temporary solution that lets
37 | // us ship support for generators. However it is far from ideal, and
38 | // if we don't have a good solution, we should just make `babel-runtime`
39 | // a dependency in generated projects.
40 | // See https://github.com/facebookincubator/create-react-app/issues/255
41 | 'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator')
42 | }
43 | },
44 | resolveLoader: {
45 | root: paths.ownNodeModules,
46 | moduleTemplates: ['*-loader']
47 | },
48 | module: {
49 | preLoaders: [
50 | {
51 | test: /\.js$/,
52 | loader: 'eslint',
53 | include: paths.appSrc
54 | }
55 | ],
56 | loaders: [
57 | {
58 | test: /\.js$/,
59 | include: paths.appSrc,
60 | loader: 'babel',
61 | query: require('./babel.prod')
62 | },
63 | {
64 | test: /\.css$/,
65 | include: [paths.appSrc, paths.appNodeModules],
66 | // Disable autoprefixer in css-loader itself:
67 | // https://github.com/webpack/css-loader/issues/281
68 | // We already have it thanks to postcss.
69 | loader: ExtractTextPlugin.extract('style', 'css?-autoprefixer!postcss')
70 | },
71 | {
72 | test: /\.json$/,
73 | include: [paths.appSrc, paths.appNodeModules],
74 | loader: 'json'
75 | },
76 | {
77 | test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
78 | include: [paths.appSrc, paths.appNodeModules],
79 | loader: 'file',
80 | query: {
81 | name: 'static/media/[name].[hash:8].[ext]'
82 | }
83 | },
84 | {
85 | test: /\.(mp4|webm)(\?.*)?$/,
86 | include: [paths.appSrc, paths.appNodeModules],
87 | loader: 'url',
88 | query: {
89 | limit: 10000,
90 | name: 'static/media/[name].[hash:8].[ext]'
91 | }
92 | }
93 | ]
94 | },
95 | eslint: {
96 | // TODO: consider separate config for production,
97 | // e.g. to enable no-console and no-debugger only in prod.
98 | configFile: path.join(__dirname, 'eslint.js'),
99 | useEslintrc: false
100 | },
101 | postcss: function() {
102 | return [autoprefixer];
103 | },
104 | plugins: [
105 | new HtmlWebpackPlugin({
106 | inject: true,
107 | template: paths.appHtml,
108 | favicon: paths.appFavicon,
109 | minify: {
110 | removeComments: true,
111 | collapseWhitespace: true,
112 | removeRedundantAttributes: true,
113 | useShortDoctype: true,
114 | removeEmptyAttributes: true,
115 | removeStyleLinkTypeAttributes: true,
116 | keepClosingSlash: true,
117 | minifyJS: true,
118 | minifyCSS: true,
119 | minifyURLs: true
120 | }
121 | }),
122 | new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
123 | new webpack.optimize.OccurrenceOrderPlugin(),
124 | new webpack.optimize.DedupePlugin(),
125 | new webpack.optimize.UglifyJsPlugin({
126 | compress: {
127 | screw_ie8: true,
128 | warnings: false
129 | },
130 | mangle: {
131 | screw_ie8: true
132 | },
133 | output: {
134 | comments: false,
135 | screw_ie8: true
136 | }
137 | }),
138 | new ExtractTextPlugin('static/css/[name].[contenthash:8].css')
139 | ]
140 | };
141 |
--------------------------------------------------------------------------------
/documentation/javascript-implementation.md:
--------------------------------------------------------------------------------
1 | # Javascript Implementation
2 |
3 | *Note: It is recommended you start with [Firebase configuration](firebase-config.md). This guide assumes you have your `config` object from Firebase ready to paste.*
4 |
5 | ReduxVCR can be implemented a few different ways. This guide will go through a simple, "quickstart" version.
6 |
7 | ## Other Implementations
8 |
9 | To help demonstrate various implementations, I've created a repo, Redux VCR TodoMVC. It has several pull requests open that showcase the diffs needed for different strategies:
10 |
11 | - [Quickstart](https://github.com/joshwcomeau/redux-vcr-todomvc/pull/1)
12 | - [Production-ready](https://github.com/joshwcomeau/redux-vcr-todomvc/pull/2)
13 | - [Quickstart without authentication](https://github.com/joshwcomeau/redux-vcr-todomvc/pull/3)
14 | - [Initial Cassette Pre-loaded](https://github.com/joshwcomeau/redux-vcr-todomvc/pull/4)
15 | - More to come!
16 |
17 | ## Quickstart Implementation
18 |
19 | #### Install
20 | Start with a good, old-fashioned NPM install.
21 |
22 | ```bash
23 | $ npm i -S redux-vcr
24 | ```
25 |
26 | #### Integrate with Redux store
27 | As per the [Firebase configuration instructions](firebase-config.md), you should have a `config` object ready, which will allow your application to connect with Firebase.
28 |
29 | ```js
30 | var config = {
31 | apiKey: "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
32 | authDomain: "your-project-name.firebaseapp.com",
33 | databaseURL: "https://your-project-name.firebaseio.com",
34 | storageBucket: "your-project-name.appspot.com",
35 | messagingSenderId: "1234567890"
36 | };
37 | ```
38 |
39 | Let's modernize this a bit, and trim off the stuff we don't need:
40 |
41 | ```js
42 | const firebaseAuth = {
43 | apiKey: "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
44 | authDomain: "your-project-name.firebaseapp.com",
45 | databaseURL: "https://your-project-name.firebaseio.com",
46 | };
47 | ```
48 |
49 | This next part will vary depending on your setup, but assuming a conventional 'configure-store.js' file, you'll want to add the following lines:
50 |
51 | ```js
52 | // If you aren't already, be sure to import `applyMiddleware` from redux.
53 | import { createStore, applyMiddleware } from 'redux';
54 |
55 | import {
56 | createCaptureMiddleware,
57 | createPersistHandler,
58 | createRetrieveHandler,
59 | createRetrieveMiddleware,
60 | createReplayMiddleware,
61 | wrapReducer,
62 | } from 'redux-vcr';
63 |
64 | const firebaseAuth = {
65 | apiKey: "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
66 | authDomain: "your-project-name.firebaseapp.com",
67 | databaseURL: "https://your-project-name.firebaseio.com",
68 | };
69 |
70 | // The persist handler is what sends our data to Firebase
71 | const persistHandler = createPersistHandler({ firebaseAuth });
72 |
73 | // Similarly, the retrieve handler fetches those actions so that they can
74 | // be replayed by you and your team
75 | const retrieveHandler = createRetrieveHandler({ firebaseAuth });
76 |
77 | // We need quite a few middlewares. You can learn more about each of them
78 | // in our API reference docs.
79 | const middlewares = [
80 | createCaptureMiddleware({ persistHandler }),
81 | createRetrieveMiddleware({ retrieveHandler }),
82 | createReplayMiddleware({ maximumDelay: 1000 }),
83 | // Feel free to add in your own middlewares here
84 | ];
85 |
86 | // Finally, create our store.
87 | // We need to use our higher-order reducer, which allows us to reset the
88 | // global app state when a new cassette is loaded or ejected.
89 | const store = createStore(
90 | wrapReducer(reducer),
91 | applyMiddleware(...middlewares)
92 | );
93 | ```
94 |
95 | #### Integrate the Replay component
96 |
97 | Finally, we want to add the UI to interact with our recorded cassettes!
98 |
99 | It is recommended to place it as high in your app as possible, similar to the official Redux devtools.
100 |
101 | ```js
102 | import { Replay } from 'redux-vcr';
103 |
104 | const YourApp = () => (
105 |
73 |
78 | {label}
74 |
75 | {contents}
76 |
77 |
106 | {/* Your app stuff here */}
107 |
109 | )
110 | ```
111 |
112 | Replay requires no configuration via props, as all of the logic can be configured in the middlewares above. There are some aesthetic tweaks you can make, though.
113 |
114 | **That's it! You should be up and running :)**
115 |
116 |
117 | ## Advanced configuration
118 |
119 | This setup is good for quick experimentation, but it is ill-suited for production.
120 |
121 | You'll want to check out the [production-ready](https://github.com/joshwcomeau/redux-vcr-todomvc/pull/2) diff to see how a production-ready configuration varies.
122 |
123 | You can also check out our [API reference docs](API-reference.md), to learn about all the neat configuration Redux VCR currently supports.
124 |
--------------------------------------------------------------------------------
/documentation/firebase-config.md:
--------------------------------------------------------------------------------
1 | # Firebase Configuration
2 |
3 | By default, ReduxVCR uses Firebase v3.2 for data persistence.
4 |
5 |
6 |
7 | ### Step 1: Sign up for Firebase and create a project
8 |
9 | Head on over to firebase.google.com and sign up for a free account. Once you make it to [the console](https://console.firebase.google.com/), click 'CREATE NEW PROJECT'.
10 |
11 | Select a name and region, and click 'CREATE PROJECT'.
12 |
13 |
14 |
15 | ### Step 2: Set up Authentication
16 |
17 | This devtool needs to support two different "types" of users:
18 |
19 | - We want anonymous, "background" authentication for the users of our sites. We want to record their sessions regardless of whether they're logged in or not.
20 |
21 | - We want proper, third-party authentication for us developers, so that only privileged users can view the sessions we've recorded.
22 |
23 |
24 | #### 2A - Anonymous authentication
25 |
26 | Firebase supports anonymous authentication.
27 |
28 | The idea is pretty simple: You make a request, on page load, to authenticate anonymously. The server generates a temporary ID, and the client can then use that ID to make authenticated requests. The ID is lost when the session ends, or the page is refreshed, which makes it perfect for our needs.
29 |
30 | We need to enable anonymous authentication. In the left-hand menu, select 'Auth'. Then, from the header, select 'SIGN-IN METHOD'.
31 |
32 | Click on 'Anonymous', the final option in the list of providers, and enable it.
33 |
34 | 
35 |
36 |
37 |
38 | #### 2B - Developer authentication
39 |
40 | Next, we need to set up Github OAuth so that we can authenticate ourselves.
41 |
42 | If you aren't already there, navigate to the 'SIGN-IN METHOD' page under 'Auth', and click on 'GitHub'. Click the 'Enable' toggle.
43 |
44 | In a new tab, [head on over to GitHub and create a new application](https://github.com/settings/applications/new). Give your application a name, and paste in the "authorization callback URL" from Firebase. Click 'Register Application'.
45 |
46 | GitHub will now have client keys for you. Copy and paste the ID and secret from GitHub into Firebase, and save your authorization details in Firebase.
47 |
48 | 
49 |
50 | 
51 |
52 |
53 |
54 | ### Step 3: Configure the rules for the project
55 |
56 | We've now authenticated all users who connect to Firebase, but we need to set up authorization.
57 |
58 | Firebase works with a JSON-like set of rules for controlling access, as well as other config like setting up indexes, or validating write requests.
59 |
60 | For our anonymous users, we want them to be able to _write_ to their own slice of the database, but we don't want them to be able to _read_ from the database at all.
61 |
62 | For our developers, we want them to have full _read_ access, but they don't need to be able to _write_.
63 |
64 | #### Setup
65 |
66 | In the left-hand menu, click 'Database', and then select 'RULES' from the main header.
67 |
68 | Here are the rules you'll want to implement:
69 |
70 | ```js
71 | {
72 | "rules": {
73 | ".read": "auth.token.email === 'your@domain.com'",
74 | "cassettes": {
75 | ".indexOn": ["timestamp"],
76 | "$uid": {
77 | ".write": "$uid === auth.uid"
78 | }
79 | },
80 | "actions": {
81 | "$uid": {
82 | ".write": "$uid === auth.uid"
83 | }
84 | }
85 | }
86 | }
87 | ```
88 |
89 | Firebase rules allow you to use logical operators like `&&` and `||`. For example, if you need multiple developers to be able to use the devtool, you could write:
90 |
91 | ```js
92 | {
93 | "rules": {
94 | ".read": "auth.token.email === 'your@email.com' || auth.token.email === 'other@email.com'",
95 | }
96 | }
97 | ```
98 |
99 | You also have access to regular expressions, so you could structure it like:
100 |
101 | ```js
102 | {
103 | "rules": {
104 | ".read": "auth.token.email.matches(/.*@your_company.com$/)",
105 | }
106 | }
107 | ```
108 |
109 | Once you're satisfied, click 'PUBLISH' to save the rules.
110 |
111 | 
112 |
113 |
114 |
115 | ### Step 4: Get credentials
116 |
117 | Finally, we need to get a copy of the credentials, so that our web app can connect to Firebase. Click on the name of your project in the top-left to go back to the root page, and then click 'Add Firebase to your web app'.
118 |
119 | 
120 |
121 | Copy just the `config` object:
122 |
123 | 
124 |
125 | ------
126 |
127 | That's it! You'll use the `config` object in your clipboard in the next section, [Javascript Implementation](javascript-implementation.md).
128 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # ReduxVCR
2 | ### A Redux devtool that lets you replay user sessions in real-time.
3 | [](https://travis-ci.org/joshwcomeau/redux-vcr)
4 | [](https://www.npmjs.com/package/redux-vcr)
5 | [](https://www.npmjs.com/package/redux-vcr)
6 |
7 | 
8 |
9 |
10 | _NOTE: This project is in **early alpha**. I've been using it in production in [Key&Pad](https://github.com/joshwcomeau/key-and-pad), but it has not been tested in larger/more complex applications._
11 |
12 | -----------
13 |
14 | ## Demo
15 |
16 | You can see a live demo of real, in-production data at **[Key&Pad](http://keyandpad.com?adminMode=true)**. Click on the VCR screen, select a cassette, and hear some dynamically-recreated music!
17 |
18 | ## Blog Post
19 |
20 | Check out the [Medium post](https://medium.com/@joshuawcomeau/introducing-redux-vcr-cad57b37540a) that details how and why this is being built.
21 |
22 |
23 | ## Features
24 |
25 | #### Insights
26 |
27 | By re-watching a recorded session in real-time, you learn tons about how users use your application. Great for gauging UX, spotting bugs, etc.
28 |
29 |
30 | #### Developer Experience
31 |
32 | Features quality-of-life configuration:
33 | - Max delay between actions: Set a maximum wait time, to remove long gaps when users go idle.
34 | - Speed controls: play your cassettes in 0.5x or 2x speed.
35 | - More to come!
36 |
37 |
38 | #### Serverless Security
39 |
40 | The goal for ReduxVCR was to not need any server-side integration for developers creating front-end-only applications, while still being secure. Using Firebase, we're able to automatically authenticate all users, assuring that they can only edit their own slice of the state, and not read from or write to any other users' sessions.
41 |
42 | For replaying the sessions, GitHub OAuth is used. You set which GitHub email you want to have read access within Firebase.
43 |
44 |
45 | #### Modular Architecture
46 |
47 | Rather than create one monolithic package, ReduxVCR consists of 4 individual packages:
48 |
49 | - **Capture**
50 | The capture layer is responsible for watching the stream of actions, selecting the ones that you'd like to record, and augmenting them with timestamps and metadata.
51 |
52 | - **Persist**
53 | The persist layer receives the data from Capture and persists it to Firebase. It handles all anonymous authentication concerns.
54 |
55 | - **Retrieve**
56 | The retrieve layer, meant to be used in development only, fetches the data from Firebase, and handles all admin authentication concerns.
57 |
58 | - **Replay**
59 | Finally, the replay layer is your interface to navigating and watching the recorded cassettes.
60 |
61 | An effort has been made to ensure that packages can be swapped out. For example, you may wish to use custom database storage, in which case you'd build your own Persist and Retrieve modules. You may wish to have a different UX, in which case you'd build your own Replay module.
62 |
63 |
64 | #### Straightforward Integration
65 |
66 | A fair amount of work has been put into making the integration as simple as possible. For simple apps, the process shouldn't take more than a couple of minutes.
67 |
68 |
69 | --------
70 |
71 |
72 | ## Getting Started
73 |
74 | There are two parts to integrating Redux VCR into your application.
75 |
76 | * First, we need to set up Firebase to store our data, and ensure that your users' sessions are secured. **[Read the instructions for Firebase configuration.](documentation/firebase-config.md)**
77 |
78 | * Second, we need to add the code needed to hook into Firebase and display the UI. **[Read the instructions for Javascript implementation.](documentation/javascript-implementation.md)**
79 |
80 |
81 | ## Troubleshooting
82 |
83 | As common issues arise, their solutions will be shared here.
84 |
85 |
86 | ## Roadmap
87 |
88 | There are a few pretty blatant things missing from ReduxVCR.
89 |
90 | - Event Recording
91 |
92 | Right now, we're _only_ recording the series of Redux actions. Ideally, we'd want our scroll position to mirror the user's, and it would be nice to know where their cursor is.
93 |
94 | - Scrubbing and Navigation
95 |
96 | When replaying cassettes, there is currently no way to "jump" to a specific portion in the cassette, to see how far along you are in the sequence, etc. A media-player-style scrubber would help quickly analyze and replay crucial moments in a cassette.
97 |
98 | - Support for common tools and environments
99 |
100 | Immutable.js and React Native are both currently untested/unsupported.
101 |
102 | I have limited free time at the moment, so if anybody would like to contribute to this project, these would be great places to start :)
103 |
--------------------------------------------------------------------------------
/packages/_shared/src/actions/index.js:
--------------------------------------------------------------------------------
1 | export const CASSETTES_LIST_REQUEST = 'REDUX_VCR/CASSETTES_LIST_REQUEST';
2 | export const CASSETTES_LIST_SUCCESS = 'REDUX_VCR/CASSETTES_LIST_SUCCESS';
3 | export const CASSETTES_LIST_FAILURE = 'REDUX_VCR/CASSETTES_LIST_FAILURE';
4 | export const VIEW_CASSETTES = 'REDUX_VCR/VIEW_CASSETTES';
5 | export const HIDE_CASSETTES = 'REDUX_VCR/HIDE_CASSETTES';
6 | export const SELECT_CASSETTE = 'REDUX_VCR/SELECT_CASSETTE';
7 | export const EJECT_CASSETTE = 'REDUX_VCR/EJECT_CASSETTE';
8 | export const PLAY_CASSETTE = 'REDUX_VCR/PLAY_CASSETTE';
9 | export const PAUSE_CASSETTE = 'REDUX_VCR/PAUSE_CASSETTE';
10 | export const STOP_CASSETTE = 'REDUX_VCR/STOP_CASSETTE';
11 | export const REWIND_CASSETTE_AND_RESTORE_APP = 'REDUX_VCR/REWIND_CASSETTE_AND_RESTORE_APP';
12 | export const UPDATE_CASSETTE_INITIAL_STATE = 'REDUX_VCR/UPDATE_CASSETTE_INITIAL_STATE';
13 | export const GO_TO_NEXT_CASSETTE_PAGE = 'REDUX_VCR/GO_TO_NEXT_CASSETTE_PAGE';
14 | export const GO_TO_PREVIOUS_CASSETTE_PAGE = 'REDUX_VCR/GO_TO_PREVIOUS_CASSETTE_PAGE';
15 | export const CASSETTE_ACTIONS_RECEIVE = 'REDUX_VCR/CASSETTE_ACTIONS_RECEIVE';
16 | export const TOGGLE_PLAY_PAUSE = 'REDUX_VCR/TOGGLE_PLAY_PAUSE';
17 | export const INCREMENT_ACTIONS_PLAYED = 'REDUX_VCR/INCREMENT_ACTIONS_PLAYED';
18 | export const CHANGE_PLAYBACK_SPEED = 'REDUX_VCR/CHANGE_PLAYBACK_SPEED';
19 | export const CHANGE_MAXIMUM_DELAY = 'REDUX_VCR/CHANGE_MAXIMUM_DELAY';
20 | export const SIGN_IN_REQUEST = 'REDUX_VCR/SIGN_IN_REQUEST';
21 | export const SIGN_IN_SUCCESS = 'REDUX_VCR/SIGN_IN_SUCCESS';
22 | export const SIGN_IN_FAILURE = 'REDUX_VCR/SIGN_IN_FAILURE';
23 | export const SIGN_OUT_REQUEST = 'REDUX_VCR/SIGN_OUT_REQUEST';
24 | export const SIGN_OUT_SUCCESS = 'REDUX_VCR/SIGN_OUT_SUCCESS';
25 | export const SIGN_OUT_FAILURE = 'REDUX_VCR/SIGN_OUT_FAILURE';
26 | export const SET_AUTH_REQUIREMENT = 'REDUX_VCR/SET_AUTH_REQUIREMENT';
27 |
28 | // ////////////////////////
29 | // ACTION CREATORS ///////
30 | // //////////////////////
31 | export const cassettesListRequest = () => ({
32 | type: CASSETTES_LIST_REQUEST,
33 | });
34 |
35 | export const cassettesListSuccess = ({ cassettes }) => ({
36 | type: CASSETTES_LIST_SUCCESS,
37 | cassettes,
38 | });
39 |
40 | export const cassettesListFailure = ({ error }) => ({
41 | type: CASSETTES_LIST_FAILURE,
42 | error,
43 | });
44 |
45 | export const viewCassettes = () => ({
46 | type: VIEW_CASSETTES,
47 | });
48 |
49 | export const hideCassettes = () => ({
50 | type: HIDE_CASSETTES,
51 | });
52 |
53 | export const selectCassette = ({ id }) => ({
54 | type: SELECT_CASSETTE,
55 | id,
56 | });
57 |
58 | export const ejectCassette = () => ({
59 | type: EJECT_CASSETTE,
60 | });
61 |
62 | export const playCassette = () => ({
63 | type: PLAY_CASSETTE,
64 | });
65 |
66 | export const pauseCassette = () => ({
67 | type: PAUSE_CASSETTE,
68 | });
69 |
70 | export const stopCassette = () => ({
71 | type: STOP_CASSETTE,
72 | });
73 |
74 | // This is a special action, used by our higher-order reducer to wipe the state.
75 | // It ensures that when a tape is played, it plays in the right context.
76 | export const rewindCassetteAndRestoreApp = () => ({
77 | type: REWIND_CASSETTE_AND_RESTORE_APP,
78 | });
79 |
80 | export const updateCassetteInitialState = ({ selected, newState }) => ({
81 | type: UPDATE_CASSETTE_INITIAL_STATE,
82 | selected,
83 | newState,
84 | });
85 |
86 | export const goToNextCassettePage = () => ({
87 | type: GO_TO_NEXT_CASSETTE_PAGE,
88 | });
89 |
90 | export const goToPreviousCassettePage = () => ({
91 | type: GO_TO_PREVIOUS_CASSETTE_PAGE,
92 | });
93 |
94 | export const cassetteActionsReceive = ({ id, cassetteActions }) => ({
95 | type: CASSETTE_ACTIONS_RECEIVE,
96 | id,
97 | cassetteActions,
98 | });
99 |
100 | export const incrementActionsPlayed = () => ({
101 | type: INCREMENT_ACTIONS_PLAYED,
102 | });
103 |
104 | export const changePlaybackSpeed = ({ playbackSpeed }) => ({
105 | type: CHANGE_PLAYBACK_SPEED,
106 | playbackSpeed,
107 | });
108 |
109 | export const changeMaximumDelay = ({ maximumDelay }) => ({
110 | type: CHANGE_MAXIMUM_DELAY,
111 | maximumDelay,
112 | });
113 |
114 | export const signInRequest = ({ authMethod }) => ({
115 | type: SIGN_IN_REQUEST,
116 | authMethod,
117 | });
118 |
119 | export const signInSuccess = ({ user, credential }) => ({
120 | type: SIGN_IN_SUCCESS,
121 | user,
122 | credential,
123 | });
124 |
125 | export const signInFailure = ({ error }) => ({
126 | type: SIGN_IN_FAILURE,
127 | error,
128 | });
129 |
130 | export const signOutRequest = () => ({
131 | type: SIGN_OUT_REQUEST,
132 | });
133 |
134 | export const signOutSuccess = () => ({
135 | type: SIGN_OUT_SUCCESS,
136 | });
137 |
138 | export const signOutFailure = () => ({
139 | type: SIGN_OUT_FAILURE,
140 | });
141 |
142 | export const setAuthRequirement = ({ requiresAuth }) => ({
143 | type: SET_AUTH_REQUIREMENT,
144 | requiresAuth,
145 | });
146 |
--------------------------------------------------------------------------------
/packages/persist/tests/create-persist-handler-test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-unused-expressions */
2 | import { expect } from 'chai';
3 |
4 | import { createPersistHandler } from '../src';
5 |
6 | const firebaseAuth = {
7 | apiKey: 'abc123',
8 | authDomain: 'test.firebaseapp.com',
9 | databaseURL: 'https://test.firebaseio.com',
10 | };
11 |
12 |
13 | const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
14 |
15 | describe('createPersistHandler', () => {
16 | describe('cassette validation', () => {
17 | let handler;
18 | before(done => {
19 | handler = createPersistHandler({ firebaseAuth });
20 | setTimeout(done, 100);
21 | });
22 |
23 | it('fails when no cassette is provided', () => {
24 | expect(handler.persist).to.throw(/cassette/);
25 | });
26 |
27 | it('fails when no action array is provided', () => {
28 | const faultyCassette = { data: {}, timestamp: 1472558962525 };
29 |
30 | expect(() => (
31 | handler.persist(faultyCassette)
32 | )).to.throw(/cassette/);
33 | });
34 |
35 | it('fails when no timestamp is provided', () => {
36 | const faultyCassette = { data: {}, actions: [{ type: 'STUFF' }] };
37 |
38 | expect(() => (
39 | handler.persist(faultyCassette)
40 | )).to.throw(/timestamp/);
41 | });
42 |
43 | it('succeeds when the actions array is empty', () => {
44 | const cassette = { actions: [], timestamp: 1472558962525 };
45 | expect(() => handler.persist(cassette)).to.not.throw();
46 | });
47 |
48 | it('succeeds when no data is provided (it is optional)', () => {
49 | const cassette = {
50 | actions: [{ type: 'STUFF' }],
51 | timestamp: 1472558962525,
52 | };
53 |
54 | expect(() => handler.persist(cassette)).to.not.throw();
55 | });
56 | });
57 |
58 | describe('firebase integration', () => {
59 | let handler;
60 | let firebase;
61 | const cassette = {
62 | data: { label: "Josh's great session" },
63 | actions: [{ type: 'DO_GREAT_THINGS' }],
64 | timestamp: 1472558962525,
65 | initialState: {
66 | auth: {
67 | loggedIn: true,
68 | },
69 | },
70 | };
71 |
72 | beforeEach(async function(done) {
73 | handler = createPersistHandler({ firebaseAuth });
74 | firebase = handler.firebaseHandler.firebase;
75 |
76 | await delay(200);
77 |
78 | handler.persist(cassette);
79 |
80 | await delay(200);
81 |
82 | done();
83 | });
84 |
85 | it('gets a database reference', () => {
86 | expect(firebase.database.callCount).to.equal(1);
87 | });
88 |
89 | it('gets the ref for the cassettes and actions paths', () => {
90 | expect(firebase.ref.callCount).to.equal(2);
91 |
92 | const cassettesRef = firebase.ref.args[0][0];
93 | expect(cassettesRef).to.equal('cassettes/abc123');
94 |
95 | const actionsRef = firebase.ref.args[1][0];
96 | expect(actionsRef).to.equal('actions/abc123');
97 | });
98 |
99 | it('sets the cassette and the actions', () => {
100 | const set = firebase.set;
101 | expect(set.callCount).to.equal(2);
102 | });
103 |
104 | it('passes along the right data for the cassette', () => {
105 | const setCassette = firebase.set.args[0][0];
106 |
107 | expect(setCassette.data).to.equal(cassette.data);
108 | expect(setCassette.timestamp).to.be.a('number');
109 | expect(setCassette.numOfActions).to.equal(cassette.actions.length);
110 | expect(setCassette.initialState).to.equal(cassette.initialState);
111 | });
112 |
113 | it('passes along the actions as-is', () => {
114 | const setActions = firebase.set.args[1][0];
115 |
116 | expect(setActions).to.equal(cassette.actions);
117 | });
118 | });
119 |
120 | describe('debounce timing', () => {
121 | let handler;
122 | let firebase;
123 | const cassette = {
124 | data: { label: "Josh's great session" },
125 | actions: [{ type: 'DO_GREAT_THINGS' }],
126 | timestamp: 1472558962525,
127 | };
128 |
129 | beforeEach(done => {
130 | handler = createPersistHandler({ firebaseAuth });
131 | firebase = handler.firebaseHandler.firebase;
132 |
133 | setTimeout(done, 200);
134 | });
135 |
136 | it('debounces the persist method when set', done => {
137 | // In this test, we'll invoke `persist` several times very quickly,
138 | // and check to see that:
139 | // - it isn't invoked at all right away
140 | // - it is only invoked once, at the end of the debounce.
141 | for (let i = 0; i <= 5; i++) {
142 | handler.persist(cassette);
143 | }
144 |
145 | expect(firebase.database.callCount).to.equal(0);
146 |
147 | setTimeout(() => {
148 | expect(firebase.database.callCount).to.equal(1);
149 | done();
150 | }, 250);
151 | });
152 | });
153 | });
154 |
--------------------------------------------------------------------------------