mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Turn on strict mode in tsconfig.json, some helpful lints, and required cleanup where strictness necessitates it (#5195)
* Turn on strict mode in tsconfig.json - Add route, clusterRoute, and payloadValidatedClusterRoute helper functions to improve types with backend routes - Turn on the following new lints: - react/jsx-first-prop-new-line - react/jsx-wrap-multilines - react/jsx-one-expression-per-line - react/jsx-max-props-per-line - react/jsx-indent - react/jsx-indent-props Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix build Signed-off-by: Sebastian Malton <sebastian@malton.name> * Replace KubeObject scope strings with enum Signed-off-by: Sebastian Malton <sebastian@malton.name> * Revert package.json version changes Signed-off-by: Sebastian Malton <sebastian@malton.name> * revert move hostedCluster(Id) Signed-off-by: Sebastian Malton <sebastian@malton.name> * change some type param names to be not single letters Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove copy-extension-themes Signed-off-by: Sebastian Malton <sebastian@malton.name> * add new make clean action Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix build to not use webpack for generating types Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kube-object-menu.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix select.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix catalog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * revert move fileNameMigration to index Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix ref logic error Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix log-resource-selector.test.tsx tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix dock-store.test.ts test by overriding createStorage to not touch file system Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix cluster.test.ts tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kube=api.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fixed hotbar-store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kubeconfig-manager.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix cluster-role-bindings/__tests__/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix role-bindings/__tests__/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix pods.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix delete-cluster-dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix daemonset.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix replicaset.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix statefulsets/dialog/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix replicasets/scale-dialog/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix deployments.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix deployments/scale/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix cronjob.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix stateful-set.api.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix deployment.api.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix api-manager.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix statefulset.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix job.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix pods.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix scroll-spy.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix hotbar-remove-command.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix catalog-entity-registry.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix welcome.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix verify-that-all-routes-have-route-component.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix pod-tolerations.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * better fix for previous 3 fixes, plus also select.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kube-object-menu.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix app-paths.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix dock-tabs.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix isReactNode typing Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix sub-title.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix drawer.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix list-layout.tsx and header.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix error-boundary.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix upgrade-chart/store.ts and dock-tab.store.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix install-chart/store.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix edit-resource/store.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix create-resource/store.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix namespace-select.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix namespace-select-filter.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix crd-list.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix wrong types for extensions Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix circular dependency Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix circular dependency on catalogCategoryRegistry Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix api-kube Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix type errors, most <Select /> errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * fixing more type errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * some more fixing type errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * convert all KubeApis to injectable with legacy global backups Signed-off-by: Sebastian Malton <sebastian@malton.name> * factor out into a common file all the exports Signed-off-by: Sebastian Malton <sebastian@malton.name> * convert all KubeObjectStores to injectable with legacy global backups Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix lint Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove unused legacy KubeApi globals Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix bad previous commit Signed-off-by: Sebastian Malton <sebastian@malton.name> * more crash fixing Signed-off-by: Sebastian Malton <sebastian@malton.name> * try and fix behavioural tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix sidebar-and-tab-navigation-for-core.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix sidebar-and-tab-navigation-for-extensions.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-using-application-menu.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix catalog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make ThemeStore non-singleton and fix navigation-to-terminal-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * extensions.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix catalog-entity-registry.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-using-application-menu.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix log-resource-selector.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix dock-tabs.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix delete-cluster-dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-kubernetes-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-editor-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-proxy-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-using-application-menu.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-application-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix dock-store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix select.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix role-bindings/__tests__/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix hotbar-remove-command.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix cluster-role-bindings/__tests__/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-extension-specific-preferences.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-telemetry-preferences.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix closing-preferences.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-editor-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-proxy-preferences.test.ts - Fix other type errors too Signed-off-by: Sebastian Malton <sebastian@malton.name> * final tweaks Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add more tsconfig files, fix bug in <Catalog> - Make all of history, navigation injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix type errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * Convert all of kube-details-params/ and navigate/ to injectable - This fixes a runtime error that was encountered during testing Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix runtime errors on renderer - remove all static uses of `createPageParam` (and then removed the legacy global) - Made LensRendererExtension and LensMainExtension just used dependencies and not the getLegacyDi - Fixed circular dep in extension-loader Signed-off-by: Sebastian Malton <sebastian@malton.name> * Move registerStore calls to after injectMany Signed-off-by: Sebastian Malton <sebastian@malton.name> * replace all the rest of the legacy uses of apiManager Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix stack overflow and cycles in DI Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix NamespaceSelectFilter not opening Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix WizardStep and AddNamespaceDialog Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix KubeApi's not being registered Signed-off-by: Sebastian Malton <sebastian@malton.name> * cleanup WindowManager Signed-off-by: Sebastian Malton <sebastian@malton.name> * Proper fix for Wizard, fix NamespaceStore.subscribe Signed-off-by: Sebastian Malton <sebastian@malton.name> * Rewrite withTooltip to be more type correct - Fixes mobx related "too many recursive actions" error - Change all the uses of withTooltips to be functional components Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add e2e test to cover kube api registration Signed-off-by: Sebastian Malton <sebastian@malton.name> * cleanup internal-commands Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove cast in <Animate> Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix command-palette e2e test Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix type error after rebase Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix test name Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix lint Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix code to help CodeQL scanner Signed-off-by: Sebastian Malton <sebastian@malton.name> * update intree extension lock files Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix build-extensions picking wrong @types/react Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix tests from rebase Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix type error Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make KubeconfigSyncManager more injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix crash in test mode for Dialog Signed-off-by: Sebastian Malton <sebastian@malton.name> * make Select snapshots deterministic Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix new type error Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kube-object.store.test.ts typing Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix merge build issues Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix snapshots after merge Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix lint after merge Signed-off-by: Sebastian Malton <sebastian@malton.name> * reexport BaseKubeJsonApiObjectMetadata Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix typo in terminalSpawningPool Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove duplicate license header Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix typo to waitUntilDefined Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove iter use from getLegacyGlobalDiForExtensionApi Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove complex createStorage override Signed-off-by: Sebastian Malton <sebastian@malton.name> * override logger with mocks only when needed for tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove specialized overrideStore flags for getDiForUnitTesting Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove unnecessary | undefined types from the exactOptionalFieldTypes experiment Signed-off-by: Sebastian Malton <sebastian@malton.name> * use more descriptive name for local test mocks Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove unnecessary addition to 'make clean' target Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove oddity of KubeObjectStore.getById(undefined) being allowed Signed-off-by: Sebastian Malton <sebastian@malton.name> * rename KubeObject.getDescriptor in favour of name without fundemental JS meaning Signed-off-by: Sebastian Malton <sebastian@malton.name> * Simplify legacyRegisterApi when working in behaviour unit tests - Don't emit within main environment as there should be no auto registering there Signed-off-by: Sebastian Malton <sebastian@malton.name> * change confusing variable name in ReactiveDuration Signed-off-by: Sebastian Malton <sebastian@malton.name> * make visitor pattern more explicit for Entity contextMenuOpen Signed-off-by: Sebastian Malton <sebastian@malton.name> * toggleDetails -> toggleKubeDetailsPane is more specific Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove outdated comment Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix bug where LensExtension dependencies are not set Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix tests from the revert of react 18 Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix more tests from merge Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix typings with new is-compatible-extension tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * more type fixing Signed-off-by: Sebastian Malton <sebastian@malton.name> * Revert in-tree extension versions Signed-off-by: Sebastian Malton <sebastian@malton.name> * Improve name of guarding injectable for stores and apis - New name better implies that it is just a guard state and does not do anything Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add helper for <Select>.isMulti for storing in a Set<Value> Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix is-compatible-extension.test.ts types Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton authored and 
GitHub committed
1 parent
381d77c633
commit
dfcb7c3330
1062 files changed
+26512
-28689
No files matched your search
@@ -5,7 +5,7 @@
|
||||
|
||||
import React from "react";
|
||||
import "@testing-library/jest-dom/extend-expect";
|
||||
import { render, waitFor } from "@testing-library/react";
|
||||
import { render, screen, waitFor } from "@testing-library/react";
|
||||
import { ScrollSpy } from "../scroll-spy";
|
||||
import { RecursiveTreeView } from "../../tree-view";
|
||||
|
||||
@@ -21,44 +21,54 @@ Object.defineProperty(window, "IntersectionObserver", {
|
||||
|
||||
describe("<ScrollSpy/>", () => {
|
||||
it("renders w/o errors", () => {
|
||||
const { container } = render(<ScrollSpy render={() => (
|
||||
<div>
|
||||
<section id="application">
|
||||
<h1>Application</h1>
|
||||
</section>
|
||||
</div>
|
||||
)}/>);
|
||||
const { container } = render((
|
||||
<ScrollSpy
|
||||
render={() => (
|
||||
<div>
|
||||
<section id="application">
|
||||
<h1>Application</h1>
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
));
|
||||
|
||||
expect(container).toBeInstanceOf(HTMLElement);
|
||||
});
|
||||
|
||||
it("calls intersection observer", () => {
|
||||
render(<ScrollSpy render={() => (
|
||||
<div>
|
||||
<section id="application">
|
||||
<h1>Application</h1>
|
||||
</section>
|
||||
</div>
|
||||
)}/>);
|
||||
render((
|
||||
<ScrollSpy
|
||||
render={() => (
|
||||
<div>
|
||||
<section id="application">
|
||||
<h1>Application</h1>
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
));
|
||||
|
||||
expect(observe).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it("renders dataTree component", async () => {
|
||||
const { queryByTestId } = render(<ScrollSpy render={dataTree => (
|
||||
<div>
|
||||
<nav>
|
||||
<RecursiveTreeView data={dataTree}/>
|
||||
</nav>
|
||||
<section id="application">
|
||||
<h1>Application</h1>
|
||||
</section>
|
||||
</div>
|
||||
)}/>);
|
||||
render((
|
||||
<ScrollSpy
|
||||
render={dataTree => (
|
||||
<div>
|
||||
<nav>
|
||||
<RecursiveTreeView data={dataTree}/>
|
||||
</nav>
|
||||
<section id="application">
|
||||
<h1>Application</h1>
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(queryByTestId("TreeView")).toBeInTheDocument();
|
||||
});
|
||||
expect(await screen.findByTestId("TreeView")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("throws if no sections founded", () => {
|
||||
@@ -67,11 +77,15 @@ describe("<ScrollSpy/>", () => {
|
||||
|
||||
console.error = jest.fn();
|
||||
|
||||
expect(() => render(<ScrollSpy render={() => (
|
||||
<div>
|
||||
Content
|
||||
</div>
|
||||
)}/>)).toThrow();
|
||||
expect(() => render((
|
||||
<ScrollSpy
|
||||
render={() => (
|
||||
<div>
|
||||
Content
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
))).toThrow();
|
||||
|
||||
// Restore writing to stderr.
|
||||
console.error = err;
|
||||
@@ -81,111 +95,123 @@ describe("<ScrollSpy/>", () => {
|
||||
|
||||
describe("<TreeView/> dataTree inside <ScrollSpy/>", () => {
|
||||
it("contains links to all sections", async () => {
|
||||
const { queryByTitle } = render(<ScrollSpy render={dataTree => (
|
||||
<div>
|
||||
<nav>
|
||||
<RecursiveTreeView data={dataTree}/>
|
||||
</nav>
|
||||
<section id="application">
|
||||
<h1>Application</h1>
|
||||
<section id="appearance">
|
||||
<h2>Appearance</h2>
|
||||
</section>
|
||||
<section id="theme">
|
||||
<h2>Theme</h2>
|
||||
<div>description</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
)}/>);
|
||||
render((
|
||||
<ScrollSpy
|
||||
render={dataTree => (
|
||||
<div>
|
||||
<nav>
|
||||
<RecursiveTreeView data={dataTree}/>
|
||||
</nav>
|
||||
<section id="application">
|
||||
<h1>Application</h1>
|
||||
<section id="appearance">
|
||||
<h2>Appearance</h2>
|
||||
</section>
|
||||
<section id="theme">
|
||||
<h2>Theme</h2>
|
||||
<div>description</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(queryByTitle("Application")).toBeInTheDocument();
|
||||
expect(queryByTitle("Appearance")).toBeInTheDocument();
|
||||
expect(queryByTitle("Theme")).toBeInTheDocument();
|
||||
});
|
||||
expect(await screen.findByTitle("Application")).toBeInTheDocument();
|
||||
expect(await screen.findByTitle("Appearance")).toBeInTheDocument();
|
||||
expect(await screen.findByTitle("Theme")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("not showing links to sections without id", async () => {
|
||||
const { queryByTitle } = render(<ScrollSpy render={dataTree => (
|
||||
<div>
|
||||
<nav>
|
||||
<RecursiveTreeView data={dataTree}/>
|
||||
</nav>
|
||||
<section id="application">
|
||||
<h1>Application</h1>
|
||||
<section>
|
||||
<h2>Kubectl</h2>
|
||||
</section>
|
||||
<section id="appearance">
|
||||
<h2>Appearance</h2>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
)}/>);
|
||||
const { queryByTitle } = render((
|
||||
<ScrollSpy
|
||||
render={dataTree => (
|
||||
<div>
|
||||
<nav>
|
||||
<RecursiveTreeView data={dataTree}/>
|
||||
</nav>
|
||||
<section id="application">
|
||||
<h1>Application</h1>
|
||||
<section>
|
||||
<h2>Kubectl</h2>
|
||||
</section>
|
||||
<section id="appearance">
|
||||
<h2>Appearance</h2>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
));
|
||||
|
||||
expect(await screen.findByTitle("Application")).toBeInTheDocument();
|
||||
expect(await screen.findByTitle("Appearance")).toBeInTheDocument();
|
||||
|
||||
await waitFor(() => {
|
||||
expect(queryByTitle("Application")).toBeInTheDocument();
|
||||
expect(queryByTitle("Appearance")).toBeInTheDocument();
|
||||
expect(queryByTitle("Kubectl")).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it("expands parent sections", async () => {
|
||||
const { queryByTitle } = render(<ScrollSpy render={dataTree => (
|
||||
<div>
|
||||
<nav>
|
||||
<RecursiveTreeView data={dataTree}/>
|
||||
</nav>
|
||||
<section id="application">
|
||||
<h1>Application</h1>
|
||||
<section id="appearance">
|
||||
<h2>Appearance</h2>
|
||||
</section>
|
||||
<section id="theme">
|
||||
<h2>Theme</h2>
|
||||
<div>description</div>
|
||||
</section>
|
||||
</section>
|
||||
<section id="Kubernetes">
|
||||
<h1>Kubernetes</h1>
|
||||
<section id="kubectl">
|
||||
<h2>Kubectl</h2>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
)}/>);
|
||||
render((
|
||||
<ScrollSpy
|
||||
render={dataTree => (
|
||||
<div>
|
||||
<nav>
|
||||
<RecursiveTreeView data={dataTree}/>
|
||||
</nav>
|
||||
<section id="application">
|
||||
<h1>Application</h1>
|
||||
<section id="appearance">
|
||||
<h2>Appearance</h2>
|
||||
</section>
|
||||
<section id="theme">
|
||||
<h2>Theme</h2>
|
||||
<div>description</div>
|
||||
</section>
|
||||
</section>
|
||||
<section id="Kubernetes">
|
||||
<h1>Kubernetes</h1>
|
||||
<section id="kubectl">
|
||||
<h2>Kubectl</h2>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(queryByTitle("Application")).toHaveAttribute("aria-expanded");
|
||||
expect(queryByTitle("Kubernetes")).toHaveAttribute("aria-expanded");
|
||||
});
|
||||
|
||||
// console.log(prettyDOM());
|
||||
expect(await screen.findByTitle("Application")).toHaveAttribute("aria-expanded");
|
||||
expect(await screen.findByTitle("Kubernetes")).toHaveAttribute("aria-expanded");
|
||||
});
|
||||
|
||||
it("skips sections without headings", async () => {
|
||||
const { queryByTitle } = render(<ScrollSpy render={dataTree => (
|
||||
<div>
|
||||
<nav>
|
||||
<RecursiveTreeView data={dataTree}/>
|
||||
</nav>
|
||||
<section id="application">
|
||||
<h1>Application</h1>
|
||||
<section id="appearance">
|
||||
<p>Appearance</p>
|
||||
</section>
|
||||
<section id="theme">
|
||||
<h2>Theme</h2>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
)}/>);
|
||||
render((
|
||||
<ScrollSpy
|
||||
render={dataTree => (
|
||||
<div>
|
||||
<nav>
|
||||
<RecursiveTreeView data={dataTree}/>
|
||||
</nav>
|
||||
<section id="application">
|
||||
<h1>Application</h1>
|
||||
<section id="appearance">
|
||||
<p>Appearance</p>
|
||||
</section>
|
||||
<section id="theme">
|
||||
<h2>Theme</h2>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
));
|
||||
|
||||
expect(await screen.findByTitle("Application")).toBeInTheDocument();
|
||||
|
||||
await waitFor(() => {
|
||||
expect(queryByTitle("Application")).toBeInTheDocument();
|
||||
expect(queryByTitle("appearance")).not.toBeInTheDocument();
|
||||
expect(queryByTitle("Appearance")).not.toBeInTheDocument();
|
||||
expect(screen.queryByTitle("appearance")).not.toBeInTheDocument();
|
||||
expect(screen.queryByTitle("Appearance")).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -15,17 +15,19 @@ export interface ScrollSpyProps extends React.DOMAttributes<HTMLElement> {
|
||||
}
|
||||
|
||||
export const ScrollSpy = observer(({ render, htmlFor, rootMargin = "0px 0px -100% 0px" }: ScrollSpyProps) => {
|
||||
const parent = useRef<HTMLDivElement>();
|
||||
const parent = useRef<HTMLDivElement>(null);
|
||||
const sections = useRef<NodeListOf<HTMLElement>>();
|
||||
const [tree, setTree] = useState<NavigationTree[]>([]);
|
||||
const [activeElementId, setActiveElementId] = useState("");
|
||||
|
||||
const setSections = () => {
|
||||
sections.current = parent.current.querySelectorAll("section");
|
||||
const setSections = (): NodeListOf<HTMLElement> => {
|
||||
sections.current = parent.current?.querySelectorAll("section");
|
||||
|
||||
if (!sections.current.length) {
|
||||
if (!sections.current?.length) {
|
||||
throw new Error("No <section/> tag founded! Content should be placed inside <section></section> elements to activate navigation.");
|
||||
}
|
||||
|
||||
return sections.current;
|
||||
};
|
||||
|
||||
const getSectionsParentElement = () => {
|
||||
@@ -36,13 +38,17 @@ export const ScrollSpy = observer(({ render, htmlFor, rootMargin = "0px 0px -100
|
||||
setTree(getNavigation(getSectionsParentElement()));
|
||||
};
|
||||
|
||||
const getNavigation = (element: Element) => {
|
||||
const getNavigation = (element: Element | null | undefined): NavigationTree[] => {
|
||||
if (!element) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const sections = element.querySelectorAll(":scope > section"); // Searching only direct children of an element. Impossible without :scope
|
||||
const children: NavigationTree[] = [];
|
||||
|
||||
sections.forEach(section => {
|
||||
const id = section.getAttribute("id");
|
||||
const parentId = section.parentElement.id;
|
||||
const parentId = section.parentElement?.id;
|
||||
const name = section.querySelector("h1, h2, h3, h4, h5, h6")?.textContent;
|
||||
const selected = id === activeElementId;
|
||||
|
||||
@@ -63,18 +69,20 @@ export const ScrollSpy = observer(({ render, htmlFor, rootMargin = "0px 0px -100
|
||||
};
|
||||
|
||||
const handleIntersect = ([entry]: IntersectionObserverEntry[]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setActiveElementId(entry.target.closest("section[id]").id);
|
||||
const closest = entry.target.closest("section[id]");
|
||||
|
||||
if (entry.isIntersecting && closest) {
|
||||
setActiveElementId(closest.id);
|
||||
}
|
||||
};
|
||||
|
||||
const observeSections = () => {
|
||||
const observeSections = (list: NodeListOf<HTMLElement>) => {
|
||||
const options: IntersectionObserverInit = {
|
||||
root: document.getElementById(htmlFor) || getSectionsParentElement(),
|
||||
root: (htmlFor && document.getElementById(htmlFor)) || getSectionsParentElement(),
|
||||
rootMargin,
|
||||
};
|
||||
|
||||
sections.current.forEach((section) => {
|
||||
list.forEach((section) => {
|
||||
const observer = new IntersectionObserver(handleIntersect, options);
|
||||
const target = section.querySelector("section") || section;
|
||||
|
||||
@@ -83,9 +91,10 @@ export const ScrollSpy = observer(({ render, htmlFor, rootMargin = "0px 0px -100
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setSections();
|
||||
observeSections();
|
||||
}, []);
|
||||
const list = setSections();
|
||||
|
||||
observeSections(list);
|
||||
}, [parent.current]);
|
||||
|
||||
useEffect(() => {
|
||||
updateNavigation();
|
||||
|
||||
Reference in new issue
Block a user