test(build system): add React tests for loadtest (#3703)

* test(build system):setup env

* test(build system): add cra-template-react-js

* test(build system): add script/create-react-app

* test(build system): add script/create-react-app args

* test(build system): create template folder

* test(build system): create template components

* test(build system): mega-apps folder

* test(build system): add react-16-cra-5-js

* test(build system): dynamically create react16 and 18 js

* test(build system): refactor create-react-app script

* test(build system): create-react-app to create react 16 ts

* test(build system): rename cra-template-react

* test(build system): cleanup template/src

* test(build system): create mega-apps folder

* test(build system): rename pkgManager

* PoC: add mega app canary workflow

* PoC: add mega app canary workflow trigger

* revert to build-and-runtime-test

* use personal amplify app

* use personal amplify app

* use personal amplify app

* change mega-apps-test trigger by push

* change amplify pull envName

* remove unnecessary steps

* try building mega-app

* fix amplify pull

* install esbuild-register

* install esbuild-register

* fix working-dir

* log current dir

* log dir

* add pull env script

* fix pull env script

* add create-react-app

* throw cra err

* set TS version to 4

* add all cra apps

* fix stderr

* make nodeJS and npm/yarn dynamic

* add node and package params

* use multi-dimension matrix

* fix matrix

* react use include

* Revert "react use include"

This reverts commit 81b2780.

* rename mega-app-tests to mega-app-tests-cra

* test(build system): use default CRA

* test(build system): use default CRA fix working-dir

* test(build system): add MEGA_APP_NAME and ts

* test(build system): add ts and 16

* test(build system): add react 16

* test(build system): fix typescript

* test(build system): fix typescript

* test(build system): change 18 to latest and remove App.tsx

* test(build system): add GH workflow matrix include to reduce the number of mega-apps

* test(build system): add mega-app name to step

* test(build system): clean up cra template

* test(build system): add account-setting component

* test(build system): add next11 megaapp

* test(build system): move CRA toGH matrix include

* test(build system): add next

* test(build system): add next latest mega-app

* test(build system): add next 11 mega-app

* test(build system): add next 11 mega-app exclude node 18

* test(build system): fix gatsby

* test(build system): add vite latest mega-app

* test(build system): add vite 2 mega-app

* test(build system): rename mega-app-tests workflow and cleanup

* test(build system): cleanup custom template script

* test(build system): add node version to app names

* test(build system): remove react-16-cra-5-node-16-ts

* test(build system): remove environment

* test(build system): add storageManager and deleteUser

* test(build system): set yarn version

* test(build system): remove pkg.json and yarn.lock

* test(build system): add gatsby comment

* test(build system): run test every 15 min

* test(build system): rename build system

* test(build system): add comments

* test(build system): revert canary package.json

* test(build system): GH workflow action use commit hash

* test(build system): change schecule time

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

Co-authored-by: William Lee <[email protected]>

* test(build system): change GH workflow hash, next pkg template

* test(build system): remove handleSuccess

* test(build system): add create-mega-app script

* test(build system): add copy-mega-app-files script

* test(build system): add install and build script

* test(build system): change shell formatter

* test(build system): add comments and misc changes

* test(build system): remove gatsby

* test(build system): set yarn version to 1

* test(build system): move build-tools to matrix

* test(build system): add angular app and template

* test(build system): remove install-with-retries

* Revert "test(build system): add angular app and template"

This reverts commit 9c6662a.

* test(build system): fix install build build-tool-version

* test(build system): fix install-build path

* test(build system): echo log

* test(build system): reaname build system test

* test(build system): add merge to main trigger

* test(build system): log data to BuildSystemTestFailure metric

---------

Co-authored-by: William Lee <[email protected]>

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

@@ -0,0 +1,51 @@
+#!/bin/bash
+
+echo "cd build-system-tests"
+cd build-system-tests
+if [ "$BUILD_TOOL" == 'cra' ]; then
+    echo "cp templates/template-aws-exports.js mega-apps/${MEGA_APP_NAME}/src/aws-exports.js"
+    cp templates/template-aws-exports.js mega-apps/${MEGA_APP_NAME}/src/aws-exports.js
+    if [ "$LANGUAGE" == 'js' ]; then
+        echo "cp templates/components/react/cra/App.js mega-apps/${MEGA_APP_NAME}/src/App.js"
+        cp templates/components/react/cra/App.js mega-apps/${MEGA_APP_NAME}/src/App.js
+    else
+        echo "cp templates/components/react/cra/App.js mega-apps/${MEGA_APP_NAME}/src/App.tsx"
+        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
+            echo "cp templates/components/react/cra/index-react-${FRAMEWORK_VERSION}.js mega-apps/${MEGA_APP_NAME}/src/index.tsx"
+            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
+    echo "mkdir mega-apps/${MEGA_APP_NAME}/data"
+    mkdir mega-apps/${MEGA_APP_NAME}/data
+    echo "cp templates/template-aws-exports.js mega-apps/${MEGA_APP_NAME}/data/aws-exports.js"
+    cp templates/template-aws-exports.js mega-apps/${MEGA_APP_NAME}/data/aws-exports.js
+    echo "cp templates/components/react/next/App.js mega-apps/${MEGA_APP_NAME}/pages/index.tsx"
+    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
+        echo "cp templates/components/react/next/template-package-${BUILD_TOOL_VERSION}.json mega-apps/${MEGA_APP_NAME}/package.json"
+        cp templates/components/react/next/template-package-${BUILD_TOOL_VERSION}.json mega-apps/${MEGA_APP_NAME}/package.json
+        echo "cp templates/components/react/next/template-tsconfig-${BUILD_TOOL_VERSION}.json mega-apps/${MEGA_APP_NAME}/tsconfig.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
+    echo "cp templates/template-aws-exports.js mega-apps/${MEGA_APP_NAME}/src/aws-exports.js"
+    cp templates/template-aws-exports.js mega-apps/${MEGA_APP_NAME}/src/aws-exports.js
+    echo "cp templates/components/react/cra/App.js mega-apps/${MEGA_APP_NAME}/src/App.tsx"
+    cp templates/components/react/cra/App.js mega-apps/${MEGA_APP_NAME}/src/App.tsx
+    echo "cp templates/components/react/vite/index.html mega-apps/${MEGA_APP_NAME}/index.html"
+    cp templates/components/react/vite/index.html mega-apps/${MEGA_APP_NAME}/index.html
+    echo "cp templates/components/react/vite/template-tsconfig.json mega-apps/${MEGA_APP_NAME}/tsconfig.json"
+    cp templates/components/react/vite/template-tsconfig.json mega-apps/${MEGA_APP_NAME}/tsconfig.json
+    echo "cp templates/components/react/vite/vite.config.ts mega-apps/${MEGA_APP_NAME}/vite.config.ts"
+    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,28 @@
+#!/bin/bash
+
+echo "cd build-system-tests"
+cd build-system-tests
+echo "mkdir -p mega-apps/"
+mkdir -p mega-apps/
+echo "cd mega-apps"
+cd mega-apps
+
+if [[ "$BUILD_TOOL" == 'cra' && "$LANGUAGE" == 'js' ]]; then
+    echo "npx create-react-app ${MEGA_APP_NAME}"
+    npx create-react-app ${MEGA_APP_NAME}
+fi
+
+if [[ "$BUILD_TOOL" == 'cra' && "$LANGUAGE" == 'ts' ]]; then
+    echo "npx create-react-app ${MEGA_APP_NAME} --template typescript"
+    npx create-react-app ${MEGA_APP_NAME} --template typescript
+fi
+
+if [ "$BUILD_TOOL" == 'next' ]; then
+    echo "npx create-next-app ${MEGA_APP_NAME} --ts --no-src-dir --no-experimental-app --no-eslint"
+    npx create-next-app ${MEGA_APP_NAME} --ts --no-src-dir --no-experimental-app --no-eslint
+fi
+
+if [ "$BUILD_TOOL" == 'vite' ]; then
+    echo "npm create vite@${BUILD_TOOL_VERSION} $MEGA_APP_NAME -- --template react-ts"
+    npm create vite@${BUILD_TOOL_VERSION} $MEGA_APP_NAME -- --template react-ts
+fi

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

@@ -0,0 +1,37 @@
+#!/bin/bash
+
+echo "cd build-system-tests/mega-apps/${MEGA_APP_NAME}"
+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
+        echo "yarn add $DEP_TYPES"
+        yarn add $DEP_TYPES
+    fi
+    echo "yarn add $DEPENDENCIES"
+    yarn add $DEPENDENCIES
+    echo "yarn build"
+    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.
+        echo "npm install $DEP_TYPES"
+        npm install $DEP_TYPES
+    fi
+    if [[ "$BUILD_TOOL" == 'next' && "$BUILD_TOOL_VERSION" == '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
+        echo "rm -rf node_modules"
+        rm -rf node_modules
+    fi
+    echo "npm install $DEPENDENCIES"
+    npm install $DEPENDENCIES
+    echo "npm run build"
+    npm run build
+fi

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

@@ -0,0 +1,145 @@
+# Description: this workflow runs build mega-apps that have all the connected components.
+
+name: Build System Test Canary
+
+on:
+  schedule:
+    - cron: '*/15 * * * *' # Run every 15 minutes
+  push:
+    branches: [main] # Run when merge to main
+
+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: 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-install-build.sh
+        shell: bash
+        env:
+          BUILD_TOOL: ${{ matrix.build-tool }}
+          BUILD_TOOL_VERSION: ${{ matrix.build-tool-version }}
+          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 }}
+
+  log-failure-metric:
+    # Send a failure data point to metric BuildSystemTestFailure in github-workflows@ us-east-2
+    runs-on: ubuntu-latest
+    environment: ci
+    needs: build
+    if: ${{ failure() }}
+    steps:
+      - name: Log failure data point to metric BuildSystemTestFailure
+        uses: aws-amplify/amplify-ui/.github/actions/log-metric@main
+        with:
+          metric-name: BuildSystemTestFailure
+          value: 1
+          role-to-assume: ${{ secrets.METRIC_LOGGER_ROLE_ARN }}
+          aws-region: us-east-2
+
+  log-success-metric:
+    # Send a success data point to metric BuildSystemTestFailure in github-workflows@ us-east-2
+    runs-on: ubuntu-latest
+    environment: ci
+    needs: build
+    if: ${{ success() }}
+    steps:
+      - name: Log success data point to metric BuildSystemTestFailure
+        uses: aws-amplify/amplify-ui/.github/actions/log-metric@main
+        with:
+          metric-name: BuildSystemTestFailure
+          value: 0
+          role-to-assume: ${{ secrets.METRIC_LOGGER_ROLE_ARN }}
+          aws-region: us-east-2

.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>
+);