fix(example: Test warnings (react-boilerplate#923)

* Fix test invalid prop warning.
Resolved by rewiring Banner to be a string instead of object.
It is an object becaue the test webpack does not use the image loader.

* Fix test propType warning by passing onChange.
This seems to be a debatable issues (1118) with react which requires an onChange if providing a value.

* Fix test warnings by passing required props.

* Increate test coverage of the Img component.

* Update src proptype to stop test warnings

app/components/A/tests/index.test.js

@@ -8,29 +8,45 @@ import expect from 'expect';
 import { shallow } from 'enzyme';
 import React from 'react';
 
+const href = 'http://mxstbr.com/';
+const children = (<h1>Test</h1>);
+const renderComponent = (props = {}) => shallow(
+  <A href={href} {...props}>
+    {children}
+  </A>
+);
+
 describe('<A />', () => {
-  it('should render its children', () => {
-    const children = (<h1>Test</h1>);
-    const renderedComponent = shallow(
-      <A>
-        {children}
-      </A>
-    );
+  it('should render an <a> tag', () => {
+    const renderedComponent = renderComponent();
+    expect(renderedComponent.type()).toEqual('a');
+  });
+
+  it('should have an href attribute', () => {
+    const renderedComponent = renderComponent();
+    expect(renderedComponent.prop('href')).toEqual(href);
+  });
+
+  it('should have children', () => {
+    const renderedComponent = renderComponent();
     expect(renderedComponent.contains(children)).toEqual(true);
   });
 
-  it('should adopt the className', () => {
-    const renderedComponent = shallow(<A className="test" />);
-    expect(renderedComponent.find('a').hasClass('test')).toEqual(true);
+  it('should adopt a className attribute', () => {
+    const className = 'test';
+    const renderedComponent = renderComponent({ className });
+    expect(renderedComponent.find('a').hasClass(className)).toEqual(true);
   });
 
-  it('should adopt the href', () => {
-    const renderedComponent = shallow(<A href="mxstbr.com" />);
-    expect(renderedComponent.prop('href')).toEqual('mxstbr.com');
+  it('should adopt a target attribute', () => {
+    const target = '_blank';
+    const renderedComponent = renderComponent({ target });
+    expect(renderedComponent.prop('target')).toEqual(target);
   });
 
-  it('should adopt the target', () => {
-    const renderedComponent = shallow(<A target="_blank" />);
-    expect(renderedComponent.prop('target')).toEqual('_blank');
+  it('should adopt a type attribute', () => {
+    const type = 'text/html';
+    const renderedComponent = renderComponent({ type });
+    expect(renderedComponent.prop('type')).toEqual(type);
   });
 });

app/components/Button/tests/index.test.js

@@ -8,37 +8,53 @@ import expect from 'expect';
 import { shallow } from 'enzyme';
 import React from 'react';
 
-describe('<Button />', () => {
-  it('should render its children', () => {
-    const children = (<h1>Test</h1>);
-    const renderedComponent = shallow(
-      <Button href="http://mxstbr.com">
-        {children}
-      </Button>
-    );
-    expect(renderedComponent.contains(children)).toEqual(true);
-  });
-
-  it('should adopt the className', () => {
-    const renderedComponent = shallow(<Button className="test" />);
-    expect(renderedComponent.find('a').hasClass('test')).toEqual(true);
-  });
+const handleRoute = () => {};
+const href = 'http://mxstbr.com';
+const children = (<h1>Test</h1>);
+const renderComponent = (props = {}) => shallow(
+  <Button href={href} {...props}>
+    {children}
+  </Button>
+);
 
+describe('<Button />', () => {
   it('should render an <a> tag if no route is specified', () => {
-    const renderedComponent = shallow(<Button href="http://mxstbr.com" />);
+    const renderedComponent = renderComponent({ href });
     expect(renderedComponent.find('a').length).toEqual(1);
   });
 
   it('should render a button to change route if the handleRoute prop is specified', () => {
-    const renderedComponent = shallow(<Button handleRoute={function handler() {}} />);
-
+    const renderedComponent = renderComponent({ handleRoute });
     expect(renderedComponent.find('button').length).toEqual(1);
   });
 
+  it('should have children', () => {
+    const renderedComponent = renderComponent();
+    expect(renderedComponent.contains(children)).toEqual(true);
+  });
+
   it('should handle click events', () => {
     const onClickSpy = expect.createSpy();
-    const renderedComponent = shallow(<Button onClick={onClickSpy} />);
+    const renderedComponent = renderComponent({ onClick: onClickSpy });
     renderedComponent.find('a').simulate('click');
     expect(onClickSpy).toHaveBeenCalled();
   });
+
+  it('should adopt a className attribute', () => {
+    const className = 'test';
+    const renderedComponent = renderComponent({ className });
+    expect(renderedComponent.find('a').hasClass(className)).toEqual(true);
+  });
+
+  it('should not adopt a type attribute when rendering an <a> tag', () => {
+    const type = 'text/html';
+    const renderedComponent = renderComponent({ href, type });
+    expect(renderedComponent.prop('type')).toNotExist();
+  });
+
+  it('should not adopt a type attribute when rendering a button', () => {
+    const type = 'submit';
+    const renderedComponent = renderComponent({ handleRoute, type });
+    expect(renderedComponent.prop('type')).toNotExist();
+  });
 });

app/components/Img/index.js

@@ -15,7 +15,10 @@ function Img(props) {
 
 // We require the use of src and alt, only enforced by react in dev mode
 Img.propTypes = {
-  src: PropTypes.string.isRequired,
+  src: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]).isRequired,
   alt: PropTypes.string.isRequired,
   className: PropTypes.string,
 };

app/components/Img/tests/index.test.js

@@ -4,14 +4,37 @@ import { expect } from 'chai';
 import { shallow } from 'enzyme';
 import React from 'react';
 
+const src = 'test.png';
+const alt = 'test';
+const renderComponent = (props = {}) => shallow(
+  <Img src={src} alt={alt} {...props} />
+);
+
 describe('<Img />', () => {
   it('should render an <img> tag', () => {
-    const renderedComponent = shallow(<Img src="test.png" alt="test" />);
+    const renderedComponent = renderComponent();
     expect(renderedComponent).to.have.tagName('img');
   });
 
+  it('should have an src attribute', () => {
+    const renderedComponent = renderComponent();
+    expect(renderedComponent).to.have.attr('src', src);
+  });
+
   it('should have an alt attribute', () => {
-    const renderedComponent = shallow(<Img src="test.png" alt="test" />);
-    expect(renderedComponent).to.have.attr('alt', 'test');
+    const renderedComponent = renderComponent();
+    expect(renderedComponent).to.have.attr('alt', alt);
+  });
+
+  it('should adopt a className attribute', () => {
+    const className = 'test';
+    const renderedComponent = renderComponent({ className });
+    expect(renderedComponent).to.have.attr('class', className);
+  });
+
+  it('should not adopt a srcset attribute', () => {
+    const srcset = 'test-HD.png 2x';
+    const renderedComponent = renderComponent({ srcset });
+    expect(renderedComponent).to.not.have.attr('srcset', srcset);
   });
 });

app/containers/App/tests/index.test.js

@@ -1,10 +1,10 @@
+import App from '../index';
+import Footer from 'components/Footer';
+
 import expect from 'expect';
 import { shallow } from 'enzyme';
 import React from 'react';
 
-import App from '../index';
-import Footer from 'components/Footer';
-
 describe('<App />', () => {
   it('should render the logo', () => {
     const renderedComponent = shallow(

app/containers/HomePage/tests/index.test.js

@@ -45,11 +45,11 @@ describe('<HomePage />', () => {
       <IntlProvider locale="en">
         <HomePage
           username="Not Empty"
+          onChangeUsername={() => {}}
           onSubmitForm={submitSpy}
         />
       </IntlProvider>
     );
-
     expect(submitSpy).toHaveBeenCalled();
   });