danny-andrews

/**
 * Returns internal [[Class]] property of an object
 *
 * Ecma-262, 15.2.4.2
 * Object.prototype.toString( )
 *
 * When the toString method is called, the following steps are taken: 
 * 1. Get the [[Class]] property of this object. 
 * 2. Compute a string value by concatenating the three strings "[object ", Result (1), and "]". 
 * 3. Return Result (2).

danny-andrews

@dschinkel

You should test those two methods indirectly by testing the behavior... So I'm disagreeing with @markerikson, test through your connected component.

Are you suggesting that you should forego exporting the unconnected component entirely and only test the connected component? I think that is "over testing." This ties your tests unnecessarily to the implementation details of the component it is testing. Because the functionality of the unconnected component (if it has any, that's a whole other can of worms) is completely unrelated to where it receives its props from. Maybe you want to turn that component into a purely presentational component in the future. If you test the connected component, you'll have to change all your tests to not inject a store anymore but pass the props in directly. If you tested the unconnected component, you don't have to do anything except blow away the connected-component-specific tests (more on that below).

I do agree that you should not directly test `mapState

danny-andrews

// Named replacements!
const formatString = (string, substitutions = {}) =>
  string.replace(
    /%{([^}]+)}/g,
    (match, id) => {
      return substitutions.hasOwnProperty(id) ? substitutions[id] : match
    }
  );

formatString('%{noun} is %{adjective}', {

danny-andrews

const removeTrailingSlash = path => path.replace(/\/$/, '');
const ensureTrailingSlash = path => `${removeTrailingSlash(path)}/`;

// Universal usage (no reliance on `document`)
const parseUrl = (href) => {
  const match = href.match(/^(https?:)\/\/(([^:/?#]*)(?::([0-9]+))?)([/]{0,1}[^?#]*)(\?[^#]*|)(#.*|)$/);
  return match && {
    protocol: match[1],
    host: match[2],
    hostname: match[3],

danny-andrews

// Well, shit
const verticalModifiers = ['top', 'middle', 'bottom'];
const horizontalModifiers = ['start', 'center', 'end'];
const modifiers = verticalModifiers.concat(horizontalModifiers);
const getPassthroughClassNames = () => modifiers
  .map(name => [name, props[name]])
  .filter(([, value]) => value)
  .map(([name, value]) => `${name}-${value}`)
  .map(getClass);

danny-andrews

I had a hard time finding a solution here that helped. But this tutorial is great and worked for me.

tl;dr

output: {
  filename: '[name].[chunkhash].js'
},
plugins: [
  // Order matters. 'vendor' must come before 'runtime'
 new webpack.optimize.CommonsChunkPlugin({

danny-andrews

<div id="root"></div>

danny-andrews

const LuckyNumber = ({ children }) => children({ number: Math.random() });

const App = () => (
  <LuckyNumber>
    {({number}) => <div>Your number is: {number}!</div>}
  </LuckyNumber>
);

danny-andrews

const LuckyNumber = ({ render }) => render({ number: Math.random() });

const App = () => (
  <LuckyNumber
    render={({number}) => <div>Your number is: {number}!</div>}
  />
);

danny-andrews

const withLuckyNumber = Component => (props) => <Component number={Math.random()} {...props} />;

const UnconnectedApp = ({ number }) => <div>Your number is: {number}!</div>;

const App = withLuckyNumber(UnconnectedApp);