Skip to content

Commit

Permalink
test(commonTests, alert, combobox, dropdown, input-date-picker, modal…
Browse files Browse the repository at this point in the history 
…, popover, tooltip): extracts a general test utility `OpenClose` for all components implementing `openCloseComponent` util (#7379)

**Related Issue:** #4968

## Summary
Extracts a common test utility `openClose` for all components
implementing `openCloseComponent` util.

Implemented on all relevant components. 

- [x] alert
- [x] combobox
- [x] dropdown
- [x] input-date-picker
- [x] modal
- [x] popover
- [x] tooltip
  • Loading branch information
@Elijbet
Elijbet authored Sep 19, 2023
1 parent 93d67a3 commit 996e2b9
Show file tree
Hide file tree
Showing 9 changed files with 300 additions and 315 deletions.
53 changes: 5 additions & 48 deletions packages/calcite-components/src/components/alert/alert.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { html } from "../../../support/formatting";
import { accessible, defaults, hidden, HYDRATED_ATTR, renders, t9n } from "../../tests/commonTests";
import { getElementXY } from "../../tests/utils";
import { CSS, DURATIONS } from "./resources";
import { openClose } from "../../tests/commonTests";

describe("defaults", () => {
defaults("calcite-alert", [
Expand Down Expand Up @@ -38,6 +39,10 @@ describe("calcite-alert", () => {
`);
});

describe("openClose", () => {
openClose("calcite-alert");
});

it("renders default props when none are provided", async () => {
const page = await newE2EPage();
await page.setContent(`
Expand Down Expand Up @@ -280,54 +285,6 @@ describe("calcite-alert", () => {
});
});

it("should emit component status for transition-chained events: 'calciteAlertBeforeOpen', 'calciteAlertOpen', 'calciteAlertBeforeClose', 'calciteAlertClose'", async () => {
const page = await newE2EPage();
await page.setContent(html`<calcite-alert> ${alertContent} </calcite-alert>`);

const element = await page.find("calcite-alert");
const container = await page.find(`calcite-alert >>> .${CSS.container}`);

expect(await container.isVisible()).toBe(false);

const calciteAlertBeforeOpenEvent = page.waitForEvent("calciteAlertBeforeOpen");
const calciteAlertOpenEvent = page.waitForEvent("calciteAlertOpen");

const calciteAlertBeforeOpenSpy = await element.spyOnEvent("calciteAlertBeforeOpen");
const calciteAlertOpenSpy = await element.spyOnEvent("calciteAlertOpen");

await element.setProperty("open", true);
await page.waitForChanges();

await calciteAlertBeforeOpenEvent;
await calciteAlertOpenEvent;

expect(await element.getProperty("open")).toBe(true);

expect(calciteAlertBeforeOpenSpy).toHaveReceivedEventTimes(1);
expect(calciteAlertOpenSpy).toHaveReceivedEventTimes(1);

expect(await container.isVisible()).toBe(true);

const calciteAlertBeforeCloseEvent = page.waitForEvent("calciteAlertBeforeClose");
const calciteAlertCloseEvent = page.waitForEvent("calciteAlertClose");

const calciteAlertBeforeCloseSpy = await element.spyOnEvent("calciteAlertBeforeClose");
const calciteAlertClose = await element.spyOnEvent("calciteAlertClose");

await element.setProperty("open", false);
await page.waitForChanges();

await calciteAlertBeforeCloseEvent;
await calciteAlertCloseEvent;

expect(await element.getProperty("open")).toBe(false);

expect(calciteAlertBeforeCloseSpy).toHaveReceivedEventTimes(1);
expect(calciteAlertClose).toHaveReceivedEventTimes(1);

expect(await container.isVisible()).toBe(false);
});

it("should update number of queued alerts with a calcite-chip when removing an alert", async () => {
const page = await newE2EPage();
await page.setContent(html`
Expand Down
108 changes: 12 additions & 96 deletions packages/calcite-components/src/components/combobox/combobox.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,18 @@ import {
accessible,
defaults,
disabled,
hidden,
floatingUIOwner,
formAssociated,
hidden,
labelable,
openClose,
reflects,
renders,
t9n,
} from "../../tests/commonTests";

import { html } from "../../../support/formatting";
import { CSS as ComboboxItemCSS } from "../combobox-item/resources";
import { CSS } from "./resources";
import { CSS as XButtonCSS } from "../functional/XButton";
import { skipAnimations } from "../../tests/utils";

Expand Down Expand Up @@ -143,51 +143,17 @@ describe("calcite-combobox", () => {
disabled("calcite-combobox");
});

it("filter properly when items have duplicate values with parents", async () => {
const page = await newE2EPage();
await page.setContent(
html`
<calcite-combobox>
<calcite-combobox-item-group label="arcgis-app-identity">
<calcite-combobox-item
value="./html/arcgis-app-identity/index.html"
text-label="index.html"
></calcite-combobox-item>
</calcite-combobox-item-group>
<calcite-combobox-item-group label="arcgis-configuration-editor">
<calcite-combobox-item
value="./html/arcgis-configuration-editor/composite-field-editor.html"
text-label="composite-field-editor.html"
></calcite-combobox-item>
<calcite-combobox-item
value="./html/arcgis-configuration-editor/index.html"
text-label="index.html"
></calcite-combobox-item>
<calcite-combobox-item
value="./html/arcgis-configuration-editor/rule-editor.html"
text-label="rule-editor.html"
></calcite-combobox-item>
</calcite-combobox-item-group>
</calcite-combobox>
`
);

const combobox = await page.find("calcite-combobox");
await combobox.click();
await page.waitForChanges();
await combobox.type("conf");
await page.waitForChanges();

const items = await page.findAll("calcite-combobox-item");
const groups = await page.findAll("calcite-combobox-item-group");

expect(await groups[0].isVisible()).toBe(false);
expect(await items[0].isVisible()).toBe(false);
const simpleComboboxHTML = html`
<calcite-combobox id="myCombobox">
<calcite-combobox-item value="Raising Arizona" text-label="Raising Arizona"></calcite-combobox-item>
<calcite-combobox-item value="Miller's Crossing" text-label="Miller's Crossing"></calcite-combobox-item>
<calcite-combobox-item value="The Hudsucker Proxy" text-label="The Hudsucker Proxy"></calcite-combobox-item>
<calcite-combobox-item value="Inside Llewyn Davis" text-label="Inside Llewyn Davis"></calcite-combobox-item>
</calcite-combobox>
`;

expect(await groups[1].isVisible()).toBe(true);
expect(await items[1].isVisible()).toBe(true);
expect(await items[2].isVisible()).toBe(true);
expect(await items[3].isVisible()).toBe(true);
describe("openClose", () => {
openClose(simpleComboboxHTML);
});

it("filtering does not match property with value of undefined", async () => {
Expand Down Expand Up @@ -1593,56 +1559,6 @@ describe("calcite-combobox", () => {
);
});

it("should emit component status for transition-chained events: 'calciteComboboxBeforeOpen', 'calciteComboboxOpen', 'calciteComboboxBeforeClose', 'calciteComboboxClose'", async () => {
const page = await newE2EPage();
await page.setContent(html`
<calcite-combobox id="myCombobox">
<calcite-combobox-item value="Raising Arizona" text-label="Raising Arizona"></calcite-combobox-item>
<calcite-combobox-item value="Miller's Crossing" text-label="Miller's Crossing"></calcite-combobox-item>
<calcite-combobox-item value="The Hudsucker Proxy" text-label="The Hudsucker Proxy"></calcite-combobox-item>
<calcite-combobox-item value="Inside Llewyn Davis" text-label="Inside Llewyn Davis"></calcite-combobox-item>
</calcite-combobox>
`);
const element = await page.find("calcite-combobox");
const container = await page.find(`calcite-combobox >>> .${CSS.listContainer}`);

expect(await container.isVisible()).toBe(false);

const calciteComboboxBeforeOpenEvent = page.waitForEvent("calciteComboboxBeforeOpen");
const calciteComboboxOpenEvent = page.waitForEvent("calciteComboboxOpen");

const calciteComboboxBeforeOpenSpy = await element.spyOnEvent("calciteComboboxBeforeOpen");
const calciteComboboxOpenSpy = await element.spyOnEvent("calciteComboboxOpen");

await element.setProperty("open", true);
await page.waitForChanges();

await calciteComboboxBeforeOpenEvent;
await calciteComboboxOpenEvent;

expect(calciteComboboxBeforeOpenSpy).toHaveReceivedEventTimes(1);
expect(calciteComboboxOpenSpy).toHaveReceivedEventTimes(1);

expect(await container.isVisible()).toBe(true);

const calciteComboboxBeforeCloseEvent = page.waitForEvent("calciteComboboxBeforeClose");
const calciteComboboxCloseEvent = page.waitForEvent("calciteComboboxClose");

const calciteComboboxBeforeCloseSpy = await element.spyOnEvent("calciteComboboxBeforeClose");
const calciteComboboxClose = await element.spyOnEvent("calciteComboboxClose");

await element.setProperty("open", false);
await page.waitForChanges();

await calciteComboboxBeforeCloseEvent;
await calciteComboboxCloseEvent;

expect(calciteComboboxBeforeCloseSpy).toHaveReceivedEventTimes(1);
expect(calciteComboboxClose).toHaveReceivedEventTimes(1);

expect(await container.isVisible()).toBe(false);
});

it("should have input--icon class when placeholder-icon is parsed", async () => {
const page = await newE2EPage();
await page.setContent(html` <calcite-combobox
Expand Down
59 changes: 5 additions & 54 deletions packages/calcite-components/src/components/dropdown/dropdown.e2e.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,11 @@ import {
floatingUIOwner,
focusable,
hidden,
openClose,
reflects,
renders,
} from "../../tests/commonTests";
import { GlobalTestProps, getFocusedElementProp } from "../../tests/utils";
import { CSS } from "./resources";

describe("calcite-dropdown", () => {
const simpleDropdownHTML = html`
Expand Down Expand Up @@ -74,6 +74,10 @@ describe("calcite-dropdown", () => {
});
});

describe("openClose", () => {
openClose(simpleDropdownHTML);
});

interface SelectedItemsAssertionOptions {
/**
* IDs from items to assert selection
Expand Down Expand Up @@ -1228,58 +1232,5 @@ describe("calcite-dropdown", () => {
}
);
});

it("should emit component status for transition-chained events: 'calciteDropdownBeforeOpen', 'calciteDropdownOpen', 'calciteDropdownBeforeClose', 'calciteDropdownClose'", async () => {
const page = await newE2EPage();
await page.setContent(html`
<calcite-dropdown>
<calcite-button slot="trigger">Open dropdown</calcite-button>
<calcite-dropdown-group id="group-1">
<calcite-dropdown-item id="item-1"> Dropdown Item Content </calcite-dropdown-item>
<calcite-dropdown-item id="item-2" selected> Dropdown Item Content </calcite-dropdown-item>
<calcite-dropdown-item id="item-3"> Dropdown Item Content </calcite-dropdown-item>
</calcite-dropdown-group>
</calcite-dropdown>
`);
const element = await page.find(`calcite-dropdown`);
const group = await page.find(`calcite-dropdown >>> .${CSS.calciteDropdownContent}`);

expect(await group.isVisible()).toBe(false);

const calciteDropdownBeforeOpenEvent = page.waitForEvent("calciteDropdownBeforeOpen");
const calciteDropdownOpenEvent = page.waitForEvent("calciteDropdownOpen");

const calciteDropdownBeforeOpenSpy = await element.spyOnEvent("calciteDropdownBeforeOpen");
const calciteDropdownOpenSpy = await element.spyOnEvent("calciteDropdownOpen");

element.setProperty("open", true);
await page.waitForChanges();

expect(await element.getProperty("open")).toBe(true);
await calciteDropdownBeforeOpenEvent;
await calciteDropdownOpenEvent;

expect(calciteDropdownBeforeOpenSpy).toHaveReceivedEventTimes(1);
expect(calciteDropdownOpenSpy).toHaveReceivedEventTimes(1);

expect(await group.isVisible()).toBe(true);

const calciteDropdownBeforeCloseEvent = page.waitForEvent("calciteDropdownBeforeClose");
const calciteDropdownCloseEvent = page.waitForEvent("calciteDropdownClose");

const calciteDropdownBeforeCloseSpy = await element.spyOnEvent("calciteDropdownBeforeClose");
const calciteDropdownCloseSpy = await element.spyOnEvent("calciteDropdownClose");

element.setProperty("open", false);
await page.waitForChanges();

await calciteDropdownBeforeCloseEvent;
await calciteDropdownCloseEvent;

expect(calciteDropdownBeforeCloseSpy).toHaveReceivedEventTimes(1);
expect(calciteDropdownCloseSpy).toHaveReceivedEventTimes(1);

expect(await group.isVisible()).toBe(false);
});
});
});
4 changes: 0 additions & 4 deletions packages/calcite-components/src/components/dropdown/resources.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
export const SLOTS = {
dropdownTrigger: "trigger",
};

export const CSS = {
calciteDropdownContent: "calcite-dropdown-content",
};
55 changes: 8 additions & 47 deletions packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import { E2EElement, E2EPage, newE2EPage } from "@stencil/core/testing";
import {
accessible,
defaults,
disabled,
formAssociated,
labelable,
floatingUIOwner,
renders,
hidden,
labelable,
openClose,
renders,
t9n,
accessible,
} from "../../tests/commonTests";
import { html } from "../../../support/formatting";
import { CSS } from "./resources";
Expand Down Expand Up @@ -55,6 +56,10 @@ describe("calcite-input-date-picker", () => {
disabled("calcite-input-date-picker");
});

describe("openClose", () => {
openClose(`<calcite-input-date-picker id="pickerOpenClose" value="2021-12-08"></calcite-input-date-picker>`);
});

it.skip("supports t9n", () => t9n("calcite-input-date-picker"));

async function navigateMonth(page: E2EPage, direction: "previous" | "next"): Promise<void> {
Expand Down Expand Up @@ -499,50 +504,6 @@ describe("calcite-input-date-picker", () => {
expect(await input.getProperty("value")).toBe("");
});

it("should emit component status for transition-chained events: 'calciteInputDatePickerBeforeOpen', 'calciteInputDatePickerOpen', 'calciteInputDatePickerBeforeClose', 'calciteInputDatePickerClose'", async () => {
const page = await newE2EPage();
await page.setContent(
html` <calcite-input-date-picker id="pickerOpenClose" value="2021-12-08"></calcite-input-date-picker> `
);

const element = await page.find("calcite-input-date-picker");
const container = await page.find(`calcite-input-date-picker >>> .${CSS.menu}`);

const calciteInputDatePickerBeforeOpenEvent = page.waitForEvent("calciteInputDatePickerBeforeOpen");
const calciteInputDatePickerOpenEvent = page.waitForEvent("calciteInputDatePickerOpen");

const calciteInputDatePickerBeforeOpenSpy = await element.spyOnEvent("calciteInputDatePickerBeforeOpen");
const calciteInputDatePickerOpenSpy = await element.spyOnEvent("calciteInputDatePickerOpen");

await element.setProperty("open", true);
await page.waitForChanges();

expect(container).toHaveClass(CSS.menuActive);

await calciteInputDatePickerBeforeOpenEvent;
await calciteInputDatePickerOpenEvent;

expect(calciteInputDatePickerBeforeOpenSpy).toHaveReceivedEventTimes(1);
expect(calciteInputDatePickerOpenSpy).toHaveReceivedEventTimes(1);

const calciteInputDatePickerBeforeCloseEvent = page.waitForEvent("calciteInputDatePickerBeforeClose");
const calciteInputDatePickerCloseEvent = page.waitForEvent("calciteInputDatePickerClose");

const calciteInputDatePickerBeforeCloseSpy = await element.spyOnEvent("calciteInputDatePickerBeforeClose");
const calciteInputDatePickerClose = await element.spyOnEvent("calciteInputDatePickerClose");

await element.setProperty("open", false);
await page.waitForChanges();

expect(container).not.toHaveClass(CSS.menuActive);

await calciteInputDatePickerBeforeCloseEvent;
await calciteInputDatePickerCloseEvent;

expect(calciteInputDatePickerBeforeCloseSpy).toHaveReceivedEventTimes(1);
expect(calciteInputDatePickerClose).toHaveReceivedEventTimes(1);
});

it("should return endDate time as 23:59:999 when end value is typed", async () => {
const page = await newE2EPage();
await page.setContent(html` <calcite-input-date-picker layout="horizontal" range></calcite-input-date-picker>`);
Expand Down
Loading

0 comments on commit 996e2b9

Please sign in to comment.