Testes

src/App.js

@@ -1,4 +1,4 @@
-/* global process navigator document */
+/* global process navigator document Notification */
 import React, { Component } from 'react'
 import './styles/css/index.css'
 import Channel from './components/Channel'

src/tests/App.test.js

@@ -1,10 +1,38 @@
-/* global it document */
+/* global it document describe expect beforeEach */
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { shallow, configure } from 'enzyme'
+import renderer from 'react-test-renderer'
+import Adapter from 'enzyme-adapter-react-16'
 import App from '../App';
+import ChannelList from '../components/ChannelList';
+
+configure({ adapter: new Adapter() })
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(<App />, div);
   ReactDOM.unmountComponentAtNode(div);
 });
+
+describe('Snapshot', () => {
+  it('Initial', () => {
+    const renderedValue =  renderer.create(<App />).toJSON()
+    expect(renderedValue).toMatchSnapshot()
+  })
+})
+
+describe('Rendered', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallow(<App />)
+  })
+
+  it('should render chat after setting the username', () => {
+    wrapper.instance().draftUsername = 'oie'
+    wrapper.find('.form-choose-name form').at(0).simulate('submit', { preventDefault: () => {}, target: {} })
+    expect(wrapper.find('ChannelList').at(0).text()).toBe('<ChannelList />')
+    expect(wrapper.find('Channel').at(0).text()).toBe('<Channel />')
+  })
+})

src/tests/__snapshots__/App.test.js.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Snapshot Initial 1`] = `
+<div
+  className="App"
+>
+  <div
+    className="form-choose-name"
+  >
+    <div
+      className="form-choose-name__content"
+    >
+      <form
+        onSubmit={[Function]}
+      >
+        <label>
+          Escolha um apelido
+        </label>
+        <input
+          onChange={[Function]}
+          placeholder="ex: lucas.cruz"
+          type="text"
+          value={undefined}
+        />
+        <button
+          className="blue"
+        >
+          entrar
+        </button>
+      </form>
+    </div>
+  </div>
+</div>
+`;

src/tests/components/Channel.test.js

@@ -59,7 +59,7 @@ describe('Channel component', () => {
       })
 
       it('correct label', () => {
-        expect(wrapper.find('.channel__empty-state strong').get(0).props.children).toBe('Escolha ou crie um canal para conversar com outras pessoas!')
+        expect(wrapper.find('.channel__empty-state strong').at(0).text()).toBe('Escolha ou crie um canal para conversar com outras pessoas!')
       })
     })
 
@@ -71,7 +71,7 @@ describe('Channel component', () => {
       })
 
       it('correct label', () => {
-        expect(wrapper.find('.channel__section>span').get(0).props.children).toBe('nenhuma mensagem')
+        expect(wrapper.find('.channel__section>span').at(0).text()).toBe('nenhuma mensagem')
       })
     })
 

src/tests/components/ChannelList.test.js

@@ -57,8 +57,8 @@ describe('ChannelList component', () => {
     })
 
     it('correct badges', () => {
-      expect(wrapper.find('.badge').get(0).props.children).toBe(3)
-      expect(wrapper.find('.badge').get(1).props.children).toBe(10)
+      expect(wrapper.find('.badge').at(0).text()).toBe('3')
+      expect(wrapper.find('.badge').at(1).text()).toBe('10')
     })
   })