flatpickr removed datepicker added

shopware · Oct 22, 2024 · 7d982fb · 7d982fb
1 parent 3b50452
commit 7d982fb
Show file tree

Hide file tree

Showing 6 changed files with 503 additions and 913 deletions.
diff --git a/.changeset/light-zoos-invite.md b/.changeset/light-zoos-invite.md
@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": major
+---
+
+Replaced flatpickr with vue3datepicker
diff --git a/packages/component-library/package.json b/packages/component-library/package.json
@@ -35,6 +35,7 @@
     "@storybook/addon-a11y": "^8.1.1",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/vue": "^8.1.0",
+    "@vuepic/vue-datepicker": "^9.0.3",
     "@vueuse/components": "^10.7.2",
     "@vueuse/core": "^10.7.2",
     "date-fns": "^2.30.0",

diff --git a/.../component-library/src/components/form/mt-datepicker/mt-datepicker.interactive.stories.ts b/.../component-library/src/components/form/mt-datepicker/mt-datepicker.interactive.stories.ts
@@ -17,13 +17,14 @@ export const TestDatepickerShouldOpen: MtDatepickerStory = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
-    // Open datepicker
+    // Open datepicker by clicking the input wrapper
     await userEvent.click(canvas.getByRole("textbox"));
-    await waitUntil(() => document.getElementsByClassName("flatpickr-calendar").length > 0);
 
-    const calendar = within(
-      document.getElementsByClassName("flatpickr-calendar")[0] as HTMLElement,
-    );
+    // Wait until the datepicker's dropdown menu appears in the DOM
+    await waitUntil(() => document.getElementsByClassName("dp__menu").length > 0);
+
+    // Once the datepicker menu is detected, look for it within the document
+    const calendar = within(document.getElementsByClassName("dp__menu")[0] as HTMLElement);
 
     // Expect input event is triggered
     expect(calendar).toBeDefined();
@@ -35,127 +36,105 @@ export const VisualTestDateInputValue: MtDatepickerStory = {
   args: {
     label: "Date value",
     dateType: "date",
-    modelValue: new Date(Date.UTC(2024, 4, 22, 22, 22)).toISOString(),
   },
   play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
 
-    const calendar = within(
-      document.getElementsByClassName("flatpickr-calendar")[0] as HTMLElement,
-    );
-
-    // Open datepicker
+    // Open datepicker by clicking the input wrapper
     await userEvent.click(canvas.getByRole("textbox"));
-    await waitUntil(() => document.getElementsByClassName("flatpickr-calendar").length > 0);
-
-    // Click the 24th of month XYZ
-    await userEvent.click(calendar.getByText("24"));
+    await waitUntil(() => document.getElementsByClassName("dp__menu").length > 0);
 
-    // Click label to close datepicker
-    await userEvent.click(canvas.getByText(args.label!));
+    // Access the calendar and click the date
+    const firstDate = document.getElementById("2024-10-12") as HTMLInputElement;
+    await userEvent.click(firstDate);
 
-    // Expect input value to be the 24th of month XYZ
-    expect((canvas.getByRole("textbox") as HTMLInputElement).value).toMatch(/\d{4}-\d{2}-24/);
+    // Check that the input value matches the date chosen
+    const input = document.querySelector('[data-test="dp-input"]') as HTMLInputElement;
+    expect(input.value).toContain("2024/10/12");
 
-    // Expect input event is triggered
-    expect(args.updateModelValue).toHaveBeenCalled();
+    // Expect updatemodelvalue to have been called with date
+     expect(args.updateModelValue).toHaveBeenCalledWith(expect.stringContaining("24-10-12"));
   },
 };
 
 export const VisualTestDateTimeInputValue: MtDatepickerStory = {
   name: "Should input datetime value",
   args: {
-    modelValue: new Date(Date.UTC(2024, 4, 22, 22, 22)).toISOString(),
     label: "Date value",
     dateType: "datetime",
+    timeZone: "Europe/Berlin"
   },
   play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
-    const calendar = within(
-      document.getElementsByClassName("flatpickr-calendar")[0] as HTMLElement,
-    );
 
-    // Open datepicker
+    // Open datepicker by clicking the input wrapper
     await userEvent.click(canvas.getByRole("textbox"));
-    await waitUntil(() => document.getElementsByClassName("flatpickr-calendar").length > 0);
-
-    // Enter 22 as hour
-    const hourInput = calendar.getByLabelText("Hour");
-    await userEvent.clear(hourInput);
-    await userEvent.type(hourInput, "22");
-
-    // Enter 22 as minute
-    const minuteInput = calendar.getByLabelText("Minute");
-    await userEvent.clear(minuteInput);
-    await userEvent.type(minuteInput, "22");
-
-    // Click label to close datepicker
-    await userEvent.click(canvas.getByText(args.label!));
-
-    // Expect input value to be the 24th of month XYZ
-    expect((canvas.getByRole("textbox") as HTMLInputElement).value).toContain("22:22");
+    await waitUntil(() => document.getElementsByClassName("dp__menu").length > 0);
+
+    // Open the hours panel
+    const hourButton = document.querySelector(
+      '[data-test="hours-toggle-overlay-btn-0"]',
+    ) as HTMLInputElement;
+    await userEvent.click(hourButton);
+
+    // Select an hour
+    const selectedHour = document.querySelector('[data-test="12"]') as HTMLInputElement;
+    await userEvent.click(selectedHour);
+
+    // Open the minutes panel
+    const hourMin = document.querySelector(
+      '[data-test="minutes-toggle-overlay-btn-0"]',
+    ) as HTMLInputElement;
+    await userEvent.click(hourMin);
+
+    // Select minute
+    const selectedMin = document.querySelector('[data-test="40"]') as HTMLInputElement;
+    await userEvent.click(selectedMin);
+
+    // Click date within calendar
+    const firstDate = document.getElementById("2024-10-12") as HTMLInputElement;
+    await userEvent.click(firstDate);
+
+    // Check that the input value matches the date chosen
+    const input = document.querySelector('[data-test="dp-input"]') as HTMLInputElement;
+    expect(input.value).toContain("2024/10/12, 12:40");
+
+    // Expect updatemodelvalue to have been called with date
+    expect(args.updateModelValue).toHaveBeenCalledWith(expect.stringContaining("24-10-12"));
   },
 };
 
-export const VisualTestTimeInputValue: MtDatepickerStory = {
-  name: "Should input time value",
+export const VisualRangeInputValue: MtDatepickerStory = {
+  name: "Should input range",
   args: {
-    label: "Time value",
-    dateType: "time",
-    config: {
-      time_24hr: true,
-    },
+    label: "Date value",
+    dateType: "datetime",
+    range:true
   },
-  play: async ({ canvasElement, args }) => {
+  play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const calendar = within(
-      document.getElementsByClassName("flatpickr-calendar")[0] as HTMLElement,
-    );
 
-    // Open datepicker
+    // Open datepicker by clicking the input wrapper
     await userEvent.click(canvas.getByRole("textbox"));
-    await waitUntil(() => document.getElementsByClassName("flatpickr-calendar").length > 0);
-
-    // Enter 22 as hour
-    await userEvent.clear(calendar.getByLabelText("Hour"));
-    await userEvent.type(calendar.getByLabelText("Hour"), "22");
-
-    // Enter 22 as minute
-    await userEvent.clear(calendar.getByLabelText("Minute"));
-    await userEvent.type(calendar.getByLabelText("Minute"), "22");
-    await userEvent.type(canvas.getByRole("textbox"), "{enter}");
-
-    // Click label to close datepicker
-    await userEvent.click(canvas.getByText(args.label!));
-
-    // Expect input value to be the 24th of month XYZ
-    expect((canvas.getByRole("textbox") as HTMLInputElement).value).toBe("22:22");
-  },
-};
-
-export const TestClearInputValue: MtDatepickerStory = {
-  name: "Should clear input value",
-  args: {
-    label: "Datepicker",
-    modelValue: new Date(Date.UTC(2012, 1, 21)).toISOString(),
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
+    await waitUntil(() => document.getElementsByClassName("dp__menu").length > 0);
 
-    // The 21st of February 2012 is correct because the Date constructor takes the month as 0-based
-    expect((canvas.getByRole("textbox") as HTMLInputElement).value).toBe("2012-02-21");
+    // Click first date on calendar
+    const firstDate = document.getElementById("2024-10-12") as HTMLInputElement;
+    await userEvent.click(firstDate);
 
-    await userEvent.click(canvas.getByTestId("mt-datepicker-clear-button"));
+    // Click second date on calendar
+    const secondDate = document.getElementById("2024-10-14") as HTMLInputElement;
+    await userEvent.click(secondDate);
 
-    // We need to loose focus
-    await userEvent.click(canvas.getByText(args.label!));
-
-    expect((canvas.getByRole("textbox") as HTMLInputElement).value).toBe("");
+    // Check that the input value matches the dates chosen
+    const input = document.querySelector('[data-test="dp-input"]') as HTMLInputElement;
+    const dateRange = input.value.split(" - ").map((date) => date.split(",")[0].trim());
+    expect(dateRange).toEqual(["2024/10/12", "2024/10/14"]);
   },
 };
 
-export const TestDisabledDoesNotOpenFlatpickr: MtDatepickerStory = {
-  name: "Should not open flatpickr when disabled",
+export const TestDisabledDoesNotOpenDatepicker: MtDatepickerStory = {
+  name: "Should not open datepicker when disabled",
   args: {
     label: "Disabled",
     disabled: true,
@@ -166,37 +145,7 @@ export const TestDisabledDoesNotOpenFlatpickr: MtDatepickerStory = {
     // Try to open datepicker
     await userEvent.click(canvas.getByRole("textbox"));
 
+    // Expect the datepciker input to be disabled
     expect((canvas.getByRole("textbox") as HTMLInputElement).disabled).toBe(true);
   },
-};
-
-export const TestManualInput: MtDatepickerStory = {
-  name: "Should emit date value when manually typed",
-  args: {
-    label: "Date value",
-    dateType: "date",
-    modelValue: null,
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByRole("textbox");
-
-    // Focus input
-    await userEvent.click(input);
-
-    // Clear input
-    await userEvent.clear(input);
-
-    // Enter date manually
-    await userEvent.type(input, "2024-12-24");
-
-    // Click label to close datepicker
-    await userEvent.click(canvas.getByText(args.label!));
-
-    // Expect input value
-    expect((input as HTMLInputElement).value).toBe("2024-12-24");
-
-    // Expect input event is triggered
-    expect(args.updateModelValue).toHaveBeenCalledWith("2024-12-24T00:00:00");
-  },
-};
+};