@ui5/webcomponents 0.0.0-4e88b8243 → 0.0.0-50f1454ef

package/cypress/support/commands/ColorPalette.commands.ts

@@ -16,7 +16,7 @@ Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true },
 
 	cy.get("@colorPalette")
 		.shadow()
-		.find("ui5-color-picker")
+		.find("[ui5-color-picker]")
 		.as("colorPicker");
 
 	cy.get("@colorPicker")
@@ -41,8 +41,8 @@ Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true },
 
 	cy.get("@colorPalette")
 		.shadow()
-		.find("ui5-dialog")
-		.find("ui5-button")
+		.find("[ui5-dialog]")
+		.find("ui5-button[design=Emphasized]") // The OK button is Emphasized (the Cancel button is Transparent)
 		.as("okButton");
 
 	cy.get("@redColor")
@@ -58,5 +58,29 @@ Cypress.Commands.add("ui5ColorPaletteCheckSelectedColor", { prevSubject: true },
 		.should("have.attr", "value", values.a);
 
 	cy.get("@okButton")
+		.should("be.visible") // Make sure the OK button is rendered before clicking it
 		.realClick();
+
+	cy.get("@colorPalette")
+		.shadow()
+		.find("[ui5-dialog]")
+		.should("not.be.visible"); // Make sure the dialog is closed at the end of the command (otherwise the next command will sometimes assert against the old dialog values)
+});
+
+Cypress.Commands.add("ui5ColorPaletteNavigateAndCheckSelectedColor", (subject: string, startIndex: number, key: string, expectedValue: string) => {
+	cy.get(subject)
+		.as("colorPalette");
+
+	cy.get("@colorPalette")
+		.find("[ui5-color-palette-item]")
+		.eq(startIndex)
+		.realClick();
+
+	// @ts-ignore
+	cy.realPress(key)
+		.realPress("Space");
+
+	cy.get("@colorPalette")
+		.find("ui5-color-palette-item[selected]")
+		.should("have.value", expectedValue);
 });

package/cypress/support/commands/ColorPicker.commands.ts

@@ -0,0 +1,38 @@
+Cypress.Commands.add("ui5ColorPickerToggleColorMode", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("colorPicker")
+		.should("be.visible");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find("#toggle-picker-mode")
+		.realClick();
+});
+
+Cypress.Commands.add("ui5ColorPickerUpdateInput", { prevSubject: true }, (subject, name, value) => {
+	cy.wrap(subject)
+		.as("colorPicker")
+		.should("be.visible");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find(name)
+		.realClick({ clickCount: 2 })
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+		.realType(value)
+		.realPress("Enter");
+});
+
+Cypress.Commands.add("ui5ColorPickerValidateInput", { prevSubject: true }, (subject, name, value) => {
+	cy.wrap(subject)
+		.as("colorPicker")
+		.should("be.visible");
+
+	cy.get("@colorPicker")
+		.shadow()
+		.find(name)
+		.as("input");
+
+	cy.get("@input")
+		.should("have.value", value);
+});

package/cypress/support/commands/DatePicker.commands.ts

@@ -0,0 +1,218 @@
+Cypress.Commands.add("ui5DatePickerGetInnerInput", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-datetime-input")
+		.shadow()
+		.find("input")
+		.as("innerInput");
+
+	return cy.get("@innerInput");
+});
+
+Cypress.Commands.add("ui5DatePickerGetPopoverDate", { prevSubject: true }, (subject, timestamp) => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find("ui5-daypicker")
+		.shadow()
+		.find(`[data-sap-timestamp='${timestamp}']`)
+		.first();
+});
+
+Cypress.Commands.add("ui5DatePickerGetDisplayedDay", { prevSubject: true }, (subject, index) => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find("ui5-daypicker")
+		.shadow()
+		.find(".ui5-dp-content .ui5-dp-item")
+		.eq(index);
+});
+
+Cypress.Commands.add("ui5DatePickerGetFirstDisplayedDate", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find("ui5-daypicker")
+		.shadow()
+		.find("div.ui5-dp-item")
+		.first();
+});
+
+Cypress.Commands.add("ui5DatePickerGetFirstDisplayedYear", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.shadow()
+		.find("ui5-yearpicker")
+		.as("yearPicker")
+		.should("be.visible");
+
+	return cy.get("@yearPicker")
+		.shadow()
+		.find("div.ui5-yp-item")
+		.first();
+});
+Cypress.Commands.add("ui5DatePickerGetDisplayedMonth", { prevSubject: true }, (subject: string, index: number) => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.shadow()
+		.find("ui5-monthpicker")
+		.as("monthPicker")
+		.should("be.visible");
+
+	return cy.get("@monthPicker")
+		.shadow()
+		.find(".ui5-mp-root .ui5-mp-item")
+		.eq(index);
+});
+
+Cypress.Commands.add("ui5DatePickerGetDisplayedYear", { prevSubject: true }, (subject: string, index: number) => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.shadow()
+		.find("ui5-yearpicker")
+		.as("yearPicker")
+		.should("be.visible");
+
+	return cy.get("@yearPicker")
+		.shadow()
+		.find(".ui5-yp-root .ui5-yp-item")
+		.eq(index);
+});
+
+Cypress.Commands.add("ui5DatePickerGetNextButton", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find(".ui5-calheader div[data-ui5-cal-header-btn-next]")
+		.first();
+});
+
+Cypress.Commands.add("ui5DatePickerGetPreviousButton", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.should("have.attr", "open");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find(".ui5-calheader div[data-ui5-cal-header-btn-prev]")
+		.first();
+});
+
+Cypress.Commands.add("ui5DatePickerGetMonthButton", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find(".ui5-calheader div[data-ui5-cal-header-btn-month]")
+		.first();
+});
+
+Cypress.Commands.add("ui5DatePickerGetYearButton", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-calendar")
+		.as("calendar")
+		.should("be.visible");
+
+	return cy.get("@calendar")
+		.shadow()
+		.find(".ui5-calheader div[data-ui5-cal-header-btn-year]")
+		.first();
+});
+
+Cypress.Commands.add("ui5DatePickerValueHelpIconPress", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("datePicker");
+
+	cy.get("@datePicker")
+		.shadow()
+		.find("ui5-icon")
+		.realClick();
+});

package/cypress/support/commands/DateTimePicker.commands.ts

@@ -0,0 +1,105 @@
+import Button from "../../../src/Button.js";
+import type DateTimePicker from "../../../src/DateTimePicker.js";
+import type ResponsivePopover from "../../../src/ResponsivePopover.js";
+
+Cypress.Commands.add("ui5DateTimePickerOpen", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	cy.wrap(subject).invoke("prop", "open", true);
+});
+
+Cypress.Commands.add("ui5DateTimePickerClose", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	cy.wrap(subject).invoke("prop", "open", false);
+});
+
+Cypress.Commands.add("ui5DateTimePickerGetPopover", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	return cy.wrap(subject)
+		.shadow()
+		.find<ResponsivePopover>("[ui5-responsive-popover]");
+});
+
+Cypress.Commands.add("ui5DateTimePickerExpectToBeOpen", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	cy.wrap(subject)
+		.should("have.prop", "open", true);
+
+	cy.wrap(subject)
+		.shadow()
+		.find<ResponsivePopover>("[ui5-responsive-popover]")
+		.ui5ResponsivePopoverOpened();
+});
+
+Cypress.Commands.add("ui5DateTimePickerExpectToBeClosed", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	cy.wrap(subject)
+		.should("have.prop", "open", false);
+
+	cy.wrap(subject)
+		.shadow()
+		.find<ResponsivePopover>("[ui5-responsive-popover]")
+		.ui5ResponsivePopoverClosed();
+});
+
+Cypress.Commands.add("ui5DateTimePickerGetSubmitButton", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	return cy.wrap(subject)
+		.shadow()
+		.find("[ui5-responsive-popover]")
+		.find<Button>("#ok");
+});
+
+Cypress.Commands.add("ui5DateTimePickerGetCancelButton", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	return cy.wrap(subject)
+		.shadow()
+		.find("[ui5-responsive-popover]")
+		.find<Button>("#cancel");
+});
+
+Cypress.Commands.add("ui5DateTimePickerTimeSelectionClocksCount", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	return cy.wrap(subject)
+		.shadow()
+		.find("[ui5-responsive-popover]")
+		.find("[ui5-time-selection-clocks]")
+		.shadow()
+		.find("[ui5-time-picker-clock]")
+		.its("length");
+});
+
+Cypress.Commands.add("ui5DateTimePickerPeriodSegmentedButtonCount", { prevSubject: true }, (subject: JQuery<DateTimePicker>) => {
+	return cy.wrap(subject)
+		.shadow()
+		.find("[ui5-responsive-popover]")
+		.find("[ui5-time-selection-clocks]")
+		.shadow()
+		.find("[ui5-segmented-button]")
+		.its("length");
+});
+
+declare global {
+	namespace Cypress {
+		interface Chainable {
+			ui5DateTimePickerOpen(
+				this: Chainable<JQuery<DateTimePicker>>,
+			): Chainable<void>;
+			ui5DateTimePickerExpectToBeOpen(
+				this: Chainable<JQuery<DateTimePicker>>,
+			): Chainable<void>;
+			ui5DateTimePickerClose(
+				this: Chainable<JQuery<DateTimePicker>>
+			): Chainable<void>;
+			ui5DateTimePickerExpectToBeClosed(
+				this: Chainable<JQuery<DateTimePicker>>,
+			): Chainable<void>;
+			ui5DateTimePickerGetPopover(
+				this: Chainable<JQuery<DateTimePicker>>
+			): Chainable<JQuery<ResponsivePopover>>;
+			ui5DateTimePickerGetSubmitButton(
+				this: Chainable<JQuery<DateTimePicker>>
+			): Chainable<JQuery<Button>>;
+			ui5DateTimePickerGetCancelButton(
+				this: Chainable<JQuery<DateTimePicker>>
+			): Chainable<JQuery<Button>>;
+			ui5DateTimePickerTimeSelectionClocksCount(
+				this: Chainable<JQuery<DateTimePicker>>
+			): Chainable<number>;
+			ui5DateTimePickerPeriodSegmentedButtonCount(
+				this: Chainable<JQuery<DateTimePicker>>
+			): Chainable<number>;
+		}
+	}
+}

package/cypress/support/commands/Dialog.commands.ts

@@ -0,0 +1,16 @@
+import type Dialog from "../../../src/Dialog.js";
+import { isPopupOpen } from "./utils/popup-open.js";
+
+Cypress.Commands.add("ui5DialogOpened", { prevSubject: true }, (subject: JQuery<Dialog>) => {
+	isPopupOpen(subject);
+});
+
+declare global {
+	namespace Cypress {
+		interface Chainable {
+			ui5DialogOpened(
+				this: Chainable<JQuery<Dialog>>
+			): Chainable<void>;
+		}
+	}
+}

package/cypress/support/commands/Menu.commands.ts

@@ -25,16 +25,16 @@ Cypress.Commands.add("ui5MenuOpened", { prevSubject: true }, subject => {
 	cy.get("@menu")
 		.shadow()
 		.find("[ui5-responsive-popover]")
-		.should("have.attr", "open");
-
-	cy.get("@menu")
-		.find(" > [ui5-menu-item]")
-		.first()
-		.should("be.visible");
+		.should($rp => {
+			expect($rp.is(":popover-open")).to.be.true;
+			expect($rp.width()).to.not.equal(0);
+			expect($rp.height()).to.not.equal(0);
+		})
+		.and("have.attr", "open");
 });
 
 Cypress.Commands.add("ui5MenuItemClick", { prevSubject: true }, subject => {
-	cy.wrap(subject)
+	cy.get(subject)
 		.as("item")
 		.should("be.visible");
 

package/cypress/support/commands/Popover.commands.ts

@@ -0,0 +1,16 @@
+import type Popover from "../../../src/Popover.js";
+import { isPopupOpen } from "./utils/popup-open.js";
+
+Cypress.Commands.add("ui5PopoverOpened", { prevSubject: true }, (subject: JQuery<Popover>) => {
+	isPopupOpen(subject);
+});
+
+declare global {
+	namespace Cypress {
+		interface Chainable {
+			ui5PopoverOpened(
+				this: Chainable<JQuery<Popover>>
+			): Chainable<void>;
+		}
+	}
+}

package/cypress/support/commands/ResponsivePopover.commands.ts

@@ -0,0 +1,42 @@
+import type ResponsivePopover from "../../../src/ResponsivePopover.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import { isPopupOpen, isPopupClosed } from "./utils/popup-open.js";
+
+Cypress.Commands.add("ui5ResponsivePopoverOpened", { prevSubject: true }, (subject: JQuery<ResponsivePopover>) => {
+	if (isPhone()) {
+		cy.wrap(subject)
+			.shadow()
+			.find("[ui5-dialog]")
+			.then($dialog => {
+				isPopupOpen($dialog);
+			});
+	} else {
+		isPopupOpen(subject);
+	}
+});
+
+Cypress.Commands.add("ui5ResponsivePopoverClosed", { prevSubject: true }, (subject: JQuery<ResponsivePopover>) => {
+	if (isPhone()) {
+		cy.wrap(subject)
+			.shadow()
+			.find("[ui5-dialog]")
+			.then($dialog => {
+				isPopupClosed($dialog);
+			});
+	} else {
+		isPopupClosed(subject);
+	}
+});
+
+declare global {
+	namespace Cypress {
+		interface Chainable {
+			ui5ResponsivePopoverOpened(
+				this: Chainable<JQuery<ResponsivePopover>>
+			): Chainable<void>;
+			ui5ResponsivePopoverClosed(
+				this: Chainable<JQuery<ResponsivePopover>>
+			): Chainable<void>;
+		}
+	}
+}

package/cypress/support/commands/SegmentedButton.commands.ts

@@ -0,0 +1,32 @@
+import type SegmentedButtonItem from "../../../src/SegmentedButtonItem.js";
+
+Cypress.Commands.add("ui5SegmentedButtonItemToggleSelect", { prevSubject: true }, (subject, deselect) => {
+	const arg = deselect ? "have.attr" : "not.have.attr";
+	const arg2 = deselect ? "not.have.attr" : "have.attr";
+
+	cy.wrap(subject)
+		.as("segmentedButtonItem")
+		.should("be.visible");
+
+	cy.get<SegmentedButtonItem>("@segmentedButtonItem")
+		.should(arg, "selected");
+
+	cy.get<SegmentedButtonItem>("@segmentedButtonItem")
+		.realClick();
+
+	cy.get<SegmentedButtonItem>("@segmentedButtonItem")
+		.should(arg2, "selected");
+});
+
+Cypress.Commands.add("ui5SegmentedButtonFocusFirstItem", { prevSubject: true }, subject => {
+	cy.wrap(subject)
+		.as("items")
+		.should("be.visible");
+
+	cy.get<SegmentedButtonItem>("@items")
+		.first()
+		.realClick();
+
+	cy.get<SegmentedButtonItem>("@items")
+		.should("be.focused");
+});

package/cypress/support/commands/utils/popup-open.ts

@@ -0,0 +1,35 @@
+const isPopupOpen = (subject: any) => {
+	cy.wrap(subject)
+		.as("popup");
+
+	cy.get("@popup")
+		.should("have.attr", "open");
+
+	cy.get("@popup")
+		.should($rp => {
+			expect($rp.is(":popover-open")).to.be.true;
+			expect($rp.width()).to.not.equal(0);
+			expect($rp.height()).to.not.equal(0);
+		})
+		.and("have.attr", "open");
+};
+
+const isPopupClosed = (subject: any) => {
+	cy.wrap(subject)
+		.as("popup");
+
+	cy.get("@popup")
+		.should("not.have.attr", "open");
+
+	cy.get("@popup")
+		.should($rp => {
+			expect($rp.is(":popover-open")).to.be.false;
+			expect($rp).not.be.visible;
+		})
+		.and("not.have.attr", "open");
+};
+
+export {
+	isPopupOpen,
+	isPopupClosed
+}

package/cypress/support/commands.ts

@@ -36,9 +36,20 @@
 //   }
 // }
 
+import "@ui5/cypress-internal/commands.js";
 import { internals, isPhone } from "@ui5/webcomponents-base/dist/Device.js";
-import "./commands/Menu.commands.js";
+
+// Please keep this list in alphabetical order
+import "./commands/Calendar.commands.js";
 import "./commands/ColorPalette.commands.js";
+import "./commands/ColorPicker.commands.js";
+import "./commands/DateTimePicker.commands.js";
+import "./commands/Dialog.commands.ts";
+import "./commands/Popover.commands.ts";
+import "./commands/ResponsivePopover.commands.js";
+import "./commands/DatePicker.commands.js";
+import "./commands/Menu.commands.js";
+import "./commands/SegmentedButton.commands.js";
 
 type SimulationDevices = "phone"
 
@@ -51,7 +62,27 @@ declare global {
 			ui5MenuItemClick(): Chainable<void>
 			ui5DOMRef(): Chainable<void>
 			ui5MenuItemPress(key: any): Chainable<void>
-			ui5ColorPaletteCheckSelectedColor(colorPaletteItem: string, values: {r: string, g: string, b: string, a: string}): Chainable<void>
+			ui5CalendarGetDay(calendarSelector: string, timestamp: string): Chainable<JQuery<HTMLElement>>
+			ui5CalendarGetMonth(calendarSelector: string, timestamp: string): Chainable<JQuery<HTMLElement>>
+			ui5ColorPickerToggleColorMode(): Chainable<void>
+			ui5ColorPickerUpdateInput(name: string, value: string): Chainable<void>
+			ui5ColorPickerValidateInput(name: string, value: string): Chainable<void>
+			ui5ColorPaletteCheckSelectedColor(colorPaletteItem: string, values: { r: string, g: string, b: string, a: string }): Chainable<void>
+			ui5ColorPaletteNavigateAndCheckSelectedColor(colorPalette: string, startIndex: number, key: string, expectedValue: string): Chainable<void>
+			ui5DatePickerGetInnerInput(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetPopoverDate(timestamp: number): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetDisplayedDay(index: number): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetFirstDisplayedDate(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetFirstDisplayedYear(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetDisplayedMonth(index: number): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetDisplayedYear(index: number): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetNextButton(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetPreviousButton(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetMonthButton(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerGetYearButton(): Chainable<JQuery<HTMLElement>>
+			ui5DatePickerValueHelpIconPress(): Chainable<void>
+			ui5SegmentedButtonItemToggleSelect(deselect?: boolean): Chainable<void>
+			ui5SegmentedButtonFocusFirstItem(): Chainable<void>
 		}
 	}
 }
@@ -70,6 +101,10 @@ Cypress.Commands.add("ui5SimulateDevice", (device: SimulationDevices = "phone")
 			return true;
 		});
 
+	if (device === "phone") {
+		cy.stub(internals, "windows").value(false);
+	}
+
 	cy.viewport(deviceName[device]);
 
 	cy.wrap({ isPhone })

package/cypress/support/component-index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

package/cypress/support/component.ts

@@ -1,3 +1,20 @@
-import "@ui5/webcomponents-tools/components-package/cypress/support/component.js";
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
 
-import "./commands.js";
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Example use:
+// cy.mount(MyComponent)