mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
refactor(angular): move to packages directory (#27719)
Issue number: N/A --------- <!-- 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. --> The `angular` directory sits at the root of the project instead of in `packages` with all the other JS Framework integrations. This does not cause any functional issues with Ionic, but it is confusing since integrations are not in a consistent place. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Moves the `angular` directory to `packages/angular` Note: Most files should remain unchanged. The only files I changed are the files that had direct paths to the old `angular` directory: 1. Removes the `angular` path in `lerna.json`. This is now covered by `packages/*` 2. Updated the angular file path in `.gitignore` 3. Updates the path to the angular package in `stencil.config.ts` for the Angular Output Targets 4. Updates some of Angular's sync scripts to correctly get the core stylesheets as well as the core package. 5. Updates the test app sync script to correctly sync core and angular-server ~I'm not entirely sure why GitHub thinks https://github.com/ionic-team/ionic-framework/pull/27719/files#diff-f5bba7e7c7c75426e2b9c89868310cb03890493b4efe0252adf8d12cc8398962 is a new file since it exists in `main` here:1f06be4a31/angular/test/base/scripts/build-ionic.sh~Fixed in6e7fc49827## 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. --> Dev build: `7.1.2-dev.11688052109.13454f5c`
This commit is contained in:
Liam DeBeasi
103
packages/angular/test/README.md
Normal file
103
packages/angular/test/README.md
Normal file
@@ -0,0 +1,103 @@
|
||||
# Angular E2E Test Apps
|
||||
|
||||
Ionic Framework supports multiple versions of Angular. As a result, we need to verify that Ionic works correctly with each of these Angular versions.
|
||||
|
||||
## Syncing Local Changes
|
||||
|
||||
The Angular test app supports syncing your locally built changes for validation.
|
||||
|
||||
1. Build the `core` and `packages/angular` directories using `npm run build`.
|
||||
2. [Build the Angular test app](#test-app-build-structure).
|
||||
3. Navigate to the built test app.
|
||||
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 or disable the application cache](#application-cache).
|
||||
|
||||
## Application Cache
|
||||
|
||||
Angular CLI creates a cache of several files on disk by default in the `.angular` directory. This decreases the time taken to build the test application. However, the cache makes it difficult to quickly sync and check local changes of Ionic. As a result, the `.angular` cache is disabled by default in the test app projects.
|
||||
|
||||
See https://angular.io/cli/cache for more information.
|
||||
|
||||
### Disable Cache
|
||||
|
||||
```
|
||||
ng cache disable
|
||||
```
|
||||
|
||||
> Note: You may need to manually remove the `.angular` directory once after running this command.
|
||||
|
||||
### Enable Cache
|
||||
|
||||
```
|
||||
ng cache enable
|
||||
```
|
||||
|
||||
> Note: You will need to delete the `.angular` cache and restart the dev server every time you want to sync local changes of Ionic.
|
||||
|
||||
## 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 Angular we want to test. Typically these directories contain new `package.json` files, `angular.json` files, and more. If you have code that is specific to a particular version of Angular, 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/ng14 as a reference
|
||||
./build.sh ng14
|
||||
```
|
||||
|
||||
## 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.spec.ts` in `apps/ng14`, make sure you place the file in `apps/ng14/e2e/src/test.spec.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 Angular, 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 Angular that Ionic tests.
|
||||
2. Update the application by following the steps on https://update.angular.io/.
|
||||
3. Make note of any files that changed during the upgrade (`package.json`, `package-lock.json`, `angular.json`, etc).
|
||||
4. Copy the changed files to a new directory in `apps`.
|
||||
5. Add a new entry to the matrix for `test-core-angular` in `./github/workflows/build.yml`. This will allow the new test app to run against all PRs.
|
||||
6. Commit these changes and push.
|
||||
|
||||
Example:
|
||||
|
||||
In this example, we are going to add the Angular 14 test app.
|
||||
|
||||
1. Build the Angular 13 test app using `./build.sh ng13`.
|
||||
2. Navigate to `build/ng13`.
|
||||
3. Perform the upgrade steps on https://update.angular.io/. The "From" field should say "13.0" and the "To" field should say "14.0".
|
||||
|
||||
Note: You may encounter some other peer dependency issues not covered by the Angular Upgrade Guide. These peer dependency issues can be resolved manually by updating the installed version of each dependency.
|
||||
|
||||
4. Observe that the output of the Angular upgrade indicates that the following files were modified:
|
||||
|
||||
`angular.json`
|
||||
`package-lock.json`
|
||||
`package.json`
|
||||
`tsconfig.json`
|
||||
`src/app/form/form.component.ts`
|
||||
`src/app/modal-example/modal-example.component.ts`
|
||||
|
||||
5. Create a directory in `apps` named `ng14`.
|
||||
6. Copy the modified files to the `apps/ng14` directory.
|
||||
7. Open `./github/workflows/build.yml` and find the `test-angular-e2e` job.
|
||||
8. Find the `apps` field under `matrix`.
|
||||
9. Add "ng14" to the `apps` field.
|
||||
10. Commit these changes and push.
|
||||
0
packages/angular/test/apps/ng14/e2e/src/.gitkeep
Normal file
0
packages/angular/test/apps/ng14/e2e/src/.gitkeep
Normal file
@@ -0,0 +1,5 @@
|
||||
it("should be on Angular 14", () => {
|
||||
cy.visit('/');
|
||||
|
||||
cy.get('ion-title').contains('Angular 14');
|
||||
});
|
||||
28628
packages/angular/test/apps/ng14/package-lock.json
generated
Normal file
28628
packages/angular/test/apps/ng14/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
70
packages/angular/test/apps/ng14/package.json
Normal file
70
packages/angular/test/apps/ng14/package.json
Normal file
@@ -0,0 +1,70 @@
|
||||
{
|
||||
"name": "ionic-angular-test-app",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"sync:build": "sh scripts/build-ionic.sh",
|
||||
"sync": "sh scripts/sync.sh",
|
||||
"build": "ng build --configuration production --no-progress",
|
||||
"lint": "ng lint",
|
||||
"postinstall": "ngcc",
|
||||
"serve:ssr": "node dist/test-app/server/main.js",
|
||||
"build:ssr": "ng build --prod && ng run test-app:server:production",
|
||||
"dev:ssr": "ng run test-app:serve-ssr",
|
||||
"prerender": "ng run test-app:prerender",
|
||||
"cy.open": "cypress open",
|
||||
"cy.run": "cypress run",
|
||||
"test": "concurrently \"npm run start -- --configuration production\" \"wait-on http-get://localhost:4200 && npm run cy.run\" --kill-others --success first",
|
||||
"test.watch": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.open\" --kill-others --success first"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "^14.1.0",
|
||||
"@angular/common": "^14.1.0",
|
||||
"@angular/compiler": "^14.1.0",
|
||||
"@angular/core": "^14.1.0",
|
||||
"@angular/forms": "^14.1.0",
|
||||
"@angular/platform-browser": "^14.1.0",
|
||||
"@angular/platform-browser-dynamic": "^14.1.0",
|
||||
"@angular/platform-server": "^14.1.0",
|
||||
"@angular/router": "^14.1.0",
|
||||
"@ionic/angular": "^6.1.15",
|
||||
"@ionic/angular-server": "^6.1.15",
|
||||
"core-js": "^2.6.11",
|
||||
"express": "^4.15.2",
|
||||
"ionicons": "^6.0.4",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"typescript-eslint-language-service": "^4.1.5",
|
||||
"zone.js": "^0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^14.1.0",
|
||||
"@angular-eslint/builder": "^14.0.2",
|
||||
"@angular-eslint/eslint-plugin": "^14.0.2",
|
||||
"@angular-eslint/eslint-plugin-template": "^14.0.2",
|
||||
"@angular-eslint/schematics": "^14.0.2",
|
||||
"@angular-eslint/template-parser": "^14.0.2",
|
||||
"@angular/cli": "^14.1.0",
|
||||
"@angular/compiler-cli": "^14.1.0",
|
||||
"@angular/language-service": "^14.1.0",
|
||||
"@nguniversal/builders": "^14.0.3",
|
||||
"@types/express": "^4.17.7",
|
||||
"@types/node": "^12.12.54",
|
||||
"@typescript-eslint/eslint-plugin": "^5.0.0",
|
||||
"@typescript-eslint/parser": "^5.0.0",
|
||||
"concurrently": "^6.0.0",
|
||||
"cypress": "^10.2.0",
|
||||
"eslint": "^7.26.0",
|
||||
"ts-loader": "^6.2.2",
|
||||
"ts-node": "^8.3.0",
|
||||
"typescript": "~4.6.0",
|
||||
"wait-on": "^5.2.1",
|
||||
"webpack": "^5.61.0",
|
||||
"webpack-cli": "^4.9.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 16"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { NgModule } from "@angular/core";
|
||||
import { RouterModule } from "@angular/router";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([])
|
||||
],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class VersionTestRoutingModule { }
|
||||
26
packages/angular/test/apps/ng14/tsconfig.json
Normal file
26
packages/angular/test/apps/ng14/tsconfig.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"importHelpers": true,
|
||||
"outDir": "./dist/out-tsc",
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"moduleResolution": "node",
|
||||
"module": "es2020",
|
||||
"target": "es2020",
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"typeRoots": [
|
||||
"node_modules/@types"
|
||||
],
|
||||
"lib": [
|
||||
"es2018",
|
||||
"dom"
|
||||
],
|
||||
"plugins": [
|
||||
{
|
||||
"name": "typescript-eslint-language-service"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
0
packages/angular/test/apps/ng15/e2e/src/.gitkeep
Normal file
0
packages/angular/test/apps/ng15/e2e/src/.gitkeep
Normal file
@@ -0,0 +1,5 @@
|
||||
it("should be on Angular 15", () => {
|
||||
cy.visit('/');
|
||||
|
||||
cy.get('ion-title').contains('Angular 15');
|
||||
});
|
||||
27288
packages/angular/test/apps/ng15/package-lock.json
generated
Normal file
27288
packages/angular/test/apps/ng15/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
71
packages/angular/test/apps/ng15/package.json
Normal file
71
packages/angular/test/apps/ng15/package.json
Normal file
@@ -0,0 +1,71 @@
|
||||
{
|
||||
"name": "ionic-angular-test-app",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"sync:build": "sh scripts/build-ionic.sh",
|
||||
"sync": "sh scripts/sync.sh",
|
||||
"build": "ng build --configuration production --no-progress",
|
||||
"lint": "ng lint",
|
||||
"postinstall": "ngcc",
|
||||
"serve:ssr": "node dist/test-app/server/main.js",
|
||||
"build:ssr": "ng build --prod && ng run test-app:server:production",
|
||||
"dev:ssr": "ng run test-app:serve-ssr",
|
||||
"prerender": "ng run test-app:prerender",
|
||||
"cy.open": "cypress open",
|
||||
"cy.run": "cypress run",
|
||||
"test": "concurrently \"npm run start -- --configuration production\" \"wait-on http-get://localhost:4200 && npm run cy.run\" --kill-others --success first",
|
||||
"test.watch": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.open\" --kill-others --success first"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "^15.0.0",
|
||||
"@angular/common": "^15.0.0",
|
||||
"@angular/compiler": "^15.0.0",
|
||||
"@angular/core": "^15.0.0",
|
||||
"@angular/forms": "^15.0.0",
|
||||
"@angular/platform-browser": "^15.0.0",
|
||||
"@angular/platform-browser-dynamic": "^15.0.0",
|
||||
"@angular/platform-server": "^15.0.0",
|
||||
"@angular/router": "^15.0.0",
|
||||
"@ionic/angular": "^6.1.15",
|
||||
"@ionic/angular-server": "^6.1.15",
|
||||
"@nguniversal/express-engine": "^15.0.0",
|
||||
"core-js": "^2.6.11",
|
||||
"express": "^4.15.2",
|
||||
"ionicons": "^6.0.4",
|
||||
"rxjs": "~7.5.0",
|
||||
"tslib": "^2.3.0",
|
||||
"typescript-eslint-language-service": "^4.1.5",
|
||||
"zone.js": "~0.11.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^15.0.0",
|
||||
"@angular-eslint/builder": "^15.0.0",
|
||||
"@angular-eslint/eslint-plugin": "^15.0.0",
|
||||
"@angular-eslint/eslint-plugin-template": "^15.0.0",
|
||||
"@angular-eslint/schematics": "^15.0.0",
|
||||
"@angular-eslint/template-parser": "^15.0.0",
|
||||
"@angular/cli": "^15.0.0",
|
||||
"@angular/compiler-cli": "^15.0.0",
|
||||
"@angular/language-service": "^15.0.0",
|
||||
"@nguniversal/builders": "^15.0.0",
|
||||
"@types/express": "^4.17.7",
|
||||
"@types/node": "^12.12.54",
|
||||
"@typescript-eslint/eslint-plugin": "4.28.2",
|
||||
"@typescript-eslint/parser": "4.28.2",
|
||||
"concurrently": "^6.0.0",
|
||||
"cypress": "^10.2.0",
|
||||
"eslint": "^7.26.0",
|
||||
"ts-loader": "^6.2.2",
|
||||
"ts-node": "^8.3.0",
|
||||
"typescript": "~4.8.4",
|
||||
"wait-on": "^5.2.1",
|
||||
"webpack": "^5.61.0",
|
||||
"webpack-cli": "^4.9.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 16"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import { NgModule } from "@angular/core";
|
||||
import { RouterModule } from "@angular/router";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([])
|
||||
],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class VersionTestRoutingModule { }
|
||||
35
packages/angular/test/apps/ng15/tsconfig.json
Normal file
35
packages/angular/test/apps/ng15/tsconfig.json
Normal file
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist/out-tsc",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"downlevelIteration": true,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "ES2022",
|
||||
"module": "es2020",
|
||||
"emitDecoratorMetadata": true,
|
||||
"typeRoots": ["node_modules/@types"],
|
||||
"lib": ["es2020", "dom"],
|
||||
"plugins": [
|
||||
{
|
||||
"name": "typescript-eslint-language-service"
|
||||
}
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
}
|
||||
}
|
||||
0
packages/angular/test/apps/ng16/e2e/src/.gitkeep
Normal file
0
packages/angular/test/apps/ng16/e2e/src/.gitkeep
Normal file
@@ -0,0 +1,5 @@
|
||||
it("should be on Angular 16", () => {
|
||||
cy.visit('/');
|
||||
|
||||
cy.get('ion-title').contains('Angular 16');
|
||||
});
|
||||
@@ -0,0 +1,20 @@
|
||||
describe('Modal Nav Params', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
cy.visit('/version-test/modal-nav-params');
|
||||
});
|
||||
|
||||
it('should assign the rootParams when presented in a modal multiple times', () => {
|
||||
cy.contains('Open Modal').click();
|
||||
cy.get('ion-modal').should('exist').should('be.visible');
|
||||
cy.get('ion-modal').contains('OK');
|
||||
|
||||
cy.contains("Close").click();
|
||||
cy.get('ion-modal').should('not.be.visible');
|
||||
|
||||
cy.contains('Open Modal').click();
|
||||
cy.get('ion-modal').should('exist').should('be.visible');
|
||||
cy.get('ion-modal').contains('OK').should('exist');
|
||||
});
|
||||
|
||||
});
|
||||
29480
packages/angular/test/apps/ng16/package-lock.json
generated
Normal file
29480
packages/angular/test/apps/ng16/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
70
packages/angular/test/apps/ng16/package.json
Normal file
70
packages/angular/test/apps/ng16/package.json
Normal file
@@ -0,0 +1,70 @@
|
||||
{
|
||||
"name": "ionic-angular-test-app",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
"start": "ng serve",
|
||||
"sync:build": "sh scripts/build-ionic.sh",
|
||||
"sync": "sh scripts/sync.sh",
|
||||
"build": "ng build --configuration production --no-progress",
|
||||
"lint": "ng lint",
|
||||
"serve:ssr": "node dist/test-app/server/main.js",
|
||||
"build:ssr": "ng build --prod && ng run test-app:server:production",
|
||||
"dev:ssr": "ng run test-app:serve-ssr",
|
||||
"prerender": "ng run test-app:prerender",
|
||||
"cy.open": "cypress open",
|
||||
"cy.run": "cypress run",
|
||||
"test": "concurrently \"npm run start -- --configuration production\" \"wait-on http-get://localhost:4200 && npm run cy.run\" --kill-others --success first",
|
||||
"test.watch": "concurrently \"npm run start\" \"wait-on http-get://localhost:4200 && npm run cy.open\" --kill-others --success first"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/animations": "^16.0.0",
|
||||
"@angular/common": "^16.0.0",
|
||||
"@angular/compiler": "^16.0.0",
|
||||
"@angular/core": "^16.0.0",
|
||||
"@angular/forms": "^16.0.0",
|
||||
"@angular/platform-browser": "^16.0.0",
|
||||
"@angular/platform-browser-dynamic": "^16.0.0",
|
||||
"@angular/platform-server": "^16.0.0",
|
||||
"@angular/router": "^16.0.0",
|
||||
"@ionic/angular": "^7.0.0",
|
||||
"@ionic/angular-server": "^7.0.0",
|
||||
"@nguniversal/express-engine": "^16.0.0",
|
||||
"core-js": "^2.6.11",
|
||||
"express": "^4.15.2",
|
||||
"ionicons": "^7.0.4",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"typescript-eslint-language-service": "^4.1.5",
|
||||
"zone.js": "~0.13.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "^16.0.0",
|
||||
"@angular-eslint/builder": "^16.0.0",
|
||||
"@angular-eslint/eslint-plugin": "^16.0.0",
|
||||
"@angular-eslint/eslint-plugin-template": "^16.0.0",
|
||||
"@angular-eslint/schematics": "^16.0.0",
|
||||
"@angular-eslint/template-parser": "^16.0.0",
|
||||
"@angular/cli": "^16.0.0",
|
||||
"@angular/compiler-cli": "^16.0.0",
|
||||
"@angular/language-service": "^16.0.0",
|
||||
"@nguniversal/builders": "^16.0.0",
|
||||
"@types/express": "^4.17.7",
|
||||
"@types/node": "^12.12.54",
|
||||
"@typescript-eslint/eslint-plugin": "4.28.2",
|
||||
"@typescript-eslint/parser": "4.28.2",
|
||||
"concurrently": "^6.0.0",
|
||||
"cypress": "^10.2.0",
|
||||
"eslint": "^7.26.0",
|
||||
"ts-loader": "^6.2.2",
|
||||
"ts-node": "^8.3.0",
|
||||
"typescript": "~5.0.2",
|
||||
"wait-on": "^5.2.1",
|
||||
"webpack": "^5.61.0",
|
||||
"webpack-cli": "^4.9.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 16"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { Component } from "@angular/core";
|
||||
|
||||
import { IonicModule } from "@ionic/angular";
|
||||
|
||||
import { NavRootComponent } from "./nav-root.component";
|
||||
|
||||
@Component({
|
||||
selector: 'app-modal-nav-params',
|
||||
template: `
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Modal Nav Params</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-button id="open">Open Modal</ion-button>
|
||||
<ion-modal #modal trigger="open">
|
||||
<ng-template>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-button (click)="modal.dismiss()">Close</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-nav [root]="root" [rootParams]="rootParams"></ion-nav>
|
||||
</ion-content>
|
||||
</ng-template>
|
||||
</ion-modal>
|
||||
</ion-content>
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [IonicModule, NavRootComponent]
|
||||
})
|
||||
export class ModalNavParamsComponent {
|
||||
|
||||
root = NavRootComponent;
|
||||
rootParams = {
|
||||
params: {
|
||||
id: 123
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
import { JsonPipe } from "@angular/common";
|
||||
import { Component } from "@angular/core";
|
||||
|
||||
import { IonicModule } from "@ionic/angular";
|
||||
|
||||
/**
|
||||
* This is used to track if any occurences of
|
||||
* the ion-nav root component being attached to
|
||||
* the DOM result in the rootParams not being
|
||||
* assigned to the component instance.
|
||||
*
|
||||
* https://github.com/ionic-team/ionic-framework/issues/27146
|
||||
*/
|
||||
let rootParamsException = false;
|
||||
|
||||
@Component({
|
||||
selector: 'app-modal-content',
|
||||
template: `
|
||||
{{ hasException ? 'ERROR' : 'OK' }}
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [IonicModule, JsonPipe]
|
||||
})
|
||||
export class NavRootComponent {
|
||||
|
||||
params: any;
|
||||
|
||||
ngOnInit() {
|
||||
if (this.params === undefined) {
|
||||
rootParamsException = true;
|
||||
}
|
||||
}
|
||||
|
||||
get hasException() {
|
||||
return rootParamsException;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import { NgModule } from "@angular/core";
|
||||
import { RouterModule } from "@angular/router";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: 'modal-nav-params',
|
||||
loadComponent: () => import('./modal-nav-params/modal-nav-params.component').then(m => m.ModalNavParamsComponent)
|
||||
}
|
||||
])
|
||||
],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class VersionTestRoutingModule { }
|
||||
35
packages/angular/test/apps/ng16/tsconfig.json
Normal file
35
packages/angular/test/apps/ng16/tsconfig.json
Normal file
@@ -0,0 +1,35 @@
|
||||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"outDir": "./dist/out-tsc",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
"noImplicitOverride": true,
|
||||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"sourceMap": false,
|
||||
"declaration": false,
|
||||
"downlevelIteration": true,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"emitDecoratorMetadata": true,
|
||||
"typeRoots": ["node_modules/@types"],
|
||||
"lib": ["ES2022", "dom"],
|
||||
"plugins": [
|
||||
{
|
||||
"name": "typescript-eslint-language-service"
|
||||
}
|
||||
],
|
||||
"useDefineForClassFields": false
|
||||
},
|
||||
"angularCompilerOptions": {
|
||||
"enableI18nLegacyMessageIdFormat": false,
|
||||
"strictInjectionParameters": true,
|
||||
"strictInputAccessModifiers": true,
|
||||
"strictTemplates": true
|
||||
}
|
||||
}
|
||||
12
packages/angular/test/base/.browserslistrc
Normal file
12
packages/angular/test/base/.browserslistrc
Normal file
@@ -0,0 +1,12 @@
|
||||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
> 0.5%
|
||||
last 2 versions
|
||||
Firefox ESR
|
||||
not dead
|
||||
not IE 9-11 # For IE 9-11 support, remove 'not'.
|
||||
13
packages/angular/test/base/.editorconfig
Normal file
13
packages/angular/test/base/.editorconfig
Normal file
@@ -0,0 +1,13 @@
|
||||
# Editor configuration, see https://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
max_line_length = off
|
||||
trim_trailing_whitespace = false
|
||||
51
packages/angular/test/base/.eslintrc.json
Normal file
51
packages/angular/test/base/.eslintrc.json
Normal file
@@ -0,0 +1,51 @@
|
||||
{
|
||||
"root": true,
|
||||
"ignorePatterns": [
|
||||
"projects/**/*"
|
||||
],
|
||||
"overrides": [
|
||||
{
|
||||
"files": [
|
||||
"*.ts"
|
||||
],
|
||||
"parserOptions": {
|
||||
"project": [
|
||||
"tsconfig.json",
|
||||
"e2e/tsconfig.json"
|
||||
],
|
||||
"createDefaultProgram": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:@angular-eslint/recommended",
|
||||
"plugin:@angular-eslint/template/process-inline-templates"
|
||||
],
|
||||
"rules": {
|
||||
"@angular-eslint/component-selector": [
|
||||
"error",
|
||||
{
|
||||
"prefix": "app",
|
||||
"style": "kebab-case",
|
||||
"type": "element"
|
||||
}
|
||||
],
|
||||
"@angular-eslint/directive-selector": [
|
||||
"error",
|
||||
{
|
||||
"prefix": "app",
|
||||
"style": "camelCase",
|
||||
"type": "attribute"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"files": [
|
||||
"*.html"
|
||||
],
|
||||
"extends": [
|
||||
"plugin:@angular-eslint/template/recommended"
|
||||
],
|
||||
"rules": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
44
packages/angular/test/base/.gitignore
vendored
Normal file
44
packages/angular/test/base/.gitignore
vendored
Normal file
@@ -0,0 +1,44 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
|
||||
# profiling files
|
||||
chrome-profiler-events.json
|
||||
speed-measure-plugin.json
|
||||
|
||||
# IDEs and editors
|
||||
/.idea
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# IDE - VSCode
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
|
||||
# misc
|
||||
/.angular/cache
|
||||
/.sass-cache
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System Files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
156
packages/angular/test/base/angular.json
Normal file
156
packages/angular/test/base/angular.json
Normal file
@@ -0,0 +1,156 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"projects": {
|
||||
"test-app": {
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"projectType": "application",
|
||||
"prefix": "app",
|
||||
"schematics": {},
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"options": {
|
||||
"outputPath": "dist/test-app/browser",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"buildOptimizer": true,
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
{
|
||||
"glob": "**/*",
|
||||
"input": "src/assets",
|
||||
"output": "assets"
|
||||
},
|
||||
{
|
||||
"glob": "**/*.svg",
|
||||
"input": "node_modules/ionicons/dist/ionicons/svg",
|
||||
"output": "./svg"
|
||||
}
|
||||
],
|
||||
"styles": ["src/styles.css"],
|
||||
"scripts": []
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"optimization": true,
|
||||
"outputHashing": "all",
|
||||
"sourceMap": false,
|
||||
"namedChunks": false,
|
||||
"aot": true,
|
||||
"progress": false,
|
||||
"extractLicenses": true,
|
||||
"vendorChunk": false,
|
||||
"buildOptimizer": true,
|
||||
"budgets": [
|
||||
{
|
||||
"type": "initial",
|
||||
"maximumWarning": "2mb",
|
||||
"maximumError": "5mb"
|
||||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb"
|
||||
}
|
||||
]
|
||||
},
|
||||
"development": {
|
||||
"buildOptimizer": false,
|
||||
"optimization": false,
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
},
|
||||
"serve": {
|
||||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"options": {
|
||||
"browserTarget": "test-app:build"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "test-app:build:production"
|
||||
},
|
||||
"development": {
|
||||
"browserTarget": "test-app:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
},
|
||||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "test-app:build"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-eslint/builder:lint",
|
||||
"options": {
|
||||
"lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
|
||||
}
|
||||
},
|
||||
"server": {
|
||||
"builder": "@angular-devkit/build-angular:server",
|
||||
"options": {
|
||||
"outputPath": "dist/test-app/server",
|
||||
"main": "server.ts",
|
||||
"tsConfig": "tsconfig.server.json"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"outputHashing": "media",
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
}
|
||||
],
|
||||
"sourceMap": false,
|
||||
"optimization": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"serve-ssr": {
|
||||
"builder": "@nguniversal/builders:ssr-dev-server",
|
||||
"options": {
|
||||
"browserTarget": "test-app:build",
|
||||
"serverTarget": "test-app:server"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "test-app:build:production",
|
||||
"serverTarget": "test-app:server:production"
|
||||
}
|
||||
}
|
||||
},
|
||||
"prerender": {
|
||||
"builder": "@nguniversal/builders:prerender",
|
||||
"options": {
|
||||
"browserTarget": "test-app:build:production",
|
||||
"serverTarget": "test-app:server:production",
|
||||
"routes": []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"cli": {
|
||||
"schematicCollections": ["@angular-eslint/schematics"],
|
||||
"cache": {
|
||||
"enabled": false
|
||||
}
|
||||
}
|
||||
}
|
||||
16
packages/angular/test/base/cypress.config.ts
Normal file
16
packages/angular/test/base/cypress.config.ts
Normal file
@@ -0,0 +1,16 @@
|
||||
import { defineConfig } from 'cypress'
|
||||
|
||||
export default defineConfig({
|
||||
video: false,
|
||||
screenshotOnRunFailure: false,
|
||||
e2e: {
|
||||
// We've imported your old cypress plugins here.
|
||||
// You may want to clean this up later by importing these.
|
||||
setupNodeEvents(on, config) {
|
||||
return require('./cypress/plugins/index.js')(on, config)
|
||||
},
|
||||
specPattern: './e2e/**/*.spec.ts',
|
||||
baseUrl: 'http://localhost:4200/',
|
||||
excludeSpecPattern: '**/examples/*',
|
||||
},
|
||||
})
|
||||
22
packages/angular/test/base/cypress/plugins/index.js
vendored
Normal file
22
packages/angular/test/base/cypress/plugins/index.js
vendored
Normal file
@@ -0,0 +1,22 @@
|
||||
/// <reference types="cypress" />
|
||||
// ***********************************************************
|
||||
// This example plugins/index.js can be used to load plugins
|
||||
//
|
||||
// You can change the location of this file or turn off loading
|
||||
// the plugins file with the 'pluginsFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/plugins-guide
|
||||
// ***********************************************************
|
||||
|
||||
// This function is called when a project is opened or re-opened (e.g. due to
|
||||
// the project's config changing)
|
||||
|
||||
/**
|
||||
* @type {Cypress.PluginConfig}
|
||||
*/
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
module.exports = (on, config) => {
|
||||
// `on` is used to hook into various events Cypress emits
|
||||
// `config` is the resolved Cypress config
|
||||
}
|
||||
79
packages/angular/test/base/cypress/support/commands.js
vendored
Normal file
79
packages/angular/test/base/cypress/support/commands.js
vendored
Normal file
@@ -0,0 +1,79 @@
|
||||
// ***********************************************
|
||||
// This example commands.js shows you how to
|
||||
// create various custom commands and overwrite
|
||||
// existing commands.
|
||||
//
|
||||
// For more comprehensive examples of custom
|
||||
// commands please read more here:
|
||||
// https://on.cypress.io/custom-commands
|
||||
// ***********************************************
|
||||
//
|
||||
//
|
||||
// -- This is a parent command --
|
||||
// Cypress.Commands.add('login', (email, password) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a child command --
|
||||
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a dual command --
|
||||
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This will overwrite an existing command --
|
||||
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
|
||||
|
||||
Cypress.Commands.add('ionSwipeToGoBack', (complete = false, selector = 'ion-router-outlet') => {
|
||||
const increment = complete ? 60 : 25;
|
||||
cy.get(selector)
|
||||
.first()
|
||||
.trigger('mousedown', 0, 275, { which: 1, force: true })
|
||||
.trigger('mousemove', increment * 1, 275, { which: 1, force: true })
|
||||
.wait(50)
|
||||
.trigger('mousemove', increment * 2, 275, { which: 1, force: true })
|
||||
.wait(50)
|
||||
.trigger('mousemove', increment * 3, 275, { which: 1, force: true })
|
||||
.wait(50)
|
||||
.trigger('mousemove', increment * 4, 275, { which: 1, force: true })
|
||||
.wait(50)
|
||||
.trigger('mouseup', increment * 4, 275, { which: 1, force: true });
|
||||
cy.wait(150);
|
||||
});
|
||||
|
||||
Cypress.Commands.add('testStack', (selector, expected) => {
|
||||
cy.document().then((doc) => {
|
||||
const children = Array.from(doc.querySelector(selector).children).map((el) => el.tagName.toLowerCase());
|
||||
expect(children).to.deep.equal(expected);
|
||||
});
|
||||
});
|
||||
|
||||
Cypress.Commands.add('testLifeCycle', (selector, expected) => {
|
||||
cy.get(`${selector} #ngOnInit`).invoke('text').should('equal', '1');
|
||||
cy.get(`${selector} #ionViewWillEnter`).invoke('text').should('equal', expected.ionViewWillEnter.toString());
|
||||
cy.get(`${selector} #ionViewDidEnter`).invoke('text').should('equal', expected.ionViewDidEnter.toString());
|
||||
cy.get(`${selector} #ionViewWillLeave`).invoke('text').should('equal', expected.ionViewWillLeave.toString());
|
||||
cy.get(`${selector} #ionViewDidLeave`).invoke('text').should('equal', expected.ionViewDidLeave.toString());
|
||||
});
|
||||
|
||||
Cypress.Commands.add('ionPageVisible', (selector) => {
|
||||
cy.get(selector)
|
||||
.should('have.class', 'ion-page')
|
||||
.should('not.have.class', 'ion-page-hidden')
|
||||
.should('not.have.class', 'ion-page-invisible')
|
||||
.should('have.length', 1);
|
||||
});
|
||||
|
||||
Cypress.Commands.add('ionPageHidden', (selector) => {
|
||||
cy.get(selector).should('have.class', 'ion-page').should('have.class', 'ion-page-hidden').should('have.length', 1);
|
||||
});
|
||||
|
||||
Cypress.Commands.add('ionPageDoesNotExist', (selector) => {
|
||||
cy.get(selector).should('not.exist');
|
||||
});
|
||||
|
||||
Cypress.Commands.add('ionTabClick', (tabText) => {
|
||||
// TODO FW-2790: Figure out how to get rid of wait. It's a workaround for flakiness in CI.
|
||||
cy.wait(250);
|
||||
cy.contains('ion-tab-button', tabText).click({ force: true });
|
||||
});
|
||||
20
packages/angular/test/base/cypress/support/e2e.js
vendored
Normal file
20
packages/angular/test/base/cypress/support/e2e.js
vendored
Normal file
@@ -0,0 +1,20 @@
|
||||
// ***********************************************************
|
||||
// This example support/index.js is processed and
|
||||
// loaded automatically before your test files.
|
||||
//
|
||||
// This is a great place to put global configuration and
|
||||
// behavior that modifies Cypress.
|
||||
//
|
||||
// You can change the location of this file or turn off
|
||||
// automatically serving support files with the
|
||||
// 'supportFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/configuration
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import './commands'
|
||||
|
||||
// Alternatively you can use CommonJS syntax:
|
||||
// require('./commands')
|
||||
74
packages/angular/test/base/cypress/support/index.d.ts
vendored
Normal file
74
packages/angular/test/base/cypress/support/index.d.ts
vendored
Normal file
@@ -0,0 +1,74 @@
|
||||
/// <reference types="cypress" />
|
||||
|
||||
declare namespace Cypress {
|
||||
interface Chainable<Subject> {
|
||||
/**
|
||||
* Swipe to go back on the current selector or router outlet
|
||||
* @example
|
||||
* ```
|
||||
* cy.ionSwipeToGoBack();
|
||||
* cy.ionSwipeToGoBack(true);
|
||||
* ```
|
||||
*/
|
||||
ionSwipeToGoBack(complete: boolean, selector: string): Chainable<any>
|
||||
/**
|
||||
* Test that the proper pages are in the navigation stack
|
||||
* @example
|
||||
* ```
|
||||
* cy.testStack('ion-router-outlet', ['app-navigation-page2', 'app-navigation-page1']);
|
||||
* cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested', 'app-tabs-tab2']);
|
||||
* ```
|
||||
*/
|
||||
testStack(selector: string, expected: string[]): Chainable<any>
|
||||
/**
|
||||
* Test whether or not the lifecycle events fired
|
||||
* @example
|
||||
* ```
|
||||
* cy.testLifeCycle('app-router-link-page', {
|
||||
* ionViewWillEnter: 1,
|
||||
* ionViewDidEnter: 1,
|
||||
* ionViewWillLeave: 0,
|
||||
* ionViewDidLeave: 0,
|
||||
* });
|
||||
* ```
|
||||
*/
|
||||
testLifeCycle(selector: string, expected: any): Chainable<any>
|
||||
|
||||
/**
|
||||
* Test whether or not an .ion-page element is visible.
|
||||
* Use this to test a page after navigating to it.
|
||||
* @example
|
||||
* ```
|
||||
* cy.ionPageVisible('app-my-page');
|
||||
* ```
|
||||
*/
|
||||
ionPageVisible(selector: string): Chainable<any>
|
||||
|
||||
/**
|
||||
* Test whether or not an .ion-page element is hidden
|
||||
* Use this to test a page after navigating away from it.
|
||||
* @example
|
||||
* ```
|
||||
* cy.ionPageHidden('app-my-page');
|
||||
* ```
|
||||
*/
|
||||
ionPageHidden(selector: string): Chainable<any>
|
||||
|
||||
/**
|
||||
* Test whether or not an .ion-page element exists.
|
||||
* Use this to test a page after popping it off the stack.
|
||||
* @example
|
||||
* ```
|
||||
* cy.ionPageDoesNotExist('app-my-page');
|
||||
* ```
|
||||
*/
|
||||
ionPageDoesNotExist(selector: string): Chainable<any>
|
||||
|
||||
/**
|
||||
* Clicks on a tab button with the given text.
|
||||
*/
|
||||
ionTabClick(tabText: string): Chainable<any>;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
19
packages/angular/test/base/e2e/src/accordion.spec.ts
Normal file
19
packages/angular/test/base/e2e/src/accordion.spec.ts
Normal file
@@ -0,0 +1,19 @@
|
||||
describe('Accordion', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/accordions');
|
||||
});
|
||||
|
||||
it('should correctly expand on multiple modal opens', () => {
|
||||
cy.get('#open-modal').click();
|
||||
|
||||
cy.get('ion-accordion:first-of-type').should('have.class', 'accordion-expanded');
|
||||
cy.get('ion-accordion:last-of-type').should('not.have.class', 'accordion-expanded');
|
||||
|
||||
cy.get('#dismiss').click();
|
||||
|
||||
cy.get('#open-modal').click();
|
||||
|
||||
cy.get('ion-accordion:first-of-type').should('have.class', 'accordion-expanded');
|
||||
cy.get('ion-accordion:last-of-type').should('not.have.class', 'accordion-expanded');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,32 @@
|
||||
describe('Form Controls: Range', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
cy.visit('/form-controls/range');
|
||||
});
|
||||
|
||||
it('should have form control initial value', () => {
|
||||
// Cypress does not support checking numeric values of custom elements
|
||||
// see: https://github.com/cypress-io/cypress/blob/bf6560691436a5a953f7e03e0ea3de38f3d2a632/packages/driver/src/dom/elements/elementHelpers.ts#L7
|
||||
cy.get('ion-range').invoke('prop', 'value').should('eq', 5);
|
||||
});
|
||||
|
||||
it('should reflect Ionic form control status classes', () => {
|
||||
// Control is initially invalid
|
||||
cy.get('ion-range').should('have.class', 'ion-invalid');
|
||||
cy.get('ion-range').should('have.class', 'ion-pristine');
|
||||
cy.get('ion-range').should('have.class', 'ion-untouched');
|
||||
|
||||
// Cypress does not support typing unless the element is focusable.
|
||||
cy.get('ion-range').shadow()
|
||||
.find('.range-knob-handle')
|
||||
.click()
|
||||
.focus()
|
||||
.type('{rightarrow}'.repeat(5));
|
||||
|
||||
cy.get('ion-range').should('have.class', 'ion-valid');
|
||||
cy.get('ion-range').should('have.class', 'ion-dirty');
|
||||
cy.get('ion-range').should('have.class', 'ion-touched');
|
||||
cy.get('ion-range').invoke('prop', 'value').should('eq', 10);
|
||||
});
|
||||
|
||||
});
|
||||
127
packages/angular/test/base/e2e/src/form.spec.ts
Normal file
127
packages/angular/test/base/e2e/src/form.spec.ts
Normal file
@@ -0,0 +1,127 @@
|
||||
describe('Form', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/form');
|
||||
})
|
||||
|
||||
describe('status updates', () => {
|
||||
it('should update Ionic form classes when calling form methods programmatically', async () => {
|
||||
cy.get('#input-touched').click();
|
||||
cy.get('#touched-input-test').should('have.class', 'ion-touched');
|
||||
});
|
||||
|
||||
describe('markAllAsTouched', () => {
|
||||
it('should apply .ion-touched to nearest ion-item', () => {
|
||||
cy.get('#mark-all-touched-button').click();
|
||||
cy.get('form ion-item').each(item => {
|
||||
cy.wrap(item).should('have.class', 'ion-touched');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('change', () => {
|
||||
it('should have default values', () => {
|
||||
testStatus('INVALID');
|
||||
cy.get('#submit').should('have.text', 'false');
|
||||
testData({
|
||||
datetime: '2010-08-20',
|
||||
select: null,
|
||||
toggle: false,
|
||||
input: '',
|
||||
input2: 'Default Value',
|
||||
checkbox: false
|
||||
});
|
||||
});
|
||||
|
||||
it('should become valid', () => {
|
||||
cy.get('ion-input.required').type('Some value');
|
||||
cy.get('ion-input.required input').blur();
|
||||
|
||||
testStatus('INVALID');
|
||||
|
||||
cy.get('ion-select').click();
|
||||
cy.get('ion-alert').should('exist').should('be.visible');
|
||||
// NES option
|
||||
cy.get('ion-alert .alert-radio-button:nth-of-type(2)').click();
|
||||
// Click confirm button
|
||||
cy.get('ion-alert .alert-button:not(.alert-button-role-cancel)').click();
|
||||
|
||||
testStatus('VALID');
|
||||
|
||||
testData({
|
||||
datetime: '2010-08-20',
|
||||
select: 'nes',
|
||||
toggle: false,
|
||||
input: 'Some value',
|
||||
input2: 'Default Value',
|
||||
checkbox: false
|
||||
});
|
||||
});
|
||||
|
||||
it('ion-toggle should change', () => {
|
||||
cy.get('form ion-toggle').click();
|
||||
testData({
|
||||
datetime: '2010-08-20',
|
||||
select: null,
|
||||
toggle: true,
|
||||
input: '',
|
||||
input2: 'Default Value',
|
||||
checkbox: false
|
||||
});
|
||||
});
|
||||
|
||||
it('ion-checkbox should change', () => {
|
||||
cy.get('ion-checkbox').click();
|
||||
testData({
|
||||
datetime: '2010-08-20',
|
||||
select: null,
|
||||
toggle: false,
|
||||
input: '',
|
||||
input2: 'Default Value',
|
||||
checkbox: true
|
||||
});
|
||||
});
|
||||
|
||||
it('should submit', () => {
|
||||
cy.get('#set-values').click();
|
||||
cy.get('#submit-button').click();
|
||||
cy.get('#submit').should('have.text', 'true');
|
||||
});
|
||||
});
|
||||
|
||||
describe('blur', () => {
|
||||
it('ion-toggle should change only after blur', () => {
|
||||
cy.get('form ion-toggle').click();
|
||||
testData({
|
||||
datetime: '2010-08-20',
|
||||
select: null,
|
||||
toggle: true,
|
||||
input: '',
|
||||
input2: 'Default Value',
|
||||
checkbox: false
|
||||
});
|
||||
cy.get('ion-checkbox').click();
|
||||
testData({
|
||||
datetime: '2010-08-20',
|
||||
select: null,
|
||||
toggle: true,
|
||||
input: '',
|
||||
input2: 'Default Value',
|
||||
checkbox: true
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function testStatus(status) {
|
||||
cy.get('#status').should('have.text', status);
|
||||
}
|
||||
|
||||
function testData(data) {
|
||||
cy.get('#data').invoke('text').then(text => {
|
||||
const value = JSON.parse(text);
|
||||
console.log(value, data);
|
||||
expect(value).to.deep.equal(data);
|
||||
})
|
||||
}
|
||||
53
packages/angular/test/base/e2e/src/inline-overlays.spec.ts
Normal file
53
packages/angular/test/base/e2e/src/inline-overlays.spec.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
describe('Overlays: Inline', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/overlays-inline');
|
||||
});
|
||||
|
||||
describe('Alert', () => {
|
||||
it('should be visible when presenting', () => {
|
||||
cy.get('ion-alert').should('not.be.visible');
|
||||
|
||||
cy.get('#open-alert').click();
|
||||
cy.get('ion-alert').should('be.visible');
|
||||
|
||||
cy.get('ion-alert ion-backdrop').click({ force: true });
|
||||
cy.get('ion-alert').should('not.be.visible');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Action Sheet', () => {
|
||||
it('should be visible when presenting', () => {
|
||||
cy.get('ion-action-sheet').should('not.be.visible');
|
||||
|
||||
cy.get('#open-action-sheet').click();
|
||||
cy.get('ion-action-sheet').should('be.visible');
|
||||
|
||||
cy.get('ion-action-sheet ion-backdrop').click({ force: true });
|
||||
cy.get('ion-action-sheet').should('not.be.visible');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Loading', () => {
|
||||
it('should be visible when presenting', () => {
|
||||
cy.get('ion-loading').should('not.be.visible');
|
||||
|
||||
cy.get('#open-loading').click();
|
||||
cy.get('ion-loading').should('be.visible');
|
||||
|
||||
cy.get('ion-loading ion-backdrop').click({ force: true });
|
||||
cy.get('ion-loading').should('not.be.visible');
|
||||
});
|
||||
});
|
||||
|
||||
describe('Toast', () => {
|
||||
it('should be visible when presenting', () => {
|
||||
cy.get('ion-toast').should('not.be.visible');
|
||||
|
||||
cy.get('#open-toast').click();
|
||||
cy.get('ion-toast').shadow().find('.toast-wrapper').should('be.visible');
|
||||
|
||||
cy.get('ion-toast').shadow().find('.toast-button').click();
|
||||
cy.get('ion-toast').should('not.be.visible');
|
||||
});
|
||||
});
|
||||
});
|
||||
66
packages/angular/test/base/e2e/src/inputs.spec.ts
Normal file
66
packages/angular/test/base/e2e/src/inputs.spec.ts
Normal file
@@ -0,0 +1,66 @@
|
||||
describe('Inputs', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/inputs');
|
||||
})
|
||||
|
||||
it('should have default value', () => {
|
||||
cy.get('ion-checkbox').should('have.prop', 'checked').and('equal', true);
|
||||
cy.get('ion-toggle').should('have.prop', 'checked').and('equal', true);
|
||||
cy.get('ion-input').should('have.prop', 'value').and('equal', 'some text');
|
||||
cy.get('ion-datetime').should('have.prop', 'value').and('equal', '1994-03-15');
|
||||
cy.get('ion-select').should('have.prop', 'value').and('equal', 'nes');
|
||||
});
|
||||
|
||||
it('should have reset value', () => {
|
||||
cy.get('#reset-button').click();
|
||||
|
||||
cy.get('ion-checkbox').should('have.prop', 'checked').and('equal', false);
|
||||
cy.get('ion-toggle').should('have.prop', 'checked').and('equal', false);
|
||||
/**
|
||||
* The `value` property gets set to undefined
|
||||
* for these components, so we need to check
|
||||
* not.have.prop which will check that the
|
||||
* value property is undefined.
|
||||
*/
|
||||
cy.get('ion-input').should('not.have.prop', 'value');
|
||||
cy.get('ion-datetime').should('not.have.prop', 'value');
|
||||
cy.get('ion-select').should('not.have.prop', 'value');
|
||||
});
|
||||
|
||||
it('should get some value', () => {
|
||||
cy.get('#reset-button').click();
|
||||
cy.get('#set-button').click();
|
||||
|
||||
cy.get('ion-checkbox').should('have.prop', 'checked').and('equal', true);
|
||||
cy.get('ion-toggle').should('have.prop', 'checked').and('equal', true);
|
||||
cy.get('ion-input').should('have.prop', 'value').and('equal', 'some text');
|
||||
cy.get('ion-datetime').should('have.prop', 'value').and('equal', '1994-03-15');
|
||||
cy.get('ion-select').should('have.prop', 'value').and('equal', 'nes');
|
||||
});
|
||||
|
||||
it('change values should update angular', () => {
|
||||
cy.get('#reset-button').click();
|
||||
|
||||
cy.get('ion-checkbox#first-checkbox').click();
|
||||
cy.get('ion-toggle').first().click();
|
||||
|
||||
cy.get('ion-input').eq(0).type('hola');
|
||||
cy.get('ion-input input').eq(0).blur();
|
||||
|
||||
// Set date to 1994-03-14
|
||||
cy.get('ion-datetime').first().shadow().find('.calendar-day:not([disabled])').first().click();
|
||||
|
||||
cy.get('ion-select#game-console').click();
|
||||
cy.get('ion-alert').should('exist').should('be.visible');
|
||||
// Playstation option
|
||||
cy.get('ion-alert .alert-radio-button:nth-of-type(4)').click();
|
||||
// Click confirm button
|
||||
cy.get('ion-alert .alert-button:not(.alert-button-role-cancel)').click();
|
||||
|
||||
cy.get('#checkbox-note').should('have.text', 'true');
|
||||
cy.get('#toggle-note').should('have.text', 'true');
|
||||
cy.get('#input-note').should('have.text', 'hola');
|
||||
cy.get('#datetime-note').should('have.text', '1994-03-14');
|
||||
cy.get('#select-note').should('have.text', 'ps');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,66 @@
|
||||
describe('overlays - keepContentsMounted', () => {
|
||||
describe('modal', () => {
|
||||
it('should not mount component if false', () => {
|
||||
cy.visit('/modal-inline');
|
||||
|
||||
cy.get('ion-modal ion-content').should('not.exist');
|
||||
});
|
||||
|
||||
it('should mount component if true', () => {
|
||||
cy.visit('/keep-contents-mounted');
|
||||
|
||||
cy.get('ion-modal ion-content').should('exist');
|
||||
});
|
||||
|
||||
it('should keep component mounted after dismissing if true', () => {
|
||||
cy.visit('/keep-contents-mounted');
|
||||
|
||||
cy.get('#open-modal').click();
|
||||
|
||||
cy.get('ion-modal ion-content').should('exist');
|
||||
|
||||
cy.get('ion-modal ion-button').click();
|
||||
|
||||
cy.get('ion-modal')
|
||||
.should('not.be.visible')
|
||||
.should('have.class', 'overlay-hidden');
|
||||
|
||||
cy.get('ion-modal ion-content').should('exist');
|
||||
});
|
||||
|
||||
it('should has ion-delegate-host on mount', () => {
|
||||
cy.visit('/keep-contents-mounted');
|
||||
|
||||
cy.get('ion-modal .ion-delegate-host').should('exist');
|
||||
});
|
||||
})
|
||||
describe('popover', () => {
|
||||
it('should not mount component if false', () => {
|
||||
cy.visit('/popover-inline');
|
||||
|
||||
cy.get('ion-popover ion-content').should('not.exist');
|
||||
});
|
||||
|
||||
it('should mount component if true', () => {
|
||||
cy.visit('/keep-contents-mounted');
|
||||
|
||||
cy.get('ion-popover ion-content').should('exist');
|
||||
});
|
||||
|
||||
it('should keep component mounted after dismissing if true', () => {
|
||||
cy.visit('/keep-contents-mounted');
|
||||
|
||||
cy.get('#open-popover').click();
|
||||
|
||||
cy.get('ion-popover ion-content').should('exist');
|
||||
|
||||
cy.get('ion-popover ion-button').click();
|
||||
|
||||
cy.get('ion-popover')
|
||||
.should('not.be.visible')
|
||||
.should('have.class', 'overlay-hidden');
|
||||
|
||||
cy.get('ion-popover ion-content').should('exist');
|
||||
});
|
||||
});
|
||||
});
|
||||
124
packages/angular/test/base/e2e/src/modal.spec.ts
Normal file
124
packages/angular/test/base/e2e/src/modal.spec.ts
Normal file
@@ -0,0 +1,124 @@
|
||||
describe('Modals', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/modals');
|
||||
})
|
||||
|
||||
it('should open standalone modal and close', () => {
|
||||
cy.get('#action-button').click();
|
||||
|
||||
cy.get('ion-modal').should('exist').should('be.visible');
|
||||
|
||||
cy.get('app-modal-example h2').should('have.text', '123');
|
||||
cy.get('app-modal-example h3').should('have.text', '321');
|
||||
cy.get('#modalInstance').should('have.text', 'true');
|
||||
|
||||
cy.get('#onWillDismiss').should('have.text', 'false');
|
||||
cy.get('#onDidDismiss').should('have.text', 'false');
|
||||
|
||||
cy.get('#close-modal').click();
|
||||
|
||||
cy.get('ion-modal').should('not.exist');
|
||||
|
||||
cy.get('#onWillDismiss').should('have.text', 'true');
|
||||
cy.get('#onDidDismiss').should('have.text', 'true');
|
||||
});
|
||||
|
||||
it('should open nav modal and close', () => {
|
||||
cy.get('#action-button-2').click();
|
||||
|
||||
cy.get('ion-modal').should('exist').should('be.visible');
|
||||
|
||||
cy.get('ion-nav > *:last-child h2').should('have.text', '123');
|
||||
cy.get('ion-nav > *:last-child h3').should('have.text', '321');
|
||||
|
||||
cy.get('ion-nav > *:last-child .push-page').click();
|
||||
|
||||
cy.get('ion-nav > *:last-child h2').should('have.text', 'pushed!');
|
||||
cy.get('ion-nav > *:last-child h3').should('have.text', '');
|
||||
|
||||
cy.get('ion-nav > *:last-child .pop-page').click();
|
||||
|
||||
cy.get('ion-nav > *:last-child h2').should('have.text', '123');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('Modals: Inline', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/modal-inline');
|
||||
});
|
||||
|
||||
it('should initially have no items', () => {
|
||||
cy.get('ion-list ion-item').should('not.exist');
|
||||
});
|
||||
|
||||
it('should have items after opening', () => {
|
||||
cy.get('#open-modal').click();
|
||||
|
||||
cy.get('ion-list ion-item:nth-child(1)').should('have.text', 'A');
|
||||
cy.get('ion-list ion-item:nth-child(2)').should('have.text', 'B');
|
||||
cy.get('ion-list ion-item:nth-child(3)').should('have.text', 'C');
|
||||
cy.get('ion-list ion-item:nth-child(4)').should('have.text', 'D');
|
||||
});
|
||||
|
||||
it('should have a div with .ion-page after opening', () => {
|
||||
cy.get('#open-modal').click();
|
||||
|
||||
cy.get('ion-modal').children('.ion-page').should('exist');
|
||||
});
|
||||
|
||||
it('should remove .ion-page when closing the modal', () => {
|
||||
cy.get('#open-modal').click();
|
||||
|
||||
cy.get('ion-modal').children('.ion-page').should('exist');
|
||||
cy.get('ion-modal').trigger('click', 20, 20);
|
||||
|
||||
cy.get('ion-modal').children('.ion-page').should('not.exist');
|
||||
});
|
||||
|
||||
describe('setting the current breakpoint', () => {
|
||||
|
||||
it('should emit ionBreakpointDidChange', () => {
|
||||
cy.get('#open-modal').click();
|
||||
|
||||
cy.get('ion-modal').then(modal => {
|
||||
(modal.get(0) as any).setCurrentBreakpoint(1);
|
||||
});
|
||||
|
||||
cy.get('#breakpointDidChange').should('have.text', '1');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('when in a modal', () => {
|
||||
|
||||
beforeEach(() => {
|
||||
cy.visit('/modals');
|
||||
cy.get('#action-button').click();
|
||||
cy.get('#close-modal').click();
|
||||
cy.get('#action-button').click();
|
||||
});
|
||||
|
||||
it('should render ion-item item-has-value class when control value is set', () => {
|
||||
cy.get('ion-select').click();
|
||||
cy.get('ion-alert').should('exist').should('be.visible');
|
||||
// Option 0 option
|
||||
cy.get('ion-alert .alert-radio-button:nth-of-type(1)').click();
|
||||
// Click confirm button
|
||||
cy.get('ion-alert .alert-button:not(.alert-button-role-cancel)').click();
|
||||
|
||||
cy.get('#inputWithFloatingLabel').should('have.class', 'item-has-value');
|
||||
});
|
||||
|
||||
it('should not render ion-item item-has-value class when control value is undefined', () => {
|
||||
cy.get('#set-to-undefined').click();
|
||||
cy.get('#inputWithFloatingLabel').should('not.have.class', 'item-has-value');
|
||||
});
|
||||
|
||||
it('should not render ion-item item-has-value class when control value is null', () => {
|
||||
cy.get('#set-to-null').click();
|
||||
cy.get('#inputWithFloatingLabel').should('not.have.class', 'item-has-value');
|
||||
});
|
||||
});
|
||||
18
packages/angular/test/base/e2e/src/navigation.spec.ts
Normal file
18
packages/angular/test/base/e2e/src/navigation.spec.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
describe('Navigation', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/navigation');
|
||||
})
|
||||
|
||||
it('should navigate correctly', () => {
|
||||
cy.visit('/navigation/page1');
|
||||
cy.wait(2000);
|
||||
cy.testStack('ion-router-outlet', ['app-navigation-page2', 'app-navigation-page1']);
|
||||
|
||||
cy.get('app-navigation-page2').should('have.attr', 'aria-hidden').and('equal', 'true');
|
||||
cy.get('app-navigation-page2').should('have.attr', 'class').and('equal', 'ion-page ion-page-hidden');
|
||||
|
||||
cy.get('app-navigation-page1').should('not.have.attr', 'aria-hidden');
|
||||
cy.get('app-navigation-page1').should('have.attr', 'class').and('equal', 'ion-page can-go-back');
|
||||
});
|
||||
})
|
||||
|
||||
31
packages/angular/test/base/e2e/src/nested-outlet.spec.ts
Normal file
31
packages/angular/test/base/e2e/src/nested-outlet.spec.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
describe('Nested Outlet', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/nested-outlet/page');
|
||||
})
|
||||
|
||||
it('should navigate correctly', () => {
|
||||
cy.get('ion-router-outlet ion-router-outlet app-nested-outlet-page h1').should('have.text', 'Nested page 1');
|
||||
|
||||
cy.get('#goto-tabs').click();
|
||||
|
||||
cy.ionPageVisible('app-tabs');
|
||||
cy.ionPageVisible('app-tabs-tab1');
|
||||
|
||||
cy.get('#goto-nested-page1').click();
|
||||
|
||||
cy.ionPageVisible('app-nested-outlet-page');
|
||||
cy.ionPageDoesNotExist('app-tabs');
|
||||
|
||||
cy.get('#goto-nested-page2').click();
|
||||
cy.ionPageVisible('app-nested-outlet-page2');
|
||||
|
||||
cy.get('ion-router-outlet ion-router-outlet app-nested-outlet-page2 h1').should('have.text', 'Nested page 2');
|
||||
|
||||
cy.get('#goto-nested-page1').click();
|
||||
cy.ionPageVisible('app-nested-outlet-page');
|
||||
|
||||
cy.get('#goto-nested-page2').click();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
25
packages/angular/test/base/e2e/src/popover.spec.ts
Normal file
25
packages/angular/test/base/e2e/src/popover.spec.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
describe('Popovers: Inline', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/popover-inline');
|
||||
});
|
||||
|
||||
it('should initially have no items', () => {
|
||||
cy.get('ion-button').click();
|
||||
|
||||
cy.get('ion-popover').should('be.visible');
|
||||
cy.get('ion-list ion-item').should('not.exist');
|
||||
});
|
||||
|
||||
it('should have items after 1500ms', () => {
|
||||
cy.get('ion-button').click();
|
||||
|
||||
cy.get('ion-popover').should('be.visible');
|
||||
|
||||
cy.wait(1500);
|
||||
|
||||
cy.get('ion-list ion-item:nth-child(1)').should('have.text', 'A');
|
||||
cy.get('ion-list ion-item:nth-child(2)').should('have.text', 'B');
|
||||
cy.get('ion-list ion-item:nth-child(3)').should('have.text', 'C');
|
||||
cy.get('ion-list ion-item:nth-child(4)').should('have.text', 'D');
|
||||
});
|
||||
});
|
||||
31
packages/angular/test/base/e2e/src/providers.spec.ts
Normal file
31
packages/angular/test/base/e2e/src/providers.spec.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
describe('Providers', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/providers');
|
||||
})
|
||||
|
||||
it('should load all providers', () => {
|
||||
cy.get('#is-loaded').should('have.text', 'true');
|
||||
cy.get('#is-ready').should('have.text', 'true');
|
||||
cy.get('#is-paused').should('have.text', 'true');
|
||||
cy.get('#is-resumed').should('have.text', 'true');
|
||||
cy.get('#is-resized').should('have.text', 'true');
|
||||
cy.get('#is-testing').should('have.text', 'false');
|
||||
cy.get('#is-desktop').should('have.text', 'true');
|
||||
cy.get('#is-mobile').should('have.text', 'false');
|
||||
cy.get('#keyboard-height').should('have.text', '12345');
|
||||
cy.get('#query-params').should('have.text', 'firstParam: null, firstParam: null');
|
||||
});
|
||||
|
||||
it('should detect testing mode', () => {
|
||||
cy.visit('/providers?ionic:_testing=true');
|
||||
|
||||
cy.get('#is-testing').should('have.text', 'true');
|
||||
});
|
||||
|
||||
it('should get query params', () => {
|
||||
cy.visit('/providers?firstParam=abc&secondParam=true');
|
||||
|
||||
cy.get('#query-params').should('have.text', 'firstParam: abc, firstParam: true');
|
||||
})
|
||||
});
|
||||
|
||||
192
packages/angular/test/base/e2e/src/router-link.spec.ts
Normal file
192
packages/angular/test/base/e2e/src/router-link.spec.ts
Normal file
@@ -0,0 +1,192 @@
|
||||
describe('Router Link', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/router-link');
|
||||
});
|
||||
|
||||
describe('router-link params and fragments', () => {
|
||||
const queryParam = 'A&=#Y';
|
||||
const fragment = 'myDiv1';
|
||||
const id = 'MyPageID==';
|
||||
|
||||
it('should go to a page with properly encoded values', () => {
|
||||
cy.visit('/router-link?ionic:_testing=true');
|
||||
cy.get('#queryParamsFragment').click();
|
||||
|
||||
const expectedPath = `${encodeURIComponent(id)}`;
|
||||
const expectedSearch = `?token=${encodeURIComponent(queryParam)}`;
|
||||
const expectedHash = `#${encodeURIComponent(fragment)}`;
|
||||
|
||||
cy.location().should((location) => {
|
||||
expect(location.pathname).to.contain(expectedPath);
|
||||
expect(location.search).to.eq(expectedSearch);
|
||||
expect(location.hash).to.eq(expectedHash);
|
||||
});
|
||||
});
|
||||
|
||||
it('should return to a page with preserved query param and fragment', () => {
|
||||
cy.visit('/router-link?ionic:_testing=true');
|
||||
cy.get('#queryParamsFragment').click();
|
||||
cy.get('#goToPage3').click();
|
||||
|
||||
cy.location().should((location) => {
|
||||
expect(location.pathname).to.contain('router-link-page3');
|
||||
});
|
||||
|
||||
cy.get('#goBackFromPage3').click();
|
||||
|
||||
const expectedPath = `${encodeURIComponent(id)}`;
|
||||
const expectedSearch = `?token=${encodeURIComponent(queryParam)}`;
|
||||
const expectedHash = `#${encodeURIComponent(fragment)}`;
|
||||
|
||||
cy.location().should((location) => {
|
||||
expect(location.pathname).to.contain(expectedPath);
|
||||
expect(location.search).to.eq(expectedSearch);
|
||||
expect(location.hash).to.eq(expectedHash);
|
||||
});
|
||||
});
|
||||
|
||||
it('should preserve query param and fragment with defaultHref string', () => {
|
||||
cy.visit('/router-link-page3?ionic:_testing=true');
|
||||
|
||||
cy.get('#goBackFromPage3').click();
|
||||
|
||||
const expectedSearch = '?token=ABC';
|
||||
const expectedHash = '#fragment';
|
||||
|
||||
cy.location().should((location) => {
|
||||
expect(location.search).to.eq(expectedSearch);
|
||||
expect(location.hash).to.eq(expectedHash);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('router-link', () => {
|
||||
it('should have correct lifecycle counts', () => {
|
||||
cy.testLifeCycle('app-router-link', {
|
||||
ionViewWillEnter: 1,
|
||||
ionViewDidEnter: 1,
|
||||
ionViewWillLeave: 0,
|
||||
ionViewDidLeave: 0,
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
describe('forward', () => {
|
||||
it('should go forward with ion-button[routerLink]', () => {
|
||||
cy.get('#routerLink').click();
|
||||
testForward();
|
||||
});
|
||||
|
||||
it('should go forward with a[routerLink]', () => {
|
||||
cy.get('#a').click();
|
||||
testForward();
|
||||
});
|
||||
|
||||
it('should go forward with button + navigateByUrl()', () => {
|
||||
cy.get('#button').click();
|
||||
testForward();
|
||||
});
|
||||
|
||||
it('should go forward with button + navigateForward()', () => {
|
||||
cy.get('#button-forward').click();
|
||||
testForward();
|
||||
});
|
||||
});
|
||||
|
||||
describe('root', () => {
|
||||
it('should go root with ion-button[routerLink][routerDirection=root]', () => {
|
||||
cy.get('#routerLink-root').click();
|
||||
testRoot();
|
||||
});
|
||||
|
||||
it('should go root with a[routerLink][routerDirection=root]', () => {
|
||||
cy.get('#a-root').click();
|
||||
testRoot();
|
||||
});
|
||||
|
||||
it('should go root with button + navigateRoot', () => {
|
||||
cy.get('#button-root').click();
|
||||
testRoot();
|
||||
});
|
||||
});
|
||||
|
||||
describe('back', () => {
|
||||
it('should go back with ion-button[routerLink][routerDirection=back]', () => {
|
||||
cy.get('#routerLink-back').click();
|
||||
});
|
||||
|
||||
it('should go back with a[routerLink][routerDirection=back]', () => {
|
||||
cy.get('#a-back').click();
|
||||
testBack();
|
||||
});
|
||||
|
||||
it('should go back with button + navigateBack', () => {
|
||||
cy.get('#button-back').click();
|
||||
testBack();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function testForward() {
|
||||
cy.testStack('ion-router-outlet', ['app-router-link', 'app-router-link-page']);
|
||||
cy.testLifeCycle('app-router-link-page', {
|
||||
ionViewWillEnter: 1,
|
||||
ionViewDidEnter: 1,
|
||||
ionViewWillLeave: 0,
|
||||
ionViewDidLeave: 0,
|
||||
});
|
||||
cy.get('app-router-link-page #canGoBack').should('have.text', 'true');
|
||||
|
||||
cy.go('back');
|
||||
cy.testStack('ion-router-outlet', ['app-router-link']);
|
||||
cy.testLifeCycle('app-router-link', {
|
||||
ionViewWillEnter: 2,
|
||||
ionViewDidEnter: 2,
|
||||
ionViewWillLeave: 1,
|
||||
ionViewDidLeave: 1,
|
||||
});
|
||||
}
|
||||
|
||||
function testRoot() {
|
||||
cy.wait(200);
|
||||
cy.testStack('ion-router-outlet', ['app-router-link-page']);
|
||||
cy.testLifeCycle('app-router-link-page', {
|
||||
ionViewWillEnter: 1,
|
||||
ionViewDidEnter: 1,
|
||||
ionViewWillLeave: 0,
|
||||
ionViewDidLeave: 0,
|
||||
});
|
||||
cy.get('app-router-link-page #canGoBack').should('have.text', 'false');
|
||||
|
||||
cy.go('back');
|
||||
cy.wait(100);
|
||||
cy.testStack('ion-router-outlet', ['app-router-link']);
|
||||
cy.testLifeCycle('app-router-link', {
|
||||
ionViewWillEnter: 1,
|
||||
ionViewDidEnter: 1,
|
||||
ionViewWillLeave: 0,
|
||||
ionViewDidLeave: 0,
|
||||
});
|
||||
}
|
||||
|
||||
function testBack() {
|
||||
cy.wait(500);
|
||||
cy.testStack('ion-router-outlet', ['app-router-link-page']);
|
||||
cy.testLifeCycle('app-router-link-page', {
|
||||
ionViewWillEnter: 1,
|
||||
ionViewDidEnter: 1,
|
||||
ionViewWillLeave: 0,
|
||||
ionViewDidLeave: 0,
|
||||
});
|
||||
cy.get('app-router-link-page #canGoBack').should('have.text', 'false');
|
||||
|
||||
cy.go('back');
|
||||
cy.wait(100);
|
||||
cy.testStack('ion-router-outlet', ['app-router-link']);
|
||||
cy.testLifeCycle('app-router-link', {
|
||||
ionViewWillEnter: 1,
|
||||
ionViewDidEnter: 1,
|
||||
ionViewWillLeave: 0,
|
||||
ionViewDidLeave: 0,
|
||||
});
|
||||
}
|
||||
36
packages/angular/test/base/e2e/src/routing.spec.ts
Normal file
36
packages/angular/test/base/e2e/src/routing.spec.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
describe('Routing', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/router-link?ionic:mode=ios');
|
||||
})
|
||||
|
||||
it('should swipe and abort', () => {
|
||||
cy.get('#routerLink').click();
|
||||
|
||||
cy.ionSwipeToGoBack();
|
||||
|
||||
cy.get('app-router-link').should('have.attr', 'aria-hidden').and('equal', 'true');
|
||||
cy.get('app-router-link').should('have.attr', 'class').and('equal', 'ion-page ion-page-hidden');
|
||||
|
||||
cy.get('app-router-link-page').should('not.have.attr', 'aria-hidden');
|
||||
cy.get('app-router-link-page').should('have.attr', 'class').and('equal', 'ion-page can-go-back');
|
||||
});
|
||||
|
||||
it('should swipe and go back', () => {
|
||||
cy.get('#routerLink').click();
|
||||
|
||||
cy.ionPageHidden('app-router-link');
|
||||
cy.ionPageVisible('app-router-link-page');
|
||||
|
||||
cy.testStack('ion-router-outlet', ['app-router-link', 'app-router-link-page']);
|
||||
|
||||
cy.ionSwipeToGoBack(true);
|
||||
|
||||
cy.ionPageVisible('app-router-link');
|
||||
cy.ionPageDoesNotExist('app-router-link-page');
|
||||
|
||||
cy.testStack('ion-router-outlet', ['app-router-link']);
|
||||
|
||||
cy.get('app-router-link').should('not.have.attr', 'aria-hidden');
|
||||
cy.get('app-router-link').should('have.attr', 'class').and('equal', 'ion-page');
|
||||
});
|
||||
})
|
||||
18
packages/angular/test/base/e2e/src/searchbar.spec.ts
Normal file
18
packages/angular/test/base/e2e/src/searchbar.spec.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
describe('Searchbar', () => {
|
||||
beforeEach(() => cy.visit('/searchbar'));
|
||||
|
||||
it('should become valid', () => {
|
||||
cy.get('#status').should('have.text', 'INVALID');
|
||||
|
||||
cy.get('ion-searchbar').type('hello');
|
||||
|
||||
cy.get('#status').should('have.text', 'VALID');
|
||||
});
|
||||
|
||||
it('should update the form control value when typing', () => {
|
||||
cy.get('#value').contains(`"searchbar": ""`);
|
||||
cy.get('ion-searchbar').type('hello');
|
||||
|
||||
cy.get('#value').contains(`"searchbar": "hello"`);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,9 @@
|
||||
describe('Routing with Standalone Components', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/standalone');
|
||||
});
|
||||
|
||||
it('should render the component', () => {
|
||||
cy.get('ion-content').contains('This is a standalone component rendered from a route.');
|
||||
});
|
||||
});
|
||||
488
packages/angular/test/base/e2e/src/tabs.spec.ts
Normal file
488
packages/angular/test/base/e2e/src/tabs.spec.ts
Normal file
@@ -0,0 +1,488 @@
|
||||
describe('Tabs', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/tabs');
|
||||
})
|
||||
|
||||
describe('entry url - /tabs', () => {
|
||||
it('should redirect and load tab-account', () => {
|
||||
testTabTitle('Tab 1 - Page 1');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1']);
|
||||
testState(1, 'account');
|
||||
});
|
||||
|
||||
it('should navigate between tabs and ionChange events should be dispatched', () => {
|
||||
let tab = testTabTitle('Tab 1 - Page 1');
|
||||
tab.find('.segment-changed').should('have.text', 'false');
|
||||
|
||||
cy.get('#tab-button-contact').click();
|
||||
tab = testTabTitle('Tab 2 - Page 1');
|
||||
tab.find('.segment-changed').should('have.text', 'false');
|
||||
});
|
||||
|
||||
describe('when navigating between tabs', () => {
|
||||
|
||||
it('should emit ionTabsWillChange before setting the selected tab', () => {
|
||||
cy.get('#ionTabsWillChangeCounter').should('have.text', '1');
|
||||
cy.get('#ionTabsWillChangeEvent').should('have.text', 'account');
|
||||
cy.get('#ionTabsWillChangeSelectedTab').should('have.text', '');
|
||||
|
||||
cy.get('#ionTabsDidChangeCounter').should('have.text', '1');
|
||||
cy.get('#ionTabsDidChangeEvent').should('have.text', 'account');
|
||||
cy.get('#ionTabsDidChangeSelectedTab').should('have.text', 'account');
|
||||
|
||||
cy.get('#tab-button-contact').click();
|
||||
|
||||
cy.get('#ionTabsWillChangeCounter').should('have.text', '2');
|
||||
cy.get('#ionTabsWillChangeEvent').should('have.text', 'contact');
|
||||
cy.get('#ionTabsWillChangeSelectedTab').should('have.text', 'account');
|
||||
|
||||
cy.get('#ionTabsDidChangeCounter').should('have.text', '2');
|
||||
cy.get('#ionTabsDidChangeEvent').should('have.text', 'contact');
|
||||
cy.get('#ionTabsDidChangeSelectedTab').should('have.text', 'contact');
|
||||
})
|
||||
|
||||
});
|
||||
|
||||
it('should simulate stack + double tab click', () => {
|
||||
let tab = getSelectedTab();
|
||||
tab.find('#goto-tab1-page2').click();
|
||||
testTabTitle('Tab 1 - Page 2 (1)');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested']);
|
||||
testState(1, 'account');
|
||||
|
||||
// When you call find on tab above it changes the value of tab
|
||||
// so we need to redefine it
|
||||
tab = getSelectedTab();
|
||||
tab.find('ion-back-button').should('be.visible');
|
||||
|
||||
cy.get('#tab-button-contact').click();
|
||||
testTabTitle('Tab 2 - Page 1');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested', 'app-tabs-tab2']);
|
||||
testState(2, 'contact');
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
testTabTitle('Tab 1 - Page 2 (1)');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab1-nested', 'app-tabs-tab2']);
|
||||
testState(3, 'account');
|
||||
|
||||
tab = getSelectedTab();
|
||||
tab.find('ion-back-button').should('be.visible');
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
testTabTitle('Tab 1 - Page 1');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab2']);
|
||||
testState(3, 'account');
|
||||
});
|
||||
|
||||
it('should simulate stack + back button click', () => {
|
||||
const tab = getSelectedTab();
|
||||
tab.find('#goto-tab1-page2').click();
|
||||
testTabTitle('Tab 1 - Page 2 (1)');
|
||||
testState(1, 'account');
|
||||
|
||||
cy.get('#tab-button-contact').click();
|
||||
testTabTitle('Tab 2 - Page 1');
|
||||
testState(2, 'contact');
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
testTabTitle('Tab 1 - Page 2 (1)');
|
||||
testState(3, 'account');
|
||||
|
||||
cy.get('ion-back-button').click();
|
||||
testTabTitle('Tab 1 - Page 1');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab2']);
|
||||
testState(3, 'account');
|
||||
});
|
||||
|
||||
it('should navigate deep then go home', () => {
|
||||
const tab = getSelectedTab();
|
||||
tab.find('#goto-tab1-page2').click();
|
||||
cy.ionPageVisible('app-tabs-tab1-nested');
|
||||
cy.ionPageHidden('app-tabs-tab1');
|
||||
|
||||
testTabTitle('Tab 1 - Page 2 (1)');
|
||||
|
||||
cy.get('#goto-next').click();
|
||||
cy.ionPageVisible('app-tabs-tab1-nested:last-of-type');
|
||||
cy.ionPageHidden('app-tabs-tab1-nested:first-of-type');
|
||||
|
||||
testTabTitle('Tab 1 - Page 2 (2)');
|
||||
|
||||
cy.get('#tab-button-contact').click();
|
||||
cy.ionPageVisible('app-tabs-tab2');
|
||||
cy.ionPageHidden('app-tabs-tab1-nested:last-of-type');
|
||||
|
||||
testTabTitle('Tab 2 - Page 1');
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
cy.ionPageVisible('app-tabs-tab1-nested:last-of-type');
|
||||
cy.ionPageHidden('app-tabs-tab2');
|
||||
|
||||
testTabTitle('Tab 1 - Page 2 (2)');
|
||||
cy.testStack('ion-tabs ion-router-outlet', [
|
||||
'app-tabs-tab1',
|
||||
'app-tabs-tab1-nested',
|
||||
'app-tabs-tab1-nested',
|
||||
'app-tabs-tab2'
|
||||
]);
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
|
||||
/**
|
||||
* Wait for the leaving view to
|
||||
* be unmounted otherwise testTabTitle
|
||||
* may get the leaving view before it
|
||||
* is unmounted.
|
||||
*/
|
||||
cy.ionPageVisible('app-tabs-tab1');
|
||||
cy.ionPageDoesNotExist('app-tabs-tab1-nested');
|
||||
|
||||
testTabTitle('Tab 1 - Page 1');
|
||||
cy.testStack('ion-tabs ion-router-outlet', [
|
||||
'app-tabs-tab1',
|
||||
'app-tabs-tab2'
|
||||
]);
|
||||
});
|
||||
|
||||
it('should switch tabs and go back', () => {
|
||||
cy.get('#tab-button-contact').click();
|
||||
const tab = testTabTitle('Tab 2 - Page 1');
|
||||
|
||||
tab.find('#goto-tab1-page1').click();
|
||||
testTabTitle('Tab 1 - Page 1');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab2']);
|
||||
});
|
||||
|
||||
it('should switch tabs and go to nested', () => {
|
||||
cy.get('#tab-button-contact').click();
|
||||
const tab = testTabTitle('Tab 2 - Page 1');
|
||||
|
||||
tab.find('#goto-tab1-page2').click();
|
||||
testTabTitle('Tab 1 - Page 2 (1)');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab2', 'app-tabs-tab1-nested']);
|
||||
});
|
||||
|
||||
it('should load lazy loaded tab', () => {
|
||||
cy.get('#tab-button-lazy').click();
|
||||
cy.ionPageVisible('app-tabs-tab3');
|
||||
testTabTitle('Tab 3 - Page 1');
|
||||
});
|
||||
|
||||
it('should use ion-back-button defaultHref', () => {
|
||||
let tab = getSelectedTab();
|
||||
tab.find('#goto-tab3-page2').click();
|
||||
testTabTitle('Tab 3 - Page 2');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab3-nested']);
|
||||
|
||||
tab = getSelectedTab();
|
||||
tab.find('ion-back-button').click();
|
||||
testTabTitle('Tab 3 - Page 1');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1', 'app-tabs-tab3']);
|
||||
});
|
||||
|
||||
it('should preserve navigation extras when switching tabs', () => {
|
||||
const expectUrlToContain = 'search=hello#fragment';
|
||||
let tab = getSelectedTab();
|
||||
tab.find('#goto-nested-page1-with-query-params').click();
|
||||
testTabTitle('Tab 1 - Page 2 (1)');
|
||||
testUrlContains(expectUrlToContain);
|
||||
|
||||
cy.get('#tab-button-contact').click();
|
||||
testTabTitle('Tab 2 - Page 1');
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
tab = testTabTitle('Tab 1 - Page 2 (1)');
|
||||
testUrlContains(expectUrlToContain);
|
||||
});
|
||||
|
||||
it('should set root when clicking on an active tab to navigate to the root', () => {
|
||||
const expectNestedTabUrlToContain = 'search=hello#fragment';
|
||||
cy.url().then(url => {
|
||||
const tab = getSelectedTab();
|
||||
tab.find('#goto-nested-page1-with-query-params').click();
|
||||
testTabTitle('Tab 1 - Page 2 (1)');
|
||||
testUrlContains(expectNestedTabUrlToContain);
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
testTabTitle('Tab 1 - Page 1');
|
||||
|
||||
testUrlEquals(url);
|
||||
})
|
||||
});
|
||||
})
|
||||
|
||||
describe('entry tab contains navigation extras', () => {
|
||||
const expectNestedTabUrlToContain = 'search=hello#fragment';
|
||||
const rootUrlParams = 'test=123#rootFragment';
|
||||
const rootUrl = `/tabs/account?${rootUrlParams}`;
|
||||
|
||||
beforeEach(() => {
|
||||
cy.visit(rootUrl);
|
||||
})
|
||||
|
||||
it('should preserve root url navigation extras when clicking on an active tab to navigate to the root', () => {
|
||||
const tab = getSelectedTab();
|
||||
tab.find('#goto-nested-page1-with-query-params').click();
|
||||
|
||||
testTabTitle('Tab 1 - Page 2 (1)');
|
||||
testUrlContains(expectNestedTabUrlToContain);
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
testTabTitle('Tab 1 - Page 1');
|
||||
|
||||
testUrlContains(rootUrl);
|
||||
});
|
||||
|
||||
it('should preserve root url navigation extras when changing tabs', () => {
|
||||
getSelectedTab();
|
||||
cy.get('#tab-button-contact').click();
|
||||
testTabTitle('Tab 2 - Page 1');
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
testTabTitle('Tab 1 - Page 1');
|
||||
|
||||
testUrlContains(rootUrl);
|
||||
});
|
||||
|
||||
it('should navigate deep then go home and preserve navigation extras', () => {
|
||||
let tab = getSelectedTab();
|
||||
tab.find('#goto-tab1-page2').click();
|
||||
cy.ionPageVisible('app-tabs-tab1-nested');
|
||||
cy.ionPageHidden('app-tabs-tab1');
|
||||
|
||||
tab = testTabTitle('Tab 1 - Page 2 (1)');
|
||||
|
||||
tab.find('#goto-next').click();
|
||||
cy.ionPageVisible('app-tabs-tab1-nested:last-of-type');
|
||||
cy.ionPageHidden('app-tabs-tab1-nested:first-of-type');
|
||||
|
||||
testTabTitle('Tab 1 - Page 2 (2)');
|
||||
|
||||
cy.ionTabClick('Tab Two');
|
||||
cy.ionPageVisible('app-tabs-tab2');
|
||||
cy.ionPageHidden('app-tabs-tab1-nested:last-of-type');
|
||||
|
||||
testTabTitle('Tab 2 - Page 1');
|
||||
|
||||
cy.ionTabClick('Tab One');
|
||||
cy.ionPageVisible('app-tabs-tab1-nested:last-of-type');
|
||||
cy.ionPageHidden('app-tabs-tab2');
|
||||
|
||||
testTabTitle('Tab 1 - Page 2 (2)');
|
||||
|
||||
cy.ionTabClick('Tab One');
|
||||
/**
|
||||
* Wait for the leaving view to
|
||||
* be unmounted otherwise testTabTitle
|
||||
* may get the leaving view before it
|
||||
* is unmounted.
|
||||
*/
|
||||
cy.ionPageVisible('app-tabs-tab1');
|
||||
cy.ionPageDoesNotExist('app-tabs-tab1-nested');
|
||||
|
||||
testTabTitle('Tab 1 - Page 1');
|
||||
|
||||
testUrlContains(rootUrl);
|
||||
});
|
||||
})
|
||||
|
||||
describe('entry url - /tabs/account', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/tabs/account');
|
||||
});
|
||||
it('should pop to previous view when leaving tabs outlet', () => {
|
||||
|
||||
cy.get('ion-title').should('contain.text', 'Tab 1 - Page 1');
|
||||
|
||||
cy.get('#goto-tab1-page2').click();
|
||||
|
||||
cy.get('ion-title').should('contain.text', 'Tab 1 - Page 2 (1)');
|
||||
|
||||
cy.get('#goto-global').click();
|
||||
|
||||
cy.get('ion-title').should('contain.text', 'Global Page');
|
||||
|
||||
cy.get('#goto-prev-pop').click();
|
||||
|
||||
cy.get('ion-title').should('contain.text', 'Tab 1 - Page 2 (1)');
|
||||
|
||||
cy.get('#goto-prev').click();
|
||||
|
||||
cy.get('ion-title').should('contain.text', 'Tab 1 - Page 1');
|
||||
|
||||
/**
|
||||
* Verifies that when entering the tabs outlet directly,
|
||||
* the navController.pop() method does not pop the previous view,
|
||||
* when you are at the root of the tabs outlet.
|
||||
*/
|
||||
cy.get('#goto-previous-page').click();
|
||||
cy.get('ion-title').should('contain.text', 'Tab 1 - Page 1');
|
||||
});
|
||||
});
|
||||
|
||||
describe('entry url - /', () => {
|
||||
it('should pop to the root outlet from the tabs outlet', () => {
|
||||
cy.visit('/');
|
||||
|
||||
cy.get('ion-title').should('contain.text', 'Test App');
|
||||
|
||||
cy.get('ion-item').contains('Tabs test').click();
|
||||
|
||||
cy.get('ion-title').should('contain.text', 'Tab 1 - Page 1');
|
||||
|
||||
cy.get('#goto-tab1-page2').click();
|
||||
|
||||
cy.get('ion-title').should('contain.text', 'Tab 1 - Page 2 (1)');
|
||||
|
||||
cy.get('#goto-global').click();
|
||||
|
||||
cy.get('ion-title').should('contain.text', 'Global Page');
|
||||
|
||||
cy.get('#goto-prev-pop').click();
|
||||
|
||||
cy.get('ion-title').should('contain.text', 'Tab 1 - Page 2 (1)');
|
||||
|
||||
cy.get('#goto-prev').click();
|
||||
|
||||
cy.get('ion-title').should('contain.text', 'Tab 1 - Page 1');
|
||||
|
||||
cy.get('#goto-previous-page').click();
|
||||
|
||||
cy.get('ion-title').should('contain.text', 'Test App');
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
describe('entry url - /tabs/account/nested/1', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/tabs/account/nested/1');
|
||||
})
|
||||
|
||||
it('should only display the back-button when there is a page in the stack', () => {
|
||||
let tab = getSelectedTab();
|
||||
tab.find('ion-back-button').should('not.be.visible');
|
||||
testTabTitle('Tab 1 - Page 2 (1)');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1-nested']);
|
||||
|
||||
cy.get('#tab-button-account').click();
|
||||
tab = testTabTitle('Tab 1 - Page 1');
|
||||
|
||||
tab.find('#goto-tab1-page2').click();
|
||||
tab = testTabTitle('Tab 1 - Page 2 (1)');
|
||||
tab.find('ion-back-button').should('be.visible');
|
||||
});
|
||||
|
||||
it('should not reuse the same page', () => {
|
||||
let tab = testTabTitle('Tab 1 - Page 2 (1)');
|
||||
tab.find('#goto-next').click();
|
||||
tab = testTabTitle('Tab 1 - Page 2 (2)');
|
||||
|
||||
tab.find('#goto-next').click();
|
||||
tab = testTabTitle('Tab 1 - Page 2 (3)');
|
||||
|
||||
cy.testStack('ion-tabs ion-router-outlet', [
|
||||
'app-tabs-tab1-nested',
|
||||
'app-tabs-tab1-nested',
|
||||
'app-tabs-tab1-nested'
|
||||
]);
|
||||
|
||||
tab = getSelectedTab();
|
||||
tab.find('ion-back-button').click();
|
||||
tab = testTabTitle('Tab 1 - Page 2 (2)');
|
||||
tab.find('ion-back-button').click();
|
||||
tab = testTabTitle('Tab 1 - Page 2 (1)');
|
||||
|
||||
tab.find('ion-back-button').should('not.be.visible');
|
||||
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab1-nested']);
|
||||
});
|
||||
})
|
||||
|
||||
describe('entry url - /tabs/lazy', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/tabs/lazy');
|
||||
});
|
||||
|
||||
it('should not display the back-button if coming from a different stack', () => {
|
||||
let tab = testTabTitle('Tab 3 - Page 1');
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab3']);
|
||||
|
||||
tab = getSelectedTab();
|
||||
tab.find('#goto-tab1-page2').click();
|
||||
cy.testStack('ion-tabs ion-router-outlet', ['app-tabs-tab3', 'app-tabs-tab1-nested']);
|
||||
|
||||
tab = testTabTitle('Tab 1 - Page 2 (1)');
|
||||
tab.find('ion-back-button').should('not.be.visible');
|
||||
});
|
||||
})
|
||||
|
||||
describe('enter url - /tabs/contact/one', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/tabs/contact/one');
|
||||
});
|
||||
|
||||
it('should return to correct tab after going to page in different outlet', () => {
|
||||
const tab = getSelectedTab();
|
||||
tab.find('#goto-nested-page1').click();
|
||||
cy.testStack('app-nested-outlet ion-router-outlet', ['app-nested-outlet-page']);
|
||||
|
||||
const nestedOutlet = cy.get('app-nested-outlet');
|
||||
nestedOutlet.find('ion-back-button').click();
|
||||
|
||||
testTabTitle('Tab 2 - Page 1');
|
||||
});
|
||||
})
|
||||
})
|
||||
|
||||
it('Tabs should support conditional slots', () => {
|
||||
cy.visit('/tabs-slots');
|
||||
|
||||
cy.get('ion-tabs .tabs-inner + ion-tab-bar').should('have.length', 1);
|
||||
|
||||
// Click the button to change the slot to the top
|
||||
cy.get('#set-slot-top').click();
|
||||
|
||||
// The tab bar should be removed from the bottom
|
||||
cy.get('ion-tabs .tabs-inner + ion-tab-bar').should('have.length', 0);
|
||||
|
||||
// The tab bar should be added to the top
|
||||
cy.get('ion-tabs ion-tab-bar + .tabs-inner').should('have.length', 1);
|
||||
|
||||
// Click the button to change the slot to the bottom
|
||||
cy.get('#set-slot-bottom').click();
|
||||
|
||||
// The tab bar should be removed from the top
|
||||
cy.get('ion-tabs ion-tab-bar + .tabs-inner').should('have.length', 0);
|
||||
|
||||
// The tab bar should be added to the bottom
|
||||
cy.get('ion-tabs .tabs-inner + ion-tab-bar').should('have.length', 1);
|
||||
});
|
||||
|
||||
|
||||
function testTabTitle(title) {
|
||||
const tab = getSelectedTab();
|
||||
|
||||
// Find is used to get a direct descendant instead of get
|
||||
tab.find('ion-title').should('have.text', title);
|
||||
return getSelectedTab();
|
||||
}
|
||||
|
||||
function getSelectedTab() {
|
||||
cy.get('ion-tabs ion-router-outlet > *:not(.ion-page-hidden)').should('have.length', 1);
|
||||
return cy.get('ion-tabs ion-router-outlet > *:not(.ion-page-hidden)').first();
|
||||
}
|
||||
|
||||
function testState(count, tab) {
|
||||
cy.get('#tabs-state').should('have.text', `${count}.${tab}`);
|
||||
}
|
||||
|
||||
function testUrlContains(urlFragment) {
|
||||
cy.location().should((location) => {
|
||||
expect(location.href).to.contain(urlFragment);
|
||||
});
|
||||
}
|
||||
|
||||
function testUrlEquals(url) {
|
||||
cy.url().should('eq', url);
|
||||
}
|
||||
18
packages/angular/test/base/e2e/src/textarea.spec.ts
Normal file
18
packages/angular/test/base/e2e/src/textarea.spec.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
describe('Textarea', () => {
|
||||
beforeEach(() => cy.visit('/textarea'));
|
||||
|
||||
it('should become valid', () => {
|
||||
cy.get('#status').should('have.text', 'INVALID');
|
||||
|
||||
cy.get('ion-textarea').type('hello');
|
||||
|
||||
cy.get('#status').should('have.text', 'VALID');
|
||||
});
|
||||
|
||||
it('should update the form control value when typing', () => {
|
||||
cy.get('#value').contains(`"textarea": ""`);
|
||||
cy.get('ion-textarea').type('hello');
|
||||
|
||||
cy.get('#value').contains(`"textarea": "hello"`);
|
||||
});
|
||||
});
|
||||
14
packages/angular/test/base/e2e/src/view-child.spec.ts
Normal file
14
packages/angular/test/base/e2e/src/view-child.spec.ts
Normal file
@@ -0,0 +1,14 @@
|
||||
describe('View Child', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/view-child');
|
||||
})
|
||||
|
||||
it('should get a reference to all children', () => {
|
||||
// button should be red
|
||||
cy.get('#color-button').should('have.class', 'ion-color-danger');
|
||||
|
||||
// tabs should be found
|
||||
cy.get('#tabs-result').should('have.text', 'all found');
|
||||
});
|
||||
});
|
||||
|
||||
20
packages/angular/test/base/e2e/tsconfig.json
Normal file
20
packages/angular/test/base/e2e/tsconfig.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"angularCompilerOptions": {
|
||||
"fullTemplateTypeCheck": true,
|
||||
"strictMetadataEmit" : true
|
||||
},
|
||||
"extends": "../tsconfig.json",
|
||||
"include": [
|
||||
"src/**spec.ts",
|
||||
"../cypress/support/index.d.ts"
|
||||
],
|
||||
"compilerOptions": {
|
||||
"outDir": "../out-tsc/app",
|
||||
"module": "commonjs",
|
||||
"target": "es5",
|
||||
"types": [
|
||||
"cypress",
|
||||
"node"
|
||||
]
|
||||
}
|
||||
}
|
||||
23
packages/angular/test/base/scripts/build-ionic.sh
Normal file
23
packages/angular/test/base/scripts/build-ionic.sh
Normal file
@@ -0,0 +1,23 @@
|
||||
pushd ../../..
|
||||
|
||||
# Build core
|
||||
pushd core
|
||||
npm run build
|
||||
npm link
|
||||
popd
|
||||
|
||||
# Build angular
|
||||
pushd angular
|
||||
npm link @ionic/core
|
||||
npm run build
|
||||
npm link
|
||||
popd
|
||||
|
||||
# Build angular-server
|
||||
pushd packages/angular-server
|
||||
npm link @ionic/core
|
||||
npm link @ionic/angular
|
||||
npm run build
|
||||
popd
|
||||
|
||||
popd
|
||||
21
packages/angular/test/base/scripts/sync.sh
Normal file
21
packages/angular/test/base/scripts/sync.sh
Normal file
@@ -0,0 +1,21 @@
|
||||
#!/bin/bash
|
||||
|
||||
set -e
|
||||
|
||||
# Delete old packages
|
||||
rm -f *.tgz
|
||||
|
||||
# Pack @ionic/core
|
||||
npm pack ../../../../../core
|
||||
|
||||
# Pack @ionic/angular
|
||||
npm pack ../../../dist
|
||||
|
||||
# Pack @ionic/angular-server
|
||||
npm pack ../../../../angular-server/dist
|
||||
|
||||
# Install Dependencies
|
||||
npm install *.tgz --no-save
|
||||
|
||||
# Delete Angular cache directory
|
||||
rm -rf .angular/
|
||||
57
packages/angular/test/base/server.ts
Normal file
57
packages/angular/test/base/server.ts
Normal file
@@ -0,0 +1,57 @@
|
||||
import 'zone.js/dist/zone-node';
|
||||
|
||||
import { ngExpressEngine } from '@nguniversal/express-engine';
|
||||
import * as express from 'express';
|
||||
import { join } from 'path';
|
||||
|
||||
import { AppServerModule } from './src/main.server';
|
||||
import { APP_BASE_HREF } from '@angular/common';
|
||||
|
||||
// The Express app is exported so that it can be used by serverless Functions.
|
||||
export function app() {
|
||||
const server = express();
|
||||
const distFolder = join(process.cwd(), 'dist/test-app/browser');
|
||||
|
||||
// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
|
||||
server.engine('html', ngExpressEngine({
|
||||
bootstrap: AppServerModule,
|
||||
}));
|
||||
|
||||
server.set('view engine', 'html');
|
||||
server.set('views', distFolder);
|
||||
|
||||
// Example Express Rest API endpoints
|
||||
// app.get('/api/**', (req, res) => { });
|
||||
// Serve static files from /browser
|
||||
server.get('*.*', express.static(distFolder, {
|
||||
maxAge: '1y'
|
||||
}));
|
||||
|
||||
// All regular routes use the Universal engine
|
||||
server.get('*', (req, res) => {
|
||||
res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
|
||||
});
|
||||
|
||||
return server;
|
||||
}
|
||||
|
||||
function run() {
|
||||
const port = process.env.PORT || 4000;
|
||||
|
||||
// Start up the Node server
|
||||
const server = app();
|
||||
server.listen(port, () => {
|
||||
console.log(`Node Express server listening on http://localhost:${port}`);
|
||||
});
|
||||
}
|
||||
|
||||
// Webpack will replace 'require' with '__webpack_require__'
|
||||
// '__non_webpack_require__' is a proxy to Node 'require'
|
||||
// The below code is to ensure that the server is run only when not requiring the bundle.
|
||||
declare const __non_webpack_require__: NodeRequire;
|
||||
const mainModule = __non_webpack_require__.main;
|
||||
if (mainModule && mainModule.filename === __filename) {
|
||||
run();
|
||||
}
|
||||
|
||||
export * from './src/main.server';
|
||||
@@ -0,0 +1,17 @@
|
||||
<ion-content>
|
||||
<ion-button id="dismiss" (click)="modal.dismiss()">Dismiss Modal</ion-button>
|
||||
<ion-accordion-group [value]="'a'">
|
||||
<ion-accordion value="a">
|
||||
<ion-item slot="header">
|
||||
<ion-label>A</ion-label>
|
||||
</ion-item>
|
||||
<div slot="content">A content</div>
|
||||
</ion-accordion>
|
||||
<ion-accordion value="b">
|
||||
<ion-item slot="header">
|
||||
<ion-label>B</ion-label>
|
||||
</ion-item>
|
||||
<div slot="content">B content</div>
|
||||
</ion-accordion>
|
||||
</ion-accordion-group>
|
||||
</ion-content>
|
||||
@@ -0,0 +1,11 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-accordion-modal',
|
||||
templateUrl: './accordion-modal.component.html',
|
||||
})
|
||||
export class AccordionModalComponent {
|
||||
modal!: HTMLIonModalElement;
|
||||
|
||||
constructor() {}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons>
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>
|
||||
Accordion test
|
||||
</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-button id="open-modal" (click)="open()">Open Modal</ion-button>
|
||||
</ion-content>
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
import { AccordionModalComponent } from './accordion-modal/accordion-modal.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-accordion',
|
||||
templateUrl: './accordion.component.html',
|
||||
})
|
||||
export class AccordionComponent {
|
||||
|
||||
constructor(
|
||||
private modalCtrl: ModalController
|
||||
) { }
|
||||
|
||||
async open() {
|
||||
const modal = await this.modalCtrl.create({
|
||||
component: AccordionModalComponent,
|
||||
animated: false,
|
||||
});
|
||||
await modal.present();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons>
|
||||
<ion-back-button></ion-back-button>
|
||||
</ion-buttons>
|
||||
<ion-title>
|
||||
Alert test
|
||||
</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<p>Change Detections: <span id="counter">{{counter()}}</span></p>
|
||||
</ion-content>
|
||||
39
packages/angular/test/base/src/app/alert/alert.component.ts
Normal file
39
packages/angular/test/base/src/app/alert/alert.component.ts
Normal file
@@ -0,0 +1,39 @@
|
||||
import { Component, NgZone } from '@angular/core';
|
||||
import { AlertController } from '@ionic/angular';
|
||||
import { NavComponent } from '../nav/nav.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-alert',
|
||||
templateUrl: './alert.component.html',
|
||||
})
|
||||
export class AlertComponent {
|
||||
|
||||
changes = 0;
|
||||
|
||||
constructor(
|
||||
private alertCtrl: AlertController
|
||||
) { }
|
||||
|
||||
counter() {
|
||||
this.changes++;
|
||||
return Math.floor(this.changes / 2);
|
||||
}
|
||||
|
||||
async openAlert() {
|
||||
const alert = await this.alertCtrl.create({
|
||||
header: 'Hello',
|
||||
message: 'Some text',
|
||||
buttons: [
|
||||
{
|
||||
role: 'cancel',
|
||||
text: 'Cancel',
|
||||
handler: () => {
|
||||
console.log(NgZone.isInAngularZone());
|
||||
NgZone.assertInAngularZone();
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
await alert.present();
|
||||
}
|
||||
}
|
||||
88
packages/angular/test/base/src/app/app-routing.module.ts
Normal file
88
packages/angular/test/base/src/app/app-routing.module.ts
Normal file
@@ -0,0 +1,88 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { Routes, RouterModule } from '@angular/router';
|
||||
import { InputsComponent } from './inputs/inputs.component';
|
||||
import { ModalComponent } from './modal/modal.component';
|
||||
import { RouterLinkComponent } from './router-link/router-link.component';
|
||||
import { RouterLinkPageComponent } from './router-link-page/router-link-page.component';
|
||||
import { RouterLinkPage2Component } from './router-link-page2/router-link-page2.component';
|
||||
import { RouterLinkPage3Component } from './router-link-page3/router-link-page3.component';
|
||||
import { HomePageComponent } from './home-page/home-page.component';
|
||||
import { NestedOutletComponent } from './nested-outlet/nested-outlet.component';
|
||||
import { NestedOutletPageComponent } from './nested-outlet-page/nested-outlet-page.component';
|
||||
import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet-page2.component';
|
||||
import { ViewChildComponent } from './view-child/view-child.component';
|
||||
import { ProvidersComponent } from './providers/providers.component';
|
||||
import { FormComponent } from './form/form.component';
|
||||
import { NavigationPage1Component } from './navigation-page1/navigation-page1.component';
|
||||
import { NavigationPage2Component } from './navigation-page2/navigation-page2.component';
|
||||
import { NavigationPage3Component } from './navigation-page3/navigation-page3.component';
|
||||
import { AlertComponent } from './alert/alert.component';
|
||||
import { AccordionComponent } from './accordion/accordion.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{ path: '', component: HomePageComponent },
|
||||
{ path: 'version-test', loadChildren: () => import('./version-test').then(m => m.VersionTestModule) },
|
||||
{ path: 'accordions', component: AccordionComponent },
|
||||
{ path: 'alerts', component: AlertComponent },
|
||||
{ path: 'inputs', component: InputsComponent },
|
||||
{ path: 'textarea', loadChildren: () => import('./textarea/textarea.module').then(m => m.TextareaModule) },
|
||||
{ path: 'searchbar', loadChildren: () => import('./searchbar/searchbar.module').then(m => m.SearchbarModule) },
|
||||
{ path: 'form', component: FormComponent },
|
||||
{ path: 'modals', component: ModalComponent },
|
||||
{ path: 'modal-inline', loadChildren: () => import('./modal-inline').then(m => m.ModalInlineModule) },
|
||||
{ path: 'view-child', component: ViewChildComponent },
|
||||
{ path: 'keep-contents-mounted', loadChildren: () => import('./keep-contents-mounted').then(m => m.OverlayAutoMountModule) },
|
||||
{ path: 'overlays-inline', loadChildren: () => import('./overlays-inline').then(m => m.OverlaysInlineModule) },
|
||||
{ path: 'popover-inline', loadChildren: () => import('./popover-inline').then(m => m.PopoverInlineModule) },
|
||||
{ path: 'providers', component: ProvidersComponent },
|
||||
{ path: 'router-link', component: RouterLinkComponent },
|
||||
{ path: 'router-link-page', component: RouterLinkPageComponent },
|
||||
{ path: 'router-link-page2/:id', component: RouterLinkPage2Component },
|
||||
{ path: 'router-link-page3', component: RouterLinkPage3Component },
|
||||
{ path: 'standalone', loadComponent: () => import('./standalone/standalone.component').then(c => c.StandaloneComponent) },
|
||||
{ path: 'tabs', redirectTo: '/tabs/account', pathMatch: 'full' },
|
||||
{
|
||||
path: 'navigation',
|
||||
children: [
|
||||
{ path: 'page1', component: NavigationPage1Component },
|
||||
{ path: 'page2', component: NavigationPage2Component },
|
||||
{ path: 'page3', component: NavigationPage3Component }
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'tabs',
|
||||
loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
|
||||
},
|
||||
{
|
||||
path: 'tabs-global',
|
||||
loadChildren: () => import('./tabs-global/tabs-global.module').then(m => m.TabsGlobalModule)
|
||||
},
|
||||
{
|
||||
path: 'tabs-slots',
|
||||
loadComponent: () => import('./tabs-slots.component').then(c => c.TabsSlotsComponent)
|
||||
},
|
||||
{
|
||||
path: 'nested-outlet',
|
||||
component: NestedOutletComponent,
|
||||
children: [
|
||||
{
|
||||
path: 'page',
|
||||
component: NestedOutletPageComponent
|
||||
},
|
||||
{
|
||||
path: 'page2',
|
||||
component: NestedOutletPage2Component
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'form-controls/range',
|
||||
loadChildren: () => import('./form-controls/range/range.module').then(m => m.RangeModule)
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
imports: [RouterModule.forRoot(routes)],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class AppRoutingModule { }
|
||||
3
packages/angular/test/base/src/app/app.component.html
Normal file
3
packages/angular/test/base/src/app/app.component.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<ion-app>
|
||||
<ion-router-outlet></ion-router-outlet>
|
||||
</ion-app>
|
||||
9
packages/angular/test/base/src/app/app.component.ts
Normal file
9
packages/angular/test/base/src/app/app.component.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
export class AppComponent {
|
||||
}
|
||||
69
packages/angular/test/base/src/app/app.module.ts
Normal file
69
packages/angular/test/base/src/app/app.module.ts
Normal file
@@ -0,0 +1,69 @@
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { ReactiveFormsModule } from '@angular/forms';
|
||||
import { RouteReuseStrategy } from '@angular/router';
|
||||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppComponent } from './app.component';
|
||||
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { InputsComponent } from './inputs/inputs.component';
|
||||
import { ModalComponent } from './modal/modal.component';
|
||||
import { ModalExampleComponent } from './modal-example/modal-example.component';
|
||||
import { RouterLinkComponent } from './router-link/router-link.component';
|
||||
import { RouterLinkPageComponent } from './router-link-page/router-link-page.component';
|
||||
import { RouterLinkPage2Component } from './router-link-page2/router-link-page2.component';
|
||||
import { RouterLinkPage3Component } from './router-link-page3/router-link-page3.component';
|
||||
import { HomePageComponent } from './home-page/home-page.component';
|
||||
import { NestedOutletComponent } from './nested-outlet/nested-outlet.component';
|
||||
import { NestedOutletPageComponent } from './nested-outlet-page/nested-outlet-page.component';
|
||||
import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet-page2.component';
|
||||
import { NavComponent } from './nav/nav.component';
|
||||
import { ViewChildComponent } from './view-child/view-child.component';
|
||||
import { ProvidersComponent } from './providers/providers.component';
|
||||
import { FormComponent } from './form/form.component';
|
||||
import { NavigationPage1Component } from './navigation-page1/navigation-page1.component';
|
||||
import { NavigationPage2Component } from './navigation-page2/navigation-page2.component';
|
||||
import { NavigationPage3Component } from './navigation-page3/navigation-page3.component';
|
||||
import { AlertComponent } from './alert/alert.component';
|
||||
import { AccordionComponent } from './accordion/accordion.component';
|
||||
import { AccordionModalComponent } from './accordion/accordion-modal/accordion-modal.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
InputsComponent,
|
||||
ModalComponent,
|
||||
ModalExampleComponent,
|
||||
RouterLinkComponent,
|
||||
RouterLinkPageComponent,
|
||||
RouterLinkPage2Component,
|
||||
RouterLinkPage3Component,
|
||||
HomePageComponent,
|
||||
NestedOutletComponent,
|
||||
NestedOutletPageComponent,
|
||||
NestedOutletPage2Component,
|
||||
NavComponent,
|
||||
ViewChildComponent,
|
||||
ProvidersComponent,
|
||||
FormComponent,
|
||||
NavigationPage1Component,
|
||||
NavigationPage2Component,
|
||||
NavigationPage3Component,
|
||||
AlertComponent,
|
||||
AccordionComponent,
|
||||
AccordionModalComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule.withServerTransition({ appId: 'serverApp' }),
|
||||
AppRoutingModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
IonicModule.forRoot({ keyboardHeight: 12345 }),
|
||||
],
|
||||
providers: [
|
||||
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
|
||||
],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
15
packages/angular/test/base/src/app/app.server.module.ts
Normal file
15
packages/angular/test/base/src/app/app.server.module.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { ServerModule } from '@angular/platform-server';
|
||||
import { IonicServerModule } from '@ionic/angular-server';
|
||||
import { AppModule } from './app.module';
|
||||
import { AppComponent } from './app.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
AppModule,
|
||||
ServerModule,
|
||||
IonicServerModule
|
||||
],
|
||||
bootstrap: [AppComponent],
|
||||
})
|
||||
export class AppServerModule {}
|
||||
@@ -0,0 +1,13 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { RouterModule } from '@angular/router';
|
||||
|
||||
import { RangeComponent } from './range.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([
|
||||
{ path: '', component: RangeComponent }
|
||||
])
|
||||
]
|
||||
})
|
||||
export class RangeRoutingModule { }
|
||||
@@ -0,0 +1,17 @@
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Range</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<form [formGroup]="form">
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-range formControlName="range" min="0" max="20">
|
||||
<div slot="label">Range</div>
|
||||
</ion-range>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<ion-button type="submit">Submit</ion-button>
|
||||
</form>
|
||||
</ion-content>
|
||||
@@ -0,0 +1,18 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-range',
|
||||
templateUrl: './range.component.html'
|
||||
})
|
||||
export class RangeComponent {
|
||||
|
||||
form: FormGroup;
|
||||
|
||||
constructor(private fb: FormBuilder) {
|
||||
this.form = this.fb.group({
|
||||
range: [5, Validators.min(10)]
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
||||
import { IonicModule } from '@ionic/angular';
|
||||
|
||||
import { RangeRoutingModule } from './range-routing.module';
|
||||
import { RangeComponent } from './range.component';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
IonicModule,
|
||||
RangeRoutingModule
|
||||
],
|
||||
declarations: [
|
||||
RangeComponent
|
||||
]
|
||||
})
|
||||
export class RangeModule { }
|
||||
78
packages/angular/test/base/src/app/form/form.component.html
Normal file
78
packages/angular/test/base/src/app/form/form.component.html
Normal file
@@ -0,0 +1,78 @@
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>
|
||||
Forms test
|
||||
</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content>
|
||||
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
|
||||
<ion-list>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>DateTime</ion-label>
|
||||
<ion-datetime formControlName="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY">
|
||||
</ion-datetime>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Select" formControlName="select">
|
||||
<ion-select-option value="">No Game Console</ion-select-option>
|
||||
<ion-select-option value="nes">NES</ion-select-option>
|
||||
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
|
||||
<ion-select-option value="ps">PlayStation</ion-select-option>
|
||||
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
|
||||
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
|
||||
<ion-select-option value="snes">SNES</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-toggle formControlName="toggle">
|
||||
Toggle
|
||||
</ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-input label="Input (required)" formControlName="input" class="required" id="touched-input-test"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-button id="input-touched" (click)="setTouched()">Set Input Touched</ion-button>
|
||||
|
||||
<ion-item>
|
||||
<ion-input label="Input" formControlName="input2"></ion-input>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-checkbox formControlName="checkbox">
|
||||
Checkbox
|
||||
</ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
<p>
|
||||
Form Status: <span id="status">{{ profileForm.status }}</span>
|
||||
</p>
|
||||
<p>
|
||||
Form value: <span id="data">{{ profileForm.value | json }}</span>
|
||||
</p>
|
||||
<p>
|
||||
Form Submit: <span id="submit">{{submitted}}</span>
|
||||
</p>
|
||||
<ion-button id="mark-all-touched-button" (click)="markAllAsTouched()">Mark all as touched</ion-button>
|
||||
<ion-button id="submit-button" type="submit" [disabled]="!profileForm.valid">Submit</ion-button>
|
||||
|
||||
</form>
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-toggle [formControl]="outsideToggle">
|
||||
Outside form
|
||||
</ion-toggle>
|
||||
<ion-note slot="end">{{outsideToggle.value}}</ion-note>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<p>
|
||||
<ion-button (click)="setValues()" id="set-values">Set values</ion-button>
|
||||
</p>
|
||||
</ion-content>
|
||||
53
packages/angular/test/base/src/app/form/form.component.ts
Normal file
53
packages/angular/test/base/src/app/form/form.component.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl } from '@angular/forms';
|
||||
|
||||
@Component({
|
||||
selector: 'app-form',
|
||||
templateUrl: './form.component.html',
|
||||
})
|
||||
export class FormComponent {
|
||||
|
||||
submitted = 'false';
|
||||
profileForm: UntypedFormGroup;
|
||||
outsideToggle = new UntypedFormControl(true);
|
||||
|
||||
constructor(fb: UntypedFormBuilder) {
|
||||
this.profileForm = fb.group({
|
||||
datetime: ['2010-08-20', Validators.required],
|
||||
select: [undefined, Validators.required],
|
||||
toggle: [false],
|
||||
input: ['', Validators.required],
|
||||
input2: ['Default Value'],
|
||||
checkbox: [false]
|
||||
}, {
|
||||
updateOn: typeof (window as any) !== 'undefined' && window.location.hash === '#blur' ? 'blur' : 'change'
|
||||
});
|
||||
}
|
||||
|
||||
setTouched() {
|
||||
const formControl = this.profileForm.get('input');
|
||||
if (formControl) {
|
||||
formControl.markAsTouched();
|
||||
}
|
||||
}
|
||||
|
||||
onSubmit() {
|
||||
this.submitted = 'true';
|
||||
}
|
||||
|
||||
setValues() {
|
||||
this.profileForm.patchValue({
|
||||
datetime: '2010-08-20',
|
||||
select: 'nes',
|
||||
toggle: true,
|
||||
input: 'Some value',
|
||||
input2: 'Another values',
|
||||
checkbox: true
|
||||
});
|
||||
}
|
||||
|
||||
markAllAsTouched() {
|
||||
this.profileForm.markAllAsTouched();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>
|
||||
Test App - Angular {{ angularVersion.major }}
|
||||
</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item routerLink="/alerts" [routerAnimation]="routerAnimation">
|
||||
<ion-label>
|
||||
Alerts test
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item routerLink="/inputs">
|
||||
<ion-label>
|
||||
Inputs test
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item routerLink="/form">
|
||||
<ion-label>
|
||||
Form test
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item routerLink="/modals">
|
||||
<ion-label>
|
||||
Modals test
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item routerLink="/router-link">
|
||||
<ion-label>
|
||||
Router link test
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item routerLink="/tabs">
|
||||
<ion-label>
|
||||
Tabs test
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item routerLink="/nested-outlet/page">
|
||||
<ion-label>
|
||||
Nested ion-router-outlet
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item routerLink="/view-child">
|
||||
<ion-label>
|
||||
ViewChild()
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item routerLink="/providers">
|
||||
<ion-label>
|
||||
Providers
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item routerLink="/accordions">
|
||||
<ion-label>
|
||||
Accordions Test
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
@@ -0,0 +1,28 @@
|
||||
import { Component, VERSION } from '@angular/core';
|
||||
import { AnimationBuilder, AnimationController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'app-home-page',
|
||||
templateUrl: './home-page.component.html',
|
||||
})
|
||||
export class HomePageComponent {
|
||||
|
||||
angularVersion = VERSION;
|
||||
|
||||
routerAnimation: AnimationBuilder = (_, opts) => {
|
||||
const { direction, enteringEl, leavingEl } = opts;
|
||||
const animation = this.animationCtrl.create().duration(500).easing('ease-out');
|
||||
const enteringAnimation = this.animationCtrl.create().addElement(enteringEl).beforeRemoveClass(['ion-page-invisible']);
|
||||
const leavingAnimation = this.animationCtrl.create().addElement(leavingEl).beforeRemoveClass(['ion-page-invisible']);
|
||||
if (direction === 'back') {
|
||||
enteringAnimation.fromTo('transform', 'translateX(-100%)', 'translateX(0%)');
|
||||
leavingAnimation.fromTo('transform', 'translateX(0%)', 'translateX(100%)');
|
||||
} else {
|
||||
enteringAnimation.fromTo('transform', 'translateX(100%)', 'translateX(0%)');
|
||||
leavingAnimation.fromTo('transform', 'translateX(0%)', 'translateX(-100%)');
|
||||
}
|
||||
return animation.addAnimation([enteringAnimation, leavingAnimation]);
|
||||
};
|
||||
|
||||
constructor(private animationCtrl: AnimationController) {}
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>
|
||||
Inputs test
|
||||
</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<p>Change Detections: <span id="counter">{{counter()}}</span></p>
|
||||
<ion-list>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>DateTime</ion-label>
|
||||
<ion-datetime [(ngModel)]="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY"></ion-datetime>
|
||||
<ion-note slot="end" id="datetime-note">{{datetime}}</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item color="dark">
|
||||
<ion-label>DateTime Mirror</ion-label>
|
||||
<ion-datetime [(ngModel)]="datetime" min="1994-03-14" max="2017-12-09" display-format="MM/DD/YYYY"></ion-datetime>
|
||||
<ion-note slot="end">{{datetime}}</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-select label="Select" [(ngModel)]="select" id="game-console">
|
||||
<ion-select-option value="">No Game Console</ion-select-option>
|
||||
<ion-select-option value="nes">NES</ion-select-option>
|
||||
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
|
||||
<ion-select-option value="ps">PlayStation</ion-select-option>
|
||||
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
|
||||
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
|
||||
<ion-select-option value="snes">SNES</ion-select-option>
|
||||
</ion-select>
|
||||
<ion-note slot="end" id="select-note">{{select}}</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item color="dark">
|
||||
<ion-select label="Select Mirror" [(ngModel)]="select">
|
||||
<ion-select-option value="">No Game Console</ion-select-option>
|
||||
<ion-select-option value="nes">NES</ion-select-option>
|
||||
<ion-select-option value="n64" selected>Nintendo64</ion-select-option>
|
||||
<ion-select-option value="ps">PlayStation</ion-select-option>
|
||||
<ion-select-option value="genesis">Sega Genesis</ion-select-option>
|
||||
<ion-select-option value="saturn">Sega Saturn</ion-select-option>
|
||||
<ion-select-option value="snes">SNES</ion-select-option>
|
||||
</ion-select>
|
||||
<ion-note slot="end">{{select}}</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-toggle [(ngModel)]="toggle" slot="end">
|
||||
Toggle
|
||||
</ion-toggle>
|
||||
<ion-note slot="end" id="toggle-note">{{toggle}}</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item color="dark">
|
||||
<ion-toggle [(ngModel)]="toggle" slot="end">
|
||||
Toggle Mirror
|
||||
</ion-toggle>
|
||||
<ion-note slot="end">{{toggle}}</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-input label="Input" [(ngModel)]="input"></ion-input>
|
||||
<ion-note slot="end" id="input-note">{{input}}</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item color="dark">
|
||||
<ion-input label="Input Mirror" [(ngModel)]="input"></ion-input>
|
||||
<ion-note slot="end">{{input}}</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-checkbox [(ngModel)]="checkbox" slot="start" id="first-checkbox">
|
||||
Checkbox
|
||||
</ion-checkbox>
|
||||
<ion-note slot="end" id="checkbox-note">{{checkbox}}</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item color="dark">
|
||||
<ion-checkbox [(ngModel)]="checkbox" slot="start">
|
||||
Checkbox Mirror
|
||||
</ion-checkbox>
|
||||
<ion-note slot="end">{{checkbox}}</ion-note>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
<p>
|
||||
<ion-button (click)="setValues()" id="set-button">Set values</ion-button>
|
||||
<ion-button (click)="resetValues()" id="reset-button">Reset values</ion-button>
|
||||
</p>
|
||||
</ion-content>
|
||||
@@ -0,0 +1,38 @@
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-inputs',
|
||||
templateUrl: './inputs.component.html',
|
||||
})
|
||||
export class InputsComponent {
|
||||
|
||||
datetime? = '1994-03-15';
|
||||
input? = 'some text';
|
||||
checkbox = true;
|
||||
toggle = true;
|
||||
select? = 'nes';
|
||||
changes = 0;
|
||||
|
||||
setValues() {
|
||||
console.log('set values');
|
||||
this.datetime = '1994-03-15';
|
||||
this.input = 'some text';
|
||||
this.checkbox = true;
|
||||
this.toggle = true;
|
||||
this.select = 'nes';
|
||||
}
|
||||
|
||||
resetValues() {
|
||||
console.log('reset values');
|
||||
this.datetime = undefined;
|
||||
this.input = undefined;
|
||||
this.checkbox = false;
|
||||
this.toggle = false;
|
||||
this.select = undefined;
|
||||
}
|
||||
|
||||
counter() {
|
||||
this.changes++;
|
||||
return Math.floor(this.changes / 2);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
export * from './keep-contents-mounted.component';
|
||||
export * from './keep-contents-mounted.module';
|
||||
@@ -0,0 +1,16 @@
|
||||
import { NgModule } from "@angular/core";
|
||||
import { RouterModule } from "@angular/router";
|
||||
import { OverlayKeepContentsMounted } from ".";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: '',
|
||||
component: OverlayKeepContentsMounted
|
||||
}
|
||||
])
|
||||
],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class OverlayKeepContentsMountedRoutingModule { }
|
||||
@@ -0,0 +1,22 @@
|
||||
<ion-content>
|
||||
<ion-button id="open-modal" (click)="modal.present()">Open Modal</ion-button>
|
||||
<ion-button id="open-popover" (click)="popover.present()">Open Popover</ion-button>
|
||||
|
||||
<ion-modal [keepContentsMounted]="true" #modal>
|
||||
<ng-template>
|
||||
<ion-content>
|
||||
<ion-button (click)="modal.dismiss()">Dismiss</ion-button>
|
||||
Modal Content
|
||||
</ion-content>
|
||||
</ng-template>
|
||||
</ion-modal>
|
||||
|
||||
<ion-popover [keepContentsMounted]="true" #popover>
|
||||
<ng-template>
|
||||
<ion-content>
|
||||
<ion-button (click)="popover.dismiss()">Dismiss</ion-button>
|
||||
Popover Content
|
||||
</ion-content>
|
||||
</ng-template>
|
||||
</ion-popover>
|
||||
</ion-content>
|
||||
@@ -0,0 +1,13 @@
|
||||
import { Component } from "@angular/core";
|
||||
|
||||
/**
|
||||
* Validates that inline modals correctly mount
|
||||
* inner components when keepContentsMounted is
|
||||
* enabled.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-keep-contents-mounted',
|
||||
templateUrl: 'keep-contents-mounted.component.html'
|
||||
})
|
||||
export class OverlayKeepContentsMounted {
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { NgModule } from "@angular/core";
|
||||
import { IonicModule } from "@ionic/angular";
|
||||
import { OverlayKeepContentsMountedRoutingModule } from "./keep-contents-mounted-routing.module";
|
||||
import { OverlayKeepContentsMounted } from "./keep-contents-mounted.component";
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule, IonicModule, OverlayKeepContentsMountedRoutingModule],
|
||||
declarations: [OverlayKeepContentsMounted],
|
||||
exports: [OverlayKeepContentsMounted]
|
||||
})
|
||||
export class OverlayAutoMountModule { }
|
||||
@@ -0,0 +1,38 @@
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-button (click)="closeModal()" id="close-modal">
|
||||
Close
|
||||
</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding">
|
||||
<h1>Value</h1>
|
||||
<h2>{{value}}</h2>
|
||||
<h3>{{valueFromParams}}</h3>
|
||||
<p>modal is defined: <span id="modalInstance">{{ !!modal }}</span></p>
|
||||
<p>ngOnInit: <span id="ngOnInit">{{onInit}}</span></p>
|
||||
<p>ionViewWillEnter: <span id="ionViewWillEnter">{{willEnter}}</span></p>
|
||||
<p>ionViewDidEnter: <span id="ionViewDidEnter">{{didEnter}}</span></p>
|
||||
<p>ionViewWillLeave: <span id="ionViewWillLeave">{{willLeave}}</span></p>
|
||||
<p>ionViewDidLeave: <span id="ionViewDidLeave">{{didLeave}}</span></p>
|
||||
<p *ngIf="!!nav">
|
||||
<ion-button (click)="push()" class="push-page">Push page</ion-button>
|
||||
<ion-button (click)="pop()" class="pop-page">Pop page</ion-button>
|
||||
</p>
|
||||
|
||||
<form [formGroup]="form">
|
||||
<ion-item id="inputWithFloatingLabel">
|
||||
<ion-label color="primary" position="floating">Floating Label</ion-label>
|
||||
<ion-select multiple="false" formControlName="select">
|
||||
<ion-select-option [value]="0">Option 0</ion-select-option>
|
||||
<ion-select-option [value]="1">Option 1</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
|
||||
<ion-button id="set-to-null" (click)="setSelect(null)">Set select value to "null"></ion-button>
|
||||
<ion-button id="set-to-undefined" (click)="setSelect(undefined)">Set select value to "undefined"></ion-button>
|
||||
</form>
|
||||
</ion-content>
|
||||
@@ -0,0 +1,74 @@
|
||||
import { Component, Input, NgZone, OnInit, Optional } from '@angular/core';
|
||||
import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
|
||||
import { ModalController, NavParams, IonNav, ViewWillLeave, ViewDidEnter, ViewDidLeave } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'app-modal-example',
|
||||
templateUrl: './modal-example.component.html',
|
||||
})
|
||||
export class ModalExampleComponent implements OnInit, ViewWillLeave, ViewDidEnter, ViewWillLeave, ViewDidLeave {
|
||||
|
||||
@Input() value?: string;
|
||||
|
||||
form = new UntypedFormGroup({
|
||||
select: new UntypedFormControl([])
|
||||
});
|
||||
|
||||
valueFromParams: string;
|
||||
onInit = 0;
|
||||
willEnter = 0;
|
||||
didEnter = 0;
|
||||
willLeave = 0;
|
||||
didLeave = 0;
|
||||
|
||||
modal!: HTMLElement;
|
||||
|
||||
constructor(
|
||||
private modalCtrl: ModalController,
|
||||
@Optional() public nav: IonNav,
|
||||
navParams: NavParams
|
||||
) {
|
||||
this.valueFromParams = navParams.get('prop');
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
NgZone.assertInAngularZone();
|
||||
this.onInit++;
|
||||
}
|
||||
|
||||
setSelect(value: null | undefined) {
|
||||
this.form.get('select')!.setValue(value);
|
||||
}
|
||||
|
||||
ionViewWillEnter() {
|
||||
if (this.onInit !== 1) {
|
||||
throw new Error('ngOnInit was not called');
|
||||
}
|
||||
NgZone.assertInAngularZone();
|
||||
this.willEnter++;
|
||||
}
|
||||
ionViewDidEnter() {
|
||||
NgZone.assertInAngularZone();
|
||||
this.didEnter++;
|
||||
}
|
||||
ionViewWillLeave() {
|
||||
NgZone.assertInAngularZone();
|
||||
this.willLeave++;
|
||||
}
|
||||
ionViewDidLeave() {
|
||||
NgZone.assertInAngularZone();
|
||||
this.didLeave++;
|
||||
}
|
||||
closeModal() {
|
||||
this.modalCtrl.dismiss();
|
||||
}
|
||||
|
||||
push() {
|
||||
this.nav.push(ModalExampleComponent, {
|
||||
'value': 'pushed!'
|
||||
});
|
||||
}
|
||||
pop() {
|
||||
this.nav.pop();
|
||||
}
|
||||
}
|
||||
2
packages/angular/test/base/src/app/modal-inline/index.ts
Normal file
2
packages/angular/test/base/src/app/modal-inline/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export * from './modal-inline.component';
|
||||
export * from './modal-inline.module';
|
||||
@@ -0,0 +1,16 @@
|
||||
import { NgModule } from "@angular/core";
|
||||
import { RouterModule } from "@angular/router";
|
||||
import { ModalInlineComponent } from ".";
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
RouterModule.forChild([
|
||||
{
|
||||
path: '',
|
||||
component: ModalInlineComponent
|
||||
}
|
||||
])
|
||||
],
|
||||
exports: [RouterModule]
|
||||
})
|
||||
export class ModalInlineRoutingModule { }
|
||||
@@ -0,0 +1,20 @@
|
||||
<ion-button id="open-modal">Open Modal</ion-button>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
breakpointDidChange event count: <span id="breakpointDidChange">{{ breakpointDidChangeCounter }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ion-modal [animated]="false" trigger="open-modal" [breakpoints]="[0.1, 0.5, 1]" [initialBreakpoint]="0.5"
|
||||
(ionBreakpointDidChange)="onBreakpointDidChange()">
|
||||
<ng-template>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item *ngFor="let item of items">
|
||||
<ion-label>{{ item }}</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ng-template>
|
||||
</ion-modal>
|
||||
@@ -0,0 +1,28 @@
|
||||
import { AfterViewInit, Component } from "@angular/core";
|
||||
|
||||
/**
|
||||
* Validates that inline modals will correctly display
|
||||
* dynamic contents that are updated after the modal is
|
||||
* display.
|
||||
*/
|
||||
@Component({
|
||||
selector: 'app-modal-inline',
|
||||
templateUrl: 'modal-inline.component.html'
|
||||
})
|
||||
export class ModalInlineComponent implements AfterViewInit {
|
||||
|
||||
items: string[] = [];
|
||||
|
||||
breakpointDidChangeCounter = 0;
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
setTimeout(() => {
|
||||
this.items = ['A', 'B', 'C', 'D'];
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
onBreakpointDidChange() {
|
||||
this.breakpointDidChangeCounter++;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { CommonModule } from "@angular/common";
|
||||
import { NgModule } from "@angular/core";
|
||||
import { IonicModule } from "@ionic/angular";
|
||||
import { ModalInlineRoutingModule } from "./modal-inline-routing.module";
|
||||
import { ModalInlineComponent } from "./modal-inline.component";
|
||||
|
||||
@NgModule({
|
||||
imports: [CommonModule, IonicModule, ModalInlineRoutingModule],
|
||||
declarations: [ModalInlineComponent],
|
||||
exports: [ModalInlineComponent]
|
||||
})
|
||||
export class ModalInlineModule { }
|
||||
@@ -0,0 +1,17 @@
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>
|
||||
Modal test
|
||||
</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content class="ion-padding">
|
||||
<ion-button (click)="openModal()" id="action-button">Open Modal</ion-button>
|
||||
<ion-button (click)="openNav()" id="action-button-2">Open Nav in Modal</ion-button>
|
||||
<p>
|
||||
onWillDismiss: <span id="onWillDismiss">{{onWillDismiss}}</span>
|
||||
</p>
|
||||
<p>
|
||||
onDidDismiss: <span id="onDidDismiss">{{onDidDismiss}}</span>
|
||||
</p>
|
||||
</ion-content>
|
||||
49
packages/angular/test/base/src/app/modal/modal.component.ts
Normal file
49
packages/angular/test/base/src/app/modal/modal.component.ts
Normal file
@@ -0,0 +1,49 @@
|
||||
import { Component, NgZone } from '@angular/core';
|
||||
import { ModalController } from '@ionic/angular';
|
||||
import { ModalExampleComponent } from '../modal-example/modal-example.component';
|
||||
import { NavComponent } from '../nav/nav.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-modal',
|
||||
templateUrl: './modal.component.html',
|
||||
})
|
||||
export class ModalComponent {
|
||||
|
||||
onWillDismiss = false;
|
||||
onDidDismiss = false;
|
||||
|
||||
constructor(
|
||||
private modalCtrl: ModalController
|
||||
) { }
|
||||
|
||||
async openModal() {
|
||||
return this.open(ModalExampleComponent);
|
||||
}
|
||||
|
||||
async openNav() {
|
||||
return this.open(NavComponent);
|
||||
}
|
||||
|
||||
async open(TheModalComponent: any) {
|
||||
const modal = await this.modalCtrl.create({
|
||||
component: TheModalComponent,
|
||||
animated: false,
|
||||
componentProps: {
|
||||
value: '123',
|
||||
prop: '321'
|
||||
}
|
||||
});
|
||||
await modal.present();
|
||||
modal.onWillDismiss().then(() => {
|
||||
NgZone.assertInAngularZone();
|
||||
this.onWillDismiss = true;
|
||||
});
|
||||
modal.onDidDismiss().then(() => {
|
||||
NgZone.assertInAngularZone();
|
||||
if (!this.onWillDismiss) {
|
||||
throw new Error('onWillDismiss should be emitted first');
|
||||
}
|
||||
this.onDidDismiss = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<ion-nav [root]="rootPage" [rootParams]="rootParams"></ion-nav>
|
||||
20
packages/angular/test/base/src/app/nav/nav.component.ts
Normal file
20
packages/angular/test/base/src/app/nav/nav.component.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { ModalExampleComponent } from '../modal-example/modal-example.component';
|
||||
import { NavParams } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'app-nav',
|
||||
templateUrl: './nav.component.html',
|
||||
})
|
||||
export class NavComponent {
|
||||
rootPage = ModalExampleComponent;
|
||||
rootParams: any;
|
||||
|
||||
constructor(
|
||||
params: NavParams
|
||||
) {
|
||||
this.rootParams = {
|
||||
...params.data
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<p>
|
||||
navigation-page1 works!
|
||||
</p>
|
||||
@@ -0,0 +1,20 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
let count = 0;
|
||||
@Component({
|
||||
selector: 'app-navigation-page1',
|
||||
templateUrl: './navigation-page1.component.html',
|
||||
})
|
||||
export class NavigationPage1Component {
|
||||
constructor(
|
||||
private navController: NavController
|
||||
) {}
|
||||
|
||||
ionViewDidEnter() {
|
||||
if (count < 1) {
|
||||
this.navController.navigateBack('/navigation/page2');
|
||||
}
|
||||
count++;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<p>
|
||||
navigation-page2 works!
|
||||
</p>
|
||||
@@ -0,0 +1,17 @@
|
||||
import { Component } from '@angular/core';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'app-navigation-page2',
|
||||
templateUrl: './navigation-page2.component.html',
|
||||
})
|
||||
export class NavigationPage2Component {
|
||||
constructor(
|
||||
private navController: NavController
|
||||
) {}
|
||||
|
||||
ionViewDidEnter() {
|
||||
this.navController.navigateForward('/navigation/page1');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
<p>
|
||||
navigation-page3 works!
|
||||
</p>
|
||||
@@ -0,0 +1,16 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { NavController } from '@ionic/angular';
|
||||
|
||||
@Component({
|
||||
selector: 'app-navigation-page3',
|
||||
templateUrl: './navigation-page3.component.html',
|
||||
})
|
||||
export class NavigationPage3Component {
|
||||
constructor(
|
||||
private navController: NavController
|
||||
) {}
|
||||
|
||||
ionViewDidEnter() {
|
||||
this.navController.navigateRoot('/navigation/page2');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
<ion-content>
|
||||
<h1>Nested page 1</h1>
|
||||
<p>
|
||||
<ion-button routerLink="/tabs" id="goto-tabs">Go To Tabs</ion-button>
|
||||
<ion-button routerLink="/nested-outlet/page2" id="goto-nested-page2">Go To SECOND</ion-button>
|
||||
</p>
|
||||
</ion-content>
|
||||
@@ -0,0 +1,16 @@
|
||||
import { Component, NgZone, OnDestroy, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-nested-outlet-page',
|
||||
templateUrl: './nested-outlet-page.component.html',
|
||||
})
|
||||
export class NestedOutletPageComponent implements OnDestroy, OnInit {
|
||||
|
||||
ngOnInit() {
|
||||
NgZone.assertInAngularZone();
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
NgZone.assertInAngularZone();
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user