wix-style-react/src/Range/RangeInputWithLabelComposite/RangeInputWithLabelComposite.spec.js

wix-style-react

import React from 'react';
import Range from '../Range';
import Text from '../../Text';
import Input from '../../Input';
import rangeCompositeDriverFactory from './RangeWithLabelComposite.driver';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';
import Tooltip from '../../Tooltip/Tooltip';

describe('RangeInputWithLabelComposite', () => {
  const createRangeCompositeDriver = createDriverFactory(
    rangeCompositeDriverFactory,
  );

  it('should remove label wrapping when label not given', () => {
    const driver = createRangeCompositeDriver(
      <Range>
        <Input />
        <Input />
      </Range>,
    );
    expect(driver.hasLabel()).toBe(false);
    expect(driver.getNumberOfChildren()).toBe(2);
  });

  it('should render Label with 2 Inputs', () => {
    const driver = createRangeCompositeDriver(
      <Range>
        <Text tagName="label">myLabel</Text>
        <Input />
        <Input />
      </Range>,
    );
    expect(driver.hasLabel()).toBe(true);
    expect(driver.getLabel()).toBe('myLabel');
    expect(driver.hasInputs()).toBe(true);
  });

  describe('label attributes', () => {
    it('should FieldLabelAttributes not exists if all attributes empty or false', () => {
      const driver = createRangeCompositeDriver(
        <Range>
          <Text tagName="label">myLabel</Text>
          <Input />
          <Input />
        </Range>,
      );

      expect(driver.hasFieldLabelAttributes()).toBe(false);
    });

    it('should FieldLabelAttributes exists if required', () => {
      const driver = createRangeCompositeDriver(
        <Range required>
          <Text tagName="label">myLabel</Text>
          <Input />
          <Input />
        </Range>,
      );

      expect(driver.hasFieldLabelAttributes()).toBe(true);
    });

    it('should FieldLabelAttributes exists if info', () => {
      const driver = createRangeCompositeDriver(
        <Range info="info">
          <Text tagName="label">myLabel</Text>
          <Input />
          <Input />
        </Range>,
      );

      expect(driver.hasFieldLabelAttributes()).toBe(true);
    });

    it('should FieldLabelAttributes exists if tooltip', () => {
      const driver = createRangeCompositeDriver(
        <Range tooltip={<Tooltip content="content" children={false} />}>
          <Text tagName="label">myLabel</Text>
          <Input />
          <Input />
        </Range>,
      );

      expect(driver.hasFieldLabelAttributes()).toBe(true);
    });
  });
});