sminutoli

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

@mixin make-grid($name, $totalWidth, $gutter, $modules){
  $moduleWidth: ($totalWidth - ( $modules - 1 )*$gutter ) / $modules;

  @for $i from 1 through $modules {
    $finalWidth: $moduleWidth * $i + $gutter*($i - 1);

sminutoli

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

@mixin make-grid($name, $totalWidth, $gutter, $modules){
  $moduleWidth: ($totalWidth - ( $modules - 1 )*$gutter ) / $modules;

  @for $i from 1 through $modules {
    $finalWidth: $moduleWidth * $i + $gutter*($i - 1);

sminutoli

describe('Component Type and Props', function () {

    it('should be a stateless component', ()=>{
      expect(Login.prototype).toNotBeA(React.Component);
    });

    it('should have the correct props defined', ()=>{
      var propTypes = {
        username: PropTypes.string,
        password: PropTypes.string,

sminutoli

import React, { PropTypes } from 'react';

const Login = ({isValid, isWaiting, error, onSignIn, onChange, username, password})=> {
  return <div>Mr Boombastic</div>
};

Login.propTypes = {
  username: PropTypes.string,
  password: PropTypes.string,
  isValid: PropTypes.bool,

sminutoli

import React, { PropTypes } from 'react';

const Login = ({isValid, isWaiting, error, onSignIn, onChange, username, password})=> {
  return <div>
    <h4 className="login__title">Bienvenido a Warehouse</h4>
  </div>
};

Login.propTypes = {
  username: PropTypes.string,

sminutoli

const wrapper = shallow(<Login {...props}/>);

it('should have a title', ()=>{
  expect(wrapper.find('.login__title').length).toBe(1);
});
it('should render the correct title', ()=>{
  expect(wrapper.find('.login__title').prop('children')).toBe('Bienvenido a Warehouse');
});

sminutoli

<div className="login">
  <Row>
    <Col s={12} m={6} l={4} className="offset-l4 offset-m3">
        <h4 className="login__title center-align">Bienvenido a Warehouse</h4>
    </Col>
  </Row>
</div>

sminutoli

it('should have a user field', ()=>{
  expect(wrapper.find('.login__user[name="username"]').length).toBe(1);
});

it('should have a password field', ()=>{
  expect(wrapper.find('.login__password[name="password"][type="password"]').length).toBe(1);
});

it('should have a submit button', ()=>{
  expect(wrapper.find('.login__btn').length).toBe(1);

sminutoli

// fragmento del test

describe('Form with data', ()=>{
  const props = {
    username: 'theuser',
    password: 'thepa$$word'
  };
  const wrapper = shallow(<Login {...props}/>);
  it('should delegate the username to .login__user', ()=>{
    expect(wrapper.find('.login__user').prop('value')).toBe(props.username);

sminutoli

const props = {
  username: 'theuser',
  password: 'thepass',
  onChange: expect.createSpy(),
  onSignIn: expect.createSpy()
};
const wrapper = shallow(<Login {...props}/>);

it('should trigger onChange when any of the input changes', ()=>{
  wrapper.find('.login__user').simulate('change', { target:{ name: 'username', value: 'asd'} });