hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Consolidate discovery of HTML elements in a test

Browse Source 
Co-authored-by: Mikko Aspiala <mikko.aspiala@gmail.com>

Signed-off-by: Janne Savolainen <janne.savolainen@live.fi>
This commit is contained in:
Janne Savolainen 2022-10-17 15:16:22 +03:00
parent bb65dc93b2
commit 5554f895df
No known key found for this signature in database
GPG Key ID: 8C6CFB2FFFE8F68A
4 changed files with 64 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/features/preferences/__snapshots__/hiding-of-empty-branches.test.tsx.snap
View File

@ -74,7 +74,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
/>
<div
class="SettingLayout showNavigation Preferences"
data-testid="application-preferences-page"
>
<nav
class="sidebarRegion"
@ -87,14 +86,13 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
>
<div
class="header flex items-center"
data-testid="general-tab-group"
data-preference-tab-group-test="general-tab-group"
>
Preferences
</div>
<div
class="Tab flex gaps align-center active"
data-preference-tab-link-test="app"
data-testid="application-preferences-page"
role="tab"
tabindex="0"
>
@ -107,7 +105,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
<div
class="Tab flex gaps align-center"
data-preference-tab-link-test="proxy"
data-testid="proxy-preferences-page"
role="tab"
tabindex="0"
>
@ -120,7 +117,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
<div
class="Tab flex gaps align-center"
data-preference-tab-link-test="kubernetes"
data-testid="kubernetes-preferences-page"
role="tab"
tabindex="0"
>
@ -133,7 +129,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
<div
class="Tab flex gaps align-center"
data-preference-tab-link-test="editor"
data-testid="editor-preferences-page"
role="tab"
tabindex="0"
>
@ -146,7 +141,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
<div
class="Tab flex gaps align-center"
data-preference-tab-link-test="terminal"
data-testid="terminal-preferences-page"
role="tab"
tabindex="0"
>
@ -739,7 +733,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
/>
<div
class="SettingLayout showNavigation Preferences"
data-testid="application-preferences-page"
>
<nav
class="sidebarRegion"
@ -752,14 +745,13 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
>
<div
class="header flex items-center"
data-testid="general-tab-group"
data-preference-tab-group-test="general-tab-group"
>
Preferences
</div>
<div
class="Tab flex gaps align-center active"
data-preference-tab-link-test="app"
data-testid="application-preferences-page"
role="tab"
tabindex="0"
>
@ -772,7 +764,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
<div
class="Tab flex gaps align-center"
data-preference-tab-link-test="proxy"
data-testid="proxy-preferences-page"
role="tab"
tabindex="0"
>
@ -785,7 +776,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
<div
class="Tab flex gaps align-center"
data-preference-tab-link-test="kubernetes"
data-testid="kubernetes-preferences-page"
role="tab"
tabindex="0"
>
@ -798,7 +788,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
<div
class="Tab flex gaps align-center"
data-preference-tab-link-test="editor"
data-testid="editor-preferences-page"
role="tab"
tabindex="0"
>
@ -811,7 +800,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
<div
class="Tab flex gaps align-center"
data-preference-tab-link-test="terminal"
data-testid="terminal-preferences-page"
role="tab"
tabindex="0"
>
@ -824,21 +812,20 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
<hr />
<div
class="header flex items-center"
data-testid="some-tab-group-test-id"
data-preference-tab-group-test="some-tab-group"
>
Some tab group label
</div>
<div
class="Tab flex gaps align-center"
data-preference-tab-link-test="irrelevant"
data-testid="some-tab-with-items"
data-preference-tab-link-test="some-path-id-for-some-tab-id"
role="tab"
tabindex="0"
>
<div
class="label"
>
Some label for tab with items
Some tab label
</div>
</div>
<hr />
@ -1423,7 +1410,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
/>
<div
class="SettingLayout showNavigation Preferences"
data-testid="application-preferences-page"
>
<nav
class="sidebarRegion"
@ -1436,14 +1422,13 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
>
<div
class="header flex items-center"
data-testid="general-tab-group"
data-preference-tab-group-test="general-tab-group"
>
Preferences
</div>
<div
class="Tab flex gaps align-center active"
data-preference-tab-link-test="app"
data-testid="application-preferences-page"
role="tab"
tabindex="0"
>
@ -1456,7 +1441,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
<div
class="Tab flex gaps align-center"
data-preference-tab-link-test="proxy"
data-testid="proxy-preferences-page"
role="tab"
tabindex="0"
>
@ -1469,7 +1453,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
<div
class="Tab flex gaps align-center"
data-preference-tab-link-test="kubernetes"
data-testid="kubernetes-preferences-page"
role="tab"
tabindex="0"
>
@ -1482,7 +1465,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
<div
class="Tab flex gaps align-center"
data-preference-tab-link-test="editor"
data-testid="editor-preferences-page"
role="tab"
tabindex="0"
>
@ -1495,7 +1477,6 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
<div
class="Tab flex gaps align-center"
data-preference-tab-link-test="terminal"
data-testid="terminal-preferences-page"
role="tab"
tabindex="0"
>
@ -1508,34 +1489,32 @@ exports[`preferences - hiding-of-empty-branches, given in preferences page given
<hr />
<div
class="header flex items-center"
data-testid="some-tab-group-test-id"
data-preference-tab-group-test="some-tab-group"
>
Some tab group label
</div>
<div
class="Tab flex gaps align-center"
data-preference-tab-link-test="irrelevant"
data-testid="some-tab-with-items"
data-preference-tab-link-test="some-path-id-for-some-tab-id"
role="tab"
tabindex="0"
>
<div
class="label"
>
Some label for tab with items
Some tab label
</div>
</div>
<div
class="Tab flex gaps align-center"
data-preference-tab-link-test="irrelevant"
data-testid="some-tab-without-items"
data-preference-tab-link-test="some-path-id-for-some-other-tab-id"
role="tab"
tabindex="0"
>
<div
class="label"
>
Some label for tab without items
Some other tab label
</div>
</div>
<hr />

77
src/features/preferences/hiding-of-empty-branches.test.tsx
View File

@ -10,6 +10,7 @@ import { runInAction } from "mobx";
import type { ApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { getApplicationBuilder } from "../../renderer/components/test-utils/get-application-builder";
import { preferenceItemInjectionToken } from "./renderer/preference-items/preference-item-injection-token";
import { getSingleElement, querySingleElement } from "../../renderer/components/test-utils/discovery-of-html-elements";
describe("preferences - hiding-of-empty-branches, given in preferences page", () => {
let builder: ApplicationBuilder;
@ -34,7 +35,6 @@ describe("preferences - hiding-of-empty-branches, given in preferences page", ()
instantiate: () => ({
kind: "tab-group" as const,
id: "some-tab-group",
testId: "some-tab-group-test-id",
parentId: "preference-tabs" as const,
label: "Some tab group label",
orderNumber: 10,
@ -43,32 +43,30 @@ describe("preferences - hiding-of-empty-branches, given in preferences page", ()
injectionToken: preferenceItemInjectionToken,
});
const tabWithItemsInjectable = getInjectable({
const someTabInjectable = getInjectable({
id: "some-tab",
instantiate: () => ({
kind: "tab" as const,
id: "some-tab-with-items-id",
id: "some-tab-id",
parentId: "some-tab-group" as const,
testId: "some-tab-with-items",
pathId: "irrelevant",
label: "Some label for tab with items",
pathId: "some-path-id-for-some-tab-id",
label: "Some tab label",
orderNumber: 10,
}),
injectionToken: preferenceItemInjectionToken,
});
const tabWithoutItemsInjectable = getInjectable({
id: "some-empty-tab",
const someOtherTabInjectable = getInjectable({
id: "some-other-tab",
instantiate: () => ({
kind: "tab" as const,
id: "some-tab-without-items-id",
id: "some-other-tab-id",
parentId: "some-tab-group" as const,
testId: "some-tab-without-items",
pathId: "irrelevant",
label: "Some label for tab without items",
pathId: "some-path-id-for-some-other-tab-id",
label: "Some other tab label",
orderNumber: 10,
}),
@ -78,8 +76,8 @@ describe("preferences - hiding-of-empty-branches, given in preferences page", ()
runInAction(() => {
windowDi.register(
someTabGroupInjectable,
tabWithItemsInjectable,
tabWithoutItemsInjectable,
someTabInjectable,
someOtherTabInjectable,
);
});
});
@ -89,14 +87,25 @@ describe("preferences - hiding-of-empty-branches, given in preferences page", ()
});
it("does not render the empty tab group", () => {
const someTabGroup = rendered.queryByTestId("some-tab-group-test-id");
const someTabGroup = querySingleElement(
"preference-tab-group",
"some-tab-group",
)(rendered);
expect(someTabGroup).toBeNull();
});
it("does not render the empty tabs", () => {
const someTab = rendered.queryByTestId("some-tab-with-items");
const someOtherTab = rendered.queryByTestId("some-tab-without-items");
const someTab = querySingleElement(
"preference-tab-link",
"some-path-id-for-some-tab-id",
)(rendered);
const someOtherTab = querySingleElement(
"preference-tab-link",
"some-path-id-for-some-other-tab-id",
)(rendered);
expect([someTab, someOtherTab]).toEqual([null, null]);
});
@ -109,7 +118,7 @@ describe("preferences - hiding-of-empty-branches, given in preferences page", ()
instantiate: () => ({
kind: "item" as const,
id: "some-preference-item-id",
parentId: "some-tab-with-items-id" as const,
parentId: "some-tab-id" as const,
testId: "some-preference-item",
Component: () => <div>Irrelevant</div>,
orderNumber: 10,
@ -128,19 +137,28 @@ describe("preferences - hiding-of-empty-branches, given in preferences page", ()
});
it("renders the tab group that is no longer empty", () => {
const someTabGroup = rendered.queryByTestId("some-tab-group-test-id");
const someTabGroup = querySingleElement(
"preference-tab-group",
"some-tab-group",
)(rendered);
expect(someTabGroup).not.toBeNull();
});
it("renders the tab that is no longer empty", () => {
const someTab = rendered.queryByTestId("some-tab-with-items");
const someTab = getSingleElement(
"preference-tab-link",
"some-path-id-for-some-tab-id",
)(rendered);
expect(someTab).not.toBeNull();
});
it("does not render the tab that is still empty", () => {
const someTab = rendered.queryByTestId("some-tab-without-items");
const someTab = querySingleElement(
"preference-tab-link",
"some-path-id-for-some-other-tab-id",
)(rendered);
expect(someTab).toBeNull();
});
@ -153,7 +171,7 @@ describe("preferences - hiding-of-empty-branches, given in preferences page", ()
instantiate: () => ({
kind: "item" as const,
id: "some-other-preference-item-id",
parentId: "some-tab-without-items-id" as const,
parentId: "some-other-tab-id" as const,
testId: "some-other-preference-item",
Component: () => <div>Irrelevant</div>,
orderNumber: 10,
@ -172,19 +190,28 @@ describe("preferences - hiding-of-empty-branches, given in preferences page", ()
});
it("still renders the tab group that is not empty", () => {
const someTabGroup = rendered.queryByTestId("some-tab-group-test-id");
const someTabGroup = getSingleElement(
"preference-tab-group",
"some-tab-group",
)(rendered);
expect(someTabGroup).not.toBeNull();
});
it("still renders the tab that is not empty", () => {
const someTab = rendered.queryByTestId("some-tab-with-items");
const someTab = getSingleElement(
"preference-tab-link",
"some-path-id-for-some-tab-id",
)(rendered);
expect(someTab).not.toBeNull();
});
it("now renders the other tab that is no longer empty", () => {
const someTab = rendered.queryByTestId("some-tab-without-items");
const someTab = getSingleElement(
"preference-tab-link",
"some-path-id-for-some-other-tab-id",
)(rendered);
expect(someTab).not.toBeNull();
});

2
src/features/preferences/renderer/preference-navigation/preferences-navigation.tsx
View File

@ -64,7 +64,7 @@ const toNavigationHierarchy = (composite: Composite<PreferenceTypes | Preference
case "tab-group": {
return (
<>
<div data-testid={value.testId} className="header flex items-center">
<div className="header flex items-center" data-preference-tab-group-test={value.id}>
{value.iconName && (
<Icon
material={value.iconName}

1
src/features/preferences/renderer/preferences.tsx
View File

@ -34,7 +34,6 @@ const NonInjectedPreferences = observer(({
contentGaps={false}
closeButtonProps={{ "data-testid": "close-preferences" }}
back={closePreferences}
data-testid={composite.value.testId}
>
{toPreferenceItemHierarchy(composite)}
</SettingLayout>