mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
test(tree-view): coverage for expandAll
and expandNodes
(#2063)
This commit is contained in:
parent
18c964e579
commit
f1a27ec855
3 changed files with 97 additions and 3 deletions
|
@ -1,5 +1,54 @@
|
|||
<script>
|
||||
<script lang="ts">
|
||||
import { TreeView as TreeViewNav } from "carbon-components-svelte";
|
||||
import TreeView from "./TreeView/TreeView.test.svelte";
|
||||
import { onMount } from "svelte";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: "/treeview",
|
||||
name: "TreeView",
|
||||
component: TreeView,
|
||||
},
|
||||
] as const;
|
||||
|
||||
let currentPath = window.location.pathname;
|
||||
|
||||
function navigate(path: string) {
|
||||
history.pushState({}, "", path);
|
||||
currentPath = path;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const handlePopState = () => {
|
||||
currentPath = window.location.pathname;
|
||||
};
|
||||
|
||||
window.addEventListener("popstate", handlePopState);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("popstate", handlePopState);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<TreeView />
|
||||
<div style:display="flex">
|
||||
<div>
|
||||
<TreeViewNav
|
||||
labelText="Routes"
|
||||
nodes={routes.map((route) => ({
|
||||
id: route.path,
|
||||
text: route.name,
|
||||
}))}
|
||||
on:select={(e) => {
|
||||
navigate(e.detail.id.toString());
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div style:flex="1">
|
||||
{#each routes as route (route.path)}
|
||||
{#if currentPath === route.path}
|
||||
<svelte:component this={route.component} />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue