Datasources: fixes async mount errors (#24579)

* 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
This commit is contained in:
Lukas Siatka
2020-05-14 14:25:52 +02:00
committed by GitHub
parent b4044e3e51
commit e11504dcd2
3 changed files with 50 additions and 22 deletions

View File

@@ -152,7 +152,7 @@ const DataSourceTypeCard: FC<DataSourceTypeCardProps> = props => {
</div> </div>
) )
} }
className={isPhantom && 'add-data-source-item--phantom'} className={isPhantom ? 'add-data-source-item--phantom' : ''}
onClick={onClick} onClick={onClick}
aria-label={selectors.pages.AddDataSource.dataSourcePlugins(plugin.name)} aria-label={selectors.pages.AddDataSource.dataSourcePlugins(plugin.name)}
/> />

View File

@@ -3,6 +3,7 @@ import { mount } from 'enzyme';
import { DataLinks } from './DataLinks'; import { DataLinks } from './DataLinks';
import { Button } from '@grafana/ui'; import { Button } from '@grafana/ui';
import { DataLink } from './DataLink'; import { DataLink } from './DataLink';
import { act } from 'react-dom/test-utils';
describe('DataLinks', () => { describe('DataLinks', () => {
let originalGetSelection: typeof window.getSelection; let originalGetSelection: typeof window.getSelection;
@@ -15,31 +16,43 @@ describe('DataLinks', () => {
window.getSelection = originalGetSelection; window.getSelection = originalGetSelection;
}); });
it('renders correctly when no fields', () => { it('renders correctly when no fields', async () => {
const wrapper = mount(<DataLinks onChange={() => {}} />); let wrapper: any;
await act(async () => {
wrapper = await mount(<DataLinks onChange={() => {}} />);
});
expect(wrapper.find(Button).length).toBe(1); expect(wrapper.find(Button).length).toBe(1);
expect(wrapper.find(Button).contains('Add')).toBeTruthy(); expect(wrapper.find(Button).contains('Add')).toBeTruthy();
expect(wrapper.find(DataLink).length).toBe(0); expect(wrapper.find(DataLink).length).toBe(0);
}); });
it('renders correctly when there are fields', () => { it('renders correctly when there are fields', async () => {
const wrapper = mount(<DataLinks value={testValue} onChange={() => {}} />); 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); expect(wrapper.find(DataLink).length).toBe(2);
}); });
it('adds new field', () => { it('adds new field', async () => {
const onChangeMock = jest.fn(); const onChangeMock = jest.fn();
const wrapper = mount(<DataLinks onChange={onChangeMock} />); let wrapper: any;
const addButton = wrapper.find(Button).filterWhere(button => button.contains('Add')); await act(async () => {
wrapper = await mount(<DataLinks onChange={onChangeMock} />);
});
const addButton = wrapper.find(Button).filterWhere((button: any) => button.contains('Add'));
addButton.simulate('click'); addButton.simulate('click');
expect(onChangeMock.mock.calls[0][0].length).toBe(1); expect(onChangeMock.mock.calls[0][0].length).toBe(1);
}); });
it('removes field', () => { it('removes field', async () => {
const onChangeMock = jest.fn(); 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 const removeButton = wrapper
.find(DataLink) .find(DataLink)
.at(0) .at(0)

View File

@@ -3,6 +3,7 @@ import { mount } from 'enzyme';
import { DerivedFields } from './DerivedFields'; import { DerivedFields } from './DerivedFields';
import { Button } from '@grafana/ui'; import { Button } from '@grafana/ui';
import { DerivedField } from './DerivedField'; import { DerivedField } from './DerivedField';
import { act } from 'react-dom/test-utils';
describe('DerivedFields', () => { describe('DerivedFields', () => {
let originalGetSelection: typeof window.getSelection; let originalGetSelection: typeof window.getSelection;
@@ -15,32 +16,46 @@ describe('DerivedFields', () => {
window.getSelection = originalGetSelection; window.getSelection = originalGetSelection;
}); });
it('renders correctly when no fields', () => { it('renders correctly when no fields', async () => {
const wrapper = mount(<DerivedFields onChange={() => {}} />); let wrapper: any;
await act(async () => {
wrapper = await mount(<DerivedFields onChange={() => {}} />);
});
expect(wrapper.find(Button).length).toBe(1); expect(wrapper.find(Button).length).toBe(1);
expect(wrapper.find(Button).contains('Add')).toBeTruthy(); expect(wrapper.find(Button).contains('Add')).toBeTruthy();
expect(wrapper.find(DerivedField).length).toBe(0); expect(wrapper.find(DerivedField).length).toBe(0);
}); });
it('renders correctly when there are fields', () => { it('renders correctly when there are fields', async () => {
const wrapper = mount(<DerivedFields value={testValue} onChange={() => {}} />); 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: any) => 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('Show example log message')).length).toBe(
1
);
expect(wrapper.find(DerivedField).length).toBe(2); expect(wrapper.find(DerivedField).length).toBe(2);
}); });
it('adds new field', () => { it('adds new field', async () => {
const onChangeMock = jest.fn(); const onChangeMock = jest.fn();
const wrapper = mount(<DerivedFields onChange={onChangeMock} />); let wrapper: any;
const addButton = wrapper.find(Button).filterWhere(button => button.contains('Add')); await act(async () => {
wrapper = await mount(<DerivedFields onChange={onChangeMock} />);
});
const addButton = wrapper.find(Button).filterWhere((button: any) => button.contains('Add'));
addButton.simulate('click'); addButton.simulate('click');
expect(onChangeMock.mock.calls[0][0].length).toBe(1); expect(onChangeMock.mock.calls[0][0].length).toBe(1);
}); });
it('removes field', () => { it('removes field', async () => {
const onChangeMock = jest.fn(); 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 const removeButton = wrapper
.find(DerivedField) .find(DerivedField)
.at(0) .at(0)