chore: migrate more base tests to Cypress (#9849)

SAP · Sep 13, 2024 · bd3aab9 · bd3aab9
1 parent 2e0aa03
commit bd3aab9
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 93 deletions.
diff --git a/packages/main/cypress/specs/base/IgnoreCustomElements.cy.ts b/packages/main/cypress/specs/base/IgnoreCustomElements.cy.ts
@@ -0,0 +1,35 @@
+import { html } from "lit";
+import "../../../src/Card.js";
+import "../../../src/CardHeader.js";
+
+import { ignoreCustomElements, shouldIgnoreCustomElement } from "@ui5/webcomponents-base/dist/IgnoreCustomElements.js";
+
+ignoreCustomElements("app-");
+ignoreCustomElements("my-");
+
+describe("Ignore Custom Elements", () => {
+	it("tests shouldIgnoreCustomElement method", () => {
+		cy.mount(html`<ui5-card>
+		<ui5-card-header
+			slot="header"
+			status="4 of 10"
+			title-text="Product">
+		</ui5-card-header>
+
+		<app-trip-calendar class="myCard-trip-calendar"></app-trip-calendar>
+		<my-trip-calendar class="myCard-trip-calendar"></app-trip-calendar>
+	</ui5-card>`);
+
+		cy.wrap({ shouldIgnoreCustomElement })
+			.invoke("shouldIgnoreCustomElement", "app-trip-calendar")
+			.should("be.true");
+
+		cy.wrap({ shouldIgnoreCustomElement })
+			.invoke("shouldIgnoreCustomElement", "my-trip-calendar")
+			.should("be.true");
+
+		cy.wrap({ shouldIgnoreCustomElement })
+			.invoke("shouldIgnoreCustomElement", "ui5-card-header")
+			.should("be.false");
+	});
+});
diff --git a/packages/main/cypress/specs/base/InvisibleMessage.cy.ts b/packages/main/cypress/specs/base/InvisibleMessage.cy.ts
@@ -0,0 +1,31 @@
+import announce from "@ui5/webcomponents-base/dist/util/InvisibleMessage.js";
+import "../../../src/Button.js";
+
+describe("InvisibleMessage", () => {
+	it("Initial rendering", () => {
+		cy.get(".ui5-invisiblemessage-polite")
+			.should("exist");
+
+		cy.get(".ui5-invisiblemessage-assertive")
+			.should("exist");
+	});
+
+	it("String annoucement", () => {
+		cy.wrap({ announce })
+			.invoke("announce", "announcement", "Polite");
+		cy.wrap({ announce })
+			.invoke("announce", "announcement", "Assertive");
+
+		// assert
+		cy.get(".ui5-invisiblemessage-polite")
+			.should("contain", "announcement");
+		cy.get(".ui5-invisiblemessage-assertive")
+			.should("contain", "announcement");
+
+		// assert - announcement is cleared
+		cy.get(".ui5-invisiblemessage-polite")
+			.should("not.contain", "announcement");
+		cy.get(".ui5-invisiblemessage-assertive")
+			.should("not.contain", "announcement");
+	});
+});
diff --git a/packages/main/cypress/specs/base/Tooltips.cy.ts b/packages/main/cypress/specs/base/Tooltips.cy.ts
@@ -0,0 +1,55 @@
+import { setEnableDefaultTooltips } from "@ui5/webcomponents-base/dist/config/Tooltips.js";
+import { html } from "lit";
+import "../../../src/Icon.js";
+import "../../../src/Button.js";
+import "../../../src/ToggleButton.js";
+import "../../../src/SegmentedButton.js";
+import "../../../src/SegmentedButtonItem.js";
+import "../../../src/RatingIndicator.js";
+
+setEnableDefaultTooltips(false);
+
+describe("Default Tooltips", () => {
+	it("tests navigation", () => {
+		cy.mount(html`
+	<ui5-icon id="ic" name="settings"></ui5-icon>
+	<ui5-button id="btn" icon="settings"></ui5-button>
+	<ui5-rating-indicator id="rt" icon="settings"></ui5-rating-indicator>
+	<ui5-toggle-button id="togglebtn" icon="settings"></ui5-toggle-button>
+	<ui5-segmented-button id="segBtn">
+		<ui5-segmented-button-item id="segBtnItem" icon="add"></ui5-segmented-button-item>
+		<ui5-segmented-button-item id="segBtnItem2" icon="settings"></ui5-segmented-button-item>
+		<ui5-segmented-button-item id="segBtnItem3" icon="activate"></ui5-segmented-button-item>
+	</ui5-segmented-button>`);
+
+		cy.get("#ic")
+			.shadow()
+			.find("title")
+			.should("not.exist");
+
+		cy.get("#btn")
+			.shadow()
+			.find(".ui5-button-icon")
+			.should("not.have.attr", "title");
+
+		cy.get("#togglebtn")
+			.shadow()
+			.find(".ui5-button-icon")
+			.should("not.have.attr", "title");
+
+		cy.get("#rt")
+			.shadow()
+			.find(".ui5-rating-indicator-root")
+			.should("not.have.attr", "title");
+
+		cy.get("#segBtnItem")
+			.shadow()
+			.find(".ui5-segmented-button-item-root")
+			.should("not.have.attr", "title");
+
+		cy.get("#segBtnItem")
+			.shadow()
+			.find(".ui5-segmented-button-item-icon")
+			.should("not.have.attr", "title");
+	});
+});
diff --git a/packages/main/src/SegmentedButtonItem.hbs b/packages/main/src/SegmentedButtonItem.hbs
@@ -18,7 +18,7 @@
 			class="ui5-segmented-button-item-icon"
 			name="{{icon}}"
 			part="icon"
-			?show-tooltip={{iconOnly}}
+			?show-tooltip={{showIconTooltip}}
 		></ui5-icon>
 	{{/if}}
 

diff --git a/packages/main/test/specs/base/IgnoreCustomElements.spec.js b/packages/main/test/specs/base/IgnoreCustomElements.spec.js
diff --git a/packages/main/test/specs/base/InvisibleMessage.spec.js b/packages/main/test/specs/base/InvisibleMessage.spec.js
diff --git a/packages/main/test/specs/base/Tooltips.spec.js b/packages/main/test/specs/base/Tooltips.spec.js
diff --git a/packages/tools/components-package/cypress.config.js b/packages/tools/components-package/cypress.config.js
@@ -6,7 +6,7 @@ module.exports = defineConfig({
 	component: {
 		supportFile: path.join(__dirname, "cypress/support/component.js"),
 		indexHtmlFile: path.join(__dirname, "cypress/support/component-index.html"),
-		specPattern: "**/specs/*.cy.{js,ts}",
+		specPattern: ["**/specs/*.cy.{js,ts}", "**/specs/**/*.cy.{js,ts}"],
 		devServer: {
 			framework: 'cypress-ct-lit',
 			bundler: 'vite',