sentry/tests/js/spec/components/contextPickerModal.spec.jsx

import React from 'react';

import * as OrgActions from 'app/actionCreators/organizations';
import {mountWithTheme} from 'sentry-test/enzyme';
import {ContextPickerModal} from 'app/components/contextPickerModal';

jest.mock('jquery');

describe('ContextPickerModal', function() {
  let project, project2, org, org2;
  const onFinish = jest.fn();

  beforeEach(function() {
    MockApiClient.clearMockResponses();
    onFinish.mockReset();

    project = TestStubs.Project();
    org = TestStubs.Organization({projects: [project]});
    project2 = TestStubs.Project({slug: 'project2'});
    org2 = TestStubs.Organization({
      slug: 'org2',
      id: '21',
    });
  });

  const getComponent = props => (
    <ContextPickerModal
      Header={() => <div />}
      Body="div"
      nextPath="/test/:orgId/path/"
      organizations={[org, org2]}
      needOrg
      latestContext={{}}
      onFinish={onFinish}
      {...props}
    />
  );

  it('renders with only org selector when no org in latest context', function() {
    const wrapper = mountWithTheme(getComponent());

    expect(wrapper.find('StyledSelectControl[name="organization"]').exists()).toBe(true);
    expect(wrapper.find('StyledSelectControl[name="project"]').exists()).toBe(false);
  });

  it('fetches org details and sets as active org if there is only one org', function() {
    const spy = jest.spyOn(OrgActions, 'fetchOrganizationDetails');
    const api = MockApiClient.addMockResponse({
      url: `/organizations/${org2.slug}/`,
    });
    const wrapper = mountWithTheme(
      getComponent({organizations: [org2]}),
      TestStubs.routerContext()
    );

    wrapper.update();
    expect(spy).toHaveBeenCalledWith('org2', {
      setActive: true,
      loadProjects: true,
    });
    expect(api).toHaveBeenCalled();
  });

  it('calls onFinish after latestContext is set, if project id is not needed, and only 1 org', function() {
    const spy = jest.spyOn(OrgActions, 'fetchOrganizationDetails');
    const api = MockApiClient.addMockResponse({
      url: `/organizations/${org2.slug}/`,
    });
    const wrapper = mountWithTheme(
      getComponent({organizations: [org2]}),
      TestStubs.routerContext()
    );

    expect(spy).toHaveBeenCalledWith('org2', {
      setActive: true,
      loadProjects: true,
    });
    expect(api).toHaveBeenCalled();

    wrapper.setProps({latestContext: {organization: org2}});
    wrapper.update();
    expect(onFinish).toHaveBeenCalledWith('/test/org2/path/');
  });

  it('calls onFinish if there is only 1 org and 1 project', function() {
    const spy = jest.spyOn(OrgActions, 'fetchOrganizationDetails');
    const api = MockApiClient.addMockResponse({
      url: `/organizations/${org2.slug}/`,
    });
    const wrapper = mountWithTheme(
      getComponent({
        needOrg: true,
        needProject: true,
        nextPath: '/test/:orgId/path/:projectId/',
        organizations: [org2],
      }),
      TestStubs.routerContext()
    );

    expect(spy).toHaveBeenCalledWith('org2', {
      setActive: true,
      loadProjects: true,
    });
    expect(api).toHaveBeenCalled();

    wrapper.setProps({latestContext: {organization: {...org2, projects: [project2]}}});
    wrapper.update();
    expect(onFinish).toHaveBeenCalledWith('/test/org2/path/project2/');
  });

  it('selects an org and calls `onFinish` with URL with organization slug', function() {
    const wrapper = mountWithTheme(getComponent({}), TestStubs.routerContext());
    const mock = MockApiClient.addMockResponse({
      url: `/organizations/${org.slug}/`,
    });

    wrapper.find('StyledSelectControl[name="organization"] input').simulate('focus');

    expect(wrapper.find('Select[name="organization"] .Select-menu')).toHaveLength(1);

    wrapper
      .find('Select[name="organization"] Option')
      .first()
      .simulate('mouseDown');
    expect(onFinish).toHaveBeenCalledWith('/test/org-slug/path/');
    // Is not called because we don't need to fetch org details
    expect(mock).not.toHaveBeenCalled();
  });

  it('renders with project selector and org selector selected when org is in latest context', function() {
    const wrapper = mountWithTheme(
      getComponent({
        needOrg: true,
        needProject: true,
        latestContext: {
          organization: {
            ...org,
            projects: [project, project2],
          },
        },
      })
    );

    // Default to org in latest context
    expect(wrapper.find('StyledSelectControl[name="organization"]').prop('value')).toBe(
      org.slug
    );
    expect(wrapper.find('StyledSelectControl[name="project"]').prop('options')).toEqual([
      {value: project.slug, label: project.slug},
      {value: project2.slug, label: project2.slug},
    ]);
  });

  it('can select org and project', async function() {
    const spy = jest.spyOn(OrgActions, 'fetchOrganizationDetails');
    const api = MockApiClient.addMockResponse({
      url: `/organizations/${org2.slug}/`,
    });
    const wrapper = mountWithTheme(
      getComponent({
        needOrg: true,
        needProject: true,
        nextPath: '/test/:orgId/path/:projectId/',
        organizations: [
          {
            ...org,
            projects: [project],
          },
          {
            ...org2,
            projects: [project2],
          },
        ],
      }),
      TestStubs.routerContext()
    );

    // Should not have anything selected
    expect(wrapper.find('StyledSelectControl[name="organization"]').prop('value')).toBe(
      ''
    );

    spy.mockClear();

    // Select org2
    wrapper
      .find('StyledSelectControl[name="organization"]')
      .simulate('change', {value: org2.slug, label: org2.slug});

    wrapper.find('StyledSelectControl[name="organization"] input').simulate('focus');
    wrapper
      .find('Select[name="organization"] Option')
      .at(1)
      .simulate('mouseDown');

    expect(spy).toHaveBeenCalledWith('org2', {
      setActive: true,
      loadProjects: true,
    });
    expect(api).toHaveBeenCalled();

    // org2 should have 2 projects, project2 and project3
    wrapper.setProps({
      latestContext: {organization: {...org2, projects: [project2, {slug: 'project3'}]}},
    });
    wrapper.update();

    expect(wrapper.find('StyledSelectControl[name="project"]').prop('options')).toEqual([
      {value: project2.slug, label: project2.slug},
      {value: 'project3', label: 'project3'},
    ]);

    // Select project3
    wrapper.find('StyledSelectControl[name="project"] input').simulate('focus');
    wrapper
      .find('Select[name="project"] Option')
      .at(1)
      .simulate('mouseDown');

    expect(onFinish).toHaveBeenCalledWith('/test/org2/path/project3/');
  });
});