accounts-frontend/packages/app/pages/rules/RulesPage.test.tsx

import React from 'react';
import sinon from 'sinon';
import expect from 'app/test/unexpected';
import { render, fireEvent, createEvent, screen } from '@testing-library/react';
import { TestContextProvider } from 'app/shell';

import RulesPage from './RulesPage';

describe('RulesPage', () => {
  describe('#onRuleClick()', () => {
    const id = 'rule-1-2';
    const pathname = '/foo';
    const search = '?bar';
    let page: HTMLElement;
    let replace: Function;

    beforeEach(() => {
      replace = sinon.stub().named('history.replace');

      ({ container: page } = render(
        <TestContextProvider>
          <RulesPage
            location={{ pathname, search } as any}
            history={{ replace }}
          />
        </TestContextProvider>,
      ));
    });

    it('should update location on rule click', () => {
      const expectedUrl = `/foo?bar#${id}`;

      fireEvent.click(page.querySelector(`#${id}`) as HTMLElement);

      expect(replace, 'to have a call satisfying', [expectedUrl]);
    });

    it('should not update location if link was clicked', () => {
      fireEvent.click(screen.getByText('/register', { exact: false }));

      expect(replace, 'was not called');
    });

    it('should not update location if defaultPrevented', () => {
      const el = page.querySelector(`#${id}`) as HTMLElement;
      const event = createEvent.click(el);

      event.preventDefault();

      fireEvent(el, event);

      expect(replace, 'was not called');
    });

    it('should not update location if no id', () => {
      const el = page.querySelector(`#${id}`) as HTMLElement;

      el.id = '';

      fireEvent.click(el);

      expect(replace, 'was not called');
    });
  });
});