javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 10:01:59 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
ionic-framework/packages/vue/test
History
Liam DeBeasi 5bc439961f fix(vue): tabs and parameterized routes work with latest vue (#28846) 
Issue number: resolves #28774

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

There are two issues causing Ionic Vue apps to not behave as intended
with certain versions of Vue:

1. In Vue 3.3 a [breaking change
shipped](https://github.com/vuejs/core/issues/9916) that changes the
default behavior of the `watch` inside of IonRouterOutlet to be a
shallow watcher instead of a deep watcher. This caused the router outlet
to not consistent re-render. While the change was later reverted by the
Vue team, they expressed that the change [may re-land in a future minor
release](https://github.com/vuejs/core/issues/9965#issuecomment-1875067499).
As a result, we will need to account for this inside of Ionic.
2. In Vue 3.2 a [custom elements improvement
shipped](https://github.com/vuejs/core/blob/main/changelogs/CHANGELOG-3.2.md#3238-2022-08-30)
that changed how custom elements are referred to in VNodes.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The affected `watch` call now is now explicitly a deep watcher. This
change is backwards compatible as well as forward compatible with
upcoming Vue changes.
- Updated IonTabs to account for the new VNode behavior for custom
elements. Ionic still supports version of Vue that do not have this
improvement, so we need to account for both behaviors for now. I also
added a tech debt ticket to remove the old checks when we drop support
for older versions of Vue.
- Updated E2E test dependencies. During this update some of our tests
needed to be updated to account for newer versions of Vue/Vitest.
Overall I was able to simplify a lot of our tests as a result.

I plan to add renovatebot to these E2E test apps, but I will handle that
in a separate PR.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  4. Update the BREAKING.md file with the breaking change.
5. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.6.6-dev.11705526292.1bc0acb5`

Note: Both of the issues cause tests to fail when using the latest
dependencies in the Vue E2E test app. However, I need to use the latest
dependencies so I can demonstrate that my changes do fix the reported
issues. As a result, I have both fixes in the same PR.
2024-01-19 21:29:56 +00:00
..
apps/vue3
fix(vue): tabs and parameterized routes work with latest vue (#28846)
2024-01-19 21:29:56 +00:00
base
fix(vue): tabs and parameterized routes work with latest vue (#28846)
2024-01-19 21:29:56 +00:00
build.sh
test(vue): add multi-version testing (#25785)
2022-08-23 16:05:34 -04:00
README.md
docs(vue): update README instructions (#28175)
2023-09-14 16:20:51 +00:00

README.md

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.

  1. Build the core, packages/vue, and packages/vue-router projects using npm run build.
  2. Build the Vue test app.
  3. Navigate to the built test app directory (e.g. packages/vue/test/build/vue3).
  4. Install dependencies using npm install.
  5. 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

Note

Please confirm your current directory as packages/vue/test before proceeding with any of the following commands.

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:

  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.