import React from 'react';

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

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

      expect(wrapper.state('visible')).toBeTruthy();
      chaiExpect(wrapper).to.have.state('visible', true);
    });
  });

  describe('onDismiss()', () => {
    it('alters state', () => {
      const wrapper = shallow(<Alert />);
      wrapper.instance().onDismiss();
      chaiExpect(wrapper).to.have.state('visible', false);
    });
  });

  describe('render()', () => {
    describe('should be visible', () => {
      it('renders the alert', () => {
        const wrapper = mount(<Alert klass="foo-alert" />);
        expect(wrapper).toMatchSnapshot();
        expect(wrapper.find(Message).length).toEqual(1);
      });
    });

    describe('should be hidden', () => {
      const wrapper = mount(<Alert klass="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={[
            {klass: 'foo-alert-1', message: 'foo message 1'},
            {klass: 'foo-alert-2', message: 'foo message 2'},
          ]}
        />,
      );

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