saagie-ui/src/react/formsy/formMultiSteps/__tests__/FormMultiSteps.test.js

Saagie UI from Saagie Design System

import React from 'react';
import { mount } from 'enzyme';

import { Page } from '../../../core';
import { FormMultiStepsHeader } from '../FormMultiStepsHeader';
import { FieldInput } from '../../fieldInput/FieldInput';
import { FormMultiSteps } from '../FormMultiSteps';
import { FormMultiStepsItem } from '../FormMultiStepsItem';
import { FormMultiStepsFooter } from '../FormMultiStepsFooter';

describe('<FormMultiSteps>', () => {
  describe('Mounting & setup props', () => {
    it('Should mount without crashing', () => {
      const component = mount(
        <FormMultiSteps>
          My Form
        </FormMultiSteps>
      );

      expect(component.contains(Page)).toBe(true);
    });

    it('Should mount Fields without crashing', () => {
      const component = mount(
        <FormMultiSteps>
          <FormMultiStepsItem>
            <FieldInput name="field1" />
            <FieldInput name="field2" />
          </FormMultiStepsItem>
        </FormMultiSteps>
      );

      expect(component.find('input')).toHaveLength(2);
    });

    it('Should always have a <FormMultiStepsFooter>', () => {
      const component = mount(
        <FormMultiSteps>
          My Form
        </FormMultiSteps>
      );

      expect(component.find(FormMultiStepsFooter)).toHaveLength(1);
    });

    it('Should not have a <FormMultiStepsHeader> if no `title` provided', () => {
      const component = mount(
        <FormMultiSteps>
          My Form
        </FormMultiSteps>
      );

      expect(component.find(FormMultiStepsHeader)).toHaveLength(0);
    });

    it('Should have a <FormMultiStepsHeader> if `title` provided', () => {
      const component = mount(
        <FormMultiSteps title="Title">
          My Form
        </FormMultiSteps>
      );

      expect(component.find(FormMultiStepsHeader)).toHaveLength(1);
    });

    it('Should have a <FormMultiStepsHeader> if `isWizard` is true', () => {
      const component = mount(
        <FormMultiSteps isWizard>
          My Form
        </FormMultiSteps>
      );

      expect(component.find(FormMultiStepsHeader)).toHaveLength(1);
    });
  });

  describe('Wizard steps', () => {
    it('Should pass to next step if step is valid', (done) => {
      let isSubmitted = false;

      const component = mount(
        <FormMultiSteps isWizard onSubmit={() => { isSubmitted = true; }}>
          <FormMultiStepsItem>
            <FieldInput name="field1" value="value 1" />
          </FormMultiStepsItem>
          <FormMultiStepsItem>
            <FieldInput name="field2" value="value 2" />
          </FormMultiStepsItem>
        </FormMultiSteps>
      );

      // Wait for all validations
      setTimeout(() => {
        let nextButton;

        nextButton = component.find('.sui-a-button.as--primary').first();

        expect(nextButton.contains('Continue')).toBe(true);
        nextButton.simulate('click');
        expect(isSubmitted).toBe(false);

        nextButton = component.find('.sui-a-button.as--primary').first();

        expect(nextButton.contains('Save')).toBe(true);
        nextButton.simulate('click');
        expect(isSubmitted).toBe(true);

        done();
      });
    });

    it('Should not pass to next step if step is invalid', (done) => {
      let isSubmitted = false;

      const component = mount(
        <FormMultiSteps
          isWizard
          onSubmit={() => { isSubmitted = true; }}
        >
          <FormMultiStepsItem>
            <FieldInput name="fieldName1" required />
          </FormMultiStepsItem>
          <FormMultiStepsItem>
            <FieldInput name="fieldName2" required />
          </FormMultiStepsItem>
        </FormMultiSteps>
      );

      // Wait for all validations
      setTimeout(() => {
        let nextButton;

        nextButton = component.find('.sui-a-button.as--primary').first();

        expect(nextButton.contains('Continue')).toBe(true);
        nextButton.simulate('click');
        expect(isSubmitted).toBe(false);

        nextButton = component.find('.sui-a-button.as--primary').first();

        expect(nextButton.contains('Continue')).toBe(true);
        nextButton.simulate('click');
        expect(isSubmitted).toBe(false);

        done();
      });
    });
  });

  describe('Form submit', () => {
    it('Get field value after submit', () => {
      let values;

      const component = mount(
        <FormMultiSteps onSubmit={(data) => { values = data; }}>
          <FormMultiStepsItem>
            <FieldInput name="field1" value="value 1" />
          </FormMultiStepsItem>
          <FormMultiStepsItem>
            <FieldInput name="field2" value="value 2" />
          </FormMultiStepsItem>
        </FormMultiSteps>
      );

      expect(values).toBeUndefined();
      component.find('.sui-a-button.as--primary').simulate('click');
      component.find('.sui-a-button.as--primary').simulate('click');
      expect(values).toHaveProperty('field1', 'value 1');
      expect(values).toHaveProperty('field2', 'value 2');
    });
  });
});