test(build system): add React tests for loadtest

.github/scripts/mega-app-copy-files.sh

@@ -0,0 +1,36 @@
+#!/bin/bash
+
+cd build-system-tests
+if [ "$BUILD_TOOL" == 'cra' ]; then
+    cp templates/template-aws-exports.js mega-apps/${MEGA_APP_NAME}/src/aws-exports.js
+    if [ "$LANGUAGE" == 'js' ]; then
+        cp templates/components/react/cra/App.js mega-apps/${MEGA_APP_NAME}/src/App.js
+    else
+        cp templates/components/react/cra/App.js mega-apps/${MEGA_APP_NAME}/src/App.tsx
+        if [ "$FRAMEWORK_VERSION" == '16' ]; then
+            # We have to customize the index.tsx file for React 16 because the render API changed since React 18.
+            # See more: https://legacy.reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
+            cp templates/components/react/cra/index-react-${FRAMEWORK_VERSION}.js mega-apps/${MEGA_APP_NAME}/src/index.tsx
+        fi
+    fi
+fi
+
+if [ "$BUILD_TOOL" == 'next' ]; then
+    mkdir mega-apps/${MEGA_APP_NAME}/data
+    cp templates/template-aws-exports.js mega-apps/${MEGA_APP_NAME}/data/aws-exports.js
+    cp templates/components/react/next/App.js mega-apps/${MEGA_APP_NAME}/pages/index.tsx
+    if [ "$BUILD_TOOL_VERSION" == '11' ]; then
+        # We have to customize the package.json and tsconfig.json for Next.js 11,
+        # because create-next-app only creates the app with the latest version
+        cp templates/components/react/next/template-package-${BUILD_TOOL_VERSION}.json mega-apps/${MEGA_APP_NAME}/package.json
+        cp templates/components/react/next/template-tsconfig-${BUILD_TOOL_VERSION}.json mega-apps/${MEGA_APP_NAME}/tsconfig.json
+    fi
+fi
+
+if [ "$BUILD_TOOL" == 'vite' ]; then
+    cp templates/template-aws-exports.js mega-apps/${MEGA_APP_NAME}/src/aws-exports.js
+    cp templates/components/react/cra/App.js mega-apps/${MEGA_APP_NAME}/src/App.tsx
+    cp templates/components/react/vite/index.html mega-apps/${MEGA_APP_NAME}/index.html
+    cp templates/components/react/vite/template-tsconfig.json mega-apps/${MEGA_APP_NAME}/tsconfig.json
+    cp templates/components/react/vite/vite.config.ts mega-apps/${MEGA_APP_NAME}/vite.config.ts
+fi

.github/scripts/mega-app-create-app.sh

@@ -0,0 +1,21 @@
+#!/bin/bash
+
+cd build-system-tests
+mkdir -p mega-apps/
+cd mega-apps
+
+if [[ "$BUILD_TOOL" == 'cra' && "$LANGUAGE" == 'js' ]]; then
+    npx create-react-app ${MEGA_APP_NAME}
+fi
+
+if [[ "$BUILD_TOOL" == 'cra' && "$LANGUAGE" == 'ts' ]]; then
+    npx create-react-app ${MEGA_APP_NAME} --template typescript
+fi
+
+if [ "$BUILD_TOOL" == 'next' ]; then
+    npx create-next-app ${MEGA_APP_NAME} --ts --no-src-dir --no-experimental-app --no-eslint
+fi
+
+if [ "$BUILD_TOOL" == 'vite' ]; then
+    npm create vite@${BUILD_TOOL_VERSION} $MEGA_APP_NAME -- --template react-ts
+fi

.github/scripts/mega-app-install-build.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+
+cd build-system-tests/mega-apps/${MEGA_APP_NAME}
+if [ "$PKG_MANAGER" == 'yarn' ]; then
+    echo "yarn version"
+    yarn -v
+    echo "yarn set version $PKG_MANAGER_VERSION"
+    yarn set version $PKG_MANAGER_VERSION
+    echo "yarn version"
+    yarn -v
+    if [[ "$BUILD_TOOL" == 'cra' && "$LANGUAGE" == 'ts' ]]; then
+        yarn add $DEP_TYPES
+    fi
+    yarn add $DEPENDENCIES
+    yarn build
+else
+    if [[ "$BUILD_TOOL" == 'cra' && "$LANGUAGE" == 'ts' ]]; then
+        # If not testing the latest React, we need to download its types.
+        # CRA is the only framework that we test React 16.
+        npm install $DEP_TYPES
+    fi
+    if [[ "$BUILD_TOOL" == 'next' && "$LANGUAGE" == '11' ]]; then
+        # We have to remove the initial downloaded node_modules for Next.js 11,
+        # because create-next-app only creates the app with the latest version
+        rm -rf node_modules
+    fi
+    npm install $DEPENDENCIES
+    npm run build
+fi

.github/workflows/build-system-test-react.yml

@@ -0,0 +1,116 @@
+# Description: this workflow runs build mega-apps that have all the connected components.
+
+name: Build System Test Canary - React
+
+on:
+  schedule:
+    - cron: '*/15 * * * *' # Run every 15 minutes
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    environment: ci
+    strategy:
+      fail-fast: false
+      matrix:
+        framework: [react]
+        framework-version: [latest]
+        build-tool: [cra, next, vite]
+        build-tool-version: [latest]
+        pkg-manager: [npm]
+        language: [ts]
+        node-version: [18]
+        include:
+          - framework: react
+            framework-version: latest
+            build-tool: cra
+            build-tool-version: latest
+            pkg-manager: npm
+            language: ts
+            node-version: 16
+          - framework: react
+            framework-version: 16
+            build-tool: cra
+            build-tool-version: latest
+            pkg-manager: npm
+            language: ts
+            node-version: 18
+          - framework: react
+            framework-version: latest
+            build-tool: cra
+            build-tool-version: latest
+            pkg-manager: npm
+            language: js
+            node-version: 18
+          - framework: react
+            framework-version: latest
+            build-tool: cra
+            build-tool-version: latest
+            pkg-manager: yarn
+            pkg-manager-version: 1
+            language: ts
+            node-version: 18
+          - framework: react
+            framework-version: 17
+            build-tool: next
+            build-tool-version: 11
+            pkg-manager: npm
+            language: ts
+            node-version: 16
+          - framework: react
+            framework-version: latest
+            build-tool: vite
+            build-tool-version: 2
+            pkg-manager: npm
+            language: ts
+            node-version: 18
+
+    env:
+      MEGA_APP_NAME: ${{ matrix.framework }}-${{ matrix.framework-version }}-${{ matrix.build-tool }}-${{ matrix.build-tool-version }}-node-${{ matrix.node-version }}-${{ matrix.language }}
+      DEPENDENCIES: react@${{ matrix.framework-version }} react-dom@${{ matrix.framework-version }} @aws-amplify/ui-react aws-amplify @aws-amplify/ui-react-storage
+      DEP_TYPES: '@types/react@${{ matrix.framework-version }} @types/react-dom@${{ matrix.framework-version }}'
+
+    steps:
+      - name: Checkout Amplify UI
+        uses: actions/checkout@24cb9080177205b6e8c946b17badbe402adc938f # v3.4.0 https://github.com/actions/checkout/commit/24cb9080177205b6e8c946b17badbe402adc938f
+        with:
+          persist-credentials: false
+      - name: Setup Node.js ${{ matrix.node-version }} with ${{ matrix.pkg-manager }}
+        uses: actions/setup-node@64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c # v3.6.0 https://github.com/actions/setup-node/commit/64ed1c7eab4cce3362f8c340dee64e5eaeef8f7c
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: ${{ matrix.pkg-manager }}
+        env:
+          SEGMENT_DOWNLOAD_TIMEOUT_MINS: 2
+      - name: Install build-system-tests package
+        uses: ./.github/actions/install-with-retries
+        with:
+          working-directory: ./build-system-tests
+      - name: Create MegaApp ${{ env.MEGA_APP_NAME }}
+        run: ./.github/scripts/mega-app-create-app.sh
+        shell: bash
+        env:
+          BUILD_TOOL: ${{ matrix.build-tool }}
+          LANGUAGE: ${{ matrix.language }}
+          MEGA_APP_NAME: ${{ env.MEGA_APP_NAME }}
+          BUILD_TOOL_VERSION: ${{ matrix.build-tool-version }}
+      - name: Copy aws_export and App.js
+        run: ./.github/scripts/mega-app-copy-files.sh
+        shell: bash
+        env:
+          BUILD_TOOL: ${{ matrix.build-tool }}
+          LANGUAGE: ${{ matrix.language }}
+          MEGA_APP_NAME: ${{ env.MEGA_APP_NAME }}
+          BUILD_TOOL_VERSION: ${{ matrix.build-tool-version }}
+          FRAMEWORK_VERSION: ${{ matrix.framework-version }}
+      - name: Install Packages and Build
+        run: ./.github/scripts/mega-app-copy-files.sh
+        shell: bash
+        env:
+          BUILD_TOOL: ${{ matrix.build-tool }}
+          LANGUAGE: ${{ matrix.language }}
+          MEGA_APP_NAME: ${{ env.MEGA_APP_NAME }}
+          PKG_MANAGER: ${{ matrix.pkg-manager }}
+          PKG_MANAGER_VERSION: ${{ matrix.pkg-manager-version }}
+          DEPENDENCIES: ${{ env.DEPENDENCIES }}
+          DEP_TYPES: ${{ env.DEP_TYPES }}

.vscode/settings.json

@@ -8,5 +8,8 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[shellscript]": {
+    "editor.defaultFormatter": "foxundermoon.shell-format"
   }
 }

build-system-tests/.gitignore

@@ -0,0 +1 @@
+mega-apps

build-system-tests/templates/components/react/cra/App.js

@@ -0,0 +1,51 @@
+import React, { useEffect } from 'react';
+import { Amplify, Notifications } from 'aws-amplify';
+import {
+  AccountSettings,
+  Authenticator,
+  FileUploader,
+  MapView,
+  Text,
+  InAppMessagingProvider,
+  InAppMessageDisplay,
+} from '@aws-amplify/ui-react';
+import { StorageManager } from '@aws-amplify/ui-react-storage';
+import '@aws-amplify/ui-react/styles.css';
+import awsconfig from './aws-exports';
+Amplify.configure(awsconfig);
+
+const { InAppMessaging } = Notifications;
+
+export default function Home() {
+  useEffect(() => {
+    // sync remote in-app messages
+    InAppMessaging.syncMessages();
+  }, []);
+
+  return (
+    <>
+      <InAppMessagingProvider>
+        <InAppMessageDisplay />
+        <Text>In-App Messaging Example</Text>
+      </InAppMessagingProvider>
+      <FileUploader acceptedFileTypes={['image/*']} accessLevel="public" />
+      <Authenticator>
+        {({ signOut, user = { username: '' } }) => (
+          <main>
+            <h1>Hello {user.username}</h1>
+            <button onClick={signOut}>Sign out</button>
+          </main>
+        )}
+      </Authenticator>
+      <AccountSettings.ChangePassword onSuccess={() => {}} />
+      <AccountSettings.DeleteUser onSuccess={() => {}} />
+      <StorageManager
+            acceptedFileTypes={['image/*']}
+            accessLevel="public"
+            maxFileCount={1}
+            isResumable
+          />
+      <MapView />
+    </>
+  );
+}

build-system-tests/templates/components/react/cra/index-react-16.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);

build-system-tests/templates/components/react/cra/index-react-18.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

build-system-tests/templates/components/react/cra/index-react-18.tsx

@@ -0,0 +1,13 @@
+// @ts-nocheck
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

build-system-tests/templates/components/react/next/App.js

@@ -0,0 +1,51 @@
+import React, { useEffect } from 'react';
+import { Amplify, Notifications } from 'aws-amplify';
+import {
+  AccountSettings,
+  Authenticator,
+  FileUploader,
+  MapView,
+  Text,
+  InAppMessagingProvider,
+  InAppMessageDisplay,
+} from '@aws-amplify/ui-react';
+import { StorageManager } from '@aws-amplify/ui-react-storage';
+import '@aws-amplify/ui-react/styles.css';
+import awsconfig from '@/data/aws-exports';
+Amplify.configure(awsconfig);
+
+const { InAppMessaging } = Notifications;
+
+export default function Home() {
+  useEffect(() => {
+    // sync remote in-app messages
+    InAppMessaging.syncMessages();
+  }, []);
+
+  return (
+    <>
+      <InAppMessagingProvider>
+        <InAppMessageDisplay />
+        <Text>In-App Messaging Example</Text>
+      </InAppMessagingProvider>
+      <FileUploader acceptedFileTypes={['image/*']} accessLevel="public" />
+      <Authenticator>
+        {({ signOut, user = { username: '' } }) => (
+          <main>
+            <h1>Hello {user.username}</h1>
+            <button onClick={signOut}>Sign out</button>
+          </main>
+        )}
+      </Authenticator>
+      <AccountSettings.ChangePassword onSuccess={() => {}} />
+      <AccountSettings.DeleteUser onSuccess={() => {}} />
+      <StorageManager
+        acceptedFileTypes={['image/*']}
+        accessLevel="public"
+        maxFileCount={1}
+        isResumable
+      />
+      <MapView />
+    </>
+  );
+}

build-system-tests/templates/components/react/next/template-package-11.json

@@ -0,0 +1,20 @@
+{
+  "name": "react-17-next-11-ts",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@types/node": "^15.12.4",
+    "@types/react": "17.0.47",
+    "@types/react-dom": "17",
+    "next": "^11.1.3",
+    "react": "17",
+    "react-dom": "17",
+    "typescript": "5.0.3"
+  }
+}