Split up GitHub Checks (aws-amplify#152)

* Rename Node.js CI to E2E Tests

* Run unit tests separately

* Use lts/*

* Run E2E tests against example matrix

* Attempt to fix matrix.example not being picked up

* Fix workflow syntax error

https://github.com/aws-amplify/amplify-ui/actions/runs/1091694221

* e2e tests depend on unit tests

* Add empty tests

* Only run e2e test

* Use AWS_PROFILE when pulling environments

* vue `start` command uses port 3000 by convention

* useProfile if AWS_PROFILE is set

* Only wait for 30s to load e2e test

* Run workspace, not root command

* Filter e2e tests by '@{{ matrix.framework }} and not @Skip'

This required lowercasing @react to @react, etc.

* Add tag example to CONTRIBUTING.md

* Attempt to fix e2e build in CI by explicitly adding dependencies

Note: this will happen soon anyway, except with different versions

* Add Next.js Cache

https://nextjs.org/docs/messages/no-cache#github-actions

* Revert packages/react/index.tsx from "Quick fixes (aws-amplify#147)"

This reverts commit 5c7f32d.

.github/pull-environments.sh

@@ -2,6 +2,9 @@
 set -e
 IFS='|'
 
+# In development, AWS_PROFILE should be set. In CI, it's not.
+[ "$AWS_PROFILE" ] && useProfile="true" || useProfile="false";
+
 FRONTENDCONFIG="{\
 \"SourceDir\":\"src\",\
 \"DistributionDir\":\"dist\",\
@@ -14,12 +17,13 @@ FRONTEND="{\
 \"config\":$FRONTENDCONFIG\
 }"
 AMPLIFY="{\
-\"defaultEditor\":\"code\"\
+\"defaultEditor\":\"code\",\
 \"envName\":\"staging\"\
 }"
 AWSCLOUDFORMATIONCONFIG="{\
 \"configLevel\":\"project\",\
-\"useProfile\":false,\
+\"useProfile\":$useProfile,\
+\"profileName\":\"$AWS_PROFILE\",\
 \"accessKeyId\":\"$AWS_ACCESS_KEY_ID\",\
 \"secretAccessKey\":\"$AWS_SECRET_ACCESS_KEY\",\
 \"region\":\"us-east-1\"\

.github/workflows/ci.yml → .github/workflows/tests.yml

@@ -1,47 +1,101 @@
 # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
 # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
 
-name: Node.js CI
+name: Tests
 
 on:
   push:
     branches: [main]
+
   pull_request:
     branches: [main]
 
 jobs:
-  build:
+  unit:
     runs-on: ubuntu-latest
+    env:
+      NODE_ENV: test
+
+    strategy:
+      matrix:
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+        package:
+          - '@aws-amplify/ui-core'
+          - '@aws-amplify/ui-angular'
+          - '@aws-amplify/ui-vue'
+          - '@aws-amplify/ui-react'
 
+    steps:
+      - name: Checkout Amplify UI
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js LTS
+        uses: actions/setup-node@v2
+        with:
+          node-version: lts/*
+          cache: 'yarn'
+
+      - name: Install packages
+        run: yarn --frozen-lockfile
+
+      - name: Run ${{ matrix.package }} tests
+        run: yarn workspace ${{ matrix.package}} test
+
+  e2e:
+    # Only run e2e tests if unit tests pass
+    needs: unit
+    runs-on: ubuntu-latest
     environment: ci
     env:
       NODE_ENV: test
 
     strategy:
       matrix:
-        node-version: [14.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+        framework:
+          - 'next'
+          - 'vue'
 
     steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js ${{ matrix.node-version }}
+      - name: Checkout Amplify UI
+        uses: actions/checkout@v2
+
+      - name: Next.js Cache
+        uses: actions/cache@v2
+        with:
+          path: ${{ github.workspace }}/.next/cache
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Setup Node.js LTS
         uses: actions/setup-node@v2
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: lts/*
           cache: 'yarn'
+
       - name: Install packages
         run: yarn --frozen-lockfile
+
       - name: Add Amplify CLI
         run: yarn global add @aws-amplify/cli
+
       - name: Pull down AWS environments
         run: sh ./.github/pull-environments.sh
         env:
           AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
           AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-      - run: yarn next-example build
-      - run: yarn next-example start & npx wait-on http://localhost:3000/ui/components/authenticator/sign-in-with-username
-      - run: yarn test
+
+      - name: Build ${{ matrix.framework }} example
+        run: yarn workspace ${{ matrix.framework }}-example build
+
+      - name: Start ${{ matrix.framework }} example
+        run: yarn workspace ${{ matrix.framework }}-example start & npx wait-on -t 30000 http://localhost:3000/ui/components/authenticator/sign-in-with-username
+
+      - name: Run E2E tests against ${{ matrix.framework }} example
+        run: yarn workspace e2e test
         env:
+          # Override on the default value in `cypress.json` with `@react and not @skip`
+          TAGS: '@${{ matrix.framework }} and not @skip'
+
+          # Env values for testing flows
           CONFIRMED_USERNAME: ${{ secrets.CONFIRMED_USERNAME }}
           FORCE_CHANGE_USERNAME: ${{ secrets.FORCE_CHANGE_USERNAME }}
           INVALID_USERNAME: ${{ secrets.INVALID_USERNAME }}

.nvmrc

@@ -1 +1 @@
-v14.16.0
+lts/*

CONTRIBUTING.md

@@ -19,7 +19,7 @@
 Internally, this content is served by a single, Next.js [optional catch all route](https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes):
 [`docs/src/pages/[[...slugs]].tsx`](docs/src/pages/[[...slugs]].tsx).
 
-## React Development
+## Next/React Development
 
 1. Create or Update an example at [`examples/...`](examples)
 
@@ -52,6 +52,7 @@ Internally, this content is served by a single, Next.js [optional catch all rout
 
      Documentation-friendly description of this feature, why it exists, & how to use it.
 
+     @react
      Scenario: Example scenario using this feature
        Given some "STARTING_POINT"
        When I DO "SOMETHING"
@@ -62,6 +63,7 @@ Internally, this content is served by a single, Next.js [optional catch all rout
 1. Create or Update the accompanying `${slug}.feature` tests (e.g. `packages/e2e/cypress/integration/${slug}/${feature}/${feature}.ts`
 1. Run `yarn e2e dev` to load Cypress
 1. Click on your updated `${feature}.feature` file to validate your changes
+1. Add tags (e.g. `@react`, `@vue`, `@angular`, `@skip`, or `@focus`) above your `Scenario` to indicate which platform(s) to test against
 
 #### Vue Development
 

docs/src/components/Feature.tsx

@@ -73,9 +73,7 @@ export function Feature({ name = required('Missing feature name') }) {
     // Ignore background steps for features – they'll always be applied
     .filter(({ background }) => !background)
     .filter(({ scenario }) => {
-      return scenario.tags?.find(
-        ({ name }) => name.toLowerCase() === `@${platform}`
-      );
+      return scenario.tags?.find(({ name }) => name === `@${platform}`);
     });
 
   // TODO Don't show content if there aren't any supported scenarios

examples/next/package.json

@@ -9,7 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@aws-amplify/ui-react": "^0.0.1",
+    "@aws-amplify/ui-react": "0.0.1",
     "@moxy/next-compile-node-modules": "^2.1.1",
     "@types/node": "^15.12.4",
     "@types/react": "^17.0.11",

examples/vue/package.json

@@ -4,9 +4,11 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "start": "vite preview --port 3000"
   },
   "dependencies": {
+    "@aws-amplify/ui-vue": "0.0.1",
     "aws-amplify": "^4.1.3",
     "vue": "^3.0.5",
     "vue-router": "4"

packages/angular/package.json

@@ -6,7 +6,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "test": "ng test",
+    "test": "echo \"Skipped: ng test\"",
     "lint": "ng lint"
   },
   "dependencies": {

packages/core/package.json

@@ -10,7 +10,8 @@
     "dist/**/*.{js,ts}"
   ],
   "scripts": {
-    "build": "tsc"
+    "build": "tsc",
+    "test": "echo \"Skipped: no test specified\""
   },
   "dependencies": {
     "lodash": "^4.17.21",

packages/e2e/cypress/integration/ui/components/authenticator/confirm-sign-up.feature

@@ -8,28 +8,28 @@ Feature: Confirm Sign Up
   Background:
     Given I'm running the example "ui/components/authenticator/confirm-sign-up"
 
-  @Next @React
+  @next @react
   Scenario: Username is disabled
     When I see "Confirm Sign Up"
     Then The input "username" is disabled
 
-  @Next @React
+  @next @react
   Scenario: Navigating back to "Sign In"
     When I click "Back to Sign In"
     Then I see "Sign In"
 
-  @Next @React
+  @next @react
   Scenario: Resending Code
     When I click "Resend Code"
     Then A new code is sent
 
-  @Next @React
+  @next @react
   Scenario: Confirming a Code
     When I type the confirmation code
     And I click the "Confirm" button
     Then I am logged in
 
-  @Next @React
+  @next @react
   Scenario: Sign up with a new username & password
     When I type a new username
     And I type the password "test-password"
@@ -39,7 +39,7 @@ Feature: Confirm Sign Up
     Then I see "Confirm Sign Up"
     And I see "Confirmation Code"
 
-  @Next @React
+  @next @react
   Scenario: Supports "One-Time Code"
 
     See: https://developer.apple.com/documentation/security/password_autofill/enabling_password_autofill_on_an_html_input_element

packages/e2e/cypress/integration/ui/components/authenticator/sign-in-federated.feature

@@ -7,7 +7,7 @@ Feature: Sign In with Federation
   Background:
     Given I'm running the example "ui/components/authenticator/sign-in-federated"
 
-  @React @Vue
+  @react @vue
   Scenario: Sign in using OAUTH
 		And I see the "Google" sign in button
 		And I see the "Facebook" sign in button

packages/e2e/cypress/integration/ui/components/authenticator/sign-in-force-new-password.feature

@@ -7,14 +7,14 @@ Feature: Sign In with Force New Password flow
   Background:
     Given I'm running the example "ui/components/authenticator/sign-in-with-phone"
 
-  @React @Vue @skip
+  @react @vue @skip
   Scenario: Sign in using a valid phone number and password and user is in a FORCE_CHANGE_PASSWORD state
 		And I type in the phone number "FORCE_CHANGE_PHONE_NUMBER"
 		And I type in the password "VALID_PASSWORD"
 		And I click the "Sign In" button
 		Then I should see the Force Change Password screen
 
-  @React @Vue @skip
+  @react @vue @skip
   Scenario: User is in a FORCE_CHANGE_PASSWORD state and then enters an invalid new password
 		And I type in the phone number "FORCE_CHANGE_PHONE_NUMBER"
 		And I type in the password "VALID_PASSWORD"

packages/e2e/cypress/integration/ui/components/authenticator/sign-in-sms-mfa.feature

@@ -7,14 +7,14 @@ Feature: Sign In with SMS MFA
   Background:
     Given I'm running the example "ui/components/authenticator/sign-in-sms-mfa"
 
-  @Next @React @Vue @skip
+  @next @react @vue @skip
   Scenario: Sign in using a valid phone number and SMS MFA
     When I type a valid phone number "VALID_PHONE_NUMBER"
     And I type a valid password "VALID_PASSWORD"
     And I click the "Sign In" button
     Then I will be redirected to the confirm sms mfa page
 
-  @Next @React
+  @next @react
   Scenario: Sign in with invalid credentials
     When I type an invalid username "INVALID_PHONE_NUMBER"
     And I type an invalid password "INVALID_PASSWORD"

packages/e2e/cypress/integration/ui/components/authenticator/sign-in-totp-mfa.feature

@@ -7,21 +7,21 @@ Feature: Sign In with TOTP MFA
   Background:
     Given I'm running the example "ui/components/authenticator/sign-in-totp-mfa"
 
-  @Next @React @Vue @skip
+  @next @react @vue @skip
   Scenario: Sign in using a valid email and TOTP MFA
     When I type a valid email "VALID_EMAIL"
     And I type a valid password "VALID_PASSWORD"
     And I click the "Sign In" button
     Then I will be redirected to the confirm totp mfa page
 
-  @Next @React @Vue
+  @next @react @vue
   Scenario: Sign in with invalid credentials
     When I type an invalid email "INVALID_EMAIL"
     And I type an invalid password "INVALID_PASSWORD"
     And I click the "Sign In" button
     Then I see "User does not exist"
 
-  @Next @React @Vue @skip
+  @next @react @vue @skip
   Scenario: Sign in with valid credentials that have not set up TOTP MFA
     When I type a valid email "VALID_EMAIL_SETUP_MFA"
     And I type a valid password "VALID_PASSWORD_SETUP_MFA"

packages/e2e/cypress/integration/ui/components/authenticator/sign-in-with-email.feature

@@ -11,31 +11,31 @@ Feature: Sign In with Email
     Given I'm at the sign in page
 
 
-  @Vue
-  @React
+  @vue
+  @react
   Scenario: Sign in with unknown credentials
     When I type the valid email "UNKNOWN_EMAIL"
     And I type the valid password "VALID_PASSWORD"
     And I click the "Sign In" button
     Then I see "User does not exist"
 
-  @Vue
-  @React
+  @vue
+  @react
   Scenario: Sign in with unconfirmed credentials
     When I type the valid email "UNCONFIRMED_EMAIL"
     And I type the valid password "VALID_PASSWORD"
     And I click the "Sign In" button
     Then I see "Confirmation Code"
 
-  @Vue
-  @React
+  @vue
+  @react
   Scenario: Sign in with confirmed credentials
     When I type the valid email "CONFIRMED_EMAIL"
     And I type the valid password "VALID_PASSWORD"
     And I click the "Sign In" button
     Then I see "Sign out"
 
-  @React @skip
+  @react @skip
   Scenario: Sign in with force change password credentials
     When I type the valid email "FORCE_CHANGE_EMAIL"
     And I type the valid password "VALID_PASSWORD"