karmadata.ui/app/__tests__/KdSelectString__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 { ANY, ENTER, USER_SPECIFIED_OPTION } from '../../constants';

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

const c = v => console.log(`log >>>>`,v)

const defaultOptions = [{
  value: 'string1',
  label: 'string1',
  EntityType: null,
}, {
  value: 'string2',
  label: 'string2',
  EntityType: null,
}];

const initialValues = defaultOptions.slice(1);

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

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


describe('KdSelectString', () => {
  let mainSelector;
  let kdFilterModel;
  beforeEach(() => {
    mainSelector = mainSelectorOptions;
    kdFilterModel = FilterItem('KdDrugClassEPC', 'KdLabel', 'String');
  });

  describe('Setup', () => {
    it('renders correctly', () => {
      const tree = renderer.create(
        <KdSelectString
          kdFilterModel={kdFilterModel}
          theme={karmadataTheme}
          {...props}
        />
      ).toJSON();
      expect(tree).toMatchSnapshot();
    });

    it('should set initialValues', () => {
      const wrapper = mount(
        <KdSelectString
          kdFilterModel={kdFilterModel}
          theme={karmadataTheme}
          {...props}
          selectBehavior="AddChicklet"
        />);
      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(
        <KdSelectString
          kdFilterModel={kdFilterModel}
          theme={karmadataTheme}
          {...customProps}
        />);
      expect(wrapper.find(`option[value="${ANY}"]`).length).toBe(1);
    });

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

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

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

    it('Select and add value', () => {
      mainSelector.optionValues.userSpecifiedOption.visible = true;
      const customProps = { ...props, selectBehavior: 'AddChicklet', mainSelector };
      const wrapper = mount(
        <KdSelectString
          kdFilterModel={kdFilterModel}
          theme={karmadataTheme}
          {...customProps}
        />);
      wrapper.find('select').simulate('change', { target: { value: USER_SPECIFIED_OPTION } });
      const input = wrapper.find('.c-kd__input');
      input.simulate('keyUp', { keyCode: ENTER, target: { value: 'stringTest' }});
      const kdChicklets = wrapper.node.getChicklets().map(v => v.value);
      expect(kdChicklets.includes('stringTest')).toBe(true);
      expect(kdChicklets.length).toBe(initialValues.length + 1);
      expect(kdFilterModel.getSelected().includes('%stringTest%')).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(
        <KdSelectString
          kdFilterModel={kdFilterModel}
          theme={karmadataTheme}
          {...customProps}
        />);
      wrapper.find('.o-remove').simulate('click');
      expect(wrapper.node.getChicklets().length).toBe(initialValues.length - 1);
    });
  })
});