
<!-- Please refer to our contributing documentation for any questions on submitting a pull request, or let us know here if you need any help: https://ionicframework.com/docs/building/contributing --> ## Pull request checklist Please check if your PR fulfills the following requirements: - [ ] Tests for the changes have been added (for bug fixes / features) - [ ] Docs have been reviewed and added / updated if needed (for bug fixes / features) - Some docs updates need to be made in the `ionic-docs` repo, in a separate PR. See the [contributing guide](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation) for details. - [ ] Build (`npm run build`) was run locally and any changes were pushed - [ ] Lint (`npm run lint`) has passed locally and any fixes were made for failures ## Pull request type <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type, submit multiple pull requests if needed. --> Please check the type of change your PR introduces: - [ ] Bugfix - [ ] Feature - [ ] Code style update (formatting, renaming) - [ ] Refactoring (no functional changes, no api changes) - [x] Build related changes - [ ] Documentation content changes - [ ] Other (please describe): ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> When testing changes locally, you can have an existing test app that you sync the package contents to. If you have done this across different versions of Ionic, it can install the wrong .tgz file instead of the local changes. Experienced here: https://github.com/ionic-team/ionic-framework/pull/27040#pullrequestreview-1362136995 <!-- Issues are required for both bug fixes and features. --> Issue URL: N/A ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Sync script deletes all .tgz files local to the directory before locally packing and installing the contents of the parent local packages ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
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.
Syncing Local Changes
The Vue test app supports syncing your locally built changes for validation.
- Build the
core
,packages/vue
, andpackages/vue-router
projects usingnpm run build
. - Build the Vue test app.
- Navigate to the built test app.
- Install dependencies using
npm install
. - Sync your local changes using
npm run sync
.
From here you can either build the application or start a local dev server. When re-syncing changes, you will need to wipe the build cache in node_modules/.cache
and restart the dev server/re-build.
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:
# 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:
- Navigate to the built app for the most recent version of Vue that Ionic tests.
- Update the application to the latest version of Vue.
- Make note of any files that changed during the upgrade (
package.json
,package-lock.json
, etc). - Copy the changed files to a new directory in
apps
. - 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. - Commit these changes and push.