Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Lens] remove react warnings #59574

Merged
merged 4 commits into from
Mar 10, 2020
Merged

[Lens] remove react warnings #59574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
159bcf5
test: remove waitForPromises with async
mbondyra Mar 6, 2020
9a39397
fix: remove warnings from lens tests
mbondyra Mar 6, 2020
c590517
feat: remove the last waitForNextTick
mbondyra Mar 9, 2020
d737604
Merge branch 'master' into IS-37972_remove-react-warnings
elasticmachine Mar 9, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 67 additions & 68 deletions x-pack/legacy/plugins/lens/public/app_plugin/app.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,6 @@ jest

const { TopNavMenu } = npStart.plugins.navigation.ui;

const waitForPromises = async () =>
act(async () => {
await new Promise(resolve => setTimeout(resolve));
});

function createMockFrame(): jest.Mocked<EditorFrameInstance> {
return {
mount: jest.fn((el, props) => {}),
Expand Down Expand Up @@ -86,6 +81,7 @@ function createMockFilterManager() {
describe('Lens App', () => {
let frame: jest.Mocked<EditorFrameInstance>;
let core: ReturnType<typeof coreMock['createStart']>;
let instance: ReactWrapper;

function makeDefaultArgs(): jest.Mocked<{
editorFrame: EditorFrameInstance;
Expand Down Expand Up @@ -205,7 +201,7 @@ describe('Lens App', () => {

it('sets breadcrumbs when the document title changes', async () => {
const defaultArgs = makeDefaultArgs();
const instance = mount(<App {...defaultArgs} />);
instance = mount(<App {...defaultArgs} />);

expect(core.chrome.setBreadcrumbs).toHaveBeenCalledWith([
{ text: 'Visualize', href: '/testbasepath/app/kibana#/visualize' },
Expand All @@ -221,10 +217,9 @@ describe('Lens App', () => {
datasourceMetaData: { filterableIndexPatterns: [{ id: '1', title: 'saved' }] },
},
});

instance.setProps({ docId: '1234' });

await waitForPromises();
await act(async () => {
instance.setProps({ docId: '1234' });
});

expect(defaultArgs.core.chrome.setBreadcrumbs).toHaveBeenCalledWith([
{ text: 'Visualize', href: '/testbasepath/app/kibana#/visualize' },
Expand Down Expand Up @@ -254,10 +249,11 @@ describe('Lens App', () => {
},
});

const instance = mount(<App {...args} />);
instance = mount(<App {...args} />);

instance.setProps({ docId: '1234' });
await waitForPromises();
await act(async () => {
instance.setProps({ docId: '1234' });
});

expect(args.docStorage.load).toHaveBeenCalledWith('1234');
expect(args.data.indexPatterns.get).toHaveBeenCalledWith('1');
Expand Down Expand Up @@ -292,17 +288,20 @@ describe('Lens App', () => {
args.editorFrame = frame;
(args.docStorage.load as jest.Mock).mockResolvedValue({ id: '1234' });

const instance = mount(<App {...args} />);
instance = mount(<App {...args} />);
await act(async () => {
instance.setProps({ docId: '1234' });
});

instance.setProps({ docId: '1234' });
await waitForPromises();
instance.setProps({ docId: '1234' });
await waitForPromises();
await act(async () => {
instance.setProps({ docId: '1234' });
});

expect(args.docStorage.load).toHaveBeenCalledTimes(1);

instance.setProps({ docId: '9876' });
await waitForPromises();
await act(async () => {
instance.setProps({ docId: '9876' });
});

expect(args.docStorage.load).toHaveBeenCalledTimes(2);
});
Expand All @@ -312,10 +311,11 @@ describe('Lens App', () => {
args.editorFrame = frame;
(args.docStorage.load as jest.Mock).mockRejectedValue('failed to load');

const instance = mount(<App {...args} />);
instance = mount(<App {...args} />);

instance.setProps({ docId: '1234' });
await waitForPromises();
await act(async () => {
instance.setProps({ docId: '1234' });
});

expect(args.docStorage.load).toHaveBeenCalledWith('1234');
expect(args.core.notifications.toasts.addDanger).toHaveBeenCalled();
Expand Down Expand Up @@ -353,22 +353,20 @@ describe('Lens App', () => {
} as jest.ResolvedValue<Document>);
});

function getButton(instance: ReactWrapper): TopNavMenuData {
return (instance
function getButton(inst: ReactWrapper): TopNavMenuData {
return (inst
.find('[data-test-subj="lnsApp_topNav"]')
.prop('config') as TopNavMenuData[]).find(
button => button.testId === 'lnsApp_saveButton'
)!;
}

function testSave(instance: ReactWrapper, saveProps: SaveProps) {
act(() => {
getButton(instance).run(instance.getDOMNode());
});
async function testSave(inst: ReactWrapper, saveProps: SaveProps) {
await getButton(inst).run(inst.getDOMNode());

instance.update();
inst.update();

const handler = instance.findWhere(el => el.prop('onSave')).prop('onSave') as (
const handler = inst.findWhere(el => el.prop('onSave')).prop('onSave') as (
p: unknown
) => void;
handler(saveProps);
Expand Down Expand Up @@ -406,9 +404,9 @@ describe('Lens App', () => {
expression: 'kibana 2',
}));

const instance = mount(<App {...args} />);

await waitForPromises();
await act(async () => {
instance = mount(<App {...args} />);
});

if (initialDocId) {
expect(args.docStorage.load).toHaveBeenCalledTimes(1);
Expand All @@ -427,9 +425,10 @@ describe('Lens App', () => {
instance.update();

expect(getButton(instance).disableButton).toEqual(false);
testSave(instance, saveProps);

await waitForPromises();
await act(async () => {
testSave(instance, saveProps);
});

return { args, instance };
}
Expand All @@ -445,7 +444,7 @@ describe('Lens App', () => {
};
args.editorFrame = frame;

const instance = mount(<App {...args} />);
instance = mount(<App {...args} />);

expect(getButton(instance).disableButton).toEqual(true);

Expand All @@ -469,7 +468,7 @@ describe('Lens App', () => {
} as jest.ResolvedValue<Document>);
args.editorFrame = frame;

const instance = mount(<App {...args} />);
instance = mount(<App {...args} />);
expect(getButton(instance).disableButton).toEqual(true);

const onChange = frame.mount.mock.calls[0][1].onChange;
Expand All @@ -488,7 +487,7 @@ describe('Lens App', () => {
const args = defaultArgs;
args.editorFrame = frame;

const instance = mount(<App {...args} />);
instance = mount(<App {...args} />);

expect(getButton(instance).disableButton).toEqual(true);

Expand All @@ -505,7 +504,7 @@ describe('Lens App', () => {
});

it('saves new docs', async () => {
const { args, instance } = await save({
const { args, instance: inst } = await save({
initialDocId: undefined,
newCopyOnSave: false,
newTitle: 'hello there',
Expand All @@ -519,13 +518,13 @@ describe('Lens App', () => {

expect(args.redirectTo).toHaveBeenCalledWith('aaa');

instance.setProps({ docId: 'aaa' });
inst.setProps({ docId: 'aaa' });

expect(args.docStorage.load).not.toHaveBeenCalled();
});

it('saves the latest doc as a copy', async () => {
const { args, instance } = await save({
const { args, instance: inst } = await save({
initialDocId: '1234',
newCopyOnSave: true,
newTitle: 'hello there',
Expand All @@ -539,13 +538,13 @@ describe('Lens App', () => {

expect(args.redirectTo).toHaveBeenCalledWith('aaa');

instance.setProps({ docId: 'aaa' });
inst.setProps({ docId: 'aaa' });

expect(args.docStorage.load).toHaveBeenCalledTimes(1);
});

it('saves existing docs', async () => {
const { args, instance } = await save({
const { args, instance: inst } = await save({
initialDocId: '1234',
newCopyOnSave: false,
newTitle: 'hello there',
Expand All @@ -559,7 +558,7 @@ describe('Lens App', () => {

expect(args.redirectTo).not.toHaveBeenCalled();

instance.setProps({ docId: '1234' });
inst.setProps({ docId: '1234' });

expect(args.docStorage.load).toHaveBeenCalledTimes(1);
});
Expand All @@ -569,7 +568,7 @@ describe('Lens App', () => {
args.editorFrame = frame;
(args.docStorage.save as jest.Mock).mockRejectedValue({ message: 'failed' });

const instance = mount(<App {...args} />);
instance = mount(<App {...args} />);

const onChange = frame.mount.mock.calls[0][1].onChange;
act(() =>
Expand All @@ -581,13 +580,12 @@ describe('Lens App', () => {

instance.update();

testSave(instance, { newCopyOnSave: false, newTitle: 'hello there' });

await waitForPromises();
await act(async () => {
testSave(instance, { newCopyOnSave: false, newTitle: 'hello there' });
});

expect(args.core.notifications.toasts.addDanger).toHaveBeenCalled();
expect(args.redirectTo).not.toHaveBeenCalled();
await waitForPromises();

expect(getButton(instance).disableButton).toEqual(false);
});
Expand Down Expand Up @@ -616,8 +614,10 @@ describe('Lens App', () => {

const unpinned = esFilters.buildExistsFilter(field, indexPattern);
const pinned = esFilters.buildExistsFilter(pinnedField, indexPattern);
FilterManager.setFiltersStore([pinned], esFilters.FilterStateStore.GLOBAL_STATE);
await waitForPromises();

await act(async () => {
FilterManager.setFiltersStore([pinned], esFilters.FilterStateStore.GLOBAL_STATE);
});

const { args } = await save({
initialDocId: '1234',
Expand Down Expand Up @@ -695,7 +695,7 @@ describe('Lens App', () => {
const args = defaultArgs;
args.editorFrame = frame;

const instance = mount(<App {...args} />);
instance = mount(<App {...args} />);

expect(TopNavMenu).toHaveBeenCalledWith(
expect.objectContaining({
Expand All @@ -705,14 +705,14 @@ describe('Lens App', () => {
);

const onChange = frame.mount.mock.calls[0][1].onChange;
act(() =>

await act(async () => {
onChange({
filterableIndexPatterns: [{ id: '1', title: 'newIndex' }],
doc: ({ id: undefined, expression: 'valid expression' } as unknown) as Document,
})
);
});
});

await waitForPromises();
instance.update();

expect(TopNavMenu).toHaveBeenCalledWith(
Expand All @@ -723,14 +723,13 @@ describe('Lens App', () => {
);

// Do it again to verify that the dirty checking is done right
act(() =>

await act(async () => {
onChange({
filterableIndexPatterns: [{ id: '2', title: 'second index' }],
doc: ({ id: undefined, expression: 'valid expression' } as unknown) as Document,
})
);

await waitForPromises();
});
});

instance.update();

Expand All @@ -745,7 +744,7 @@ describe('Lens App', () => {
const args = defaultArgs;
args.editorFrame = frame;

const instance = mount(<App {...args} />);
instance = mount(<App {...args} />);

act(() =>
instance.find(TopNavMenu).prop('onQuerySubmit')!({
Expand Down Expand Up @@ -777,7 +776,7 @@ describe('Lens App', () => {
const args = defaultArgs;
args.editorFrame = frame;

const instance = mount(<App {...args} />);
instance = mount(<App {...args} />);
const indexPattern = ({ id: 'index1' } as unknown) as IIndexPattern;
const field = ({ name: 'myfield' } as unknown) as IFieldType;

Expand Down Expand Up @@ -819,7 +818,7 @@ describe('Lens App', () => {
const args = makeDefaultArgs();
args.editorFrame = frame;

const instance = mount(<App {...args} />);
instance = mount(<App {...args} />);

expect(TopNavMenu).toHaveBeenCalledWith(
expect.objectContaining({
Expand Down Expand Up @@ -862,7 +861,7 @@ describe('Lens App', () => {
const args = makeDefaultArgs();
args.editorFrame = frame;

const instance = mount(<App {...args} />);
instance = mount(<App {...args} />);

act(() => {
instance.find(TopNavMenu).prop('onSaved')!({
Expand Down Expand Up @@ -905,7 +904,7 @@ describe('Lens App', () => {
const args = makeDefaultArgs();
args.editorFrame = frame;

const instance = mount(<App {...args} />);
instance = mount(<App {...args} />);

act(() =>
instance.find(TopNavMenu).prop('onQuerySubmit')!({
Expand Down Expand Up @@ -941,7 +940,7 @@ describe('Lens App', () => {
const args = makeDefaultArgs();
args.editorFrame = frame;

const instance = mount(<App {...args} />);
instance = mount(<App {...args} />);

const onError = frame.mount.mock.calls[0][1].onError;
onError({ message: 'error' });
Expand Down
5 changes: 4 additions & 1 deletion x-pack/legacy/plugins/lens/public/debounced_component/debounced_component.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
import React from 'react';
import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
import { debouncedComponent } from './debounced_component';
import { act } from 'react-dom/test-utils';

describe('debouncedComponent', () => {
test('immediately renders', () => {
Expand All @@ -23,7 +24,9 @@ describe('debouncedComponent', () => {
const component = mount(<TestComponent title="there" />);
component.setProps({ title: 'yall' });
expect(component.text()).toEqual('there');
await new Promise(r => setTimeout(r, 1));
await act(async () => {
await new Promise(r => setTimeout(r, 1));
});
expect(component.text()).toEqual('yall');
});
});
Loading