rexk / mocha-mix Goto Github PK

View Code? Open in Web Editor NEW

12.0 12.0 5.0 142 KB

An easy way to test and mock your React Components.

License: Other

JavaScript 98.46% Shell 1.54%

mocha-mix's People

Contributors

Stargazers

Watchers

Forkers

tunerex przeor koulmomo schottra

mocha-mix's Issues

Deprecate withContext

Mocking with withContext introduces extra complexity for mocha-mix with very few benefits.

If the Components needs to be tested with Context Object, recommend users to create ContextWrapperComponent for test components and use them with render method

Examples

Fluxible

import FluxibleComponent from 'fluxible-addons-react/FluxibleComponent';
import {createMockComponentContext} from 'fluxible/utils';
import assert from 'assert';
import MochaMix, { render } from 'mocha-mix';

// do all describe and before and after
...
var context = createMockComponentContext({ stores: [MockStore] });
var fluxibleContext = createMockComponentContext({ stores: [MockStore] });
var TestComponent = MochaMix.mix({ 
  require: './TestComponent'
});

var rendered = render(
  <FluxbileComponent context={context}>
    <TestComponent { ...props } />
  </FluxibleComponent>
);

assert.ok(rendered);
...

Above approach gives following advantages.

Total separation of concerns for testing components
No need to track down "right" ComponentClass instance
Explicit description of what is being tested.

Add API Documentation

Examples are great way to start the module, but extensive API documentation can help out more advanced use cases.

Update README.md

Key phrase to consider:

Mocking with javascript semantics.
server-side testing

Add Coverage

Use either Code Climate or Coveralls for code coverage report

TypeError: Cannot read property 'replace' of undefined

assertNotRender throws TypeError: Cannot read property 'replace' of undefined, if it is used with as follows:

MochaMix.assertNotRender(
  <DataGridHeader />,
  'datagrid-td datagrid-flex'
);

This is due to

/**
 * Assert component render to not matches the unexpectedHTML
 * @method assertNotRender
 *
 * @param {ReactComponent} Component class
 * @param {Object} props used to initialize the component
 * @param {String} unexpectedHTML can contain wildcards "+" or "*"
 *
 * @example
 * // The code bellow will raise an error if the component renders
 * // a div with any attributes and the string "something" inside any
 * // inner element.
 * assertNotRender(MyComponent, {}, "<div+>*something*</div>");
 **/
function assertNotRender(Component, props, unexpectedHTML) {
  if (isUndefined(unexpectedHTML)) {
    expectedHTML = props;                      // wrong value assignment
    props = undefined;
  }
  var expected = renderToString(Component, props);
  var regEx = buildRegEx(unexpectedHTML);

  assert(
    !regEx.test(expected),
    'Expected: ' + expected + ' to NOT match: ' + regEx
  );
}

module.exports = {
  renderMatch: assertRender,
  renderNotMatch: assertNotRender
};

Fix it ASAP.

Disabling `useCleanCache` causes other problems

useCleanCache: false causes modules to use old cached module when test are conducted across multiple files.

Upgrade React to 0.14

see https://facebook.github.io/react/blog/

Add CHANGELOG.md

Find a way to produce same output as `shallowRenderer.getRenderOutput()`

React shallowRenderer returns a output with following code.
https://github.com/facebook/react/blob/master/src/test/ReactTestUtils.js#L351-L357

Contribution in README.md

Write down, everyone who helped mocha-mix for 2.0

Pass down props to ReactStubElements

https://github.com/rexk/mocha-mix/blob/master/lib/mocha-mix.js#L56

following change will allow all simulated events to be captured through mock classes

function createStubReactClass(tagName, name) {
  return React.createClass({
    displayName: (name || '') + ' stub',
    render: function () {
      return React.createElement(tagName);
    }
  });
}

function createStubReactClass(tagName, name) {
  return React.createClass({
    displayName: (name || '') + ' stub',
    render: function () {
      return React.createElement(
         tagName, 
         this.props, 
         this.props.children
      );
    }
  });
}

add David to keep track of NPM dependency drift

@rexk
see: David

Improve mocking syntax

Current mocking syntax

import MochaMix from 'mocha-mix';

MochaMix.mix({
   require: './MyComponent',
   mocks: {
     SubComp1: './SubComp1',
     SubComp2: {
       require: './SubComp2',
       tagName: 'input'
     },
     lodash: {
       require: 'lodash',
       react: false,
       mock: function() { console.log('I am lodash mock') }
     }
   }
});

Proposal

import MochaMix, { generateStub } from 'mocha-mix';
import MyMockComponent from './my-mock';
MochaMix.mix({
   require: './MyComponent',
   mocks: {
     SubComp1: './SubComp1',
     SubComp2: {
       require: './SubComp2',
       tagName: 'input'
     },
     SubComp3: {
       require: './SubComp3',
       // provide simple stub generator component for further flexibility
       mock: generateStub('INPUT')
     },
     SubComp4: {
       require: './SubComp4',
       mock: MyMockComponent
     },
     lodash: {
       require: 'lodash',
       // no need to provide react flag
       // if mock variable is provided, it will override default stub component (div)
       mock: function() { console.log('I am lodash mock') }
     }
   }
});

Update REAME.md

UPDATE REAMD.md to explain context helper.

Add ability change tagName for stub react components

Right now, all react stubs are div elements.
Add an ability to change tags other than div so that it is easier to simulate events.

ES6 import statement support

In order to support, es6 module system, I have two possible interface in mind.

Import with option flag

var mix = MochaMix.mix({
  require: './MyComponent'
});

// equivalent to import MyComponent from './MyComponent';
var MyComponent = mix.import({ wildCard: true });

// equivalent to import * as MyWildCardComponent from './MyComponent';
var MyWildCardComponent = mix.import({ wildCard: true });

Separate import interface

var mix = MochaMix.mix({
  require: './MyComponent'
});

// equivalent to import MyComponent from './MyComponent';
var MyComponent = mix.import();

// equivalent to import * as MyWildCardComponent from './MyComponent';
var MyWildCardComponent = mix.importWildCard();