test: add a missing test case (#979)

Co-authored-by: Mikhail Shabarov <mikhail@vaadin.com>
vaadin · Dec 8, 2020 · f88fa4c · f88fa4c
1 parent b5a88c2
commit f88fa4c
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 0 deletions.
diff --git a/test/dynamic-size-change.html b/test/dynamic-size-change.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>vaadin-combo-box dynamic size change tests</title>
+
+    <script src="../../web-component-tester/browser.js"></script>
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../../test-fixture/test-fixture.html" />
+    <link rel="import" href="common-imports.html" />
+    <script src="common.js"></script>
+  </head>
+
+  <body>
+    <test-fixture id="comboBox">
+      <template>
+        <vaadin-combo-box></vaadin-combo-box>
+      </template>
+    </test-fixture>
+
+    <script>
+      describe('dynamic size change', () => {
+        function scrollToIndex(comboBox, index) {
+          comboBox.$.overlay._scrollIntoView(index);
+        }
+
+        function getVisibleItems(comboBox) {
+          return Array.from(
+            comboBox.$.overlay._selector.querySelectorAll(
+              'vaadin-combo-box-item'
+            )
+          ).filter((item) => !item.hidden)
+            .filter(item => {
+              const itemRect = item.getBoundingClientRect();
+              const overlayRect = comboBox.$.overlay.$.dropdown.$.overlay.$.content.getBoundingClientRect();
+              return itemRect.bottom >= overlayRect.top && itemRect.top <= overlayRect.bottom;
+            });
+        }
+
+        describe('reduce size once scrolled to end', () => {
+          let comboBox;
+          const INITIAL_SIZE = 600;
+          const ACTUAL_SIZE = 500;
+
+          function dataProvider(params, callback) {
+            const items = Array(...new Array(params.pageSize)).map((_, i) => {
+              return {
+                label: 'Item ' + (params.pageSize * params.page + i),
+              };
+            });
+
+            let size = ACTUAL_SIZE;
+            if (!comboBox.size || comboBox.size === INITIAL_SIZE) {
+              // Pages may be requested not sequentially.
+              // Not to change combobox's size, if once changed to actual value
+              size = params.page > ACTUAL_SIZE / params.pageSize - 1
+                ? ACTUAL_SIZE
+                : INITIAL_SIZE;
+            }
+
+            callback(items, size);
+          }
+
+          beforeEach(() => {
+            comboBox = fixture('comboBox');
+            comboBox.dataProvider = dataProvider;
+          });
+
+          it('should not have item placeholders after size gets reduced', (done) => {
+            comboBox.opened = true;
+            scrollToIndex(comboBox, comboBox.size - 1);
+
+            window.animationFrameFlush(() => {
+              expect(getVisibleItems(comboBox).length).to.be.above(5);
+              getVisibleItems(comboBox).forEach((item) => {
+                expect(item.$.content.textContent).to.be.ok;
+              });
+              done();
+            });
+          });
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/test/test-suites.js b/test/test-suites.js
@@ -1,6 +1,7 @@
 const isPolymer2 = document.querySelector('script[src*="wct-browser-legacy"]') === null;
 
 window.VaadinComboBoxSuites = [
+  'dynamic-size-change.html',
   'vaadin-combo-box.html',
   'toggling-dropdown.html',
   'overlay-position.html',