test('Shows widget details', () => { const widgets = [{name: 'red', id: 1}, {name: 'blue', id: 2}] const wrapper = mount(<App />) wrapper.setState({widgets}) expect(wrapper.find('.widget-details').exists()).toBeFalsy() wrapper.instance().showDetails(widgets[0]) wrapper.mount() expect(wrapper.find('.widget-details').exists()).toBeTruthy() })
it("should add new todos to local storage", () => { const setItemMock = jest.fn(); global.localStorage.__proto__.getItem = jest.fn().mockReturnValue("[]"); global.localStorage.__proto__.setItem = setItemMock; const wrapper = mount(<TodoList />); wrapper.setState({ newTodo: "Novo todo" }); wrapper.instance().handleAddTodo(); expect(setItemMock).toHaveBeenLastCalledWith( "todos", JSON.stringify(["Novo todo"]) ); });
it('reset button should clear the form', () => { const component = mount(<ContactForm />) const mockEvent = { preventDefault: jest.fn() } spyOn(component.nodes[0], 'resetForm').and.callThrough() component.setState({...mockFormData}) component.find('button').at(1).simulate("click", mockEvent) expect(component.nodes[0].resetForm).toBeCalled() expect(component.state()).not.toEqual(mockFormData) })
it("should be able to add new todos", () => { const wrapper = mount( <Provider store={store}> <TodoListRedux /> </Provider> ); wrapper.find("TodoList").setState({ newTodo: "Novo todo" }); wrapper.find("button").simulate("click"); expect(store.getActions()).toContainEqual(TodosActions.addTodo("Novo todo")); });
describe('ListItemForm component', () => { const spy = jest.fn(); const wrapper = mount( <ListItemForm handleAddItem={spy} /> ); it('should have one input', () => { expect(wrapper.find('input').length).toEqual(1); }); it('should have one button', () => { expect(wrapper.find('.list-form__submit').length).toEqual(1); }); it('should start with blank formValue state', () => { expect(wrapper.state().formValue).toEqual(''); }); it('should clear the formValue on click', () => { wrapper.setState({ formValue: 'item Z' }); wrapper.find('.list-form__submit').simulate('click'); expect(spy).toHaveBeenCalled(); expect(wrapper.state('formValue')).toEqual(''); }); });
describe('components', () => { describe('Grid', () => { it('should render initial state', () => { const wrapper = mount(<Grid movies={[]} />); wrapper.setState({ movies: [] }); expect(wrapper.find('div').first().hasClass('result-section')).toBe(true); expect(wrapper.find('div').first().childAt(1).hasClass('grid')).toBe(true); }); it('should render when movies are fetched', () => { const wrapper = mount(<Grid movies={[{ Poster: 'https://m.media-amazon.com/images/M/MV5BMTk0MDUyMzA1OF5BMl5BanBnXkFtZTgwNzA4NzE1NTM@._V1_SX300.jpg', Title: 'Set It Up', Type: 'movie', Year: '2018', imdbID: 'tt5304992' }]} />); expect(wrapper.find('div').first().hasClass('result-section')).toBe(true); expect(wrapper.find('div').first().childAt(1).hasClass('grid')).toBe(true); expect(wrapper.find('div').first().childAt(1).childAt(0).hasClass('tile')).toBe(true); expect(wrapper.find('article').hasClass('tile__body')).toBe(true); expect(wrapper.find('header').hasClass('tile__header')).toBe(true); }); }); });
it('should call highlightKey, pressKey, releaseKey, and reset state (cancelHighlight)', () => { const highlightKeyPool = { available: [1, 2, 3, 4, 5], busy: { 0: { key: 1, transform: 'translate3d(15px, 0px, 0)', }, }, }; const wrapper = mount(<HighlightKey id={0} highlightKeyPool={highlightKeyPool} {...setupProps()} />); wrapper.setState({ fadingDown: true, keyReleased: true, }); expect(wrapper.state().fadingDown).toBe(true); expect(wrapper.state().keyReleased).toBe(true); expect(wrapper.props().highlightKey.mock.calls.length).toBe(0); expect(wrapper.props().pressDeleteKey.mock.calls.length).toBe(0); expect(wrapper.props().pressKey.mock.calls.length).toBe(0); expect(wrapper.props().releaseKey.mock.calls.length).toBe(0); wrapper.find('.highlight-key').simulate('mousedown'); expect(wrapper.props().highlightKey.mock.calls.length).toBe(1); expect(wrapper.props().pressDeleteKey.mock.calls.length).toBe(0); expect(wrapper.props().pressKey.mock.calls.length).toBe(1); expect(wrapper.props().releaseKey.mock.calls.length).toBe(1); expect(wrapper.state().fadingDown).toBe(false); expect(wrapper.state().keyReleased).toBe(false); });
expect(tree).toMatchSnapshot(); component.setState({ isLoading: true }); component.update(); tree = mountToJson(component);
const contentTextArea = component.find('textarea[name="content"]'); component.setState({ posts: fixturePosts }); titleInput.simulate('change', { target: { value: newPost.title }}); authorInput.simulate('change', { target: { value: newPost.author }}); component.setState({ posts: fixturePosts }); const post = component.find(Post); const item = component.find(Item).at(1);
describe('InputArea', () => { it('should contain an input and a button', () => { const wrapper = shallow(<InputArea/>); // console.log(wrapper.debug()); expect(wrapper.containsAllMatchingElements([ <Input/>, <Button>Add</Button>, ])).toEqual(true); }); it('should accept input', () => { const wrapper = mount(<InputArea/>); const input = wrapper.find('input'); input.simulate('change', { target: { value: 'Resin' } }); expect(input.prop('value')).toEqual('Resin'); }); it('should call onSubmit when Add is clicked', () => { const addItem = jest.fn(); const wrapper = mount(<InputArea onSubmit={addItem}/>); wrapper.setState({ text: 'Octoberfest' }); const addButton = wrapper.find('button'); addButton.simulate('click'); expect(addItem).toHaveBeenCalled(); expect(addItem).toHaveBeenCalledWith('Octoberfest'); }); });
); wrapper.setState({ selectedUser: 2, disabled: false,
describe('<Gravatar />', () => { it('contains an <Avatar/> component', function () { const wrapper = mount(<Gravatar/>); expect(wrapper.find(Avatar)).to.have.length(1); }); it('contains an <Email/> component', function () { const wrapper = mount(<Gravatar/>); expect(wrapper.find(Email)).to.have.length(1); }); it('should have an initial email state', function () { const wrapper = mount(<Gravatar/>); expect(wrapper.state().email).to.equal('someone@example.com'); }); it('should have an initial src state', function () { const wrapper = mount(<Gravatar/>); expect(wrapper.state().src).to.equal('http://placehold.it/200x200'); }); it('should update the src state on clicking fetch', function () { const wrapper = mount(<Gravatar/>); wrapper.setState({ email: 'hello@ifelse.io' }); wrapper.find('button').simulate('click'); expect(wrapper.state('email')).to.equal('hello@ifelse.io'); expect(wrapper.state('src')).to.equal(`http://gravatar.com/avatar/${md5('hello@ifelse.io')}?s=200`); }); });
it('should reset state, and call releaseKey to true when recieving transitionend events (handleTransitionEnd)', () => { const highlightKeyPool = { available: [1, 2, 3, 4, 5], busy: { 0: { key: 1, transform: 'translate3d(15px, 0px, 0)', }, }, }; const wrapper = mount(<HighlightKey id={0} highlightKeyPool={highlightKeyPool} {...setupProps()} />); wrapper.setState({ fadingDown: true, keyReleased: true, }); expect(wrapper.state().fadingDown).toBe(true); expect(wrapper.state().keyReleased).toBe(true); expect(wrapper.props().releaseKey.mock.calls.length).toBe(0); wrapper.find('.highlight-key').simulate('transitionend'); expect(wrapper.state().fadingDown).toBe(false); expect(wrapper.state().keyReleased).toBe(false); expect(wrapper.props().releaseKey.mock.calls.length).toBe(1); });
it('form submit should call handleFormSubmit function', () => { const component = mount(<ContactForm />) const mockEvent = { preventDefault: jest.fn() } spyOn(component.nodes[0], 'handleFormSubmit').and.callThrough() component.setState({...mockFormData}) component.find('form').at(0).simulate("submit", mockEvent) expect(component.nodes[0].handleFormSubmit).toBeCalled() expect(mockEvent.preventDefault).toBeCalled() })
it('should call highlightKey, pressDeleteKey, releaseKey, and reset state (cancelHighlight)', () => { const highlightKeyPool = { available: [1, 2, 3, 4, 5], busy: { 0: { key: 'delete', transform: 'translate3d(15px, 0px, 0)', }, }, }; const wrapper = mount(<HighlightKey id={0} highlightKeyPool={highlightKeyPool} {...setupProps()} />); wrapper.setState({ fadingDown: true, keyReleased: true, }); expect(wrapper.state().fadingDown).toBe(true); expect(wrapper.state().keyReleased).toBe(true); expect(wrapper.props().highlightKey.mock.calls.length).toBe(0); expect(wrapper.props().pressDeleteKey.mock.calls.length).toBe(0); expect(wrapper.props().pressKey.mock.calls.length).toBe(0); expect(wrapper.props().releaseKey.mock.calls.length).toBe(0); wrapper.find('.highlight-key').simulate('mousedown'); expect(wrapper.props().highlightKey.mock.calls.length).toBe(1); expect(wrapper.props().pressDeleteKey.mock.calls.length).toBe(1); expect(wrapper.props().pressKey.mock.calls.length).toBe(0); expect(wrapper.props().releaseKey.mock.calls.length).toBe(1); expect(wrapper.state().fadingDown).toBe(false); expect(wrapper.state().keyReleased).toBe(false); });