Skip to content

Commit

Permalink
Recreate tooltip component and remove rc-tooltip (#97)
Browse files Browse the repository at this point in the history 
* Update package.json

Add react-popper.

Update jest and testing-library.

* Update button to a forwarding ref component.

* Make Input full width

* Update Text Props to inherit HtmlLabel Prop

* Recreate Tooltip component

* Remove dependency on rc-tooltip.

* Update yarn.lock

* Update Calendar to use Updated Tooltip Component

* Tests for tooltip.

* Fix failing tests.

* Fix all failing tests.

* Changes related to failing tests

* Fix failing tests.

* Tests for popover and portal

* Move Portal to a seperate directory.

* Increase Button test cases.

* Fix tests for pagination.

* Add tooltip animation.
  • Loading branch information
@anitnilay20
anitnilay20 authored Jun 13, 2021
1 parent fe3b3fd commit 129de2d
Show file tree
Hide file tree
Showing 41 changed files with 2,225 additions and 1,226 deletions.
100 changes: 61 additions & 39 deletions __tests__/components/AutoComplete/AutoComplete.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,8 +46,10 @@ function MultipleAutoComplete({ value, onChange }: { value: string[]; onChange:
}

describe('Single AutoComplete', () => {
it('should render a simple AutoComplete with selected value', () => {
autoComplete('diana', () => ({}));
it('should render a simple AutoComplete with selected value', async () => {
await act(async () => {
autoComplete('diana', () => ({}));
});

const input = document.querySelector('input');
expect(input.value).toBe('diana');
Expand All @@ -62,9 +64,11 @@ describe('Single AutoComplete', () => {
expect(document.querySelector('input').value).toBe('');
});

it('should render a clear button if value is selected', () => {
it('should render a clear button if value is selected', async () => {
let value = 'diana';
autoComplete('diana', (e) => (value = e));
await act(async () => {
autoComplete('diana', (e) => (value = e));
});
expect(document.querySelector('.seudo').innerHTML).toContain(
// Path for cross svg.
'M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z',
Expand All @@ -77,8 +81,10 @@ describe('Single AutoComplete', () => {
expect(value).toBeNull();
});

it('should not open popup if disabled', () => {
autoComplete('diana', jest.fn, jest.fn, true);
it('should not open popup if disabled', async () => {
await act(async () => {
autoComplete('diana', jest.fn, jest.fn, true);
});

act(() => {
fireEvent.click(document.querySelector('input'));
Expand All @@ -87,18 +93,20 @@ describe('Single AutoComplete', () => {
expect(document.querySelector('.list-item')).toBeNull();
});

it('should fetch data from a promise', () => {
render(
<AutoComplete<string>
data={() => new Promise<string[]>((resolve) => resolve(['bruce', 'diana', 'clark']))}
listDisplayProp={(e) => String(e)}
uniqueIdentifier={(e) => String(e)}
displayValue={(e) => String(e)}
value="diana"
onChange={jest.fn}
searchValue={(e) => e}
/>,
);
it('should fetch data from a promise', async () => {
await act(async () => {
render(
<AutoComplete<string>
data={() => new Promise<string[]>((resolve) => resolve(['bruce', 'diana', 'clark']))}
listDisplayProp={(e) => String(e)}
uniqueIdentifier={(e) => String(e)}
displayValue={(e) => String(e)}
value="diana"
onChange={jest.fn}
searchValue={(e) => e}
/>,
);
});

act(() => {
fireEvent.click(document.querySelector('input'));
Expand All @@ -110,9 +118,11 @@ describe('Single AutoComplete', () => {
.forEach((element, index) => expect(element.innerHTML).toContain(data[index]));
});

it('should update value on select', () => {
it('should update value on select', async () => {
let value = 'diana';
autoComplete(value, (e) => (value = e));
await act(async () => {
autoComplete(value, (e) => (value = e));
});

const input = document.querySelector('input');
act(() => {
Expand All @@ -124,13 +134,15 @@ describe('Single AutoComplete', () => {
expect(value).toBe('bruce');
});

it('should update list on search', () => {
it('should update list on search', async () => {
let search = '';
autoComplete(
'diana',
() => ({}),
(e) => (search = e),
);
await act(async () => {
autoComplete(
'diana',
() => ({}),
(e) => (search = e),
);
});

act(() => {
fireEvent.click(document.querySelector('input'));
Expand All @@ -146,9 +158,11 @@ describe('Single AutoComplete', () => {
expect(document.querySelector('.list-item:nth-child(2)').innerHTML).toContain('clark');
});

it('should navigate list with arrow keys and close popup with escape', () => {
it('should navigate list with arrow keys and close popup with escape', async () => {
let value = 'diana';
autoComplete(value, (e) => (value = e));
await act(async () => {
autoComplete(value, (e) => (value = e));
});

const input = document.querySelector('input');
act(() => {
Expand All @@ -168,12 +182,12 @@ describe('Single AutoComplete', () => {
fireEvent.keyDown(input, { key: 'Enter' });
});
expect(value).toBe('bruce');
expect(document.querySelector('.list-item')).toBeNull();
expect(document.querySelector('.sha-el-tooltip')).toHaveStyle(`opacity: 0;`);

act(() => {
fireEvent.keyDown(input, { key: 'ArrowDown' });
});
expect(document.querySelector('.list-item')).not.toBeNull();
expect(document.querySelector('.sha-el-tooltip')).toHaveStyle(`opacity: 1;`);

act(() => {
fireEvent.keyDown(document.querySelector('input'), { key: 'Enter' });
Expand All @@ -200,15 +214,17 @@ describe('Single AutoComplete', () => {
act(() => {
fireEvent.keyDown(document.querySelector('input'), { key: 'Escape' });
});
expect(document.querySelector('.list-item')).toBeNull();
expect(document.querySelector('.sha-el-tooltip')).toHaveStyle(`opacity: 0;`);
act(() => {
fireEvent.keyDown(document.querySelector('input'), { key: 'ArrowUp' });
});
expect(document.querySelector('.list-item')).not.toBeNull();
});

it('should not have any selected items on list if value is null', () => {
autoComplete(null, () => ({}));
it('should not have any selected items on list if value is null', async () => {
await act(async () => {
autoComplete(null, () => ({}));
});

act(() => {
fireEvent.click(document.querySelector('input'));
Expand All @@ -228,8 +244,10 @@ describe('Single AutoComplete', () => {
`);
});

it('should clear input on search', () => {
autoComplete(null, (e) => expect(e).toBe('bruce'));
it('should clear input on search', async () => {
await act(async () => {
autoComplete(null, (e) => expect(e).toBe('bruce'));
});
act(() => {
fireEvent.click(document.querySelector('input'));
});
Expand All @@ -248,8 +266,10 @@ describe('Single AutoComplete', () => {
});

describe('Multiple AutoComplete', () => {
it('should render autocomplete with multiple values', () => {
render(<MultipleAutoComplete value={['diana', 'clark']} onChange={() => ({})} />);
it('should render autocomplete with multiple values', async () => {
await act(async () => {
render(<MultipleAutoComplete value={['diana', 'clark']} onChange={() => ({})} />);
});

expect(document.querySelector('.seudo').innerHTML).toContain('clark');
expect(document.querySelector('.seudo').innerHTML).toContain('diana');
Expand All @@ -266,9 +286,11 @@ describe('Multiple AutoComplete', () => {
`);
});

it('should update value on select', () => {
it('should update value on select', async () => {
let value = [];
render(<MultipleAutoComplete value={['diana', 'clark']} onChange={(e) => (value = e)} />);
await act(async () => {
render(<MultipleAutoComplete value={['diana', 'clark']} onChange={(e) => (value = e)} />);
});

act(() => {
fireEvent.click(document.querySelector('input'));
Expand Down
36 changes: 36 additions & 0 deletions __tests__/components/Button/Button.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,4 +271,40 @@ describe('Button', () => {
background: rgba(0, 0, 0, 0.2);
`);
});

it('should render a custom anchor component', () => {
const fn = jest.fn();

act(() => {
ReactDOM.render(<Button link component={<a id="hello" />} onClick={fn} />, container);
});

expect(document.getElementById('hello')).toBeDefined();
});

it('should render a custom anchor component which is not clickable while loading', () => {
const fn = jest.fn();

act(() => {
ReactDOM.render(<Button link component={<a id="hello" />} loading onClick={fn} />, container);
});

const button = document.getElementById('hello');

button.click();
expect(fn).toBeCalledTimes(0);
});

it('should render a custom button component which is not clickable while loading', () => {
const fn = jest.fn();

act(() => {
ReactDOM.render(<Button component={<a id="hello" />} loading onClick={fn} />, container);
});

const button = document.getElementById('hello');

button.click();
expect(fn).toBeCalledTimes(0);
});
});
Loading

0 comments on commit 129de2d

Please sign in to comment.