karmadata.ui/app/__tests__/KdSelectNumber__test/index.js

Karmadata UI library

import React from 'react';
import { mount } from 'enzyme';
import { FilterItem } from 'karmadata';
import renderer from 'react-test-renderer';
import moment from 'moment';

import KdSelectNumber from '../../components/KdSelectNumber';
import karmadataTheme from '../../themes/karmadata.scss';
import { chicklets, events, autoCompleteOptions } from '../__utils';

const defaultOptions = [
  {
    label: '1',
    operator: 'Eq',
    values: [1],
  },
  {
    label: '2',
    operator: 'Eq',
    values: [2],
  },
  {
    label: '3',
    operator: 'Eq',
    values: [4],
  },
];

const initialValues = [{
  operator: 'Eq',
  values: [20],
}];

const optionValues = {
  anyOption: { visible: true },
  equalToOption: { visible: true },
  noEqualToOption: { visible: true },
  greaterThanOption: { visible: true },
  greaterThanOrEqualToOption: { visible: true },
  lessThanOption: { visible: true },
  lessThanOrEqualToOption: { visible: true },
  betweenOption: { visible: true },
  noneOption: { visible: false },
  moreThanZeroOption: { visible: false },
  customOptions: defaultOptions,
};


const mainSelectorOptions = {
  visible: true,
  selected: 'anyOption',
  optionValues,
};



const props = {
  mainSelector: mainSelectorOptions,
  selectedValuesInitial: initialValues,
  autoComplete: autoCompleteOptions,
  events,
  chicklets,
};


describe('KdSelectNumber', () => {
  let mainSelector;
  let kdFilterModel;
  beforeEach(() => {
    mainSelector = mainSelectorOptions;
    kdFilterModel = FilterItem('KdDrugRxNorm', 'DrugScheduleDEA', 'Number');
  });
  describe('Setup', () => {
    it('renders correctly', () => {
      const tree = renderer.create(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          theme={karmadataTheme}
          {...props}
        />
      ).toJSON();
      expect(tree).toMatchSnapshot();
    });

    it('should set initialValues', () => {
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          theme={karmadataTheme}
          {...props}
        />);
      expect(wrapper.node.getChicklets().length).toBe(initialValues.length);
      expect(kdFilterModel.getSelected().length).toBe(initialValues.length);
    });
  });

  describe('ANY Option', () => {
    it('Visible', () => {
      mainSelector.optionValues.anyOption.visible = true;
      const customProps = { ...props, mainSelector };
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          theme={karmadataTheme}
          {...customProps}
        />);
      expect(wrapper.find(`option[value="defaultAny"]`).length).toBe(1);
    });

    it('On select clear values', () => {
      mainSelector.optionValues.anyOption.visible = true;
      const customProps = { ...props, mainSelector };
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          theme={karmadataTheme}
          {...customProps}
        />);
      expect(wrapper.node.getChicklets().length).toBe(initialValues.length);
      wrapper.find('select').simulate('change', { target: { value: 'defaultAny' } });
      expect(wrapper.node.getChicklets().length).toBe(0);
      expect(kdFilterModel.getSelected().length).toBe(0);
    });
  });

  describe('After Option - Gt', () => {
    it('Visible', () => {
      mainSelector.optionValues.greaterThanOption.visible = true;
      const customProps = { ...props, mainSelector };
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          theme={karmadataTheme}
          {...customProps}
        />);
      expect(wrapper.find('option[value="defaultGt"]').length).toBe(1);
    });

    it('Select shows input', () => {
      mainSelector.optionValues.greaterThanOption.visible = true;
      const customProps = { ...props, mainSelector, selectedValuesInitial: [] };
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          theme={karmadataTheme}
          {...customProps}
        />);
      expect(wrapper.find('option[value="defaultGt"]').length).toBe(1);
      expect(wrapper.find('.c-kd__input').length).toBe(0);
      wrapper.find('select').simulate('change', { target: { value: 'defaultGt' } });
      expect(wrapper.find('.c-kd__input').length).toBe(1);
    });

    it('Select and add value', () => {
      mainSelector.optionValues.greaterThanOption.visible = true;
      const customProps = { ...props, selectBehavior: 'AddChicklet', mainSelector };
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          theme={karmadataTheme}
          {...customProps}
        />);
      wrapper.find('select').simulate('change', { target: { value: 'defaultGt' } });
      const input = wrapper.find('.c-kd__input');
      input.simulate('change', { target: { value: '1' }});
      const kdChicklets = wrapper.node.getChicklets().map(v => v.value);
      expect(kdChicklets.includes('1')).toBe(true);
      expect(kdChicklets.length).toBe(initialValues.length + 1);
      expect(kdFilterModel.getSelected().includes(1)).toBe(true);
      expect(wrapper.find('.c-kd-item-selected-text').length).toBe(initialValues.length + 1);
      expect(wrapper.find('.c-kd-item-selected').length).toBe(initialValues.length + 1);
    });

    it('Remove Item', () => {
      const customProps = { ...props, selectBehavior: 'AddChicklet', mainSelector };
      const wrapper = mount(
        <KdSelectNumber
          kdFilterModel={kdFilterModel}
          theme={karmadataTheme}
          {...customProps}
        />);
      wrapper.find('.o-remove').simulate('click');
      expect(wrapper.node.getChicklets().length).toBe(initialValues.length - 1);
    });
  });
});