Fix broken DataInspector test (#1100)

Summary:
Looks like we don't have a lint for `jest.mock` imports.
Pull Request resolved: https://github.com/facebook/flipper/pull/1100

Test Plan: yarn test

Reviewed By: jknoxville

Differential Revision: D21378747

Pulled By: passy

fbshipit-source-id: 118372596d6247282b1ddad1f22ed3916d303bb1
This commit is contained in:
Pascal Hartig
2020-05-04 05:32:55 -07:00
committed by Facebook GitHub Bot
parent fbc5d922b5
commit c1b360cb0f

View File

@@ -10,7 +10,12 @@
import * as React from 'react';
import {render, fireEvent, waitFor, act} from '@testing-library/react';
jest.mock('../../../../fb/Logger');
try {
jest.mock('../../../../fb/Logger');
} catch {
jest.mock('../../../../fb-stubs/Logger');
}
import ManagedDataInspector from '../ManagedDataInspector';
import {sleep} from '../../../../utils';
@@ -54,74 +59,84 @@ const json = {
},
};
test('changing collapsed property works', async () => {
const res = render(<ManagedDataInspector data={json} collapsed expandRoot />);
expect(await res.findByText(/is/)).toBeTruthy(); // from expandRoot
expect((await res.queryAllByText(/cool/)).length).toBe(0);
describe('DataInspector', () => {
if (process.platform === 'win32') {
test('Skipping on Windows due to mocking not working', () => {});
return;
}
res.rerender(
<ManagedDataInspector data={json} collapsed={false} expandRoot />,
);
await waitFor(() => res.findByText(/cool/));
res.rerender(
<ManagedDataInspector data={json} collapsed={true} expandRoot />,
);
expect((await res.queryAllByText(/cool/)).length).toBe(0);
});
test('can manually collapse properties', async () => {
const res = render(<ManagedDataInspector data={json} collapsed expandRoot />);
await res.findByText(/is/); // previewed as key, like: "data: {is, and}"
expect((await res.queryAllByText(/awesomely/)).length).toBe(0);
// expand twice
fireEvent.click(await res.findByText(/data/));
await res.findByText(/awesomely/);
expect((await res.queryAllByText(/cool/)).length).toBe(0);
fireEvent.click(await res.findByText(/is/));
await res.findByText(/cool/);
expect((await res.queryAllByText(/json/)).length).toBe(0); // this node is not shown
// collapsing everything again
fireEvent.click(await res.findByText(/data/));
await waitFor(() => {
expect(res.queryByText(/awesomely/)).toBeNull();
});
// expand everything again, expanded paths will have been remembered
fireEvent.click(await res.findByText(/data/));
await res.findByText(/is/);
await res.findByText(/awesomely/);
await waitFor(() => {
expect(res.queryByText(/json/)).toBeNull();
});
});
test('can filter for data', async () => {
const res = render(
<ManagedDataInspector data={json} collapsed={false} expandRoot />,
);
await res.findByText(/awesomely/); // everything is shown
// act here is used to make sure the highlight changes have propagated
await act(async () => {
res.rerender(
<ManagedDataInspector
data={json}
collapsed={false}
expandRoot
filter="sOn"
/>,
test('changing collapsed property works', async () => {
const res = render(
<ManagedDataInspector data={json} collapsed expandRoot />,
);
await sleep(200);
expect(await res.findByText(/is/)).toBeTruthy(); // from expandRoot
expect((await res.queryAllByText(/cool/)).length).toBe(0);
res.rerender(
<ManagedDataInspector data={json} collapsed={false} expandRoot />,
);
await waitFor(() => res.findByText(/cool/));
res.rerender(
<ManagedDataInspector data={json} collapsed={true} expandRoot />,
);
expect((await res.queryAllByText(/cool/)).length).toBe(0);
});
const element = await res.findByText(/son/); // N.B. search for 'son', as the text was split up
// snapshot to make sure the hilighiting did it's job
expect(element.parentElement).toMatchInlineSnapshot(`
test('can manually collapse properties', async () => {
const res = render(
<ManagedDataInspector data={json} collapsed expandRoot />,
);
await res.findByText(/is/); // previewed as key, like: "data: {is, and}"
expect((await res.queryAllByText(/awesomely/)).length).toBe(0);
// expand twice
fireEvent.click(await res.findByText(/data/));
await res.findByText(/awesomely/);
expect((await res.queryAllByText(/cool/)).length).toBe(0);
fireEvent.click(await res.findByText(/is/));
await res.findByText(/cool/);
expect((await res.queryAllByText(/json/)).length).toBe(0); // this node is not shown
// collapsing everything again
fireEvent.click(await res.findByText(/data/));
await waitFor(() => {
expect(res.queryByText(/awesomely/)).toBeNull();
});
// expand everything again, expanded paths will have been remembered
fireEvent.click(await res.findByText(/data/));
await res.findByText(/is/);
await res.findByText(/awesomely/);
await waitFor(() => {
expect(res.queryByText(/json/)).toBeNull();
});
});
test('can filter for data', async () => {
const res = render(
<ManagedDataInspector data={json} collapsed={false} expandRoot />,
);
await res.findByText(/awesomely/); // everything is shown
// act here is used to make sure the highlight changes have propagated
await act(async () => {
res.rerender(
<ManagedDataInspector
data={json}
collapsed={false}
expandRoot
filter="sOn"
/>,
);
await sleep(200);
});
const element = await res.findByText(/son/); // N.B. search for 'son', as the text was split up
// snapshot to make sure the hilighiting did it's job
expect(element.parentElement).toMatchInlineSnapshot(`
<span>
"j
<span
@@ -132,43 +147,44 @@ test('can filter for data', async () => {
"
</span>
`);
// hides the other part of the tree
await waitFor(() => {
expect(res.queryByText(/cool/)).toBeNull();
});
// hides the other part of the tree
await waitFor(() => {
expect(res.queryByText(/cool/)).toBeNull();
});
// find by key
await act(async () => {
res.rerender(
<ManagedDataInspector
data={json}
collapsed={false}
expandRoot
filter="somel"
/>,
);
await sleep(200);
});
// find by key
await act(async () => {
res.rerender(
<ManagedDataInspector
data={json}
collapsed={false}
expandRoot
filter="somel"
/>,
);
await sleep(200);
});
await res.findByText(/cool/);
// hides the other part of the tree
await waitFor(() => {
expect(res.queryByText(/json/)).toBeNull();
});
await res.findByText(/cool/);
// hides the other part of the tree
await waitFor(() => {
expect(res.queryByText(/json/)).toBeNull();
});
await act(async () => {
res.rerender(
<ManagedDataInspector
data={json}
collapsed={false}
expandRoot
filter=""
/>,
);
await sleep(200);
});
await act(async () => {
res.rerender(
<ManagedDataInspector
data={json}
collapsed={false}
expandRoot
filter=""
/>,
);
await sleep(200);
});
// everything visible again
await res.findByText(/awesomely/);
await res.findByText(/json/);
// everything visible again
await res.findByText(/awesomely/);
await res.findByText(/json/);
});
});