Merge pull request #291 from miguelcobain/absorb-velcro

fix floating-ui tests
universal-ember · Apr 17, 2024 · 5fd930b · 5fd930b
2 parents bd82e19 + 667ec8c
commit 5fd930b
Show file tree

Hide file tree

Showing 6 changed files with 149 additions and 68 deletions.
diff --git a/test-app/.template-lintrc.js b/test-app/.template-lintrc.js
@@ -2,4 +2,7 @@
 
 module.exports = {
   extends: 'recommended',
+  rules: {
+    'no-inline-styles': false,
+  },
 };
diff --git a/test-app/tests/floating-ui/component-main-test.gts b/test-app/tests/floating-ui/component-main-test.gts
@@ -5,9 +5,9 @@ import { setupRenderingTest } from 'ember-qunit';
 import { modifier } from 'ember-modifier';
 import { FloatingUI } from 'ember-primitives/floating-ui';
 
-import { findElement, resetTestingContainerDimensions, styleFor } from './test-helpers';
+import { findElement, resetTestingContainerDimensions } from './test-helpers';
 
-module('Integration | Component | velcro', function (hooks) {
+module('Integration | Component | floating-ui', function (hooks) {
   setupRenderingTest(hooks);
 
   hooks.beforeEach(function () {

diff --git a/test-app/tests/floating-ui/component-test.gts b/test-app/tests/floating-ui/component-test.gts
@@ -6,26 +6,28 @@ import { FloatingUI } from 'ember-primitives/floating-ui';
 
 import { resetTestingContainerDimensions } from './test-helpers';
 
-module('Integration | Component | velcro (strict mode)', function (hooks) {
+module('Integration | Component | floating-ui (strict mode)', function (hooks) {
   setupRenderingTest(hooks);
 
   hooks.beforeEach(function () {
     resetTestingContainerDimensions();
   });
 
   test('it renders', async function (assert) {
-    await render(<template>
-      <FloatingUI as |velcro|>
-        <div id="hook" {{velcro.hook}} style="width: 200px; height: 40px">
-          {{velcro.data.rects.reference.width}}
-          {{velcro.data.rects.reference.height}}
-        </div>
-        <div id="loop" {{velcro.loop}} style="width: 200px; height: 400px">
-          {{velcro.data.rects.floating.width}}
-          {{velcro.data.rects.floating.height}}
-        </div>
-      </FloatingUI>
-    </template>);
+    await render(
+      <template>
+        <FloatingUI as |velcro|>
+          <div id="hook" {{velcro.hook}} style="width: 200px; height: 40px">
+            {{velcro.data.rects.reference.width}}
+            {{velcro.data.rects.reference.height}}
+          </div>
+          <div id="loop" {{velcro.loop}} style="width: 200px; height: 400px">
+            {{velcro.data.rects.floating.width}}
+            {{velcro.data.rects.floating.height}}
+          </div>
+        </FloatingUI>
+      </template>
+    );
 
     assert.dom('#hook').hasText('200 40', 'reference element has expected dimensions');
     assert.dom('#loop').hasText('200 400', 'floating element has expected dimensions');

diff --git a/test-app/tests/floating-ui/modifier-test.gts b/test-app/tests/floating-ui/modifier-test.gts
@@ -2,26 +2,24 @@ import { render } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 
-import { floatingUI } from 'ember-primitives/floating-ui'
+import { floatingUI } from 'ember-primitives/floating-ui';
 
-import {
-  addDataAttributes,
-  findElement,
-  resetTestingContainerDimensions,
-} from './test-helpers';
+import { addDataAttributes, findElement, resetTestingContainerDimensions } from './test-helpers';
 
-module('Integration | Modifier | velcro', function (hooks) {
+module('Integration | Modifier | floatingUI', function (hooks) {
   setupRenderingTest(hooks);
 
   hooks.beforeEach(function () {
     resetTestingContainerDimensions();
   });
 
   test('it renders', async function (assert) {
-    await render(<template>
-      <div id="reference">Reference</div>
-      <div {{floatingUI "#reference"}}></div>
-    </template>);
+    await render(
+      <template>
+        <div id="reference">Reference</div>
+        <div {{floatingUI "#reference"}}></div>
+      </template>
+    );
 
     assert.ok(true);
   });
@@ -30,19 +28,26 @@ module('Integration | Modifier | velcro', function (hooks) {
     let middleware = [addDataAttributes()];
 
     test('has default value', async function (assert) {
-      await render(<template>
-        <div id="velcro-reference">Velcro reference</div>
-        <div id="velcro" {{floatingUI "#velcro-reference" middleware=middleware}}>Velcro</div>
-      </template>);
+      await render(
+        <template>
+          <div id="velcro-reference">Velcro reference</div>
+          <div id="velcro" {{floatingUI "#velcro-reference" middleware=middleware}}>Velcro</div>
+        </template>
+      );
 
       assert.dom('#velcro ').hasAttribute('data-placement', 'bottom');
     });
 
     test('has named argument value', async function (assert) {
-      await render(<template>
-        <div id="velcro-reference">Velcro reference</div>
-        <div id="velcro" {{floatingUI "#velcro-reference" placement="bottom-start" middleware=middleware}}>Velcro</div>
-      </template>);
+      await render(
+        <template>
+          <div id="velcro-reference">Velcro reference</div>
+          <div
+            id="velcro"
+            {{floatingUI "#velcro-reference" placement="bottom-start" middleware=middleware}}
+          >Velcro</div>
+        </template>
+      );
 
       assert.dom('#velcro ').hasAttribute('data-placement', 'bottom-start');
     });
@@ -52,19 +57,26 @@ module('Integration | Modifier | velcro', function (hooks) {
     let middleware = [addDataAttributes()];
 
     test('has default value', async function (assert) {
-      await render(<template>
-        <div id="velcro-reference">Velcro reference</div>
-        <div id="velcro" {{floatingUI "#velcro-reference" middleware=middleware}}>Velcro</div>
-      </template>);
+      await render(
+        <template>
+          <div id="velcro-reference">Velcro reference</div>
+          <div id="velcro" {{floatingUI "#velcro-reference" middleware=middleware}}>Velcro</div>
+        </template>
+      );
 
       assert.dom('#velcro ').hasAttribute('data-strategy', 'fixed');
     });
 
     test('has named argument value', async function (assert) {
-      await render(<template>
-        <div id="velcro-reference">Velcro reference</div>
-        <div id="velcro" {{floatingUI "#velcro-reference" strategy="absolute" middleware=middleware}}>Velcro</div>
-      </template>);
+      await render(
+        <template>
+          <div id="velcro-reference">Velcro reference</div>
+          <div
+            id="velcro"
+            {{floatingUI "#velcro-reference" strategy="absolute" middleware=middleware}}
+          >Velcro</div>
+        </template>
+      );
 
       assert.dom('#velcro ').hasAttribute('data-strategy', 'absolute');
     });
@@ -74,20 +86,29 @@ module('Integration | Modifier | velcro', function (hooks) {
     test('can pass in distance', async function (assert) {
       let offsetDistance = 10;
 
-      await render(<template>
-        {{!-- render 2 Velcro's side by side, pass one a distance offset and compare the top values --}}
-        {{!-- template-lint-disable no-inline-styles --}}
-        <div style="display: flex">
-          <div>
-            <div id="velcro-reference">Velcro reference</div>
-            <div id="velcro1" {{floatingUI "#velcro-reference"}}>Velcro</div>
+      await render(
+        <template>
+          {{! render 2 Velcro's side by side, pass one a distance offset and compare the top values }}
+          {{! template-lint-disable no-inline-styles }}
+          <div style="display: flex">
+            <div>
+              <div id="velcro-reference">Velcro reference</div>
+              <div id="velcro1" {{floatingUI "#velcro-reference"}}>Velcro</div>
+            </div>
+            <div>
+              <div>velcroReference</div>
+              <div
+                id="velcro2"
+                {{floatingUI
+                  "#velcro-reference"
+                  offsetOptions=offsetDistance
+                  placement="bottom-start"
+                }}
+              >Velcro</div>
+            </div>
           </div>
-          <div>
-            <div>velcroReference</div>
-            <div id="velcro2" {{floatingUI "#velcro-reference" offsetOptions=offsetDistance placement="bottom-start"}}>Velcro</div>
-          </div>
-        </div>
-      </template>);
+        </template>
+      );
 
       let velcro1 = findElement('#velcro1');
       let velcro2 = findElement('#velcro2');
@@ -101,19 +122,24 @@ module('Integration | Modifier | velcro', function (hooks) {
     test('can pass in skidding', async function (assert) {
       let offsetSkidding = 10;
 
-      let offsetOptions =  { crossAxis: offsetSkidding };
+      let offsetOptions = { crossAxis: offsetSkidding };
 
-      await render(<template>
-        {{!-- render 2 Velcro's atop the other, pass one a skidding offset and compare the left values --}}
-        <div>
-          <div id="velcro-reference">Velcro reference</div>
-          <div id="velcro1" {{floatingUI "#velcro-reference"}}>Velcro</div>
-        </div>
-        <div>
-          <div id="velcro-reference">velcroReference</div>
-          <div id="velcro2" {{floatingUI "#velcro-reference" offsetOptions=offsetOptions}}>Velcro</div>
-        </div>
-      </template>);
+      await render(
+        <template>
+          {{! render 2 Velcro's atop the other, pass one a skidding offset and compare the left values }}
+          <div>
+            <div id="velcro-reference">Velcro reference</div>
+            <div id="velcro1" {{floatingUI "#velcro-reference"}}>Velcro</div>
+          </div>
+          <div>
+            <div id="velcro-reference2">velcroReference</div>
+            <div
+              id="velcro2"
+              {{floatingUI "#velcro-reference2" offsetOptions=offsetOptions}}
+            >Velcro</div>
+          </div>
+        </template>
+      );
 
       let velcro1 = findElement('#velcro1');
       let velcro2 = findElement('#velcro2');

diff --git a/test-app/tests/floating-ui/test-helpers.ts b/test-app/tests/floating-ui/test-helpers.ts
@@ -0,0 +1,50 @@
+import { assert } from '@ember/debug';
+import { find } from '@ember/test-helpers';
+
+import type { Middleware } from '@floating-ui/dom';
+
+// Floating UI middleware
+// provides data-* attributes for values in test assertions
+export function addDataAttributes(): Middleware {
+  return {
+    name: 'dataAttributes',
+    fn: ({ elements, placement, strategy }) => {
+      elements.floating.setAttribute('data-placement', placement);
+      elements.floating.setAttribute('data-strategy', strategy);
+
+      // https://floating-ui.com/docs/middleware#always-return-an-object
+      return {};
+    },
+  };
+}
+
+// testing containers transforms give Floating UI's logic some challenges
+export function resetTestingContainerDimensions() {
+  let element = document.querySelector('#ember-testing');
+
+  assert(
+    'Could not find #ember-testing. This utility is only valid in tests.',
+    element instanceof HTMLElement
+  );
+
+  let style = element.style;
+
+  // reset test container scale so values returned by getBoundingClientRect are accurate
+  Object.assign(style, {
+    transform: 'scale(1)',
+    width: '100%',
+    height: '100%',
+  });
+}
+
+export function findElement(selector: string) {
+  let element = find(selector);
+
+  assert(`Could not find element with '${selector}'`, element);
+  assert(
+    `Expected element for '${selector}' does not have a style attribute`,
+    element instanceof HTMLElement || element instanceof SVGElement
+  );
+
+  return element;
+}
diff --git a/turbo.json b/turbo.json
@@ -75,7 +75,7 @@
     },
     // production
     "build": {
-      "outputs": ["dist/**", "dist-types/**", "docs.json"],
+      "outputs": ["dist/**", "dist-types/**", "declarations/**", "docs.json"],
       "dependsOn": ["_syncPnpm"]
     },
     "_syncPnpm": {