fleet/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsDropdown.tests.jsx

import React from 'react';
import { mount, shallow } from 'enzyme';
import nock from 'nock';
import { noop } from 'lodash';

import SelectTargetsDropdown from 'components/forms/fields/SelectTargetsDropdown';
import Test from 'test';

describe('SelectTargetsDropdown - component', () => {
  beforeEach(() => Test.Mocks.targetMock().persist());

  const defaultProps = {
    disabled: false,
    label: 'Select Targets',
    onFetchTargets: noop,
    onSelect: noop,
    selectedTargets: [],
    targetsCount: 0,
  };
  afterEach(() => nock.cleanAll());

  it('sets default state', () => {
    const DefaultComponent = mount(<SelectTargetsDropdown {...defaultProps} />);
    expect(DefaultComponent.state()).toEqual({
      isEmpty: false,
      isLoadingTargets: true,
      moreInfoTarget: null,
      query: '',
      targets: [],
    });
  });

  describe('rendering', () => {
    it('renders', () => {
      const DefaultComponent = mount(<SelectTargetsDropdown {...defaultProps} />);
      expect(DefaultComponent.length).toEqual(1, 'Expected component to render');
    });

    it('renders the SelectTargetsInput', () => {
      const DefaultComponent = mount(<SelectTargetsDropdown {...defaultProps} />);
      const SelectTargetsInput = DefaultComponent.find('SelectTargetsInput');

      expect(SelectTargetsInput.length).toEqual(1, 'Expected SelectTargetsInput to render');
    });

    it('renders a label when passed as a prop', () => {
      const DefaultComponent = mount(<SelectTargetsDropdown {...defaultProps} />);
      const noLabelProps = { ...defaultProps, label: undefined };
      const ComponentWithoutLabel = mount(<SelectTargetsDropdown {...noLabelProps} />);
      const Label = DefaultComponent.find('.target-select__label');
      const NoLabel = ComponentWithoutLabel.find('.target-select__label');

      expect(Label.length).toEqual(1, 'Expected label to render');
      expect(NoLabel.length).toEqual(0, 'Expected label to not render');
    });

    it('renders the error when passed as a prop', () => {
      const DefaultComponent = mount(<SelectTargetsDropdown {...defaultProps} />);
      const errorProps = { ...defaultProps, error: "You can't do this!" };
      const ErrorComponent = mount(<SelectTargetsDropdown {...errorProps} />);
      const Error = ErrorComponent.find('.target-select__label--error');
      const NoError = DefaultComponent.find('.target-select__label--error');

      expect(Error.length).toEqual(1, 'Expected error to render');
      expect(NoError.length).toEqual(0, 'Expected error to not render');
    });

    it('renders the target count', () => {
      const DefaultComponent = mount(<SelectTargetsDropdown {...defaultProps} />);
      const targetCountProps = { ...defaultProps, targetsCount: 10 };
      const TargetCountComponent = mount(<SelectTargetsDropdown {...targetCountProps} />);

      expect(DefaultComponent.text()).toContain('0 unique hosts');
      expect(TargetCountComponent.text()).toContain('10 unique hosts');
    });
  });

  describe('#fetchTargets', () => {
    const apiResponseWithTargets = {
      targets: {
        hosts: [],
        labels: [Test.Stubs.labelStub],
      },
    };
    const apiResponseWithoutTargets = {
      targets: {
        hosts: [],
        labels: [],
      },
    };
    const defaultSelectedTargets = { hosts: [], labels: [] };
    const defaultParams = {
      query: '',
      selected: defaultSelectedTargets,
    };
    const expectedApiClientResponseWithTargets = {
      targets: [{ ...Test.Stubs.labelStub, target_type: 'labels' }],
    };

    it('calls the api', () => {
      Test.Mocks.targetMock(defaultParams, apiResponseWithTargets);
      const Component = shallow(<SelectTargetsDropdown {...defaultProps} />);
      const node = Component.instance();

      nock.cleanAll();
      const request = Test.Mocks.targetMock(defaultParams, apiResponseWithTargets);

      expect.assertions(1);
      return node.fetchTargets()
        .then(() => {
          expect(request.isDone()).toEqual(true);
        })
        .catch((error) => {
          expect(error).toBe(undefined);
        });
    });

    it('calls the onFetchTargets prop', () => {
      const onFetchTargets = jest.fn();
      const props = { ...defaultProps, onFetchTargets };

      nock.cleanAll();
      Test.Mocks.targetMock(defaultParams, apiResponseWithTargets).persist();

      const Component = shallow(<SelectTargetsDropdown {...props} />);
      const node = Component.instance();


      expect.assertions(1);
      return node.fetchTargets()
        .then(() => {
          expect(onFetchTargets).toHaveBeenCalledWith('', expectedApiClientResponseWithTargets);
        });
    });

    it(
      'does not call the onFetchTargets prop when the component is not mounted',
      () => {
        const onFetchTargets = jest.fn();
        const props = { ...defaultProps, onFetchTargets };
        const Component = shallow(<SelectTargetsDropdown {...props} />);
        const node = Component.instance();

        node.mounted = false;

        expect(node.fetchTargets()).toEqual(false);
        expect(onFetchTargets).not.toHaveBeenCalled();
      },
    );

    it('sets state correctly when no targets are returned', () => {
      const Component = mount(<SelectTargetsDropdown {...defaultProps} />);
      const node = Component.instance();

      Test.Mocks.targetMock(defaultParams, apiResponseWithoutTargets);

      expect.assertions(3);
      return node.fetchTargets()
        .then(() => {
          expect(Component.state('isEmpty')).toEqual(true);
          expect(Component.state('targets')).toEqual([{}]);
          expect(Component.state('isLoadingTargets')).toEqual(false);
        });
    });

    it('returns the query', () => {
      const query = 'select * from users';
      const Component = mount(<SelectTargetsDropdown {...defaultProps} />);
      const node = Component.instance();

      Test.Mocks.targetMock({ ...defaultParams, query });

      expect.assertions(1);
      return node.fetchTargets(query)
        .then((q) => {
          expect(q).toEqual(query);
        });
    });
  });
});