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

Saagie UI from Saagie Design System

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

import { FormMultiSteps } from '../FormMultiSteps';
import { FormMultiStepsItem } from '../FormMultiStepsItem';

describe('<FormMultiStepsItem>', () => {
  describe('Mounting & setup props', () => {
    it('Should mount <FormMultiStepsItem> without crashing', () => {
      const component = mount(
        <FormMultiSteps>
          <FormMultiStepsItem>
            Step 1 content
          </FormMultiStepsItem>
          <FormMultiStepsItem>
            Step 2 content
          </FormMultiStepsItem>
        </FormMultiSteps>
      );

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

    it('Should display step title if `name` provided and `isWizard` is true', () => {
      const component = mount(
        <FormMultiSteps isWizard>
          <FormMultiStepsItem name="Step 1">
            Step 1 content
          </FormMultiStepsItem>
        </FormMultiSteps>
      );

      expect(component.find('h3')).toHaveLength(1);
    });

    it('Should not display step title if `name` provided and `isWizard` is false', () => {
      const component = mount(
        <FormMultiSteps>
          <FormMultiStepsItem name="Step 1">
            Step 1 content
          </FormMultiStepsItem>
        </FormMultiSteps>
      );

      expect(component.find('form h3')).toHaveLength(0);
    });

    it('Should not display tabs if `isWizard` is false but only one <FormMultiStepsItem>', () => {
      const component = mount(
        <FormMultiSteps>
          <FormMultiStepsItem>
            Step 1 content
          </FormMultiStepsItem>
        </FormMultiSteps>
      );

      expect(component.find('.sui-m-tabs')).toHaveLength(0);
    });

    it('Should display tabs if `isWizard` is false and more than one <FormMultiStepsItem>', () => {
      const component = mount(
        <FormMultiSteps>
          <FormMultiStepsItem>
            Step 1 content
          </FormMultiStepsItem>
          <FormMultiStepsItem>
            Step 2 content
          </FormMultiStepsItem>
        </FormMultiSteps>
      );

      expect(component.find('.sui-m-tabs')).toHaveLength(1);
    });

    it('Should not display tabs if `isWizard` is true and more than one <FormMultiStepsItem>', () => {
      const component = mount(
        <FormMultiSteps isWizard>
          <FormMultiStepsItem>
            Step 1 content
          </FormMultiStepsItem>
          <FormMultiStepsItem>
            Step 2 content
          </FormMultiStepsItem>
        </FormMultiSteps>
      );

      expect(component.find('.sui-m-tabs')).toHaveLength(0);
    });

    it('Should display `name` in tabs', () => {
      const component = mount(
        <FormMultiSteps>
          <FormMultiStepsItem name="Step 1">
            Step 1 content
          </FormMultiStepsItem>
          <FormMultiStepsItem name="Step 2">
            Step 2 content
          </FormMultiStepsItem>
        </FormMultiSteps>
      );

      expect(component.find('.sui-m-tabs__item').at(0).contains('Step 1')).toBe(true);
      expect(component.find('.sui-m-tabs__item').at(1).contains('Step 2')).toBe(true);
    });
  });
});