@momentum-ui/web-components 2.5.4 → 2.5.7

package/src/components/datepicker/tokens/md-datepicker-tokens.js

@@ -0,0 +1,52 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const datepicker = {
+  prefix: "md",
+  component: "datepicker",
+  default: {
+    hover: {
+      "bg-color": {
+        light: colors.gray[20].name,
+        dark: colors.gray[70].name
+      }
+    }
+  },
+  selected: {
+    today: {
+      "text-color": {
+        light: colors.white[100].name,
+        dark: colors.gray["05"].name
+      }
+    }
+  },
+  range: {
+    "text-color": {
+      light: colors.gray[100].name,
+      dark: colors.gray["05"].name
+    },
+    "bg-color": {
+      light: colors.gray[20].name,
+      dark: colors.gray[60].name
+    },
+    hover: {
+      "bg-color": {
+        light: colors.gray[30].name,
+        dark: colors.gray[70].name
+      }
+    },
+    edge: {
+      "text-color": {
+        light: colors.gray["05"].name,
+        dark: colors.gray[100].name
+      },
+      "bg-color": {
+        light: colors.gray[100].name,
+        dark: colors.gray["05"].name
+      }
+    }
+  }
+};
+
+module.exports = datepicker;

package/src/components/draggable/Draggable.mdx

@@ -0,0 +1,258 @@
+# Draggable Component Configuration (Using [SortableJS](https://github.com/SortableJS/Sortable))
+
+`Draggable` is a component used for reorder drag-and-drop lists. Its purpose is to drag from one list to another or within the same list using `md-draggable` and `md-draggable-item` components.
+
+By default `md-draggable` component specifies slotable `md-draggable-item` components that can be inserted into and should be draggable. Also by default `Draggable` component disallow sorting inside list or between lists.
+To change this, please set property `sort` to attributes in markup to `md-draggable`.
+
+The `SortableJS` has many configuration options. Using different combinations of those properties. The `Draggable` component exposes these options via Lit-Element properties and attributes.
+** Please Note that by default all `Boolean` properties set to `false` and all `String` properties set to `""` (empty string) **:
+
+## ** group (by default `null`) ** ##
+
+_Object property_. To drag elements from one list into another, both lists must have the same group value. You can also define whether lists can give away, give and keep a copy (clone), and receive elements.
+
+- name: `String` — group name
+- pull: `true|false|["foo", "bar"]|'clone'|function` — ability to move from the list. clone — copy the item, rather than move. Or an array of group names which the elements may be put in. Defaults to true.
+- put: `true|false|["baz", "qux"]|function` — whether elements can be added from other lists, or an array of group names from which elements can be added.
+- revertClone: `boolean` — revert cloned element to initial position after moving to a another list.
+
+Example:
+
+```
+ <md-draggable sort .group=${{ name: "LeftList", pull: true, put: ["RightList] }}>
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+or
+
+ ```
+ <md-draggable sort group="ListGroup">
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+## ** sort ** ##
+
+_Boolean property_. Allow sorting inside list.
+
+Example:
+ ```
+ <md-draggable sort>
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+## ** delay ** ##
+
+_Number property_. Time in milliseconds to define when the sorting should start. Unfortunately, due to browser restrictions, delaying is not possible on IE or Edge with native drag & drop.
+
+## ** animation (in ms time) ** ##
+
+Number property. Animation speed moving items when sorting, `0` — without animation.
+
+## ** handle ** ##
+
+_String property_. To make list items draggable, Sortable disables text selection by the user. That's not always desirable. To allow text selection, define a drag handler, which is an area of every list element that allows it to be dragged around.
+
+Example:
+
+ ```
+ <md-draggable sort handle="md-icon[name='icon-drag_16']">
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+## ** filter ** ##
+
+_String property_. Selectors that do not lead to dragging.
+
+Example:
+
+ ```
+ <md-draggable sort filter="md-draggable-item[disabled]">
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+## ** direction (will be `vertical` if not given) ** ##
+
+_String property_. Direction of sortable items
+
+## ** draggable (`md-draggable-item` by default) ** ##
+
+_String property_. Specifies which items inside the element should be draggable.
+
+Example:
+
+```
+ <md-draggable draggable-items="md-draggable-items">
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+## ** ghostClass ** ##
+
+_String property_. Class name for the drop placeholder.
+
+Example:
+
+```
+ <md-draggable ghost-class="your-custom-ghost-class">
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+## ** chosenClass ** ##
+
+_String property_. Class name for the chosen item.
+
+Example:
+
+```
+ <md-draggable chosen-class="your-custom-chosen-class">
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+## ** dragClass ** ##
+
+_String property_. Class name for the dragging item.
+
+Example:
+
+```
+ <md-draggable drag-class="your-custom-drag-class">
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+## ** forceFallback ** ##
+
+_Boolean property_. Ignore the HTML5 DnD behaviour and force the fallback to kick in.
+
+Example:
+
+```
+ <md-draggable force-fallback>
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+## ** fallbackClass (to use this please set `forceFallback` property to `true`) ** ##
+
+_String property_. Class name for the cloned DOM Element when using forceFallback.
+
+Example:
+
+```
+ <md-draggable fallback-class="your-custom-fallback-class">
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+## ** disabled ** ##
+
+_Boolean property_. Disables the sortable if set to true.
+
+Example:
+
+```
+ <md-draggable disabled>
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+***
+
+`Draggable` component contain event listeners that are fired when a specific option is updated. The table describe when event is calling (To see object detail, please follow link in `Event Type` table section):
+
+| Event | Description | Event Type |
+| :-: | :-: | :-: |
+| drag-change | Dragging element changes position | [SortableEvent](https://github.com/SortableJS/Sortable#event-object-demo) |
+| drag-clone | Creating a clone of element | [SortableEvent](https://github.com/SortableJS/Sortable#event-object-demo) |
+| drag-unchoose | Element is unchosen | [SortableEvent](https://github.com/SortableJS/Sortable#event-object-demo) |
+| drag-choose | Element is chosen | [SortableEvent](https://github.com/SortableJS/Sortable#event-object-demo) |
+| drag-remove | Element is removed from the list into another list | [SortableEvent](https://github.com/SortableJS/Sortable#event-object-demo) |
+| drag-add | Element is dropped into the list from another list | [SortableEvent](https://github.com/SortableJS/Sortable#event-object-demo) |
+| drag-end | Element dragging ended | [SortableEvent](https://github.com/SortableJS/Sortable#event-object-demo) |
+| drag-start | Element dragging started | [SortableEvent](https://github.com/SortableJS/Sortable#event-object-demo) |
+| drag-move | Event when you move an item in the list or between lists | [MoveEvent](https://github.com/SortableJS/Sortable#move-event-object) |
+
+
+
+
+
+

package/src/components/draggable/Draggable.stories.ts

@@ -0,0 +1,181 @@
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { withA11y } from "@storybook/addon-a11y";
+import { boolean, withKnobs, color, text, select } from "@storybook/addon-knobs";
+import mdx from "./Draggable.mdx";
+import "@/components/draggable/Draggable";
+import "@/components/draggable/DraggableItem";
+import "@/components/icon/Icon";
+import { html } from "lit-element";
+import { GroupOptions } from "sortablejs";
+import { SelectTypeKnobValue } from "@storybook/addon-knobs/dist/components/types";
+
+export default {
+  title: "Components/Draggable",
+  component: "md-draggable",
+  decorators: [withKnobs, withA11y],
+  parameters: {
+    docs: {
+      page: mdx
+    },
+    a11y: {
+      element: "md-draggable"
+    },
+    parameters: {
+      description: {
+        component: "For more information please look: https://sortablejs.github.io/Sortable/"
+      }
+    }
+  }
+};
+
+export const Draggable = () => {
+  const darkTheme = boolean("Dark Mode", false);
+  const lumosTheme = boolean("Lumos Theme", false);
+
+  const leftSort = boolean("Allow sorting inside left draggable list", false, "Left List");
+  const leftDisabled = boolean("Disables the left sortable", false, "Left List");
+  const leftFiltered = text("Left list items that will be filtered out", "md-draggable-item[disabled]", "Left List");
+  const leftGroupName = text("Group name", "shared-list", "Left List");
+  const leftGroupPull = select(
+    "Select pull option",
+    {
+      clone: "clone",
+      TurnOn: (true as unknown) as SelectTypeKnobValue,
+      TurnOff: (false as unknown) as SelectTypeKnobValue,
+      GroupArray: [leftGroupName]
+    },
+    "clone",
+    "Left List"
+  );
+  const leftGroupPut = select(
+    "Select left put option",
+    {
+      TurnOn: (true as unknown) as SelectTypeKnobValue,
+      TurnOff: (false as unknown) as SelectTypeKnobValue,
+      GroupArray: [leftGroupName]
+    },
+    (true as unknown) as SelectTypeKnobValue,
+    "Left List"
+  );
+  const leftHandle = text("Drag handle selector within left list items", "md-draggable-item", "Left List");
+
+  const rightSort = boolean("Allow sorting inside right draggable list", false, "Right List");
+  const rightDisabled = boolean("Disables the right sortable", false, "Right List");
+  const rightFiltered = text("Right list items that will be filtered out", "md-draggable-item[disabled]", "Right List");
+  const rightGroupName = text("Group name", "shared-list", "Right List");
+  const rightGroupPull = select(
+    "Select pull option",
+    {
+      clone: "clone",
+      TurnOn: (true as unknown) as SelectTypeKnobValue,
+      TurnOff: (false as unknown) as SelectTypeKnobValue,
+      GroupArray: [rightGroupName]
+    },
+    "clone",
+    "Right List"
+  );
+  const rightGroupPut = select(
+    "Select right put option",
+    {
+      TurnOn: (true as unknown) as SelectTypeKnobValue,
+      TurnOff: (false as unknown) as SelectTypeKnobValue,
+      GroupArray: [rightGroupName]
+    },
+    (true as unknown) as SelectTypeKnobValue,
+    "Right List"
+  );
+  const rightHandle = text("Drag handle selector within right list items", "md-draggable-item", "Right List");
+
+  const ghostClass = color("Class name for the drop placeholder", "#c8ebfb");
+  const chooseClass = color("Class name for the chosen item", "#ddc74e");
+
+  return html`
+    <style>
+      md-draggable-item {
+        border: 1px solid rgba(0, 0, 0, 0.125);
+        display: flex;
+        justify-content: center;
+        padding: 0.5rem 1rem;
+        position: relative;
+      }
+
+      md-draggable-item[disabled] {
+        background-color: #dc3545;
+      }
+
+      .custom-ghost {
+        background-color: ${ghostClass};
+      }
+
+      .custom-choose {
+        border: 3px dashed ${chooseClass};
+      }
+
+      .draggable-wrapper {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+      }
+
+      md-icon[name="icon-drag_16"] {
+        margin-right: 10px;
+      }
+    </style>
+    <md-theme class="theme-toggle" ?darkTheme=${darkTheme} ?lumos=${lumosTheme}>
+      <div class="draggable-wrapper">
+        <md-draggable
+          ?sort=${leftSort}
+          ?disabled=${leftDisabled}
+          .filter=${leftFiltered}
+          .handle=${leftHandle}
+          .group=${{
+            name: leftGroupName,
+            pull: leftGroupPull as unknown,
+            put: leftGroupPut as unknown
+          } as GroupOptions}
+          ghost-class="custom-ghost"
+          chosen-class="custom-choose"
+          draggable-items="md-draggable-item"
+        >
+          <md-draggable-item slot="draggable-item"
+            ><md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)</md-draggable-item
+          >
+          <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+          <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+          <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+          <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+        </md-draggable>
+
+        <md-draggable
+          ?sort=${rightSort}
+          ?disabled=${rightDisabled}
+          .filter=${rightFiltered}
+          .handle=${rightHandle}
+          .group=${{
+            name: rightGroupName,
+            pull: rightGroupPull as unknown,
+            put: rightGroupPut as unknown
+          } as GroupOptions}
+          ghost-class="custom-ghost"
+          chosen-class="custom-choose"
+          draggable-items="md-draggable-item"
+        >
+          <md-draggable-item slot="draggable-item">Sortable Item6</md-draggable-item>
+          <md-draggable-item slot="draggable-item"
+            ><md-icon name="icon-drag_16"></md-icon>Sortable Item7 (Handle)</md-draggable-item
+          >
+          <md-draggable-item slot="draggable-item">Sortable Item8</md-draggable-item>
+          <md-draggable-item slot="draggable-item" disabled>Sortable Item9 (Disabled)</md-draggable-item>
+          <md-draggable-item slot="draggable-item">Sortable Item10</md-draggable-item>
+        </md-draggable>
+      </div>
+    </md-theme>
+  `;
+};

package/src/components/draggable/Draggable.test.ts

@@ -0,0 +1,121 @@
+import { elementUpdated, fixture, fixtureCleanup, html, oneEvent } from "@open-wc/testing-helpers";
+import { mocked } from "ts-jest/utils";
+import "./Draggable";
+import "./DraggableItem";
+import { Draggable } from "./Draggable";
+import Sortable, { SortableEvent, SortableOptions } from "sortablejs";
+import { DraggableItem } from "./DraggableItem";
+
+jest.mock("sortablejs");
+
+const mockedSortable = mocked(Sortable, true);
+
+const resetMocks = () => {
+  mockedSortable.mockClear();
+  jest.restoreAllMocks();
+};
+
+describe("Draggable Component", () => {
+  let element: Draggable.ELEMENT;
+
+  afterEach(fixtureCleanup);
+
+  beforeEach(async () => {
+    resetMocks();
+
+    element = await fixture<Draggable.ELEMENT>(
+      html`
+        <md-draggable>
+          <md-draggable-item slot="draggable-item">Sortable Item1</md-draggable-item>
+          <md-draggable-item slot="draggable-item">Sortable Item2</md-draggable-item>
+          <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+          <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+        </md-draggable>
+      `
+    );
+  });
+
+  test("should create sortable instance with options", async () => {
+    expect(mockedSortable.create.mock.calls).toHaveLength(2);
+    const parameters = mockedSortable.create.mock.calls[0];
+    expect(parameters[0]).toBe(element);
+  });
+
+  test.each([
+    ["choose", "handleOnChoose"],
+    ["unchoose", "handleOnUnchoose"],
+    ["move", "handleOnMove"],
+    ["end", "handleOnEnd"],
+    ["clone", "handleOnClone"],
+    ["start", "handleOnStart"],
+    ["add", "handleOnAdd"],
+    ["remove", "handleOnRemove"],
+    ["change", "handleOnChange"]
+  ])("emitted `%s` event from sortable", async (event: string, functionName: string) => {
+    const mockSortableEvent = new CustomEvent<SortableEvent>(event, {
+      detail: {
+        from: (jest.fn().mockReturnValue(element) as unknown) as HTMLElement,
+        clone: (jest.fn().mockReturnValue(element) as unknown) as HTMLElement,
+        item: (jest.fn().mockReturnValue(element) as unknown) as HTMLElement,
+        target: (jest.fn().mockReturnValue(element) as unknown) as HTMLElement,
+        to: (jest.fn().mockReturnValue(element) as unknown) as HTMLElement,
+        newIndex: (jest.fn().mockReturnValue(0) as unknown) as number,
+        oldIndex: (jest.fn().mockReturnValue(1) as unknown) as number
+      } as SortableEvent
+    });
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
+    setTimeout(() => element[functionName](mockSortableEvent));
+
+    const { detail } = await oneEvent(element, `drag-${event}`);
+
+    expect(detail).toBeDefined();
+    expect(detail.srcEvent).toEqual(mockSortableEvent);
+  });
+
+  test("should cleanup sortable instance after disconnected from DOM", async () => {
+    element["sortableInstance"] = (jest.fn().mockReturnValue(({
+      el: element
+    } as unknown) as SortableOptions) as unknown) as Sortable;
+
+    const mockDestroy = jest.fn();
+
+    element["sortableInstance"].destroy = mockDestroy;
+
+    element.parentElement!.removeChild(element);
+    setTimeout(() => element.disconnectedCallback());
+
+    expect(mockDestroy).toHaveBeenCalled();
+  });
+
+  test("should initialize sortable instance after slot `change` event", async () => {
+    const initializeSortableMock = jest.fn();
+    element["slottedChanged"] = initializeSortableMock;
+
+    const draggableItem = await fixture<DraggableItem.ELEMENT>(
+      html`
+        <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+      `
+    );
+    element.append(draggableItem);
+    await elementUpdated(element);
+
+    expect(initializeSortableMock).toHaveBeenCalled();
+  });
+
+  test("should update sortable options if any related property changed", async () => {
+    element["sortableInstance"] = (jest.fn().mockReturnValue(({
+      el: element
+    } as unknown) as SortableOptions) as unknown) as Sortable;
+
+    const optionMock = jest.fn();
+    element["sortableInstance"].destroy = jest.fn();
+    element["sortableInstance"].option = optionMock.mockImplementation(() => true);
+
+    element.delay = 100;
+    await elementUpdated(element);
+
+    expect(optionMock).toHaveBeenCalled();
+  });
+});