EditFieldContainer-test.js

describe('EditFieldContainer', () => {
  let utils;

  describe('user has permission to edit', () => {
    beforeEach(() => {
      utils = render(
        <div data-testId="outside">
          <MockedProvider mocks={{}} addTypename={false}>
            <EditFieldContainer {...props} />
          </MockedProvider>
        </div>
      );
    });

    it('doesn\'t show input in initial state', () => {
      expect(utils.container.querySelector('input')).toBeFalsy();
    })

    it('shows edit field when click', () => {
      fireEvent.click(utils.getByTestId('edit-field-container-id'));
      expect(utils.container.querySelector('input')).toBeTruthy();
    });

    it('returns a ready-only when click outside', () => {
      fireEvent.click(utils.getByTestId('edit-field-container-id'));
      fireEvent.mouseDown(utils.getByTestId('outside'));

      expect(utils.container.querySelector('input')).toBeFalsy();
    });
  });

  describe('user has not permission to edit', () => {
    it('edit button is hidden', () => {
      const { container } = render(
        <MockedProvider mocks={{}} addTypename={false}>
          <EditFieldContainer {...props} permissions={{ edit: false }} />
        </MockedProvider>
      );
      expect(container.querySelector('[data-testid="edit-field-container-id"]')).toBeNull();
    });
  });
});