website/src/utils/react.test.tsx
import { Component, PureComponent } from 'react';
import { render } from 'enzyme';
import { highlight, wrapComponentName, Counter } from './react';
describe(highlight, () => {
const h = (...args: Parameters<typeof highlight>) => render(<p>{highlight(...args)}</p>);
test('should wrap search terms with <mark>', () => {
expect(h('Hello world', 'hello').find('mark')).toHaveLength(1);
expect(h('Hello world', 'hello').find('mark').text()).toEqual('Hello');
// Case insensitivity
expect(h('Hello heLLo world', 'hello').find('mark')).toHaveLength(2);
// Part of another word
expect(h('Bar barring barred barn baaa', 'bar').find('mark')).toHaveLength(4);
// No match
expect(h('Hello world', 'match').find('mark')).toHaveLength(0);
expect(h('Hello world', '').find('mark')).toHaveLength(0);
});
test('should wrap each of the multiple search terms with <mark>', () => {
const shakespeare =
'Some are born great, some achieve greatness, and some have greatness thrust upon them.';
expect(h(shakespeare, []).find('mark')).toHaveLength(0);
expect(h(shakespeare, ['some']).find('mark')).toHaveLength(3);
expect(h(shakespeare, ['some', 'born']).find('mark')).toHaveLength(4);
expect(h(shakespeare, ['some', 'born', 'great']).find('mark')).toHaveLength(7);
});
});
describe('wrapComponentName()', () => {
/* eslint-disable react/prefer-stateless-function */
class TestComponent extends Component {}
class TestPureComponent extends PureComponent {}
class TestComponentWithDisplayName extends Component {
static displayName = 'TestComponentName';
}
const FunctionalComponent = () => null;
const FunctionalComponentWithDisplayName = () => null;
FunctionalComponentWithDisplayName.displayName = 'FunctionalComponentDisplayName';
test('should infer component name from provided component', () => {
expect(wrapComponentName(TestComponent, 'wrapper')).toEqual('wrapper(TestComponent)');
expect(wrapComponentName(TestPureComponent, 'wrapper')).toEqual('wrapper(TestPureComponent)');
expect(wrapComponentName(TestComponentWithDisplayName, 'wrapper')).toEqual(
'wrapper(TestComponentName)',
);
expect(wrapComponentName(FunctionalComponent, 'wrapper')).toEqual(
'wrapper(FunctionalComponent)',
);
expect(wrapComponentName(FunctionalComponentWithDisplayName, 'wrapper')).toEqual(
'wrapper(FunctionalComponentDisplayName)',
);
});
});
describe('Counter', () => {
test('#index() should increment itself when called', () => {
const counter = new Counter();
expect(counter.index()).toEqual(0);
expect(counter.index()).toEqual(1);
expect(counter.index()).toEqual(2);
expect(counter.index()).toEqual(3);
expect(counter.index()).toEqual(4);
});
test('#matches() should return true if the provided index matches', () => {
const counter = new Counter();
expect(counter.matches(0)).toBe(true);
expect(counter.matches(0)).toBe(false);
expect(counter.matches(2)).toBe(true);
expect(counter.matches(2)).toBe(false);
expect(counter.matches(4)).toBe(true);
expect(counter.matches(5)).toBe(true);
});
});