Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(linting): set up no-restricted-syntax rule to ensure all E2E test pages are created initially #6908

Closed
wants to merge 4 commits into from
Closed

chore(linting): set up no-restricted-syntax rule to ensure all E2E test pages are created initially #6908

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d184780
chore(linting): set up no-restricted-syntax rule to ensure all E2E te…
jcfranco May 3, 2023
7aaee55
merge master
jcfranco May 3, 2023
2b23c00
merge master
jcfranco May 3, 2023
c74a541
update tests
jcfranco May 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,13 @@
}
],
"no-new-func": "error",
"no-restricted-syntax": [
"error",
{
"selector": "CallExpression[callee.name='newE2EPage'][arguments.length>0]",
"message": "Calling newE2EPage with arguments is not allowed. Use setContent to pass the test page content"
}
],
"no-unneeded-ternary": "error",
"react/forbid-component-props": [
"warn",
Expand Down
74 changes: 36 additions & 38 deletions src/components/accordion/accordion.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,7 @@ describe("calcite-accordion", () => {

it("renders default props when none are provided", async () => {
const page = await newE2EPage();
await page.setContent(`
<calcite-accordion>
${accordionContent}
</calcite-accordion>`);
await page.setContent(html` <calcite-accordion> ${accordionContent} </calcite-accordion>`);
const element = await page.find("calcite-accordion");
expect(element).toEqualAttribute("appearance", "solid");
expect(element).toEqualAttribute("icon-position", "end");
Expand All @@ -40,9 +37,14 @@ describe("calcite-accordion", () => {

it("renders requested props when valid props are provided", async () => {
const page = await newE2EPage();
await page.setContent(`
<calcite-accordion appearance="solid" icon-position="start" scale="l" selection-mode="single-persist" icon-type="caret">
${accordionContent}
await page.setContent(html` <calcite-accordion
appearance="solid"
icon-position="start"
scale="l"
selection-mode="single-persist"
icon-type="caret"
>
${accordionContent}
</calcite-accordion>`);
const element = await page.find("calcite-accordion");
expect(element).toEqualAttribute("appearance", "solid");
Expand All @@ -54,14 +56,22 @@ describe("calcite-accordion", () => {

it("renders icon if requested", async () => {
const page = await newE2EPage();
await page.setContent(`
<calcite-accordion appearance="solid" icon-position="start" scale="l" selection-mode="single-persist" icon-type="caret">
<calcite-accordion-item heading="Accordion Title 1" icon-start="car" id="1">Accordion Item Content
</calcite-accordion-item>
<calcite-accordion-item heading="Accordion Title 1" id="2" expanded>Accordion Item Content
</calcite-accordion-item>
<calcite-accordion-item heading="Accordion Title 3" icon-start="car" id="3">Accordion Item Content
</calcite-accordion-item>
await page.setContent(html` <calcite-accordion
appearance="solid"
icon-position="start"
scale="l"
selection-mode="single-persist"
icon-type="caret"
>
<calcite-accordion-item heading="Accordion Title 1" icon-start="car" id="1"
>Accordion Item Content
</calcite-accordion-item>
<calcite-accordion-item heading="Accordion Title 1" id="2" expanded
>Accordion Item Content
</calcite-accordion-item>
<calcite-accordion-item heading="Accordion Title 3" icon-start="car" id="3"
>Accordion Item Content
</calcite-accordion-item>
</calcite-accordion>`);
const icon1 = await page.find(`calcite-accordion-item[id='1'] >>> .${CSS.iconStart}`);
const icon2 = await page.find(`calcite-accordion-item[id='2'] >>> .${CSS.iconStart}`);
Expand All @@ -73,10 +83,7 @@ describe("calcite-accordion", () => {

it("renders expanded item based on attribute in dom", async () => {
const page = await newE2EPage();
await page.setContent(`
<calcite-accordion>
${accordionContent}
</calcite-accordion>`);
await page.setContent(html` <calcite-accordion> ${accordionContent} </calcite-accordion>`);
const element = await page.find("calcite-accordion");
const [item1, item2, item3] = await element.findAll("calcite-accordion-item");
const [item1Content, item2Content, item3Content] = await element.findAll(
Expand All @@ -96,10 +103,7 @@ describe("calcite-accordion", () => {

it("renders multiple expanded items when in multiple selection mode", async () => {
const page = await newE2EPage();
await page.setContent(`
<calcite-accordion>
${accordionContent}
</calcite-accordion>`);
await page.setContent(html` <calcite-accordion> ${accordionContent} </calcite-accordion>`);
const element = await page.find("calcite-accordion");
expect(element).toEqualAttribute("selection-mode", "multiple");
const [item1, item2, item3] = await element.findAll("calcite-accordion-item");
Expand All @@ -121,10 +125,7 @@ describe("calcite-accordion", () => {

it("renders just one expanded item when in single selection mode", async () => {
const page = await newE2EPage();
await page.setContent(`
<calcite-accordion selection-mode="single">
${accordionContent}
</calcite-accordion>`);
await page.setContent(html` <calcite-accordion selection-mode="single"> ${accordionContent} </calcite-accordion>`);
const element = await page.find("calcite-accordion");
expect(element).toEqualAttribute("selection-mode", "single");
const [item1, item2, item3] = await element.findAll("calcite-accordion-item");
Expand All @@ -146,10 +147,11 @@ describe("calcite-accordion", () => {
});

it("clicking on an accordion with selection-mode=single does not toggle unrelated accordions with the same selection mode", async () => {
const page = await newE2EPage({
html: html`<calcite-accordion selection-mode="single" id="first"> ${accordionContent} </calcite-accordion>
<calcite-accordion selection-mode="single" id="second"> ${accordionContent} </calcite-accordion>`
});
const page = await newE2EPage();
await page.setContent(html`<calcite-accordion selection-mode="single" id="first">
${accordionContent}
</calcite-accordion>
<calcite-accordion selection-mode="single" id="second"> ${accordionContent} </calcite-accordion>`);
await page.waitForChanges();

const firstAccordion = await page.find("calcite-accordion[id='first']");
Expand All @@ -169,9 +171,8 @@ describe("calcite-accordion", () => {

it("prevents closing the last expanded item when in single-persist selection mode", async () => {
const page = await newE2EPage();
await page.setContent(`
<calcite-accordion selection-mode="single-persist">
${accordionContent}
await page.setContent(html` <calcite-accordion selection-mode="single-persist">
${accordionContent}
</calcite-accordion>`);

const element = await page.find("calcite-accordion");
Expand All @@ -195,10 +196,7 @@ describe("calcite-accordion", () => {

it("renders multiple expanded items when selection mode changes from single to multiple", async () => {
const page = await newE2EPage();
await page.setContent(`
<calcite-accordion selection-mode="single">
${accordionContent}
</calcite-accordion>`);
await page.setContent(html` <calcite-accordion selection-mode="single"> ${accordionContent} </calcite-accordion>`);
const element = await page.find("calcite-accordion");
expect(element).toEqualAttribute("selection-mode", "single");
element.setAttribute("selection-mode", "multiple");
Expand Down
113 changes: 53 additions & 60 deletions src/components/action-bar/action-bar.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,18 +45,17 @@ describe("calcite-action-bar", () => {

describe("expand functionality", () => {
it("should not modify actions within an action-menu", async () => {
const page = await newE2EPage({
html: html`<calcite-action-bar expanded>
<calcite-action-group>
<calcite-action id="my-action" text="Add" label="Add Item" icon="plus"></calcite-action>
</calcite-action-group>
<calcite-action-group>
<calcite-action-menu label="Save and open">
<calcite-action id="menu-action" text-enabled text="Save" label="Save" icon="save"></calcite-action>
</calcite-action-menu>
</calcite-action-group>
</calcite-action-bar>`
});
const page = await newE2EPage();
await page.setContent(html`<calcite-action-bar expanded>
<calcite-action-group>
<calcite-action id="my-action" text="Add" label="Add Item" icon="plus"></calcite-action>
</calcite-action-group>
<calcite-action-group>
<calcite-action-menu label="Save and open">
<calcite-action id="menu-action" text-enabled text="Save" label="Save" icon="save"></calcite-action>
</calcite-action-menu>
</calcite-action-group>
</calcite-action-bar>`);
await page.waitForChanges();
const actionBar = await page.find("calcite-action-bar");
const actionBarAction = await page.find("#my-action");
Expand All @@ -72,30 +71,25 @@ describe("calcite-action-bar", () => {

it("should be expandable by default", async () => {
const page = await newE2EPage();

await page.setContent("<calcite-action-bar></calcite-action-bar>");

await page.waitForChanges();

const expandAction = await page.find("calcite-action-bar >>> calcite-action");

expect(expandAction).not.toBeNull();
});

it("allows disabling expandable behavior", async () => {
const page = await newE2EPage();

await page.setContent("<calcite-action-bar expand-disabled></calcite-action-bar>");

await page.waitForChanges();

const expandAction = await page.find("calcite-action-bar >>> calcite-action");

expect(expandAction).toBeNull();
});

it("should toggle expanded", async () => {
const page = await newE2EPage({ html: "<calcite-action-bar></calcite-action-bar>" });
const page = await newE2EPage();
await page.setContent("<calcite-action-bar></calcite-action-bar>");

const bar = await page.find("calcite-action-bar");

Expand Down Expand Up @@ -290,7 +284,8 @@ describe("calcite-action-bar", () => {
});

it("should honor scale of expand icon", async () => {
const page = await newE2EPage({ html: html`<calcite-action-bar scale="l"></calcite-action-bar>` });
const page = await newE2EPage();
await page.setContent(html`<calcite-action-bar scale="l"></calcite-action-bar>`);

const buttonGroup = await page.find(`calcite-action-bar >>> .${CSS.actionGroupBottom}`);

Expand All @@ -304,23 +299,22 @@ describe("calcite-action-bar", () => {

describe("overflow actions", () => {
it("should slot 'menu-actions' on sublist changes", async () => {
const page = await newE2EPage({
html: html`<div style="width:500px; height:500px;">
<calcite-action-bar style="height: 290px">
<calcite-action-group id="dynamic-group"
><calcite-action text="Layer properties" icon="sliders-horizontal"></calcite-action>
<calcite-action id="second-action" text="Styles" icon="shapes"></calcite-action
></calcite-action-group>
<calcite-action-group>
<calcite-action text="Save" icon="save" disabled></calcite-action>
<calcite-action icon="layers" text="Layers"></calcite-action>
</calcite-action-group>
<calcite-action-group slot="bottom-actions">
<calcite-action text="Tips" icon="lightbulb"></calcite-action>
</calcite-action-group>
</calcite-action-bar>
</div>`
});
const page = await newE2EPage();
await page.setContent(html`<div style="width:500px; height:500px;">
<calcite-action-bar style="height: 290px">
<calcite-action-group id="dynamic-group"
><calcite-action text="Layer properties" icon="sliders-horizontal"></calcite-action>
<calcite-action id="second-action" text="Styles" icon="shapes"></calcite-action
></calcite-action-group>
<calcite-action-group>
<calcite-action text="Save" icon="save" disabled></calcite-action>
<calcite-action icon="layers" text="Layers"></calcite-action>
</calcite-action-group>
<calcite-action-group slot="bottom-actions">
<calcite-action text="Tips" icon="lightbulb"></calcite-action>
</calcite-action-group>
</calcite-action-bar>
</div>`);
await page.waitForTimeout(overflowActionsDebounceInMs);

expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(2);
Expand All @@ -346,29 +340,28 @@ describe("calcite-action-bar", () => {
});

it.skip("should slot 'menu-actions' on resize of component", async () => {
const page = await newE2EPage({
html: html`<div style="width:500px; height:500px;">
<calcite-action-bar style="height: 290px">
<calcite-action-group id="dynamic-group"
><calcite-action text="Layer properties" icon="sliders-horizontal"></calcite-action>
<calcite-action text="Styles" icon="shapes"></calcite-action>
<calcite-action text="Styles" icon="shapes"></calcite-action>
<calcite-action text="Filter" icon="layer-filter"></calcite-action>
<calcite-action text="Configure pop-ups" icon="popup"></calcite-action>
<calcite-action text="Configure attributes" icon="feature-details"></calcite-action>
<calcite-action text="Labels" icon="label" active></calcite-action>
<calcite-action text="Table" icon="table"></calcite-action
></calcite-action-group>
<calcite-action-group>
<calcite-action text="Save" icon="save" disabled></calcite-action>
<calcite-action icon="layers" text="Layers"></calcite-action>
</calcite-action-group>
<calcite-action-group slot="bottom-actions">
<calcite-action text="Tips" icon="lightbulb"></calcite-action>
</calcite-action-group>
</calcite-action-bar>
</div>`
});
const page = await newE2EPage();
await page.setContent(html`<div style="width:500px; height:500px;">
<calcite-action-bar style="height: 290px">
<calcite-action-group id="dynamic-group"
><calcite-action text="Layer properties" icon="sliders-horizontal"></calcite-action>
<calcite-action text="Styles" icon="shapes"></calcite-action>
<calcite-action text="Styles" icon="shapes"></calcite-action>
<calcite-action text="Filter" icon="layer-filter"></calcite-action>
<calcite-action text="Configure pop-ups" icon="popup"></calcite-action>
<calcite-action text="Configure attributes" icon="feature-details"></calcite-action>
<calcite-action text="Labels" icon="label" active></calcite-action>
<calcite-action text="Table" icon="table"></calcite-action
></calcite-action-group>
<calcite-action-group>
<calcite-action text="Save" icon="save" disabled></calcite-action>
<calcite-action icon="layers" text="Layers"></calcite-action>
</calcite-action-group>
<calcite-action-group slot="bottom-actions">
<calcite-action text="Tips" icon="lightbulb"></calcite-action>
</calcite-action-group>
</calcite-action-bar>
</div>`);
await page.waitForTimeout(overflowActionsDebounceInMs + 10);

expect(await page.findAll(dynamicGroupActionsSelector)).toHaveLength(8);
Expand Down
3 changes: 2 additions & 1 deletion src/components/action-group/action-group.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ describe("calcite-action-group", () => {
it("has slots", () => slots("calcite-action-group", SLOTS));

it("should honor scale of expand icon", async () => {
const page = await newE2EPage({ html: actionGroupHTML });
const page = await newE2EPage();
await page.setContent(actionGroupHTML);
const menu = await page.find(`calcite-action-group >>> calcite-action-menu`);
expect(await menu.getProperty("scale")).toBe("l");
});
Expand Down
Loading