added unit tests for getFloatingUIOptions() function

showcase/tests/integration/modifiers/hds-anchored-position-test.js

@@ -0,0 +1,132 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { module, test } from 'qunit';
+
+import { getFloatingUIOptions } from '@hashicorp/design-system-components/modifiers/hds-anchored-position';
+
+//
+// ================================================================
+//
+// NOTICE:
+// we're collecting both _unit_ and _integration_ tests
+// in a single file for simplicity / ease of maintainance
+//
+// ================================================================
+//
+
+module(
+  'Unit | Modifier | hds-anchored-position - getFloatingUIOptions()',
+  function () {
+    test('returns the default values if no options are provided', async function (assert) {
+      const floatingUIOptions = getFloatingUIOptions({});
+      assert.deepEqual(floatingUIOptions.placement, 'bottom');
+      assert.deepEqual(floatingUIOptions.strategy, 'absolute');
+      // this is the default generated by Floating UI for the offset
+      assert.deepEqual(floatingUIOptions.middleware[0].name, 'offset');
+      assert.deepEqual(floatingUIOptions.middleware[0].options, 0);
+    });
+    test('returns the offset options provided via `offsetOptions` to the middleware', async function (assert) {
+      // https://floating-ui.com/docs/offset
+      let floatingUIOptions;
+      floatingUIOptions = getFloatingUIOptions({ offsetOptions: 1234 });
+      assert.deepEqual(floatingUIOptions.middleware[0].name, 'offset');
+      assert.deepEqual(floatingUIOptions.middleware[0].options, 1234);
+      floatingUIOptions = getFloatingUIOptions({
+        offsetOptions: { mainAxis: 1234, crossAxis: 9876 },
+      });
+      assert.deepEqual(floatingUIOptions.middleware[0].name, 'offset');
+      assert.deepEqual(floatingUIOptions.middleware[0].options, {
+        mainAxis: 1234,
+        crossAxis: 9876,
+      });
+    });
+    test('returns the offset options for the `flip/shift` middleware functions if the `enableCollisionDetection` is set to `true`', async function (assert) {
+      let floatingUIOptions;
+      floatingUIOptions = getFloatingUIOptions({
+        enableCollisionDetection: true,
+      });
+      assert.deepEqual(floatingUIOptions.middleware.length, 3);
+      assert.deepEqual(floatingUIOptions.middleware[0].name, 'offset');
+      assert.deepEqual(floatingUIOptions.middleware[1].name, 'flip');
+      assert.deepEqual(floatingUIOptions.middleware[1].options, { padding: 8 });
+      assert.deepEqual(floatingUIOptions.middleware[2].name, 'shift');
+      assert.deepEqual(floatingUIOptions.middleware[2].options, { padding: 8 });
+      floatingUIOptions = getFloatingUIOptions({
+        enableCollisionDetection: true,
+        flipOptions: { padding: 1234 },
+        shiftOptions: { padding: 9876 },
+      });
+      assert.deepEqual(floatingUIOptions.middleware[1].options, {
+        padding: 1234,
+      });
+      assert.deepEqual(floatingUIOptions.middleware[2].options, {
+        padding: 9876,
+      });
+    });
+    test('returns the offset options for the `flip` middleware functions if the `enableCollisionDetection` is set to `flip`', async function (assert) {
+      let floatingUIOptions;
+      floatingUIOptions = getFloatingUIOptions({
+        enableCollisionDetection: 'flip',
+      });
+      assert.deepEqual(floatingUIOptions.middleware.length, 2);
+      assert.deepEqual(floatingUIOptions.middleware[0].name, 'offset');
+      assert.deepEqual(floatingUIOptions.middleware[1].name, 'flip');
+      assert.deepEqual(floatingUIOptions.middleware[1].options, { padding: 8 });
+      floatingUIOptions = getFloatingUIOptions({
+        enableCollisionDetection: 'flip',
+        flipOptions: { padding: 1234 },
+      });
+      assert.deepEqual(floatingUIOptions.middleware[1].options, {
+        padding: 1234,
+      });
+    });
+    test('returns the offset options for the `shift` middleware functions if the `enableCollisionDetection` is set to `shift`', async function (assert) {
+      let floatingUIOptions;
+      floatingUIOptions = getFloatingUIOptions({
+        enableCollisionDetection: 'shift',
+      });
+      assert.deepEqual(floatingUIOptions.middleware.length, 2);
+      assert.deepEqual(floatingUIOptions.middleware[0].name, 'offset');
+      assert.deepEqual(floatingUIOptions.middleware[1].name, 'shift');
+      assert.deepEqual(floatingUIOptions.middleware[1].options, { padding: 8 });
+      floatingUIOptions = getFloatingUIOptions({
+        enableCollisionDetection: 'shift',
+        shiftOptions: { padding: 9876 },
+      });
+      assert.deepEqual(floatingUIOptions.middleware[1].options, {
+        padding: 9876,
+      });
+    });
+    test('returns the `middlewareExtra` provided as an option', async function (assert) {
+      function testFunction() {
+        return { name: 'test', options: { abc: 1234 } };
+      }
+      const floatingUIOptions = getFloatingUIOptions({
+        enableCollisionDetection: true,
+        middlewareExtra: [testFunction()],
+      });
+      assert.deepEqual(floatingUIOptions.middleware.length, 4);
+      // we want also to test the order of the middleware (the extra should be the last)
+      assert.deepEqual(floatingUIOptions.middleware[0].name, 'offset');
+      assert.deepEqual(floatingUIOptions.middleware[1].name, 'flip');
+      assert.deepEqual(floatingUIOptions.middleware[2].name, 'shift');
+      assert.deepEqual(floatingUIOptions.middleware[3].name, 'test');
+      assert.deepEqual(floatingUIOptions.middleware[3].options, { abc: 1234 });
+    });
+    test('returns the `arrowElement` provided as an option', async function (assert) {
+      const floatingUIOptions = getFloatingUIOptions({
+        // notice: this in reality should be a DOM element, but we found a string works as well for this type of test
+        arrowElement: 'test1234',
+        arrowPadding: 1234,
+      });
+      assert.deepEqual(floatingUIOptions.middleware[1].name, 'arrow');
+      assert.deepEqual(floatingUIOptions.middleware[1].options, {
+        element: 'test1234',
+        padding: 1234,
+      });
+    });
+  }
+);