feat: integrate @ui5/webcomponents-cypress-commands into cra template (#4341)

Author: Lukas742

packages/cra-template/template.json

@@ -8,7 +8,8 @@
       "web-vitals": "^2.1.0"
     },
     "devDependencies": {
-      "cypress": "^12.1.0"
+      "cypress": "^12.1.0",
+      "@ui5/webcomponents-cypress-commands": "latest"
     },
     "scripts": {
       "test": "cypress run --component --browser chrome",

packages/cra-template/template/cypress/support/component.js

@@ -21,6 +21,8 @@ import './commands';
 
 import { mount } from 'cypress/react18';
 import { ThemeProvider } from '@ui5/webcomponents-react';
+// Cypress commands and queries that help interacting with ui5-webcomponents
+import '@ui5/webcomponents-cypress-commands';
 
 /**
  * Cypress mount with ThemeProvider

packages/cra-template/template/src/App.cy.jsx

@@ -1,8 +1,13 @@
 import App from './App';
 
 describe('Component tests', () => {
-  it('render Link', () => {
+  it('render Link component with text', () => {
     cy.mount(<App />);
-    cy.get('[ui5-link]').should('be.visible').should('have.text', 'Getting Started with UI5 Web Component for React');
+    cy.get('[ui5-link]').should('be.visible').and('have.text', 'Getting Started with UI5 Web Component for React');
+  });
+  it('type into Input component', () => {
+    cy.mount(<App />);
+    cy.get('[ui5-input]').typeIntoUi5Input('Hello there!');
+    cy.get('[ui5-label]').should('be.visible').and('have.text', 'Hello there!');
   });
 });

packages/cra-template/template/src/App.js

@@ -1,15 +1,22 @@
+import { useState } from 'react';
 import {
   FlexBox,
   FlexBoxAlignItems,
   FlexBoxDirection,
   FlexBoxJustifyContent,
+  Input,
+  Label,
   Link,
   LinkDesign,
   ShellBar
 } from '@ui5/webcomponents-react';
 import './App.css';
 
 function App() {
+  const [inputVal, setInputVal] = useState('');
+  const handleInput = (e) => {
+    setInputVal(e.target.value);
+  };
   return (
     <>
       <ShellBar primaryTitle="UI5 Web Components for React Template" />
@@ -22,6 +29,8 @@ function App() {
         <Link href="https://sap.github.io/ui5-webcomponents-react/" target="_blank" design={LinkDesign.Emphasized}>
           Getting Started with UI5 Web Component for React
         </Link>
+        <Input placeholder="Hello World" onInput={handleInput} value={inputVal} />
+        <Label>{inputVal}</Label>
       </FlexBox>
     </>
   );