@25sprout/react-starter/template/src/components/atoms/ToggleButton/__tests__/ToggleButton.stories.js

25sprout web starter with React

import React from 'react';
import { mount } from 'enzyme';
import { withKnobs, text } from '@storybook/addon-knobs';

import ToggleButton from 'components/atoms/ToggleButton';

import { storiesOf, action, describe, it, specs, snapshot, expect } from 'util/facade';

const stories = storiesOf('atoms/ToggleButton', module);

stories.addDecorator(withKnobs);

stories.add('__interactive', () => {
	const toggleButton = (
		<ToggleButton
			onOpen={action('open')}
			onClose={action('close')}
			openTitle={text('Open Title', 'Open')}
			closeTitle={text('Close Title', 'Close')}
		/>
	);

	return toggleButton;
});

stories.add('with default', () => {
	const toggleButton = <ToggleButton onOpen={action('open')} onClose={action('close')} />;

	specs(() =>
		describe('ToggleButton', () => {
			it('should have default value: Close', () => {
				const component = mount(toggleButton);
				expect(component.text()).toContain('Close');
			});

			it('should become Open after click', () => {
				const component = mount(toggleButton);
				component.find('button').simulate('click');
				expect(component.text()).toContain('Open');
			});
		}));

	// Create custom snapshot testing
	snapshot('should become Open after click', () => {
		const component = mount(toggleButton);

		expect(component).toMatchSnapshot();

		// manually trigger the callback
		component.find('button').simulate('click');
		// re-rendering would become Open
		expect(component).toMatchSnapshot();

		// manually trigger the callback
		component.find('button').simulate('click');
		// re-rendering would become Close
		expect(component).toMatchSnapshot();
	});

	return toggleButton;
});