@ui5/webcomponents 2.7.3 → 2.8.0-rc.1

package/cypress/specs/Card.cy.tsx

@@ -1,16 +1,155 @@
+import Button from "../../src/Button.js";
 import Card from "../../src/Card.js";
 import CardHeader from "../../src/CardHeader.js";
 
+function CardSample() {
+	return <Card id="card">
+		<CardHeader
+			id="cardHeader"
+			slot="header"
+			additionalText="4 of 10"
+			titleText="Quick Links"
+			subtitleText="Quick links sub title"
+			interactive={true}>
+		</CardHeader>
+		<div></div>
+	</Card>;
+}
+
+function CardSample2() {
+	return <Card id="card2">
+		<CardHeader
+			id="cardHeader2"
+			slot="header"
+			additionalText="4 of 10"
+			titleText="Quick Links"
+			subtitleText="Quick Links">
+		</CardHeader>
+		<div></div>
+	</Card>;
+}
+
+describe("Card general interaction", () => {
+	it("Tests interactive header results in interactive class on the card", () => {
+		cy.mount(
+			<div>
+				<CardSample />
+				<CardSample2 />
+			</div>
+		);
+
+		// assert
+		cy.get("#cardHeader")
+			.realClick();
+		cy.get("#cardHeader").should("be.focused");
+		cy.get("#card")
+			.shadow()
+			.find(".ui5-card-root")
+			.should("have.class", "ui5-card--interactive");
+
+		cy.get("#card2")
+			.shadow()
+			.find(".ui5-card-root")
+			.should("not.have.class", "ui5-card--interactive");
+	});
+
+	it("Tests header's click event with mouse click, Enter and Space", () => {
+		cy.mount(
+			<div>
+				<CardSample />
+				<CardSample2 />
+			</div>
+		);
+
+		// interactive header
+		cy.get("#cardHeader")
+			.then($header => {
+				$header.get(0).addEventListener("click", cy.stub().as("headerClick"));
+			});
+
+		cy.get("#cardHeader")
+			.shadow()
+			.find(".ui5-card-header")
+			.realClick();
+		cy.realPress("Space");
+		cy.realPress("Enter");
+
+		cy.get("@headerClick")
+			.should("have.been.calledThrice");
+
+		// non-interactive header
+		cy.get("#cardHeader2")
+			.then($header => {
+				$header.get(0).addEventListener("click", cy.stub().as("headerClick2"));
+			});
+
+		cy.get("#cardHeader2")
+			.shadow()
+			.find(".ui5-card-header")
+			.realClick();
+		cy.realPress("Space");
+		cy.realPress("Enter");
+
+		cy.get("@headerClick2")
+			.should("not.have.been.called");
+	});
+
+	it("Tests clicking on an action does not fire header's click event", () => {
+		cy.mount(
+			<Card>
+				<CardHeader
+					id="cardHeader"
+					slot="header"
+					titleText="Quick Links"
+					interactive={true}
+				>
+					<Button id="actionBtn" slot="action">Act</Button>
+				</CardHeader>
+
+				<div></div>
+			</Card>
+		);
+
+		cy.get("#cardHeader").then($header => {
+			$header.get(0).addEventListener("ui5-click", cy.stub().as("headerClick"));
+		});
+
+		cy.get("#actionBtn").realClick();
+
+		// assert
+		cy.get("@headerClick").should("not.have.been.called");
+	});
+
+	it("Tests loading", () => {
+		cy.mount(
+			<Card
+				id="loadingCard"
+				loading={true}
+				loadingDelay={500}>
+				<CardHeader
+					slot="header"
+					titleText="Interactive Header">
+				</CardHeader>
+				<div></div>
+			</Card>
+		);
+
+		cy.get("#loadingCard")
+			.shadow()
+			.find("[ui5-busy-indicator]")
+			.should("have.attr", "delay", "500")
+			.and("have.attr", "active");
+	});
+});
+
 describe("Card header", () => {
 	it("Tests that aria attribute are correct on interactive header", () => {
 		cy.mount(
 			<Card>
 				<CardHeader
-					id="cardHeader1"
+					id="cardHeader"
 					slot="header"
-					additionalText="4 of 10"
 					titleText="Quick Links"
-					subtitleText="Quick links sub title"
 					interactive={true}
 				>
 				</CardHeader>
@@ -18,7 +157,7 @@ describe("Card header", () => {
 		);
 
 		// assert
-		cy.get("#cardHeader1")
+		cy.get("#cardHeader")
 			.shadow()
 			.find(".ui5-card-header-focusable-element")
 			.should("have.attr", "role", "button")
@@ -30,22 +169,162 @@ describe("Card header", () => {
 		cy.mount(
 			<Card>
 				<CardHeader
-					id="cardHeader2"
+					id="cardHeader"
 					slot="header"
-					additionalText="4 of 10"
 					titleText="Quick Links"
-					subtitleText="Quick links sub title"
 				>
 				</CardHeader>
 			</Card>
 		);
 
 		// assert
-		cy.get("#cardHeader2")
+		cy.get("#cardHeader")
 			.shadow()
 			.find(".ui5-card-header-focusable-element")
 			.should("have.attr", "role", "group")
 			.and("have.attr", "tabindex", "0")
 			.and("have.attr", "aria-roledescription", "Card Header");
 	});
+
+	it("Tests additionalText is rendered, when action is set", () => {
+		cy.mount(
+			<Card>
+				<CardHeader
+					id="actionCardHeader"
+					slot="header"
+					titleText="Linked Activities (5)"
+					additionalText="4 of 10">
+				</CardHeader>
+
+				<div></div>
+			</Card>
+		);
+
+		// assert
+		cy.get("#actionCardHeader")
+			.shadow()
+			.find(".ui5-card-header-additionalText")
+			.should("exist");
+	});
+});
+
+describe("Card Accessibility", () => {
+	it("Tests accessibleName", () => {
+		cy.mount(
+			<Card id="textCard" accessibleName="Internships">
+				<CardHeader
+					slot="header"
+					titleText="New Internships">
+				</CardHeader>
+			</Card>
+		);
+
+		// assert
+		cy.get("#textCard")
+			.shadow()
+			.find(".ui5-card-root")
+			.should("have.attr", "aria-label", "Card Internships");
+	});
+
+	it("Tests accessibleNameRef", () => {
+		cy.mount(
+			<Card id="textCardRef" accessibleName="Internships" accessibleNameRef="cont">
+				<CardHeader
+					slot="header"
+					titleText="New Positions">
+				</CardHeader>
+				<div id="cont" class="myContent">I am the content</div>
+			</Card>
+		);
+
+		// assert
+		cy.get("#textCardRef")
+			.shadow()
+			.find(".ui5-card-root")
+			.should("have.attr", "aria-label", "Card I am the content");
+	});
+
+	it("Tests aria-label", () => {
+		cy.mount(
+			<Card id="textAreaAriaLabel">
+				<CardHeader
+					slot="header"
+					titleText="Linked Activities (5)">
+				</CardHeader>
+			</Card>
+		);
+
+		// assert
+		cy.get("#textAreaAriaLabel")
+			.shadow()
+			.find(".ui5-card-root")
+			.should("have.attr", "aria-label", "Card");
+	});
+
+	it("Tests ARIA attributes of the content", () => {
+		cy.mount(<CardSample />);
+
+		// assert
+		cy.get("#card")
+			.shadow()
+			.find(".ui5-card-root div:nth-child(2)")
+			.should("have.attr", "role", "group")
+			.and("have.attr", "aria-label", "Card Content");
+	});
+
+	it("Tests aria-level property", () => {
+		cy.mount(<CardSample2 />);
+
+		// assert
+		cy.get("#cardHeader2")
+			.shadow()
+			.find(".ui5-card-header .ui5-card-header-title")
+			.should("have.attr", "aria-level", "3");
+
+		cy.get("#cardHeader2")
+			.shadow()
+			.find(".ui5-card-header .ui5-card-header-title")
+			.invoke("attr", "aria-level", "4")
+			.should("have.attr", "aria-level", "4");
+	});
+
+	it("Tests header aria-labelledby", () => {
+		cy.mount(
+			<div>
+				<Card>
+					<CardHeader
+						slot="header"
+						id="header"
+						additionalText="4 of 10"
+						titleText="Linked Activities (5)"
+						subtitleText="Quick Links">
+					</CardHeader>
+				</Card>
+
+				<Card>
+					<CardHeader
+						slot="header"
+						id="header2"
+						titleText="New Jobs (5)"
+						subtitleText="Find One">
+					</CardHeader>
+				</Card>
+			</div>
+		);
+
+		// assert
+		cy.get("#header").invoke("prop", "_id").then(headerId => {
+			cy.get("#header")
+				.shadow()
+				.find(".ui5-card-header .ui5-card-header-focusable-element")
+				.should("have.attr", "aria-labelledby", `${headerId}-title ${headerId}-subtitle ${headerId}-additionalText`);
+		});
+
+		cy.get("#header2").invoke("prop", "_id").then(headerId2 => {
+			cy.get("#header2")
+				.shadow()
+				.find(".ui5-card-header .ui5-card-header-focusable-element")
+				.should("have.attr", "aria-labelledby", `${headerId2}-title ${headerId2}-subtitle`);
+		});
+	});
 });

package/cypress/specs/FormSupport.cy.tsx

@@ -39,9 +39,6 @@ describe("Form support", () => {
 			<button type="submit" > Submits forms </button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -79,9 +76,6 @@ describe("Form support", () => {
 			<button type="submit">Submits forms</button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -111,9 +105,6 @@ describe("Form support", () => {
 			<button type="submit">Submits forms</button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -155,9 +146,6 @@ describe("Form support", () => {
 			<button type="submit">Submits forms</button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -199,9 +187,6 @@ describe("Form support", () => {
 			<button type="submit">Submits forms</button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -243,9 +228,6 @@ describe("Form support", () => {
 			<button type="submit">Submits forms</button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -287,9 +269,6 @@ describe("Form support", () => {
 			<button type="submit">Submits forms</button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -351,9 +330,6 @@ describe("Form support", () => {
 			<button type="submit">Submits forms</button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -415,9 +391,6 @@ describe("Form support", () => {
 			<button type="submit">Submits forms</button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -455,9 +428,6 @@ describe("Form support", () => {
 			<button type="submit">Submits forms</button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -473,9 +443,6 @@ describe("Form support", () => {
 		cy.get("#rb_1")
 			.realClick();
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("button")
 			.realClick();
 
@@ -495,9 +462,6 @@ describe("Form support", () => {
 			<button type="submit">Submits forms</button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -525,9 +489,6 @@ describe("Form support", () => {
 			<button type="submit">Submits forms</button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -543,9 +504,6 @@ describe("Form support", () => {
 		cy.get("#rb_4")
 			.realClick();
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("button")
 			.realClick();
 
@@ -568,9 +526,6 @@ describe("Form support", () => {
 			<button type="submit">Submits forms</button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -590,7 +545,7 @@ describe("Form support", () => {
 			.should("be.equal", "range_slider3=0&range_slider3=100&range_slider4=25&range_slider4=75");
 	});
 
-	it.skip("ui5-select in form", () => {
+	it("ui5-select in form", () => {
 		cy.mount(<form method="get">
 			<Select id="select1">
 				<Option selected>Option 1</Option>
@@ -618,12 +573,6 @@ describe("Form support", () => {
 				<Option value="option2" selected>Option 2</Option>
 				<Option value="">Option 3</Option>
 			</Select>
-			<Select id="select6" name="select6">
-				<Option>Option 1</Option>
-				<Option value="option2">Option 2</Option>
-				<Option value="" selected>Option 3</Option>
-			</Select>
-
 			<Select id="select7" name="select7" required>
 				<Option selected>Option 1</Option>
 				<Option value="option2">Option 2</Option>
@@ -643,8 +592,20 @@ describe("Form support", () => {
 			<button type="submit">Submits forms</button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(1000);
+		// Explicitly insert ui5-select with option that has attribute to empty string otherwise JSX will
+		// set is a property and it won't be applied to the DOM and it can't be achieved using setAttribute method
+		cy.get("#select7")
+			.then($el => {
+				$el[0].insertAdjacentHTML("beforebegin", `
+				<ui5-select id="select6" name="select6">
+					<ui5-option>Option 1</ui5-option>
+					<ui5-option value="option2">Option 2</ui5-option>
+					<ui5-option value="" selected>Option 3</ui5-option>
+				</ui5-select>`);
+			});
+
+		cy.get("#select6")
+			.should("be.visible");
 
 		cy.get("form")
 			.then($item => {
@@ -691,9 +652,6 @@ describe("Form support", () => {
 			<button type="submit">Submits forms</button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -722,9 +680,6 @@ describe("Form support", () => {
 			<button type="submit">Submits forms</button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -754,9 +709,6 @@ describe("Form support", () => {
 			<button type="submit">Submits forms</button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -795,9 +747,6 @@ describe("Form support", () => {
 			<button type="submit">Submits forms</button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -838,9 +787,6 @@ describe("Form support", () => {
 			<button type="submit">Submits forms</button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -877,9 +823,6 @@ describe("Form support", () => {
 			<Button id="b1">Does not submit forms</Button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());
@@ -893,7 +836,7 @@ describe("Form support", () => {
 			.should("have.not.been.called");
 	});
 
-	it.skip("Submit button does submit forms", () => {
+	it("Submit button does submit forms", () => {
 		cy.mount(<form method="get">
 			<Input name="input" value="ok"></Input>
 			<Input name="input_disabled" disabled value="ok"></Input>
@@ -902,7 +845,7 @@ describe("Form support", () => {
 				<Option value="compact">Compact</Option>
 				<Option value="condensed" selected>Condensed</Option>
 			</Select>
-			<TextArea id="ta" name="ta" value="asd"></TextArea>
+			<TextArea id="ta" name="ta" value="ok"></TextArea>
 			<TextArea name="ta_disabled" disabled value="ok"></TextArea>
 			<DatePicker name="dp" value="Apr 10, 2019"></DatePicker>
 			<DatePicker name="dp_disabled" disabled value="Apr 10, 2019"></DatePicker>
@@ -918,9 +861,6 @@ describe("Form support", () => {
 			<Button id="b2" submits>Submits forms</Button>
 		</form>);
 
-		// eslint-disable-next-line cypress/no-unnecessary-waiting
-		cy.wait(200);
-
 		cy.get("form")
 			.then($item => {
 				$item.get(0).addEventListener("submit", e => e.preventDefault());