feat(vite-ts example): add routing, e2e test, theming & data fetching…

… example (#5502)

.storybook/components/LabelWithWrapping.tsx

@@ -0,0 +1,7 @@
+import { Label, WrappingType } from '@ui5/webcomponents-react';
+import React from 'react';
+
+//mdx adds a paragraph to children if added inline, this component prevents that.
+export const LabelWithWrapping = ({ children }) => {
+  return <Label wrappingType={WrappingType.Normal}>{children}</Label>;
+};

.storybook/components/ProjectTemplate.module.css

@@ -1,6 +1,6 @@
 .card {
   width: 500px;
-  height: 18rem;
+  height: 20rem;
   margin-block-end: 2rem;
   flex-shrink: 0;
 }

.storybook/components/ProjectTemplate.tsx

@@ -25,6 +25,7 @@ interface ProjectTemplatePropTypes {
   children: ReactNode;
   deprecationNotice?: string;
   isTemplate?: boolean;
+  stackBlitzHref?: string;
 }
 
 addCustomCSSWithScoping(
@@ -33,7 +34,18 @@ addCustomCSSWithScoping(
 );
 
 export function ProjectTemplate(props: ProjectTemplatePropTypes) {
-  const { title, subtitle, logo, logoAttribution, isTypeScript, children, href, deprecationNotice, isTemplate } = props;
+  const {
+    title,
+    subtitle,
+    logo,
+    logoAttribution,
+    isTypeScript,
+    children,
+    href,
+    deprecationNotice,
+    isTemplate,
+    stackBlitzHref
+  } = props;
 
   return (
     <ThemeProvider>
@@ -72,10 +84,17 @@ export function ProjectTemplate(props: ProjectTemplatePropTypes) {
               className={classes.deprecationNotice}
             />
           )}
-
           <Link design={LinkDesign.Emphasized} href={href}>
             View Example
           </Link>
+          {stackBlitzHref && (
+            <>
+              |
+              <Link design={LinkDesign.Emphasized} href={stackBlitzHref}>
+                View in StackBlitz
+              </Link>
+            </>
+          )}
           {!isTemplate && (
             <>
               <br />

.storybook/components/index.ts

@@ -5,3 +5,4 @@ export * from './Footer';
 export * from './ProductsTable';
 export * from './ProjectTemplate';
 export * from './TableOfContent';
+export * from './LabelWithWrapping';

docs/ProjectTemplates.mdx

@@ -1,6 +1,6 @@
-import { Footer, ProjectTemplate, TableOfContent } from '@sb/components';
+import { Footer, ProjectTemplate, TableOfContent, LabelWithWrapping } from '@sb/components';
 import { Meta } from '@storybook/blocks';
-import { FlexBox, FlexBoxJustifyContent, FlexBoxWrap, Label } from '@ui5/webcomponents-react';
+import { FlexBox, FlexBoxJustifyContent, FlexBoxWrap, Label, Link, WrappingType } from '@ui5/webcomponents-react';
 import NextLogo from '@sb/images/logo-nextjs.svg';
 import ViteLogo from '@sb/images/logo-vitejs.svg';
 
@@ -42,6 +42,7 @@ A curated list of minimal project templates and examples to get started using UI
     href={'https://github.com/SAP/ui5-webcomponents-react/tree/main/templates/vite-ts'}
     isTypeScript
     isTemplate
+    stackBlitzHref="https://stackblitz.com/github/SAP/ui5-webcomponents-react/tree/main/templates/vite-ts?file=src%2FApp.tsx"
   />
 </FlexBox>
 
@@ -90,11 +91,21 @@ A curated list of minimal project templates and examples to get started using UI
     logoAttribution={'Vite.js Logo. Original Source: https://github.com/vitejs/vite/blob/main/docs/public/logo.svg '}
     href={'https://github.com/SAP/ui5-webcomponents-react/tree/main/examples/vite-ts'}
     isTypeScript
+    stackBlitzHref="https://stackblitz.com/github/SAP/ui5-webcomponents-react/tree/main/examples/vite-ts?file=src%2Fmain.tsx"
   >
     <ul>
+      <li>
+        <LabelWithWrapping>Routing and Data Fetching using the createBrowserRouter of React Router</LabelWithWrapping>
+      </li>
       <li>
         <Label>Cypress Component Test setup</Label>
       </li>
+      <li>
+        <Label>Cypress E2E Test setup</Label>
+      </li>
+      <li>
+        <Label>Theming</Label>
+      </li>
     </ul>
   </ProjectTemplate>
 </FlexBox>

examples/vite-ts/README.md

@@ -1,4 +1,4 @@
-# UI5 Web Components for React - Vite + TypeScript Template
+# UI5 Web Components for React - Vite + TypeScript + React Router Example
 
 ## How to use this template
 
@@ -23,22 +23,39 @@ npm run dev
 
 ## Run Tests
 
-Run all component tests headlessly in Chrome:
+Run all tests headlessly in Chrome:
+
+**End-to-End-Tests**
+
+```bash
+npm run testE2E
+```
+
+**Component Tests**
 
 ```bash
 npm run test
 ```
 
-Open component tests in Chrome:
+Open tests in Chrome:
+
+**End-to-End-Tests**
+
+```bash
+npm run testE2E:open
+```
+
+**Component Tests**
 
 ```bash
 npm run test:open
 ```
 
 ## Learn More
 
-To learn more about Vite and UI5 Web Components for React, please visit the following resources:
+To learn more about Vite, React Router and UI5 Web Components for React, please visit the following resources:
 
 - [Vite Documentation](https://vitejs.dev/)
+- [React Router Documentation](https://reactrouter.com/)
 - [UI5 Web Components Documentation](https://sap.github.io/ui5-webcomponents/)
 - [UI5 Web Components for React Documentation](https://sap.github.io/ui5-webcomponents-react/)

examples/vite-ts/cypress.config.ts

@@ -1,10 +1,20 @@
 import { defineConfig } from 'cypress';
 
 export default defineConfig({
+  includeShadowDom: true,
+  viewportWidth: 1920,
+  viewportHeight: 1080,
   component: {
     devServer: {
       framework: 'react',
       bundler: 'vite'
     }
+  },
+
+  e2e: {
+    baseUrl: 'http://localhost:5173/',
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    }
   }
 });

examples/vite-ts/cypress/e2e/App.cy.tsx

@@ -0,0 +1,9 @@
+// make sure to start your dev server before running e2e tests
+describe('E2E tests', () => {
+  it('click list item', () => {
+    cy.visit('/');
+    cy.clickUi5ListItemByText("Solve a Rubik's cube");
+    cy.url().should('eq', 'http://localhost:5173/todo/5');
+    cy.get('[value="Solve a Rubik\'s cube"]').should('be.visible').and('have.attr', 'ui5-input');
+  });
+});

examples/vite-ts/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.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';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

examples/vite-ts/package.json

@@ -7,7 +7,9 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "test": "cypress run --component --browser chrome",
+    "testE2E": "cypress run --e2e --browser chrome",
     "test:open": "cypress open --component --browser chrome",
+    "testE2E:open": "cypress open --e2e --browser chrome",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
@@ -17,15 +19,16 @@
     "@ui5/webcomponents-icons": "~1.22.0",
     "@ui5/webcomponents-react": "~1.25.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
-    "@vitejs/plugin-react": "^4.2.0",
     "@ui5/webcomponents-cypress-commands": "^1.12.0",
+    "@vitejs/plugin-react": "^4.2.0",
     "cypress": "^13.0.0",
     "eslint": "^8.38.0",
     "eslint-plugin-react-hooks": "^4.6.0",

examples/vite-ts/src/App.cy.tsx

@@ -1,13 +1,11 @@
-import App from './App';
+import { Button } from '@ui5/webcomponents-react';
 
 describe('Component tests', () => {
-  it('render Link component with text', () => {
-    cy.mount(<App />);
-    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!');
+  // example for component test
+  it('basic', () => {
+    const clickSpy = cy.spy().as('clickSpy');
+    cy.mount(<Button onClick={clickSpy}>Click me!</Button>);
+    cy.get('[ui5-button]').click();
+    cy.get('@clickSpy').should('have.been.calledOnce');
   });
 });

examples/vite-ts/src/AppShell.module.css

@@ -0,0 +1,3 @@
+.popover::part(content) {
+  padding: 0;
+}