sentry/tests/js/spec/views/settings/organizationSettingsForm.spec.jsx

import React from 'react';
import {mount} from 'enzyme';

import {saveOnBlurUndoMessage} from 'app/actionCreators/indicator';
import OrganizationSettingsForm from 'app/views/settings/organizationGeneralSettings/organizationSettingsForm';

jest.mock('jquery');
jest.mock('app/actionCreators/indicator');

describe('OrganizationSettingsForm', function() {
  const organization = TestStubs.Organization();
  let putMock;
  const onSave = jest.fn();

  beforeEach(function() {
    MockApiClient.clearMockResponses();
    onSave.mockReset();
  });

  it('can change a form field', function(done) {
    putMock = MockApiClient.addMockResponse({
      url: '/organizations/3/',
      method: 'PUT',
      data: {
        name: 'New Name',
      },
    });

    const wrapper = mount(
      <OrganizationSettingsForm
        location={TestStubs.location()}
        orgId={organization.id}
        access={new Set('org:admin')}
        initialData={TestStubs.Organization()}
        onSave={onSave}
      />,
      TestStubs.routerContext()
    );

    const input = wrapper.find('input[name="name"]');
    expect(input).toHaveLength(1);

    input.simulate('change', {target: {value: 'New Name'}});
    input.simulate('blur');

    expect(putMock).toHaveBeenCalledWith(
      '/organizations/3/',
      expect.objectContaining({
        method: 'PUT',
        data: {
          name: 'New Name',
        },
      })
    );

    saveOnBlurUndoMessage.mockImplementationOnce(async function(
      change,
      model,
      fieldName
    ) {
      try {
        expect(fieldName).toBe('name');
        expect(change.old).toBe('Organization Name');
        expect(change.new).toBe('New Name');

        // Test "undo" call undo directly
        expect(model.getValue('name')).toBe('New Name');
        model.undo();
        expect(model.getValue('name')).toBe('Organization Name');

        // `saveOnBlurUndoMessage` saves the new field, so reimplement this
        await model.saveField('name', 'Organization Name');

        // Initial data should be updated to original name
        expect(model.initialData.name).toBe('Organization Name');

        putMock.mockReset();
        // Blurring the name field again should NOT trigger a save
        input.simulate('blur');
        expect(putMock).not.toHaveBeenCalled();
        done();
      } catch (err) {
        done(err);
      }
    });
  });

  it('can change slug', function() {
    putMock = MockApiClient.addMockResponse({
      url: '/organizations/org-slug/',
      method: 'PUT',
    });

    const wrapper = mount(
      <OrganizationSettingsForm
        location={TestStubs.location()}
        orgId={organization.slug}
        access={new Set('org:admin')}
        initialData={TestStubs.Organization()}
        onSave={onSave}
      />,
      TestStubs.routerContext()
    );

    wrapper
      .find('input[name="slug"]')
      .simulate('change', {target: {value: 'NEW SLUG'}})
      .simulate('blur');

    expect(putMock).not.toHaveBeenCalled();

    wrapper.find('SaveButton').simulate('click');

    expect(putMock).toHaveBeenCalledWith(
      '/organizations/org-slug/',
      expect.objectContaining({
        data: {
          slug: 'new-slug',
        },
      })
    );
  });
});