@dpa-id-components/dpa-shared-components 21.1.1 → 22.0.0-next.1

package/dist/src/components/UiDatePicker/README.md

@@ -2,14 +2,17 @@
 
 ## Usage
 
-```html
-<!-- SomeComponent.vue using UiCard -->
+```vue
 <template>
-    <UiDatePicker/>
+  <UiDatePicker v-model="date" />
 </template>
 
 <script setup lang="ts">
-    import {UiDatePicker} from "@dpa-id-components/dpa-shared-components";
+  import { ref } from "vue";
+  import { UiDatePicker } from "@dpa-id-components/dpa-shared-components";
+  import type { DateType } from "@dpa-id-components/dpa-shared-components";
+
+  const date = ref<DateType>();
 </script>
 ```
 
@@ -17,51 +20,70 @@
 
 ### Props
 
-| Name                      | Type                                      | Default                  | Description                                                                                                         |
-|---------------------------|-------------------------------------------|--------------------------|---------------------------------------------------------------------------------------------------------------------|
-| `quickFilterRanges`       | `PresetRange[]`                           | ``                       | Adds buttons for the quick filter area                                                                              |
-| `enableQuickfilterToggle` | `Boolean`                                 | `false`                  | Enable Quickfilter Menu toggle for mobile - should be set to false for desktop views                                |                                                                              |
-| `leftSidebar`             | `Boolean`                                 | `true`                   | Enebles quick filter area / side menu                                                                               |
-| `quickFilterHeadline`     | `String`                                  | `SCHNELLFILTER`          | Headline for quickfilter menu                                                                                       |
-| `roundedBorder`           | `Boolean`                                 | `true`                   | Rounds the edges of the Dialog                                                                                      |
-| `enableTimePicker`        | `Boolean`                                 | `false`                  | Enables a time picker                                                                                               |
-| `multiCalendars`          | `Boolean`                                 | `true`                   | Shows just one or more months                                                                                       |
-| `inputLabel`              | `String`                                  | `Zeitraum`               | placeholder in the input                                                                                            |
-| `selectedDate`            | `date[] or null`                          | null                     | predefined date has to have the right value coresponding to datae range or single date picker!                      |
-| `actionArea`              | `Boolean`                                 | `false`                  | enebles cta area                                                                                                    |
-| `cancel`                  | `string`                                  | `Abbrechen`              | cancel cta label                                                                                                    |
-| `closeOnScroll`           | `boolean`                                 | `false`                  | Close datepicker Menu on scroll                                                                                     |
-| `submit`                  | `string`                                  | `Hinzufügen`             | submit cta label                                                                                                    |
-| `definesRange`            | `Boolean`                                 | `true`                   | enables range picker mode                                                                                           |
-| `autoApply`               | `Boolean`                                 | `true`                   | clicking date becomes selecting date                                                                                |
-| `closeOnAutoApply`        | `Boolean`                                 | `true`                   | Close datepicker menu on page scroll                                                                                |
-| `autoPosition`            | `Boolean`                                 | `false`                  | will position based on viewport                                                                                     |
-| `dateRangeStart`          | `Number`                                  | `1948`                   | defines the startyear of the daterange                                                                              |
-| `minDate`                 | `Boolean`                                 | `new Date("1949-01-01")` | defined the start of the datepicker range                                                                           |
-| `maxDate`                 | `Date`                                    | `null`                   | defines the end of the datepicker range                                                                             |
-| `autoRange`               | `number or Null`                          | `Null`                   | defines dayrange / amount of selected dates                                                                         |
-| `maxRange`                | `number`                                  | `null`                   | defined the maximum of the selectable date range                                                                    |
-| `activeState`             | `Boolean`                                 | `false`                  | delivers our trusty blue button when activated (like filter button)                                                 |
-| `disabledState`           | `Boolean`                                 | `false`                  | disables date picker and adds disabled stylings                                                                     |
-| `customFormatCallback`    | `(value: Date or [Date, Date]) => string` | `() => null`             | optional callback function that must returns a formatted date string or null to use default formatting              |
-| `inputLabel`              | `String`                                  | `""`                     | label text for square input boxes                                                                                   |
-| `actionAreaExtraContent`  | `String`                                  | `""`                     | optional text content to display on the bottom of the DatePicker. Will be overridden when slot `actionArea` is used |
-| `iconLeft`                | `UiIconName`                              | `null`                   | If you want an icon left of the title put in icon name here.                                                        |
-| `utc`                     | `Boolean`                                 | `true`                   | Set if output dates should be converted to UTC ot local timezone.                                                   |
-| `teleport`                | `boolean or string`                       | `null`                   | Teleports the datepicker to the body or provided selector, can solve issues with hidden overflow                    |
+
+| Name                     | Type                                     | Default                  | Description                                                                                                 |
+|--------------------------|------------------------------------------|--------------------------|-------------------------------------------------------------------------------------------------------------|
+| `autoApply`              | `boolean`                                | `true`                   | Clicking a date immediately selects it without requiring confirmation                                       |
+| `closeOnAutoApply`       | `boolean`                                | `true`                   | Close the datepicker menu after auto-applying a selection                                                   |
+| `inline`                 | `boolean`                                | `false`                  | Renders the datepicker inline instead of as a popup                                                         |
+| `disabled`               | `boolean`                                | `false`                  | Disables the datepicker and applies disabled styling                                                        |
+| `locale`                 | `Locale`                                 | `de`                     | date-fns locale used for formatting and translations                                                        |
+| `utc`                    | `boolean`                                | `false`                  | Sets Timezone to utc or not                                                                                 |
+| `teleport`               | `boolean \| string \| HTMLElement`       | `false`                  | Teleports the datepicker menu to the body or a provided selector. Useful for solving hidden overflow issues |
+| `minDate`                | `Date \| string \| number`               | `new Date("1948-01-01")` | Minimum selectable date                                                                                     |
+| `maxDate`                | `Date \| string \| number`               | `undefined`              | Maximum selectable date                                                                                     |
+| `multiCalendars`         | `boolean`                                | `false`                  | Shows multiple calendar months side by side                                                                 |
+| `monthPicker`            | `boolean`                                | `false`                  | Switches to month-only picker mode. Disables range selection                                                |
+| `enableTimePicker`       | `boolean`                                | `false`                  | Enables a time picker alongside the date picker                                                             |
+| `autoPosition`           | `boolean`                                | `true`                   | Automatically repositions the menu based on viewport (flip & shift)                                         |
+| `autoRange`              | `string \| number`                       | `undefined`              | Automatically selects a range of N days from the clicked date                                               |
+| `maxRange`               | `string \| number`                       | `undefined`              | Maximum number of days allowed in a selected range                                                          |
+| `triggerWidth`           | `full \| fit`                            | `full`                   | Trigger button has either w-full applied ot w-fit                                                           |
+| `triggerPlaceholderText` | `string`                                 | `undefined`              | Placeholder text shown in the trigger button when no date is selected                                       |
+| `customFormatCallback`   | `(date: Date \| [Date, Date]) => string` | `undefined`              | Custom callback for formatting the displayed date string in the input                                       |
+| `leftTriggerIcon`        | `UiIconName`                             | `undefined`              | Icon displayed to the left of the label in the trigger button                                               |
+| `leftSidebar`            | `boolean`                                | `false`                  | Enables the quick filter sidebar                                                                            |
+| `quickFilterHeadline`    | `string`                                 | `undefined`              | Headline text for the quick filter sidebar                                                                  |
+| `quickFilterRanges`      | `PresetRange[]`                          | `[]`                     | Preset date ranges displayed as buttons in the quick filter sidebar                                         |
+| `actionExtraContent`     | `string`                                 | `undefined`              | Text content displayed at the bottom of the datepicker. Overridden when the `action-extra` slot is used     |
+
+### Model
+
+| Name         | Type       | Description                                                                                        |
+|--------------|------------|----------------------------------------------------------------------------------------------------|
+| `modelValue` | `DateType` | The selected date. Supports `Date`, `[Date, Date]`, `string`, or `{ month: number; year: number }` |
 
 ### Events
 
-| Name                  | Type                     | Description                                                         |
-|-----------------------|--------------------------|---------------------------------------------------------------------|
-| `date-changed`        | `Date` or `[Date, Date]` | Emitted when the a date or date range is selected from the calendar |
-| `quickfilter-changed` | `PresetRange`            | Emitted when a quickFilter is selected                              |
-| `open`                | none                     | Emitted when the datepicker opens                                   |
-| `close`               | none                     | Emitted when the datepicker closes                                  |
-| `reset`               | none                     |                                                                     |
+| Name                   | Payload       | Description                                    |
+|------------------------|---------------|------------------------------------------------|
+| `update:modelValue`    | `DateType`    | Emitted when a date or date range is selected  |
+| `quick-filter-changed` | `PresetRange` | Emitted when a quick filter preset is selected |
+| `open`                 | —             | Emitted when the datepicker menu opens         |
+| `closed`               | —             | Emitted when the datepicker menu closes        |
+| `start-range`          | `Date`        | Emitted when first date of range is selected   |
+| `end-range`            | `Date`        | Emitted when last date of range is selected    |
 
 ### Slots
 
-| Name         | Description                                                                                                                          |
-|--------------|--------------------------------------------------------------------------------------------------------------------------------------|
-| `actionArea` | When you need more then the string you can set via the prop `actionAreaExtraContent` you can use this slot to add whatever you like. |
+| Name           | Slot Props                                             | Description                                                                                      |
+|----------------|--------------------------------------------------------|--------------------------------------------------------------------------------------------------|
+| `action-row`   | `ActionRowSlotProps`                                   | Custom action row at the bottom of the datepicker (e.g. confirm/cancel buttons)                  |
+| `action-extra` | `{ selectCurrentDate: () => void, reset: () => void }` | Additional content above the action row. Falls back to `actionExtraContent` prop if not provided |
+
+
+### Types
+
+```typescript
+export interface PresetRange {
+  label: string;
+  range: [Date, Date] | { year: number; month: number };
+  name?: string;
+}
+
+export type DateType =
+  | Date
+  | [Date, Date]
+  | string
+  | { month: number; year: number };
+```

package/dist/src/components/UiDatePicker/UiDatePicker.spec.ts

@@ -1,335 +1,143 @@
 import { flushPromises, mount } from "@vue/test-utils";
 import {
-  addMonths,
-  differenceInDays,
+  endOfDay,
   endOfMonth,
   endOfYear,
-  format,
-  isToday,
+  startOfDay,
   startOfMonth,
   startOfYear,
   subMonths,
   subYears,
 } from "date-fns";
-import { de } from "date-fns/locale";
 import { describe, expect, it } from "vitest";
 
 import UiDatePicker, { type PresetRange } from "./UiDatePicker.vue";
-const callback = (value: Date | [Date, Date]): string => {
-  if (!Array.isArray(value)) {
-    return "";
-  }
 
-  const difference = differenceInDays(value[0], value[1]);
-  if (difference === 0 && isToday(value[0])) {
-    return "Heute";
-  }
+const today = new Date("2026-04-02");
 
-  return "";
-};
-
-const quickfilterDateRanges: PresetRange[] = [
-  {
-    label: "Heute",
-    range: [new Date(), new Date()],
-    name: "today",
-  },
-  {
-    label: "Dieser Monat",
-    range: [startOfMonth(new Date()), new Date()],
-    name: "this_month",
-  },
-  {
-    label: "Dieses Jahr",
-    range: [startOfYear(new Date()), new Date()],
-    name: "this_year",
-  },
+const quickFilterRanges: PresetRange[] = [
+  { label: "Heute", range: [startOfDay(today), endOfDay(today)] },
+  { label: "Dieser Monat", range: [startOfMonth(today), endOfMonth(today)] },
+  { label: "Dieses Jahr", range: [startOfYear(today), endOfYear(today)] },
   {
     label: "Letzter Monat",
-    range: [
-      startOfMonth(subMonths(new Date(), 1)),
-      endOfMonth(subMonths(new Date(), 1)),
-    ],
-    name: "last_month",
+    range: [startOfMonth(subMonths(today, 1)), endOfMonth(subMonths(today, 1))],
   },
   {
     label: "Letztes Jahr",
-    range: [
-      startOfYear(subYears(new Date(), 1)),
-      endOfYear(subYears(new Date(), 1)),
-    ],
-    name: "last_year",
-  },
-  {
-    label: "Gesamte Zeit",
-    range: [new Date("01.01.2020"), new Date()],
-    name: "whole_time",
+    range: [startOfYear(subYears(today, 1)), endOfYear(subYears(today, 1))],
   },
+  { label: "Gesamte Zeit", range: [new Date("1948-01-01"), endOfDay(today)] },
 ];
 
-describe("Datepicker", () => {
-  const wrapper = mount(UiDatePicker, {
-    props: {
-      quickFilterRanges: quickfilterDateRanges,
-      quickFilterHeadline: "SCHNELLFILTER",
-    },
+function createWrapper(
+  props: Record<string, any> = {},
+  slots: Record<string, any> = {},
+) {
+  return mount(UiDatePicker, {
+    props,
+    slots,
   });
+}
 
+describe("UiDatePicker", () => {
   it("renders Datepicker", () => {
-    expect(wrapper.html()).toContain("desktop-datepicker");
-  });
-
-  it("should emit a open event", async () => {
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    expect(wrapper.emitted()).toHaveProperty("open");
-  });
-
-  it("should emit a close event", async () => {
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    expect(wrapper.emitted()).toHaveProperty("close");
-    //click on input to open modal again
-    await wrapper.find("#desktop-datepicker").trigger("click");
-  });
-
-  it("should show cta-area when open ", async () => {
-    await wrapper.setProps({ actionArea: true });
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    expect(wrapper.find("dp__action_row"));
-    await wrapper.setProps({ actionArea: false });
-    expect(wrapper.find("dp__action_row").exists()).toBe(false);
-    //click on input to close modal again
-    await wrapper.find("#desktop-datepicker").trigger("click");
-  });
-
-  it("should show quickfilters when open ", async () => {
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    expect(wrapper.find("dp__sidebar_left"));
-    expect(wrapper.html()).toContain("SCHNELLFILTER");
-    await wrapper.setProps({ leftSidebar: false });
-    expect(wrapper.find("dp__sidebar_left").exists()).toBe(false);
-    //click on input to close modal again
-    await wrapper.find("#desktop-datepicker").trigger("click");
-  });
-
-  it("shows current and next month by default ", async () => {
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    const now = new Date();
-
-    const nameOfMonth = format(now, "LLL", { locale: de });
-    const nameOfNextMonth = format(addMonths(now, 1), "LLL", { locale: de });
-    wrapper.find(nameOfMonth);
-    wrapper.find(nameOfNextMonth);
-  });
-});
-
-describe("Datepicker Quickfilter", () => {
-  it("should emit range for Heute Quickfilter", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        customFormatCallback: callback,
-        quickFilterRanges: quickfilterDateRanges,
-      },
-    });
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    await wrapper.find("[data-testid='Heute']").trigger("click");
-    expect(wrapper.emitted()["quickfilter-changed"][0]).toStrictEqual([
-      quickfilterDateRanges[0],
-    ]);
-  });
-
-  it("should work without custom formatter function", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        quickFilterRanges: quickfilterDateRanges,
-      },
-    });
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    await wrapper.find("[data-testid='Heute']").trigger("click");
-    expect(wrapper.emitted()["quickfilter-changed"][0]).toEqual([
-      quickfilterDateRanges[0],
-    ]);
-  });
-
-  it("should emit range for Diesen Monat Quickfilter", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        customFormatCallback: callback,
-        quickFilterRanges: quickfilterDateRanges,
-      },
-    });
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    await wrapper.find("[data-testid='Dieser Monat']").trigger("click");
-    expect(wrapper.emitted()["quickfilter-changed"][0]).toEqual([
-      quickfilterDateRanges[1],
-    ]);
-  });
-
-  it("should emit range for Dieses Jahr Quickfilter", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        customFormatCallback: callback,
-        quickFilterRanges: quickfilterDateRanges,
-      },
-    });
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    await wrapper.find("[data-testid='Dieses Jahr']").trigger("click");
-
-    expect(wrapper.emitted()["quickfilter-changed"][0]).toEqual([
-      quickfilterDateRanges[2],
-    ]);
-  });
-
-  it("should emit range for Letzter Monat Quickfilter", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        customFormatCallback: callback,
-        quickFilterRanges: quickfilterDateRanges,
-      },
-    });
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    await wrapper.find("[data-testid='Letzter Monat']").trigger("click");
-
-    expect(wrapper.emitted()["quickfilter-changed"][0]).toEqual([
-      quickfilterDateRanges[3],
-    ]);
+    const wrapper = createWrapper();
+    expect(wrapper.find('[data-testid="datepicker-trigger"]').exists()).toBe(
+      true,
+    );
   });
 
-  it("should emit range for Letztes Jahr Quickfilter", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        customFormatCallback: callback,
-        quickFilterRanges: quickfilterDateRanges,
-      },
-    });
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    await wrapper.find("[data-testid='Letztes Jahr']").trigger("click");
-
-    expect(wrapper.emitted()["quickfilter-changed"][0]).toEqual([
-      quickfilterDateRanges[4],
-    ]);
+  it("should emit an open event", async () => {
+    const wrapper = createWrapper();
+    const trigger = wrapper.find('[data-testid="datepicker-trigger"]');
+    await trigger.trigger("click");
+    expect(wrapper.emitted("open")).toBeTruthy();
   });
 
-  it("should emit range for Gesamte Zeit Quickfilter", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        customFormatCallback: callback,
-        quickFilterRanges: quickfilterDateRanges,
-      },
-    });
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    await wrapper.find("[data-testid='Gesamte Zeit']").trigger("click");
-    expect(wrapper.emitted()["quickfilter-changed"][0]).toEqual([
-      quickfilterDateRanges[5],
-    ]);
+  it("should emit a closed event", async () => {
+    const wrapper = createWrapper();
+    const trigger = wrapper.find('[data-testid="datepicker-trigger"]');
+    await trigger.trigger("click");
+    await trigger.trigger("keydown", { key: "Escape" });
+    expect(wrapper.emitted().closed[0]).toBeTruthy();
   });
 
-  it("should set the selected quickfilter as the input label", async () => {
-    const formattedDate = format(new Date(), "dd.MM.yyyy");
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        quickFilterRanges: quickfilterDateRanges,
-      },
+  it("should show QuickFilters when leftSidebar is true", async () => {
+    const wrapper = createWrapper({
+      leftSidebar: true,
+      quickFilterHeadline: "Schnellfilter",
+      quickFilterRanges,
+      inline: true,
     });
-    const inputButton = wrapper.get("#desktop-datepicker");
-    await wrapper.find("#desktop-datepicker").trigger("click");
     await flushPromises();
-
-    await wrapper.find("[data-testid='Heute']").trigger("click");
-    expect(inputButton.text()).toBe(`${formattedDate}-${formattedDate}`);
+    expect(wrapper.find(".dp__sidebar_left").exists()).toBe(true);
+    expect(wrapper.html()).toContain("Schnellfilter");
+    for (const range of quickFilterRanges) {
+      expect(wrapper.find(`[data-testid="${range.label}"]`).exists()).toBe(
+        true,
+      );
+    }
   });
-});
 
-describe("custom date formatter", () => {
-  it("should format selected date according to provided formatter function for input box ui", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        customFormatCallback: callback,
-        quickFilterRanges: quickfilterDateRanges,
-        roundedEdges: false,
-      },
+  it("should emit range for Heute Quickfilter", async () => {
+    const wrapper = createWrapper({
+      leftSidebar: true,
+      quickFilterRanges,
+      inline: true,
     });
-
-    await wrapper.find("#desktop-datepicker").trigger("click");
     await flushPromises();
-
-    await wrapper.find("[data-testid='Heute']").trigger("click");
-    expect(wrapper.find("input").element.value).toBe("Heute");
+    await wrapper.find('[data-testid="Heute"]').trigger("click");
+    expect(wrapper.emitted("quick-filter-changed")![0][0]).toStrictEqual(
+      quickFilterRanges[0],
+    );
   });
 
-  it("should format selected date according to provided formatter function for filter button ui", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        customFormatCallback: callback,
-        quickFilterRanges: quickfilterDateRanges,
-        roundedEdges: true,
-      },
+  it("should emit range for Dieser Monat Quickfilter", async () => {
+    const wrapper = createWrapper({
+      leftSidebar: true,
+      quickFilterRanges,
+      inline: true,
     });
-
-    await wrapper.find("#desktop-datepicker").trigger("click");
     await flushPromises();
-
-    await wrapper.find("[data-testid='Heute']").trigger("click");
-    expect(wrapper.find("[data-testid='filterbutton-title']").text()).toBe(
-      "Heute",
+    await wrapper.find('[data-testid="Dieser Monat"]').trigger("click");
+    expect(wrapper.emitted("quick-filter-changed")![0][0]).toStrictEqual(
+      quickFilterRanges[1],
     );
   });
-});
 
-describe("Action Area content", function () {
-  it("Should show string when prop is set and no slot", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        actionAreaExtraContent: "Test to show string",
-      },
+  describe("action-extra slot", () => {
+    it("should show string when prop is set and no slot", async () => {
+      const wrapper = createWrapper({
+        actionExtraContent: "Extra info text",
+        inline: true,
+      });
+      await flushPromises();
+      expect(wrapper.text()).toContain("Extra info text");
     });
 
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    const actionArea = wrapper.find(".dp__action_extra");
-    expect(actionArea.text()).toBe("Test to show string");
-  });
-
-  it("Show override Text when slot actionArea is used and prop is set", async () => {
-    const wrapper = mount(UiDatePicker, {
-      props: {
-        actionAreaExtraContent: "Test to show string",
-      },
-      slots: {
-        actionArea: "This is another string",
-      },
+    it("should override text when slot action-extra is used and prop is set", async () => {
+      const wrapper = createWrapper(
+        {
+          actionExtraContent: "Prop text",
+          inline: true,
+        },
+        {
+          "action-extra": () => "<div>Slot override</div>",
+        },
+      );
+      await flushPromises();
+      expect(wrapper.text()).toContain("Slot override");
+      expect(wrapper.text()).not.toContain("Prop text");
     });
 
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    const actionArea = wrapper.find(".dp__action_extra");
-    expect(actionArea.text()).not.toBe("Test to show string");
-    expect(actionArea.text()).toBe("This is another string");
-  });
+    it("should be empty when neither prop nor slot is set", async () => {
+      const wrapper = createWrapper({ inline: true });
 
-  it("should be empty when neither prop or slot is set", async () => {
-    const wrapper = mount(UiDatePicker, {});
-
-    await wrapper.find("#desktop-datepicker").trigger("click");
-    await flushPromises();
-
-    const actionArea = wrapper.find(".dp__action_extra");
-    expect(actionArea.text()).toBe("");
+      const actionExtra = wrapper.find(".dp__action_extra");
+      if (actionExtra.exists()) {
+        expect(actionExtra.text().trim()).toBe("");
+      }
+    });
   });
 });