added simple integration tests for hds-float-popover

showcase/tests/integration/modifiers/hds-float-popover-test.js

@@ -4,8 +4,12 @@
  */
 
 import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
 
 import { getFloatingUIOptions } from '@hashicorp/design-system-components/modifiers/hds-float-popover';
+import floatPopoverModifier from '@hashicorp/design-system-components/modifiers/hds-float-popover';
 
 //
 // ================================================================
@@ -96,6 +100,136 @@ module(
   }
 );
 
+// ================================================================
+
+function wait(timeout = 500) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, timeout);
+  });
+}
+
+const hbsPopoverBasicElements = hbs`
+  <div id="wrapper">
+    <div id="toggle">toggle</div>
+    <div id="popover"><div id="arrow"></div>popover</div>
+  </div>
+`;
+
 module('Integration | Modifier | hds-float-popover', function (hooks) {
-  // TODO
+  setupRenderingTest(hooks);
+
+  hooks.beforeEach(function () {
+    this.styleElement = document.createElement('style');
+
+    // see: https://codepen.io/didoo/pen/VwNpOJb
+    this.styleElement.textContent = `
+      body {
+        padding: 0px;
+      }
+
+      #ember-testing {
+        padding: 10px;
+      }
+
+      #wrapper {
+        position: relative;
+      }
+
+      #toggle {
+        width: 100px;
+        height: 40px;
+        background: green;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      #popover {
+        width: 200px;
+        height: 100px;
+        background: lightblue;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      #arrow {
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        background: red;
+      }
+    `;
+
+    document.head.appendChild(this.styleElement);
+  });
+
+  hooks.afterEach(() => {
+    if (this.styleElement) {
+      this.styleElement.remove();
+    }
+  });
+
+  test('render "popover" elements with default `popoverOptions`', async function (assert) {
+    await render(hbsPopoverBasicElements);
+    this.toggleElement = document.getElementById('toggle');
+    this.popoverElement = document.getElementById('popover');
+    this.arrowElement = document.getElementById('arrow');
+    this.popoverOptions = {
+      popoverArrow: this.arrowElement,
+    };
+    // apply the modifier to the popover (after the rendering)
+    await floatPopoverModifier(
+      this.popoverElement, // element the modifier is attached to
+      [this.toggleElement], // positional arguments
+      { popoverOptions: this.popoverOptions } // named arguments
+    );
+    // we need to wait for the Floating UI computation to complete (it's incremental)
+    await wait();
+    const popoverStyle = window.getComputedStyle(this.popoverElement);
+    const arrowStyle = window.getComputedStyle(this.arrowElement);
+    assert.deepEqual(
+      popoverStyle.position,
+      'absolute',
+      'popover position is absolute'
+    );
+    assert.deepEqual(popoverStyle.top, '40px', 'popover top is 40px');
+    assert.deepEqual(popoverStyle.left, '-50px', 'popover left is -50px');
+    assert.deepEqual(arrowStyle.left, '95px', 'arrow left is 95px');
+    assert.deepEqual(
+      this.arrowElement.getAttribute('data-hds-popover-placement'),
+      'bottom'
+    );
+  });
+
+  test('render "popover" elements with custom `popoverOptions`', async function (assert) {
+    await render(hbsPopoverBasicElements);
+    this.toggleElement = document.getElementById('toggle');
+    this.popoverElement = document.getElementById('popover');
+    this.arrowElement = document.getElementById('arrow');
+    this.popoverOptions = {
+      popoverPlacement: 'bottom-start',
+      popoverPositionStrategy: 'fixed',
+      popoverOffsetOptions: 20,
+      popoverArrow: this.arrowElement,
+    };
+    // apply the modifier to the popover (after the rendering)
+    await floatPopoverModifier(
+      this.popoverElement, // element the modifier is attached to
+      [this.toggleElement], // positional arguments
+      { popoverOptions: this.popoverOptions } // named arguments
+    );
+    // we need to wait for the Floating UI computation to complete (it's incremental)
+    await wait();
+    const popoverStyle = window.getComputedStyle(this.popoverElement);
+    const arrowStyle = window.getComputedStyle(this.arrowElement);
+    assert.deepEqual(popoverStyle.position, 'fixed');
+    assert.deepEqual(popoverStyle.top, '70px');
+    assert.deepEqual(popoverStyle.left, '10px');
+    assert.deepEqual(arrowStyle.left, '45px');
+    assert.deepEqual(
+      this.arrowElement.getAttribute('data-hds-popover-placement'),
+      'bottom-start'
+    );
+  });
 });