@ui5/webcomponents-base 0.0.0-e55c2cec6 → 0.0.0-e5b03d3e8

package/cypress/specs/UI5ElementSlots.cy.tsx

@@ -0,0 +1,136 @@
+import Generic from "../../test/test-elements/Generic.js";
+
+describe("Slots work properly", () => {
+	it("Tests that properties exist on the element for each slot", () => {
+		cy.mount(
+			<Generic>
+				Default slot text
+				<span>Default slot content</span>
+				<span slot="other">Other slot content 1</span>
+				<span slot="other">Other slot content 2</span>
+				<span slot="individual">Individual slot content 1</span>
+				<span slot="individual">Individual slot content 2</span>
+				<span slot="named">Item in slot with propertyName</span>
+				<span slot="named">Item in slot with propertyName</span>
+				<span slot="row-header">Item in slot row-header</span>
+				<span slot="row-header">Item in slot row-header</span>
+			</Generic>
+		);
+
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric");
+
+		cy.get("@testGeneric")
+			.invoke("prop", "content")
+			.then(value => {
+				return (value as Array<unknown>).length;
+			})
+			.should("be.greaterThan", 0);
+
+		cy.get("@testGeneric")
+			.invoke("prop", "other")
+			.should("have.length", 2);
+
+		cy.get("@testGeneric")
+			.invoke("prop", "individual")
+			.should("have.length", 2);
+
+		cy.get("@testGeneric")
+			.invoke("prop", "row-header")
+			.should("have.length", 2);
+
+		cy.get("@testGeneric")
+			.invoke("prop", "named")
+			.should("be.undefined");
+	});
+
+	it("Tests that properties exist on the element for each slot", () => {
+		cy.mount(
+			<Generic>
+				<span slot="individual">Individual slot content 1</span>
+				<span slot="individual">Individual slot content 2</span>
+			</Generic>
+		);
+
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
+
+		cy.get("[ui5-test-generic]");
+
+		cy.get("[slot=individual]")
+			.should("not.exist");
+
+		cy.get("[slot=individual-1]")
+			.should("exist");
+
+		cy.get("[slot=individual-2]")
+			.should("exist");
+	});
+
+	it("Tests that changing the slot attribute of children redistributes them across slot accessors", () => {
+		let defaultSlotLength = 0;
+
+		cy.mount(
+			<Generic>
+				<span>Default slot content</span>
+				<span slot="other" id="o1">Other slot content 1</span>
+				<span slot="other" id="o2">Other slot content 2</span>
+				<span slot="named">Item in slot with propertyName</span>
+				<span slot="named">Item in slot with propertyName</span>
+			</Generic>
+		);
+
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
+
+		cy.get("[ui5-test-generic]")
+			.as("testGeneric");
+
+		cy.get("@testGeneric")
+			.invoke("prop", "content")
+			.then(value => {
+				defaultSlotLength = value.length;
+
+				return defaultSlotLength;
+			})
+			.should("be.greaterThan", 0);
+
+		cy.get("@testGeneric")
+			.invoke("prop", "other")
+			.should("have.length", 2);
+
+		cy.get("@testGeneric")
+			.invoke("prop", "items")
+			.should("have.length", 2);
+
+		cy.get("#o1")
+			.invoke("removeAttr", "slot");
+
+		cy.get("#o2")
+			.invoke("attr", "slot", "named");
+
+		cy.get("@testGeneric")
+			.then($testGeneric => {
+				cy.wrap($testGeneric)
+					.invoke("prop", "content")
+					.should("have.length", defaultSlotLength + 1);
+			});
+
+		cy.get("@testGeneric")
+			.invoke("prop", "other")
+			.should("have.length", 0);
+
+		cy.get("@testGeneric")
+			.invoke("prop", "items")
+			.should("have.length", 3);
+	});
+});

package/cypress/specs/WithComplexTemplate.cy.tsx

@@ -0,0 +1,32 @@
+import WithComplexTemplate from "../../test/test-elements/WithComplexTemplate.js";
+
+describe("Complex templates", () => {
+	it("Tests context maintained in the HBS template before, after and inside 'each' statements", () => {
+		const EXPTECTED_LOOP_CONTENT = "Root text: root, Item text: positives";
+		const EXPTECTED_NESTED_LOOP_CONTENT = "Root Text: root, Word text: word1_good";
+
+		cy.mount(<WithComplexTemplate />);
+
+		cy.get("[ui5-test-complex-template]")
+			.shadow()
+			.find(".before-each-content--start--0")
+			.should("have.text", EXPTECTED_LOOP_CONTENT);
+
+		cy.get("[ui5-test-complex-template]")
+			.shadow()
+			.find(".nested-each-content--0--0")
+			.first()
+			.should("have.text", EXPTECTED_NESTED_LOOP_CONTENT);
+
+		cy.get("[ui5-test-complex-template]")
+			.shadow()
+			.find(".nested-each-content--0--1")
+			.first()
+			.should("have.text", EXPTECTED_NESTED_LOOP_CONTENT);
+
+		cy.get("[ui5-test-complex-template]")
+			.shadow()
+			.find(".after-each-content--end--0")
+			.should("have.text", EXPTECTED_LOOP_CONTENT);
+	});
+});

package/cypress/specs/i18n_texts.cy.tsx

@@ -0,0 +1,129 @@
+import { setLanguage } from "../../src/config/Language.js";
+import { registerI18nLoader, getI18nBundle } from "../../src/i18nBundle.js";
+import parseProperties from "../../src/PropertiesFileFormat.js";
+import I18nParent from "../../test/test-elements/I18nParent.js";
+import I18nChild from "../../test/test-elements/I18nChild.js";
+import I18nChild2 from "../../test/test-elements/I18nChild2.js";
+
+const props = `PLEASE_WAIT=Patientez.
+TEST_1=Text '{0}
+TEST_2=Text ''{0}
+TEST_3=Text ''{0}''
+TEST_4=Text
+TEST_5=Text '
+TEST_6=Text ''
+TEST_7=Text {0}
+TEST_8=Text '{0}'
+TEST_9=Text '{0}''`;
+
+const texts = [
+	{ key: "TEST_1", result: "Text {0}" },
+	{ key: "TEST_2", result: "Text 'test" },
+	{ key: "TEST_3", result: "Text 'test'" },
+	{ key: "TEST_4", result: "Text" },
+	{ key: "TEST_5", result: "Text '" },
+	{ key: "TEST_6", result: "Text '" },
+	{ key: "TEST_7", result: "Text test" },
+	{ key: "TEST_8", result: "Text {0}" },
+	{ key: "TEST_9", result: "Text {0}'" }
+];
+
+describe("i18n texts", () => {
+	beforeEach(() => {
+		cy.wrap({ setLanguage, registerI18nLoader, getI18nBundle })
+			.then(async api => {
+				// eslint-disable-next-line @typescript-eslint/require-await
+				api.registerI18nLoader("myApp", "fr", async () => {
+					return parseProperties(props);
+				});
+
+				await api.setLanguage("fr");
+			});
+	});
+
+	it("Getting text from current language", () => {
+		cy.wrap({ getI18nBundle })
+			.then(async api => {
+				const bundle = await api.getI18nBundle("myApp");
+
+				return bundle.getText("PLEASE_WAIT");
+			})
+			.should("equal", "Patientez.");
+
+		cy.wrap({ setLanguage })
+			.then(async api => {
+				await api.setLanguage("bg");
+			});
+
+		cy.wrap({ getI18nBundle })
+			.then(async api => {
+				const bundle = await api.getI18nBundle("myApp");
+
+				return bundle.getText("PLEASE_WAIT");
+			})
+			.should("equal", "PLEASE_WAIT");
+	});
+
+	// Single quote ' escape some symbols after it. For example: "Text '{0}" will result in "Text {0}". To use single
+	// quote you have to use: ''
+	it("Single quote '", () => {
+		texts.forEach(textData => {
+			cy.wrap({ getI18nBundle })
+				.then(async api => {
+					const bundle = await api.getI18nBundle("myApp");
+
+					return bundle.getText(textData.key, "test");
+				})
+				.should("equal", textData.result);
+		});
+	});
+});
+
+describe("i18n decorator", () => {
+	beforeEach(() => {
+		cy.wrap({ setLanguage, registerI18nLoader })
+			.then(async api => {
+				// eslint-disable-next-line @typescript-eslint/require-await
+				api.registerI18nLoader("custom-language", "bg", async () => {
+					return parseProperties(`PLEASE_WAIT=Моля изчакайте`);
+				});
+
+				// eslint-disable-next-line @typescript-eslint/require-await
+				api.registerI18nLoader("another-custom-language", "bg", async () => {
+					return parseProperties(`SOME_KEY=Някакъв ключ`);
+				});
+
+				await api.setLanguage("bg");
+			});
+	});
+
+	it("Bundle is accessed from every class", () => {
+		cy.mount(<>
+			<I18nParent />
+			<I18nChild />
+		</>);
+
+		cy.get("[i18n-parent]")
+			.invoke("prop", "i18nText")
+			.should("be.equal", "Моля изчакайте");
+
+		cy.get("[i18n-child]")
+			.invoke("prop", "i18nText")
+			.should("be.equal", "Моля изчакайте");
+	});
+
+	it("Bundle storage works correctly", () => {
+		cy.mount(<>
+			<I18nParent />
+			<I18nChild2 />
+		</>);
+
+		cy.get("[i18n-parent]")
+			.invoke("prop", "i18nText")
+			.should("be.equal", "Моля изчакайте");
+
+		cy.get("[i18n-child2]")
+			.invoke("prop", "i18nText")
+			.should("be.equal", "Някакъв ключ");
+	});
+});

package/cypress/specs/util/FocusableElements.cy.tsx

@@ -0,0 +1,48 @@
+import { getFirstFocusableElement } from "@ui5/webcomponents-base/dist/util/FocusableElements.js";
+import SideNavigation from "@ui5/webcomponents-fiori/dist/SideNavigation.js";
+import SideNavigationItem from "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";
+import SideNavigationSubItem from "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import Input from "@ui5/webcomponents/dist/Input.js";
+
+describe("FocusableElements", () => {
+	it("Tests first focusable element", () => {
+		cy.mount(
+			<>
+				<div id="container">
+					<Input tabindex="-1"></Input>
+					<br/>
+					<SideNavigation>
+						<SideNavigationItem
+							text="Home"
+							icon="home"
+							href="#home"
+							title="Home tooltip"></SideNavigationItem>
+						<SideNavigationItem text="People" href="#people" expanded icon="group">
+							<SideNavigationSubItem
+								id="subItem1"
+								selected
+								text="Should be Focused When Open"></SideNavigationSubItem>
+							<SideNavigationSubItem text="Sub Item 2"></SideNavigationSubItem>
+						</SideNavigationItem>
+					</SideNavigation>
+					<br/>
+					<Button id="buttonId">Close</Button>
+				</div>
+			</>
+		);
+
+		cy.get("#subItem1")
+			.shadow()
+			.find(".ui5-sn-item")
+			.should("have.attr", "tabindex", "0");
+
+		cy.get("#container").then( async ($container) => {
+		   const firstFocusable = await getFirstFocusableElement($container.get(0));
+		   await firstFocusable?.focus();
+		});
+
+		cy.get("#subItem1")
+			.should("have.focus");
+	});
+});

package/cypress/support/commands.ts

@@ -0,0 +1,39 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+import "@ui5/cypress-internal/commands.js";

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

@@ -0,0 +1,36 @@
+// ***********************************************************
+// 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 using ES2015 syntax:
+import './commands'
+
+import { mount } from '@ui5/cypress-ct-ui5-webc'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)

package/cypress/tsconfig.json

@@ -0,0 +1,21 @@
+{
+	"extends": "@ui5/webcomponents-tools/tsconfig.json",
+	"include": [
+		"./**/*"
+	],
+	"compilerOptions": {
+		"outDir": "dist",
+		"composite": true,
+		"tsBuildInfoFile": "dist/.tsbuildinfobuild",
+		"module": "NodeNext",
+		"moduleResolution": "nodenext",
+	},
+	"references": [
+		{
+			"path": "../"
+		},
+		{
+			"path": "../test/"
+		},
+	]
+}

package/cypress.config.js

@@ -0,0 +1,3 @@
+import cypressConfig from "@ui5/cypress-internal/cypress.config.js";
+
+export default cypressConfig;