mAAdhaTTah/brookjs

View on GitHub
packages/brookjs-cli/features/__snaps__/developer-runs-new-and-accepts-the-defaults.snap

Summary

Maintainability
Test Coverage
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Developer runs new and accepts the defaults-.babelrc 1`] = `
"{
  \\"presets\\": [
    \\"brookjs\\",
    [\\"@babel/env\\", {
         modules: false
    }]
  ],
  \\"plugins\\": [
    \\"@babel/plugin-proposal-class-properties\\"
  ]
}
"
`;

exports[`Developer runs new and accepts the defaults-.beaverrc.js 1`] = `
"export const dir = 'src';
"
`;

exports[`Developer runs new and accepts the defaults-.beaverrc.ts 1`] = `
"export const dir = 'src';
"
`;

exports[`Developer runs new and accepts the defaults-.eslintrc.js 1`] = `
"module.exports = {
  root: true,
  parserOptions: {
    ecmaVersion: 8,
    sourceType: 'module',
    ecmaFeatures: {
      impliedStrict: true,
      jsx: true
    }
  },
  plugins: ['react'],
  env: {
    es6: true,
    node: true,
    browser: true
  },
  extends: ['valtech', 'prettier'],
  settings: {
    react: {
      pragma: 'h'
    }
  },
  rules: {
    'react/jsx-uses-react': 2,
    'react/jsx-uses-vars': 2
  }
};

"
`;

exports[`Developer runs new and accepts the defaults-.hygen.js 1`] = `
"const loader = require('esm');

require = loader(module, { mode: 'auto', cjs: true });

module.exports = {
    helpers: {
        dir: () => require('./.beaver.js').dir
    }
};
"
`;

exports[`Developer runs new and accepts the defaults-.storybook/.babelrc 1`] = `
"{
  \\"presets\\": [\\"brookjs\\"]
}
"
`;

exports[`Developer runs new and accepts the defaults-.storybook/addons.js 1`] = `
"import 'brookjs-desalinate/register';
"
`;

exports[`Developer runs new and accepts the defaults-.storybook/config.js 1`] = `
"import { configure, addDecorator } from '@storybook/react';
import { withJunction } from 'brookjs-desalinate';

// automatically import all files ending in *.stories.js
const req = require.context('../src', true, /.stories.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

addDecorator(withJunction);

configure(loadStories, module);
"
`;

exports[`Developer runs new and accepts the defaults-.storybook/main.js 1`] = `
"module.exports = {
  stories: ['../src/**/__stories__/*.stories.js'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    'brookjs-desalinate/register'
  ],
};
"
`;

exports[`Developer runs new and accepts the defaults-package.json 1`] = `
"{
  \\"name\\": \\"test-app\\",
  \\"version\\": \\"0.0.0\\",
  \\"description\\": \\"A brookjs application\\",
  \\"main\\": \\"src/index.js\\",
  \\"scripts\\": {
    \\"build\\": \\"beaver build\\",
    \\"start\\": \\"beaver start\\",
    \\"test\\": \\"npm run test:check && npm run test:lint && npm run test:unit\\",
    \\"test:check\\": \\"beaver test check\\",
    \\"test:lint\\": \\"beaver test lint\\",
    \\"test:unit\\": \\"beaver test unit --coverage\\",
    \\"storybook:start\\": \\"start-storybook -p 6006\\",
    \\"storybook:build\\": \\"build-storybook\\"
  },
  \\"keywords\\": [],
  \\"author\\": \\"\\",
  \\"license\\": \\"MIT\\",
  \\"devDependencies\\": {
    \\"@storybook/addon-actions\\": \\"^5.0.0\\",
    \\"@storybook/addon-links\\": \\"^5.0.0\\",
    \\"@storybook/addon-storyshots\\": \\"^5.3.6\\",
    \\"@storybook/addons\\": \\"^5.0.0\\",
    \\"@storybook/react\\": \\"^5.0.0\\",
    \\"@testing-library/react\\": \\"^10.0.0\\",
    \\"@testing-library/jest-dom\\": \\"^5.0.0\\",
    \\"brookjs-cli\\": \\"^1.0.0-alpha\\",
    \\"brookjs-desalinate\\": \\"^1.0.0-alpha\\"
  },
  \\"dependencies\\": {
    \\"brookjs\\": \\"^1.0.0-alpha\\",
    \\"kefir\\": \\"^3.8.0\\",
    \\"prop-types\\": \\"^15.0.0\\",
    \\"react\\": \\"^16.0.0\\",
    \\"react-dom\\": \\"^16.0.0\\",
    \\"react-redux\\": \\"^7.0.0\\",
    \\"redux\\": \\"^4.0.0\\",
    \\"redux-actions\\": \\"^2.0.0\\",
    \\"reselect\\": \\"^4.0.0\\"
  }
}
"
`;

exports[`Developer runs new and accepts the defaults-public/index.html 1`] = `
"<!DOCTYPE html>
<html lang=\\"en\\">
  <head>
    <meta charset=\\"utf-8\\" />
    <link rel=\\"icon\\" href=\\"%PUBLIC_URL%/favicon.ico\\" />
    <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1\\" />
    <meta name=\\"theme-color\\" content=\\"#000000\\" />
    <meta name=\\"description\\" content=\\"Web site created using brookjs\\" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel=\\"manifest\\" href=\\"%PUBLIC_URL%/manifest.json\\" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the \`public\` folder during the build.
      Only files inside the \`public\` folder can be referenced from the HTML.

      Unlike \\"/favicon.ico\\" or \\"favicon.ico\\", \\"%PUBLIC_URL%/favicon.ico\\" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running \`npm run build\`.
    -->
    <title>brookjs App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id=\\"root\\"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run \`npm start\` or \`yarn start\`.
      To create a production bundle, use \`npm run build\` or \`yarn build\`.
    -->
  </body>
</html>
"
`;

exports[`Developer runs new and accepts the defaults-public/manifest.json 1`] = `
"{
  \\"short_name\\": \\"test-app\\",
  \\"name\\": \\"A brookjs application\\",
  \\"icons\\": [
    {
      \\"src\\": \\"favicon.ico\\",
      \\"sizes\\": \\"64x64 32x32 24x24 16x16\\",
      \\"type\\": \\"image/x-icon\\"
    },
    {
      \\"src\\": \\"logo192.png\\",
      \\"type\\": \\"image/png\\",
      \\"sizes\\": \\"192x192\\"
    },
    {
      \\"src\\": \\"logo512.png\\",
      \\"type\\": \\"image/png\\",
      \\"sizes\\": \\"512x512\\"
    }
  ],
  \\"start_url\\": \\".\\",
  \\"display\\": \\"standalone\\",
  \\"theme_color\\": \\"#000000\\",
  \\"background_color\\": \\"#ffffff\\"
}
"
`;

exports[`Developer runs new and accepts the defaults-src/__tests__/storyshots.spec.js 1`] = `
"import initStoryshots from '@storybook/addon-storyshots';
import { render } from '@testing-library/react';
import { RootJunction } from 'brookjs-silt';

const reactTestingLibrarySerializer = {
  print: (val, serialize) => serialize(val.container.firstChild),
  test: val => val && val.hasOwnProperty('container'),
};

initStoryshots({
  framework: 'react',
  renderer: element =>
    render(element, {
      wrapper: RootJunction,
    }),
  snapshotSerializers: [reactTestingLibrarySerializer],
});
"
`;

exports[`Developer runs new and accepts the defaults-src/actions/app.js 1`] = `
"import { createAction } from 'redux-actions';

export const init = createAction('INIT');

export const incrementClick = createAction('INCREMENT_CLICK');

export const decrementClick = createAction('DECREMENT_CLICK');
"
`;

exports[`Developer runs new and accepts the defaults-src/actions/index.js 1`] = `
"export * from './app';
"
`;

exports[`Developer runs new and accepts the defaults-src/app.js 1`] = `
"import React from 'react';
import { observeDelta, eddy, combineReducers, fromReduxStore } from 'brookjs';
import { RootJunction } from 'brookjs-silt';
import { applyMiddleware, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
import ReactDOM from 'react-dom';
import { init } from './actions';
import {} from './deltas';
import {} from './reducers';
import {} from './selectors';

const { __INITIAL_STATE__ } = global;

const compose = composeWithDevTools({
  name: 'test-app'
});

const enhancer = compose(applyMiddleware(observeDelta()), eddy());

const reducer = combineReducers({});

const store = createStore(reducer, __INITIAL_STATE__, enhancer);
const state$ = fromReduxStore(store);

ReactDOM.render(
  <RootJunction silt-embeddable root$={root$ => root$.observe(store.dispatch)}>
    {state$.map(state => (
      <pre>
        <code>{JSON.stringify(state)}</code>
      </pre>
    ))}
  </RootJunction>,
  document.getElementById('app')
);

store.dispatch(init());
"
`;

exports[`Developer runs new and accepts the defaults-src/components/__stories__/App.stories.js 1`] = `
"import React from 'react';
import App from '../App';

export default {
  title: 'App',
};

export const basic = () => <App count={3} />;
"
`;

exports[`Developer runs new and accepts the defaults-src/components/__tests__/App.spec.js 1`] = `
"import React from 'react';
import { fireEvent } from '@testing-library/react';
import { incrementClick, decrementClick } from '../../actions';
import App from '../App';

describe('App', () => {
  it('should emit actions', () => {
    expect(<App count={3} />).toEmitFromJunction(
      [
        [0, KTU.value(incrementClick())],
        [0, KTU.value(decrementClick())],
      ],
      api => {
        fireEvent.click(api.getByText('+'));
        fireEvent.click(api.getByText('-'));
      },
    );
  });
});
"
`;

exports[`Developer runs new and accepts the defaults-src/components/App.js 1`] = `
"import React from 'react';
import { toJunction } from 'brookjs-silt';
import { incrementClick, decrementClick } from '../actions';

const App = ({ count, onIncrementClick, onDecrementClick }) => {
  return (
    <div className=\\"test-app\\">
      <h1>
        Welcome to <code>brookjs</code>!<p>Count: {count}</p>
        <div>
          <button onClick={onIncrementClick}>+</button>
          <button onClick={onDecrementClick}>-</button>
        </div>
      </h1>
    </div>
  );
};

const events = {
  onIncrementClick: e$ => e$.map(() => incrementClick()),
  onDecrementClick: e$ => e$.map(() => decrementClick()),
};

export default toJunction(events)(App);
"
`;

exports[`Developer runs new and accepts the defaults-src/components/index.js 1`] = `
"export { default as App } from './App';
"
`;

exports[`Developer runs new and accepts the defaults-src/deltas/index.js 1`] = `
"import Kefir from 'kefir';
import { sampleByAction } from 'brookjs';
import { init } from '../actions';

export const rootDelta = (action$, state$) => {
  const init$ = state$.thru(sampleByAction(action$, init)).flatMap(() => {
    console.log('App initialized');

    return Kefir.never();
  });

  return Kefir.merge([init$]);
};
"
`;

exports[`Developer runs new and accepts the defaults-src/dom.js 1`] = `
"import {
  children,
  component,
  Kefir,
  render,
  containerAttribute
} from 'brookjs';
import {} from './components';
import template from './view.hbs';

export const el = doc =>
  Kefir.fromCallback(callback => {
    callback(doc.querySelector(\`[\${containerAttribute('app')}]\`));
  });

export const view = component({
  children: children({}),
  render: render(template)
});
"
`;

exports[`Developer runs new and accepts the defaults-src/index.js 1`] = `
"import React from 'react';
import { createStore } from 'brookjs';
import { RootJunction } from 'brookjs-silt';
import ReactDOM from 'react-dom';
import { init } from './actions';
import { App } from './components';
import { rootDelta } from './deltas';
import { reducer, mapStateToProps } from './state';

let store;
let root$;
let unsub;

const render = () => {
  ReactDOM.render(
    <RootJunction root$={root$}>
      <App {...mapStateToProps(store.getState())} />
    </RootJunction>,
    document.getElementById('root'),
  );
};

const bootstrap = initialState => {
  unsub && unsub();
  store = createStore(reducer, initialState, rootDelta);
  root$ = root$ => root$.observe(store.dispatch);
  unsub = store.subscribe(render);
};

bootstrap();
store.dispatch(init());

if (module.hot) {
  // Nothing needs to be done when the actions change.
  module.hot.accept('./actions');

  // Rerender if the  components change.
  module.hot.accept('./components', render);

  // Update the store
  module.hot.accept(['./deltas', './state'], () => bootstrap(store.getState()));
}
"
`;

exports[`Developer runs new and accepts the defaults-src/reducers/index.js 1`] = `""`;

exports[`Developer runs new and accepts the defaults-src/selectors/index.js 1`] = `
"export const selectProps = props$ => props$;
"
`;

exports[`Developer runs new and accepts the defaults-src/services/index.js 1`] = `""`;

exports[`Developer runs new and accepts the defaults-src/setupTests.js 1`] = `
"import 'brookjs-desalinate/extend-expect';
import '@testing-library/jest-dom/extend-expect';
"
`;

exports[`Developer runs new and accepts the defaults-src/state/__tests__/state.spec.js 1`] = `
"import { reducer, mapStateToProps } from '../index';
import { init, incrementClick, decrementClick } from '../../actions';

describe('state', () => {
  describe('reducer', () => {
    it('should return the initial state on init action', () => {
      expect(reducer({ count: 0 }, init())).toEqual({ count: 0 });
    });

    it('should increase the count on increment click', () => {
      expect(reducer({ count: 0 }, incrementClick())).toEqual({ count: 1 });
    });

    it('should increase the count on decrement click', () => {
      expect(reducer({ count: 0 }, decrementClick())).toEqual({ count: -1 });
    });
  });

  describe('mapStateToProps', () => {
    it('should select the count', () => {
      expect(mapStateToProps({ count: 20 })).toEqual({ count: 20 });
    });
  });
});
"
`;

exports[`Developer runs new and accepts the defaults-src/state/index.js 1`] = `
"import { handleActions } from 'redux-actions';
import { incrementClick, decrementClick } from '../actions';

const initialState = {
  count: 0,
};

export const reducer = handleActions(
  {
    [incrementClick]: state => ({ ...state, count: state.count + 1 }),
    [decrementClick]: state => ({ ...state, count: state.count - 1 }),
  },
  initialState,
);

export const mapStateToProps = state => ({
  count: state.count,
});
"
`;

exports[`Developer runs new and accepts the defaults-src/view.hbs 1`] = `
"<div data-brk-container=\\"app\\">

</div>
"
`;