test(vue): add multi-version testing (#25785)

This commit is contained in:
Liam DeBeasi 2022-08-23 15:05:34 -05:00 committed by GitHub
parent 037d579b2a
commit 65af865db7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
83 changed files with 174 additions and 28 deletions

View File

@ -1,5 +1,8 @@
name: 'Test Vue E2E'
description: 'Test Vue E2E'
inputs:
app:
description: 'The specific test application'
runs:
using: 'composite'
steps:
@ -29,19 +32,23 @@ runs:
name: ionic-vue-router
path: ./packages/vue-router
filename: VueRouterBuild.zip
- name: Create Test App
run: ./build.sh ${{ inputs.app }}
shell: bash
working-directory: ./packages/vue/test
- name: Install Dependencies
run: npm install
shell: bash
working-directory: ./packages/vue/test-app
working-directory: ./packages/vue/test/build/${{ inputs.app }}
- name: Sync
run: npm run sync
shell: bash
working-directory: ./packages/vue/test-app
working-directory: ./packages/vue/test/build/${{ inputs.app }}
- name: Run Spec Tests
run: npm run test:unit
shell: bash
working-directory: ./packages/vue/test-app
working-directory: ./packages/vue/test/build/${{ inputs.app }}
- name: Run E2E Tests
run: npm run test:e2e
shell: bash
working-directory: ./packages/vue/test-app
working-directory: ./packages/vue/test/build/${{ inputs.app }}

View File

@ -106,11 +106,26 @@ jobs:
- uses: ./.github/workflows/actions/build-vue-router
test-vue-e2e:
strategy:
fail-fast: false
matrix:
apps: [vue3]
needs: [build-vue, build-vue-router]
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: ./.github/workflows/actions/test-vue-e2e
with:
app: ${{ matrix.apps }}
verify-test-vue-e2e:
if: ${{ always() }}
needs: test-vue-e2e
runs-on: ubuntu-latest
steps:
- name: Check build matrix status
if: ${{ needs.test-vue-e2e.result != 'success' }}
run: exit 1
build-angular:
needs: [build-core]

3
.gitignore vendored
View File

@ -74,4 +74,7 @@ angular/css/
angular/test/build/
.angular/
# vue
packages/vue/test/build/
.npmrc

View File

@ -1,24 +0,0 @@
# Copy ionic vue dist
rm -rf node_modules/@ionic/vue/dist node_modules/@ionic/vue/css
cp -a ../dist node_modules/@ionic/vue/dist
cp -a ../css node_modules/@ionic/vue/css
cp -a ../package.json node_modules/@ionic/vue/package.json
# Copy ionic vue router dist
rm -rf node_modules/@ionic/vue-router/dist
cp -a ../../vue-router/dist node_modules/@ionic/vue-router/dist
cp -a ../../vue-router/package.json node_modules/@ionic/vue-router/package.json
# Copy core dist and components
rm -rf node_modules/@ionic/core/dist node_modules/@ionic/core/components
cp -a ../../../core/package.json node_modules/@ionic/core/package.json
cp -a ../../../core/dist node_modules/@ionic/core/dist
cp -a ../../../core/components node_modules/@ionic/core/components
# Copy stencil
rm -rf node_modules/@stencil/core
cp -a ../../../core/node_modules/@stencil/core node_modules/@stencil/core
# Copy ionicons
rm -rf node_modules/ionicons
cp -a ../../../core/node_modules/ionicons node_modules/ionicons

View File

@ -0,0 +1,43 @@
# Vue E2E Test Apps
Ionic Framework supports multiple versions of Vue. As a result, we need to verify that Ionic works correctly with each of these Vue versions.
## Test App Build Structure
Unlike other test applications, these test apps are broken up into multiple directories. These directories are then combined to create a single application. This allows us to share common application code, tests, etc so that each app is being tested the same way. Below details the different pieces that help create a single test application.
**apps** - This directory contains partial applications for each version of Vue we want to test. Typically these directories contain new `package.json` files, `jest.config.js` files, and more. If you have code that is specific to a particular version of Vue, put it in this directory.
**base** - This directory contains the base application that each test app will use. This is where tests, application logic, and more live. If you have code that needs to be run on every test app, put it in this directory.
**build** - When the `apps` and `base` directories are merged, the final result is put in this directory. The `build` directory should never be committed to git.
**build.sh** - This is the script that merges the `apps` and `base` directories and places the built application in the `build` directory.
Usage:
```shell
# Build a test app using apps/vue3 as a reference
./build.sh vue3
```
## How to modify test apps
To add new tests, components, or pages, modify the `base` project. This ensures that tests are run for every tested version.
If you want to add a version-specific change, add the change inside of the appropriate projects in `apps`. Be sure to replicate the directory structure. For example, if you are adding a new E2E test file called `test.e2e.ts` in `apps/vue3`, make sure you place the file in `apps/vue3/tests/e2e/test.e2e.ts`.
### Version-specific tests
If you need to add E2E tests that are only run on a specific version of the JS Framework, replicate the `VersionTest` component on each partial application. This ensures that tests for framework version X do not get run for framework version Y.
## Adding New Test Apps
As we add support for new versions of Vue, we will also need to update this directory to test against new applications. The following steps can serve as a guide for adding new apps:
1. Navigate to the built app for the most recent version of Vue that Ionic tests.
2. Update the application to the latest version of Vue.
3. Make note of any files that changed during the upgrade (`package.json`, `package-lock.json`, etc).
4. Copy the changed files to a new directory in `apps`.
5. Add a new entry to the matrix for `test-core-vue` in `./github/workflows/build.yml`. This will allow the new test app to run against all PRs.
6. Commit these changes and push.

View File

Before

Width:  |  Height:  |  Size: 930 B

After

Width:  |  Height:  |  Size: 930 B

View File

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 23 KiB

View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,24 @@
# Copy ionic vue dist
rm -rf node_modules/@ionic/vue/dist node_modules/@ionic/vue/css
cp -a ../../../dist node_modules/@ionic/vue/dist
cp -a ../../../css node_modules/@ionic/vue/css
cp -a ../../../package.json node_modules/@ionic/vue/package.json
# Copy ionic vue router dist
rm -rf node_modules/@ionic/vue-router/dist
cp -a ../../../../vue-router/dist node_modules/@ionic/vue-router/dist
cp -a ../../../../vue-router/package.json node_modules/@ionic/vue-router/package.json
# Copy core dist and components
rm -rf node_modules/@ionic/core/dist node_modules/@ionic/core/components
cp -a ../../../../../core/package.json node_modules/@ionic/core/package.json
cp -a ../../../../../core/dist node_modules/@ionic/core/dist
cp -a ../../../../../core/components node_modules/@ionic/core/components
# Copy stencil
rm -rf node_modules/@stencil/core
cp -a ../../../../../core/node_modules/@stencil/core node_modules/@stencil/core
# Copy ionicons
rm -rf node_modules/ionicons
cp -a ../../../../../core/node_modules/ionicons node_modules/ionicons

View File

@ -8,6 +8,10 @@ const routes: Array<RouteRecordRaw> = [
path: '/',
component: Home
},
{
path: '/version-test',
component: () => import('@/views/VersionTest.vue')
},
{
path: '/delayed-redirect',
beforeEnter: DelayGuard,

View File

@ -0,0 +1,41 @@
<template>
<ion-page data-pageid="version-test">
<ion-header :translucent="true">
<ion-toolbar>
<ion-buttons>
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>VersionTest</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true" class="ion-padding">
Version-specific tests
</ion-content>
</ion-page>
</template>
<script lang="ts">
import {
IonBackButton,
IonButtons,
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar
} from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonBackButton,
IonButtons,
IonContent,
IonHeader,
IonPage,
IonTitle,
IonToolbar
}
});
</script>

33
packages/vue/test/build.sh Executable file
View File

@ -0,0 +1,33 @@
#!/bin/bash
# The directory where the source
# for each specific application is.
APPS_DIR="apps"
# The directory where the
# base application logic is
BASE_DIR="base"
BUILD_DIR="build"
# The specific application
# we are building
APP_DIR="${1}"
# The full path to the specific application.
FULL_APP_DIR="${APPS_DIR}/${APP_DIR}/."
# The full path to the base application.
FULL_BASE_DIR="${BASE_DIR}/."
# The full path to the built application.
BUILD_APP_DIR="${BUILD_DIR}/${APP_DIR}/"
# Make the build directory if it does not already exist.
mkdir -p $BUILD_DIR
# First we need to copy the base application
cp -R $FULL_BASE_DIR $BUILD_APP_DIR
# Then we can copy the specific app which
# will override any files in the base application.
cp -R $FULL_APP_DIR $BUILD_APP_DIR