pokemon.trade/spec/javascript/misc/flash_alerts.test.js

import React from 'react';

import {Message} from 'semantic-ui-react';
import FlashAlerts, {Alert} from 'packs/frontend/components/misc/flash_alerts';

describe('<Alert />', () => {
  describe('constructor()', () => {
    it('sets initial state', () => {
      const wrapper = shallow(<Alert />);

      expect(wrapper.state('visible')).toBeTruthy();
    });
  });

  describe('onDismiss()', () => {
    it('alters state', () => {
      const wrapper = shallow(<Alert />);
      wrapper.instance().onDismiss();

      expect(wrapper.state('visible')).toBeFalsy();
    });
  });

  describe('render()', () => {
    describe('should be visible', () => {
      it('renders the alert', () => {
        const wrapper = mount(<Alert className="foo-alert" />);

        expect(wrapper).toMatchSnapshot();
        expect(wrapper.find(Message).length).toEqual(1);
      });
    });

    describe('should be hidden', () => {
      const wrapper = mount(<Alert className="foo-alert" />);
      wrapper.setState({visible: false});
      expect(wrapper).toMatchSnapshot();
      expect(wrapper.find(Message).length).toEqual(0);
    });
  });
});

describe('<FlashAlerts />', () => {
  describe('render()', () => {
    it('renders child alerts', () => {
      const wrapper = mount(
        <FlashAlerts
          alerts={[
            {className: 'foo-alert-1', message: 'foo message 1'},
            {className: 'foo-alert-2', message: 'foo message 2'},
          ]}
        />,
      );

      expect(wrapper.find(Alert).length).toEqual(2);
    });
  });
});