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

[Dashboard navigation] Fix flaky test #167896

Merged
merged 16 commits into from
Oct 23, 2023
Merged

[Dashboard navigation] Fix flaky test #167896

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
bb8a039
Do not run tests until dashboard load finishes
nickpeihl Oct 3, 2023
fa66893
Merge branch 'main' into kibana-fix-links-test
nickpeihl Oct 3, 2023
74c06d7
Merge branch 'main' into kibana-fix-links-test
nickpeihl Oct 3, 2023
b95424b
Allow tests to wait for rendering to complete
nickpeihl Oct 3, 2023
c4f733d
Merge remote-tracking branch 'refs/remotes/origin/kibana-fix-links-te…
nickpeihl Oct 3, 2023
da27cf9
Merge branch 'main' into kibana-fix-links-test
kibanamachine Oct 3, 2023
3526748
Merge remote-tracking branch 'upstream/main' into kibana-fix-links-test
nickpeihl Oct 18, 2023
8027035
Use RenderCompleteDispatcher
nickpeihl Oct 19, 2023
d9a0377
Merge remote-tracking branch 'refs/remotes/origin/kibana-fix-links-te…
nickpeihl Oct 19, 2023
e014036
Merge branch 'main' into kibana-fix-links-test
nickpeihl Oct 19, 2023
44e1a8b
Remove onLoading from ExternalLinkComponent
nickpeihl Oct 19, 2023
f6d13d1
Update unit tests with props
nickpeihl Oct 19, 2023
aa6d9ac
Remove unnecessary data-* attributes
nickpeihl Oct 19, 2023
0673e14
Skip flaky tests that need to be rewritten
nickpeihl Oct 23, 2023
8563230
Merge branch 'main' into kibana-fix-links-test
nickpeihl Oct 23, 2023
0c99cdc
Merge branch 'main' into kibana-fix-links-test
nickpeihl Oct 23, 2023
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
75 changes: 67 additions & 8 deletions src/plugins/links/public/components/dashboard_link/dashboard_link_component.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,9 @@ describe('Dashboard link component', () => {
type: 'dashboardLink' as const,
};

const onLoading = jest.fn();
const onRender = jest.fn();

let linksEmbeddable: LinksEmbeddable;
beforeEach(async () => {
window.open = jest.fn();
Expand All @@ -76,10 +79,16 @@ describe('Dashboard link component', () => {
test('by default uses navigateToApp to open in same tab', async () => {
render(
<LinksContext.Provider value={linksEmbeddable}>
<DashboardLinkComponent link={defaultLinkInfo} layout={LINKS_VERTICAL_LAYOUT} />
<DashboardLinkComponent
link={defaultLinkInfo}
layout={LINKS_VERTICAL_LAYOUT}
onLoading={onLoading}
onRender={onRender}
/>
</LinksContext.Provider>
);

await waitFor(() => expect(onLoading).toHaveBeenCalledTimes(1));
await waitFor(() => expect(fetchDashboard).toHaveBeenCalledTimes(1));
expect(fetchDashboard).toHaveBeenCalledWith(defaultLinkInfo.destination);
expect(getDashboardLocator).toHaveBeenCalledTimes(1);
Expand All @@ -90,6 +99,7 @@ describe('Dashboard link component', () => {
},
linksEmbeddable,
});
await waitFor(() => expect(onRender).toHaveBeenCalledTimes(1));

const link = await screen.findByTestId('dashboardLink--foo');
expect(link).toHaveTextContent('another dashboard');
Expand All @@ -104,10 +114,17 @@ describe('Dashboard link component', () => {
test('modified click does not trigger event.preventDefault', async () => {
render(
<LinksContext.Provider value={linksEmbeddable}>
<DashboardLinkComponent link={defaultLinkInfo} layout={LINKS_VERTICAL_LAYOUT} />
<DashboardLinkComponent
link={defaultLinkInfo}
layout={LINKS_VERTICAL_LAYOUT}
onLoading={onLoading}
onRender={onRender}
/>
</LinksContext.Provider>
);
await waitFor(() => expect(onLoading).toHaveBeenCalledTimes(1));
await waitFor(() => expect(fetchDashboard).toHaveBeenCalledTimes(1));
await waitFor(() => expect(onRender).toHaveBeenCalledTimes(1));
const link = await screen.findByTestId('dashboardLink--foo');
const clickEvent = createEvent.click(link, { ctrlKey: true });
const preventDefault = jest.spyOn(clickEvent, 'preventDefault');
Expand All @@ -122,12 +139,19 @@ describe('Dashboard link component', () => {
};
render(
<LinksContext.Provider value={linksEmbeddable}>
<DashboardLinkComponent link={linkInfo} layout={LINKS_VERTICAL_LAYOUT} />
<DashboardLinkComponent
link={linkInfo}
layout={LINKS_VERTICAL_LAYOUT}
onLoading={onLoading}
onRender={onRender}
/>
</LinksContext.Provider>
);
await waitFor(() => expect(onLoading).toHaveBeenCalledTimes(1));
await waitFor(() => expect(fetchDashboard).toHaveBeenCalledTimes(1));
expect(fetchDashboard).toHaveBeenCalledWith(linkInfo.destination);
expect(getDashboardLocator).toHaveBeenCalledWith({ link: linkInfo, linksEmbeddable });
await waitFor(() => expect(onRender).toHaveBeenCalledTimes(1));
const link = await screen.findByTestId('dashboardLink--foo');
expect(link).toBeInTheDocument();
await userEvent.click(link);
Expand All @@ -147,11 +171,18 @@ describe('Dashboard link component', () => {
};
render(
<LinksContext.Provider value={linksEmbeddable}>
<DashboardLinkComponent link={linkInfo} layout={LINKS_VERTICAL_LAYOUT} />
<DashboardLinkComponent
link={linkInfo}
layout={LINKS_VERTICAL_LAYOUT}
onLoading={onLoading}
onRender={onRender}
/>
</LinksContext.Provider>
);
await waitFor(() => expect(onLoading).toHaveBeenCalledTimes(1));
await waitFor(() => expect(fetchDashboard).toHaveBeenCalledTimes(1));
expect(getDashboardLocator).toHaveBeenCalledWith({ link: linkInfo, linksEmbeddable });
await waitFor(() => expect(onRender).toHaveBeenCalledTimes(1));
});

test('shows an error when fetchDashboard fails', async () => {
Expand All @@ -162,10 +193,17 @@ describe('Dashboard link component', () => {
};
render(
<LinksContext.Provider value={linksEmbeddable}>
<DashboardLinkComponent link={linkInfo} layout={LINKS_VERTICAL_LAYOUT} />
<DashboardLinkComponent
link={linkInfo}
layout={LINKS_VERTICAL_LAYOUT}
onLoading={onLoading}
onRender={onRender}
/>
</LinksContext.Provider>
);
await waitFor(() => expect(onLoading).toHaveBeenCalledTimes(1));
await waitFor(() => expect(fetchDashboard).toHaveBeenCalledTimes(1));
await waitFor(() => expect(onRender).toHaveBeenCalledTimes(1));
const link = await screen.findByTestId('dashboardLink--notfound--error');
expect(link).toHaveTextContent(DashboardLinkStrings.getDashboardErrorLabel());
});
Expand All @@ -178,10 +216,17 @@ describe('Dashboard link component', () => {
};
render(
<LinksContext.Provider value={linksEmbeddable}>
<DashboardLinkComponent link={linkInfo} layout={LINKS_VERTICAL_LAYOUT} />
<DashboardLinkComponent
link={linkInfo}
layout={LINKS_VERTICAL_LAYOUT}
onLoading={onLoading}
onRender={onRender}
/>
</LinksContext.Provider>
);
await waitFor(() => expect(onLoading).toHaveBeenCalledTimes(1));
await waitFor(() => expect(fetchDashboard).toHaveBeenCalledTimes(1));
await waitFor(() => expect(onRender).toHaveBeenCalledTimes(1));
const link = await screen.findByTestId('dashboardLink--bar');
expect(link).toHaveTextContent('current dashboard');
await userEvent.click(link);
Expand All @@ -192,10 +237,17 @@ describe('Dashboard link component', () => {
test('shows dashboard title and description in tooltip', async () => {
render(
<LinksContext.Provider value={linksEmbeddable}>
<DashboardLinkComponent link={defaultLinkInfo} layout={LINKS_VERTICAL_LAYOUT} />
<DashboardLinkComponent
link={defaultLinkInfo}
layout={LINKS_VERTICAL_LAYOUT}
onLoading={onLoading}
onRender={onRender}
/>
</LinksContext.Provider>
);
await waitFor(() => expect(onLoading).toHaveBeenCalledTimes(1));
await waitFor(() => expect(fetchDashboard).toHaveBeenCalledTimes(1));
await waitFor(() => expect(onRender).toHaveBeenCalledTimes(1));
const link = await screen.findByTestId('dashboardLink--foo');
await userEvent.hover(link);
const tooltip = await screen.findByTestId('dashboardLink--foo--tooltip');
Expand All @@ -211,10 +263,17 @@ describe('Dashboard link component', () => {
};
render(
<LinksContext.Provider value={linksEmbeddable}>
<DashboardLinkComponent link={linkInfo} layout={LINKS_VERTICAL_LAYOUT} />
<DashboardLinkComponent
link={linkInfo}
layout={LINKS_VERTICAL_LAYOUT}
onLoading={onLoading}
onRender={onRender}
/>
</LinksContext.Provider>
);
await waitFor(() => expect(onLoading).toHaveBeenCalledTimes(1));
await waitFor(() => expect(fetchDashboard).toHaveBeenCalledTimes(1));
await waitFor(() => expect(onRender).toHaveBeenCalledTimes(1));
const link = await screen.findByTestId('dashboardLink--foo');
expect(link).toHaveTextContent(label);
await userEvent.hover(link);
Expand Down
21 changes: 20 additions & 1 deletion src/plugins/links/public/components/dashboard_link/dashboard_link_component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

import classNames from 'classnames';
import useAsync from 'react-use/lib/useAsync';
import React, { useMemo, useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import useObservable from 'react-use/lib/useObservable';

import {
Expand All @@ -27,9 +27,13 @@ import { fetchDashboard, getDashboardHref, getDashboardLocator } from './dashboa
export const DashboardLinkComponent = ({
link,
layout,
onLoading,
onRender,
}: {
link: Link;
layout: LinksLayoutType;
onLoading: () => void;
onRender: () => void;
}) => {
const linksEmbeddable = useLinks();
const [error, setError] = useState<Error | undefined>();
Expand Down Expand Up @@ -133,6 +137,21 @@ export const DashboardLinkComponent = ({
};
}, [link]);

useEffect(() => {
if (loadingDestinationDashboard || loadingOnClickProps) {
onLoading();
} else {
onRender();
}
}, [
link,
linksEmbeddable,
loadingDestinationDashboard,
loadingOnClickProps,
onLoading,
onRender,
]);

const id = `dashboardLink--${link.id}`;

return loadingDestinationDashboard ? (
Expand Down
18 changes: 14 additions & 4 deletions src/plugins/links/public/components/external_link/external_link_component.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import { ExternalLinkComponent } from './external_link_component';
import { coreServices } from '../../services/kibana_services';
import { DEFAULT_URL_DRILLDOWN_OPTIONS } from '@kbn/ui-actions-enhanced-plugin/public';

const onRender = jest.fn();

describe('external link component', () => {
const defaultLinkInfo = {
destination: 'https://example.com',
Expand All @@ -38,10 +40,15 @@ describe('external link component', () => {
test('by default opens in new tab', async () => {
render(
<LinksContext.Provider value={links}>
<ExternalLinkComponent link={defaultLinkInfo} layout={LINKS_VERTICAL_LAYOUT} />
<ExternalLinkComponent
link={defaultLinkInfo}
layout={LINKS_VERTICAL_LAYOUT}
onRender={onRender}
/>
</LinksContext.Provider>
);

expect(onRender).toBeCalledTimes(1);
const link = await screen.findByTestId('externalLink--foo');
expect(link).toBeInTheDocument();
await userEvent.click(link);
Expand All @@ -55,9 +62,10 @@ describe('external link component', () => {
};
render(
<LinksContext.Provider value={links}>
<ExternalLinkComponent link={linkInfo} layout={LINKS_VERTICAL_LAYOUT} />
<ExternalLinkComponent link={linkInfo} layout={LINKS_VERTICAL_LAYOUT} onRender={onRender} />
</LinksContext.Provider>
);
expect(onRender).toBeCalledTimes(1);
const link = await screen.findByTestId('externalLink--foo');
expect(link).toHaveTextContent('https://example.com');
const clickEvent = createEvent.click(link, { ctrlKey: true });
Expand All @@ -73,9 +81,10 @@ describe('external link component', () => {
};
render(
<LinksContext.Provider value={links}>
<ExternalLinkComponent link={linkInfo} layout={LINKS_VERTICAL_LAYOUT} />
<ExternalLinkComponent link={linkInfo} layout={LINKS_VERTICAL_LAYOUT} onRender={onRender} />
</LinksContext.Provider>
);
expect(onRender).toBeCalledTimes(1);
const link = await screen.findByTestId('externalLink--foo');
await userEvent.click(link);
expect(coreServices.application.navigateToUrl).toBeCalledTimes(1);
Expand All @@ -89,9 +98,10 @@ describe('external link component', () => {
};
render(
<LinksContext.Provider value={links}>
<ExternalLinkComponent link={linkInfo} layout={LINKS_VERTICAL_LAYOUT} />
<ExternalLinkComponent link={linkInfo} layout={LINKS_VERTICAL_LAYOUT} onRender={onRender} />
</LinksContext.Provider>
);
expect(onRender).toBeCalledTimes(1);
const link = await screen.findByTestId('externalLink--foo--error');
expect(link).toBeDisabled();
/**
Expand Down
7 changes: 7 additions & 0 deletions src/plugins/links/public/components/external_link/external_link_component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
*/

import React, { useMemo, useState } from 'react';
import useMount from 'react-use/lib/useMount';

import {
UrlDrilldownOptions,
Expand All @@ -21,12 +22,18 @@ import { Link, LinksLayoutType, LINKS_VERTICAL_LAYOUT } from '../../../common/co
export const ExternalLinkComponent = ({
link,
layout,
onRender,
}: {
link: Link;
layout: LinksLayoutType;
onRender: () => void;
}) => {
const [error, setError] = useState<string | undefined>();

useMount(() => {
onRender();
});

const linkOptions = useMemo(() => {
return {
...DEFAULT_URL_DRILLDOWN_OPTIONS,
Expand Down
24 changes: 22 additions & 2 deletions src/plugins/links/public/components/links_component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
* Side Public License, v 1.
*/

import React, { useMemo } from 'react';
import React, { useEffect, useMemo } from 'react';
import useMap from 'react-use/lib/useMap';
import { EuiListGroup, EuiPanel } from '@elastic/eui';
import { useLinks } from '../embeddable/links_embeddable';
import { ExternalLinkComponent } from './external_link/external_link_component';
Expand All @@ -25,6 +26,22 @@ export const LinksComponent = () => {
const links = linksEmbeddable.select((state) => state.componentState.links);
const layout = linksEmbeddable.select((state) => state.componentState.layout);

const [linksLoading, { set: setLinkIsLoading }] = useMap(
Object.fromEntries(
(links ?? []).map((link) => {
return [link.id, true];
})
)
);

useEffect(() => {
if (Object.values(linksLoading).includes(true)) {
linksEmbeddable.onLoading();
} else {
linksEmbeddable.onRender();
}
}, [linksLoading, linksEmbeddable]);

const orderedLinks = useMemo(() => {
if (!links) return [];
return memoizedGetOrderedLinkList(links);
Expand All @@ -42,18 +59,21 @@ export const LinksComponent = () => {
key={currentLink.id}
link={currentLink}
layout={layout ?? LINKS_VERTICAL_LAYOUT}
onLoading={() => setLinkIsLoading(currentLink.id, true)}
onRender={() => setLinkIsLoading(currentLink.id, false)}
/>
) : (
<ExternalLinkComponent
key={currentLink.id}
link={currentLink}
layout={layout ?? LINKS_VERTICAL_LAYOUT}
onRender={() => setLinkIsLoading(currentLink.id, false)}
/>
),
},
};
}, {});
}, [links, layout]);
}, [links, layout, setLinkIsLoading]);

return (
<EuiPanel
Expand Down
Loading