fix(core/tree): initializing tree (#319)

Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>
siemens · Jan 26, 2023 · 7d9b373 · 7d9b373
1 parent f45ac44
commit 7d9b373
Show file tree

Hide file tree

Showing 9 changed files with 178 additions and 14 deletions.
diff --git a/packages/core/src/components/button/test/button.e2e.ts b/packages/core/src/components/button/test/button.e2e.ts
@@ -25,6 +25,8 @@ regressionTest.describe('button: basic', () => {
       body.querySelectorAll('button').forEach((b) => b.classList.add('hover'));
     }, bodyElement);
 
+    await page.waitForSelector('ix-button > button.hover');
+
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
 

diff --git a/packages/core/src/components/my-component/my-component.scss b/packages/core/src/components/my-component/my-component.scss
@@ -14,13 +14,4 @@
   flex-direction: column;
   width: 100vw;
   height: 100vh;
-
-  main {
-    width: 100%;
-    padding: 2rem;
-  }
-
-  ix-chip {
-    margin-block-end: $default-space;
-  }
 }
diff --git a/packages/core/src/components/tree/test/basic/index.html b/packages/core/src/components/tree/test/basic/index.html
@@ -0,0 +1,75 @@
+<!--
+SPDX-FileCopyrightText: 2022 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body>
+    <div style="height: 12rem; width: 100%">
+      <ix-tree root="root" id="tree"></ix-tree>
+    </div>
+
+    <script>
+      (async () => {
+        await window.customElements.whenDefined('ix-tree');
+        const tree = document.getElementById('tree');
+        const context = {
+          root: {
+            isExpanded: true,
+            isSelected: false,
+          },
+          sample: {
+            isExpanded: true,
+            isSelected: false,
+          },
+        };
+
+        const model = {
+          root: {
+            id: 'root',
+            children: ['sample'],
+            hasChildren: true,
+            data: { name: '' },
+          },
+          sample: {
+            id: 'sample',
+            children: [],
+            hasChildren: true,
+            data: { name: 'Sample' },
+          },
+        };
+
+        for (let i = 0; i < 100; i++) {
+          const id = `sample-child-${i}`;
+          model[id] = {
+            id,
+            data: {
+              name: `Sample Child ${i}`,
+            },
+            hasChildren: false,
+            children: [],
+          };
+          model.sample.children.push(id);
+        }
+
+        context['sample-child-85'] = {
+          isExpanded: false,
+          isSelected: true,
+        };
+
+        tree.model = { ...model };
+        tree.context = { ...context };
+      })();
+    </script>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/components/tree/test/tree.e2e.ts b/packages/core/src/components/tree/test/tree.e2e.ts
@@ -0,0 +1,73 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { expect } from '@playwright/test';
+import { regressionTest } from '@utils/test';
+
+regressionTest.describe('tree', () => {
+  regressionTest('should append item to tree', async ({ page }) => {
+    await page.goto('tree/test/basic');
+
+    const treeViewportHandle = await page.waitForSelector('ix-tree');
+
+    await page.evaluate((tree) => {
+      const model = tree.model;
+
+      model['last-child'] = {
+        id: 'last-child',
+        children: [],
+        hasChildren: false,
+        data: { name: 'last-child' },
+      };
+
+      model['sample'].children.push('last-child');
+
+      tree.model = { ...model };
+    }, treeViewportHandle);
+
+    await page.waitForTimeout(500);
+
+    await page.evaluate((treeViewport) => {
+      treeViewport.scrollTop = 32 * 999;
+    }, treeViewportHandle);
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+
+  regressionTest('should keep scroll state', async ({ page }) => {
+    await page.goto('tree/test/basic');
+
+    const treeViewportHandle = await page.waitForSelector('ix-tree');
+
+    await page.evaluate((treeViewport) => {
+      treeViewport.scrollTop = 32 * 50;
+    }, treeViewportHandle);
+
+    await page.evaluate((tree) => {
+      const model = tree.model;
+
+      model['insert-below-50'] = {
+        id: 'insert-below-50',
+        children: [],
+        hasChildren: false,
+        data: { name: 'insert-below-50' },
+      };
+
+      const indexOfItem50 = tree.model.sample.children.findIndex(
+        (id) => id === 'sample-child-50'
+      );
+
+      model['sample'].children.splice(indexOfItem50 + 1, 0, 'insert-below-50');
+
+      tree.model = { ...model };
+    }, treeViewportHandle);
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+});
diff --git a/...shots/tree-should-append-item-to-tree-1-chromium---theme-classic-dark-linux.png b/...shots/tree-should-append-item-to-tree-1-chromium---theme-classic-dark-linux.png
diff --git a/...hots/tree-should-append-item-to-tree-1-chromium---theme-classic-light-linux.png b/...hots/tree-should-append-item-to-tree-1-chromium---theme-classic-light-linux.png
diff --git a/...apshots/tree-should-keep-scroll-state-1-chromium---theme-classic-dark-linux.png b/...apshots/tree-should-keep-scroll-state-1-chromium---theme-classic-dark-linux.png
diff --git a/...pshots/tree-should-keep-scroll-state-1-chromium---theme-classic-light-linux.png b/...pshots/tree-should-keep-scroll-state-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/components/tree/tree.tsx b/packages/core/src/components/tree/tree.tsx
@@ -72,7 +72,7 @@ export class Tree {
    */
   @Event() nodeRemoved: EventEmitter<any>;
 
-  private hyperlist: any;
+  private hyperlist: Hyperlist;
 
   private toggleListener = new Map<HTMLElement, Function>();
   private itemClickListener = new Map<HTMLElement, Function>();
@@ -207,8 +207,7 @@ export class Tree {
   }
 
   componentDidLoad() {
-    const config = this.getVirtualizerOptions();
-    this.hyperlist = new Hyperlist(this.host, config);
+    this.initList();
 
     this.observer = new MutationObserver((records) => {
       let removed = [];
@@ -233,7 +232,11 @@ export class Tree {
   }
 
   componentWillRender() {
-    this.refreshList();
+    if (this.isListInitialized()) {
+      this.refreshList();
+    } else {
+      this.initList();
+    }
   }
 
   disconnectedCallback() {
@@ -243,7 +246,21 @@ export class Tree {
 
   @Watch('model')
   modelChange() {
-    this.refreshList();
+    if (!this.isListInitialized()) {
+      this.initList();
+    }
+  }
+
+  private isListInitialized() {
+    const itemPositions = this.hyperlist?._itemPositions;
+
+    return (
+      itemPositions !== undefined &&
+      itemPositions.length &&
+      !itemPositions?.some(
+        (item: number) => item === undefined || Number.isNaN(item)
+      )
+    );
   }
 
   private refreshList() {
@@ -252,6 +269,12 @@ export class Tree {
     }
   }
 
+  private initList() {
+    this.hyperlist?.destroy();
+    const config = this.getVirtualizerOptions();
+    this.hyperlist = new Hyperlist(this.host, config);
+  }
+
   render() {
     return (
       <Host>