Skip to content

Commit

Permalink
Datasources: fixes async mount errors (#24579)
Browse files Browse the repository at this point in the history
* Chore: updates Elasticsearch DataLinks test async wrapper mount

* Chore: updates Loki DervidedFields test async wrapper mount

* Chore: fixes typecheck issues

* Chore: small strict-null fix
  • Loading branch information
Lukas Siatka committed May 14, 2020
1 parent b4044e3 commit e11504d
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 22 deletions.
2 changes: 1 addition & 1 deletion public/app/features/datasources/NewDataSourcePage.tsx
Expand Up @@ -152,7 +152,7 @@ const DataSourceTypeCard: FC<DataSourceTypeCardProps> = props => {
</div>
)
}
className={isPhantom && 'add-data-source-item--phantom'}
className={isPhantom ? 'add-data-source-item--phantom' : ''}
onClick={onClick}
aria-label={selectors.pages.AddDataSource.dataSourcePlugins(plugin.name)}
/>
Expand Down
Expand Up @@ -3,6 +3,7 @@ import { mount } from 'enzyme';
import { DataLinks } from './DataLinks';
import { Button } from '@grafana/ui';
import { DataLink } from './DataLink';
import { act } from 'react-dom/test-utils';

describe('DataLinks', () => {
let originalGetSelection: typeof window.getSelection;
Expand All @@ -15,31 +16,43 @@ describe('DataLinks', () => {
window.getSelection = originalGetSelection;
});

it('renders correctly when no fields', () => {
const wrapper = mount(<DataLinks onChange={() => {}} />);
it('renders correctly when no fields', async () => {
let wrapper: any;
await act(async () => {
wrapper = await mount(<DataLinks onChange={() => {}} />);
});
expect(wrapper.find(Button).length).toBe(1);
expect(wrapper.find(Button).contains('Add')).toBeTruthy();
expect(wrapper.find(DataLink).length).toBe(0);
});

it('renders correctly when there are fields', () => {
const wrapper = mount(<DataLinks value={testValue} onChange={() => {}} />);
it('renders correctly when there are fields', async () => {
let wrapper: any;
await act(async () => {
wrapper = await mount(<DataLinks value={testValue} onChange={() => {}} />);
});

expect(wrapper.find(Button).filterWhere(button => button.contains('Add')).length).toBe(1);
expect(wrapper.find(Button).filterWhere((button: any) => button.contains('Add')).length).toBe(1);
expect(wrapper.find(DataLink).length).toBe(2);
});

it('adds new field', () => {
it('adds new field', async () => {
const onChangeMock = jest.fn();
const wrapper = mount(<DataLinks onChange={onChangeMock} />);
const addButton = wrapper.find(Button).filterWhere(button => button.contains('Add'));
let wrapper: any;
await act(async () => {
wrapper = await mount(<DataLinks onChange={onChangeMock} />);
});
const addButton = wrapper.find(Button).filterWhere((button: any) => button.contains('Add'));
addButton.simulate('click');
expect(onChangeMock.mock.calls[0][0].length).toBe(1);
});

it('removes field', () => {
it('removes field', async () => {
const onChangeMock = jest.fn();
const wrapper = mount(<DataLinks value={testValue} onChange={onChangeMock} />);
let wrapper: any;
await act(async () => {
wrapper = await mount(<DataLinks value={testValue} onChange={onChangeMock} />);
});
const removeButton = wrapper
.find(DataLink)
.at(0)
Expand Down
Expand Up @@ -3,6 +3,7 @@ import { mount } from 'enzyme';
import { DerivedFields } from './DerivedFields';
import { Button } from '@grafana/ui';
import { DerivedField } from './DerivedField';
import { act } from 'react-dom/test-utils';

describe('DerivedFields', () => {
let originalGetSelection: typeof window.getSelection;
Expand All @@ -15,32 +16,46 @@ describe('DerivedFields', () => {
window.getSelection = originalGetSelection;
});

it('renders correctly when no fields', () => {
const wrapper = mount(<DerivedFields onChange={() => {}} />);
it('renders correctly when no fields', async () => {
let wrapper: any;
await act(async () => {
wrapper = await mount(<DerivedFields onChange={() => {}} />);
});
expect(wrapper.find(Button).length).toBe(1);
expect(wrapper.find(Button).contains('Add')).toBeTruthy();
expect(wrapper.find(DerivedField).length).toBe(0);
});

it('renders correctly when there are fields', () => {
const wrapper = mount(<DerivedFields value={testValue} onChange={() => {}} />);
it('renders correctly when there are fields', async () => {
let wrapper: any;
await act(async () => {
wrapper = await mount(<DerivedFields value={testValue} onChange={() => {}} />);
});

expect(wrapper.find(Button).filterWhere(button => button.contains('Add')).length).toBe(1);
expect(wrapper.find(Button).filterWhere(button => button.contains('Show example log message')).length).toBe(1);
expect(wrapper.find(Button).filterWhere((button: any) => button.contains('Add')).length).toBe(1);
expect(wrapper.find(Button).filterWhere((button: any) => button.contains('Show example log message')).length).toBe(
1
);
expect(wrapper.find(DerivedField).length).toBe(2);
});

it('adds new field', () => {
it('adds new field', async () => {
const onChangeMock = jest.fn();
const wrapper = mount(<DerivedFields onChange={onChangeMock} />);
const addButton = wrapper.find(Button).filterWhere(button => button.contains('Add'));
let wrapper: any;
await act(async () => {
wrapper = await mount(<DerivedFields onChange={onChangeMock} />);
});
const addButton = wrapper.find(Button).filterWhere((button: any) => button.contains('Add'));
addButton.simulate('click');
expect(onChangeMock.mock.calls[0][0].length).toBe(1);
});

it('removes field', () => {
it('removes field', async () => {
const onChangeMock = jest.fn();
const wrapper = mount(<DerivedFields value={testValue} onChange={onChangeMock} />);
let wrapper: any;
await act(async () => {
wrapper = await mount(<DerivedFields value={testValue} onChange={onChangeMock} />);
});
const removeButton = wrapper
.find(DerivedField)
.at(0)
Expand Down

0 comments on commit e11504d

Please sign in to comment.