test(angular): update test app to account for standalone components

packages/angular/test/README.md

@@ -65,6 +65,14 @@ If you want to add a version-specific change, add the change inside of the appro
 
 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.
 
+### Testing Lazy Loaded Ionic Components
+
+Tests for lazy loaded Ionic UI components should only be added under the `/lazy` route. This ensures the `IonicModule` is added.
+
+### Testing Standalone Ionic Components
+
+Tests for standalone Ionic UI components should only be added under the `/standalone` route. This allows for an isolated environment where the lazy loaded `IonicModule` is not initialized. The standalone components use Stencil's custom element bundle instead of the lazy loaded bundle. If `IonicModule` is initialized then the Stencil components will fall back to using the lazy loaded implementation instead of the custom elements bundle implementation.
+
 ## 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:

packages/angular/test/apps/ng14/e2e/src/angular-version.spec.ts

@@ -1,5 +1,5 @@
 it("should be on Angular 14", () => {
-  cy.visit('/');
+  cy.visit('/lazy');
 
   cy.get('ion-title').contains('Angular 14');
 });

packages/angular/test/apps/ng15/e2e/src/angular-version.spec.ts

@@ -1,5 +1,5 @@
 it("should be on Angular 15", () => {
-  cy.visit('/');
+  cy.visit('/lazy');
 
   cy.get('ion-title').contains('Angular 15');
 });

packages/angular/test/apps/ng16/e2e/src/angular-version.spec.ts

@@ -1,5 +1,5 @@
 it("should be on Angular 16", () => {
-  cy.visit('/');
+  cy.visit('/lazy');
 
   cy.get('ion-title').contains('Angular 16');
 });

packages/angular/test/apps/ng16/e2e/src/bind-component-inputs.spec.ts

@@ -1,5 +1,5 @@
 it("binding route data to inputs should work", () => {
-  cy.visit('/version-test/bind-route/test?query=test');
+  cy.visit('/lazy/version-test/bind-route/test?query=test');
 
   cy.get('#route-params').contains('test');
   cy.get('#query-params').contains('test');

packages/angular/test/apps/ng16/e2e/src/modal-nav-params.spec.ts

@@ -1,7 +1,7 @@
 describe('Modal Nav Params', () => {
 
   beforeEach(() => {
-    cy.visit('/version-test/modal-nav-params');
+    cy.visit('/lazy/version-test/modal-nav-params');
   });
 
   it('should assign the rootParams when presented in a modal multiple times', () => {

packages/angular/test/base/e2e/src/accordion.spec.ts

@@ -1,6 +1,6 @@
 describe('Accordion', () => {
   beforeEach(() => {
-    cy.visit('/accordions');
+    cy.visit('/lazy/accordions');
   });
 
   it('should correctly expand on multiple modal opens', () => {

packages/angular/test/base/e2e/src/form-controls/range.spec.ts

@@ -1,7 +1,7 @@
 describe('Form Controls: Range', () => {
 
   beforeEach(() => {
-    cy.visit('/form-controls/range');
+    cy.visit('/lazy/form-controls/range');
   });
 
   it('should have form control initial value', () => {

packages/angular/test/base/e2e/src/form.spec.ts

@@ -1,6 +1,6 @@
 describe('Form', () => {
   beforeEach(() => {
-    cy.visit('/form');
+    cy.visit('/lazy/form');
   })
 
   describe('status updates', () => {

packages/angular/test/base/e2e/src/inline-overlays.spec.ts

@@ -1,6 +1,6 @@
 describe('Overlays: Inline', () => {
   beforeEach(() => {
-    cy.visit('/overlays-inline');
+    cy.visit('/lazy/overlays-inline');
   });
 
   describe('Alert', () => {

packages/angular/test/base/e2e/src/inputs.spec.ts

@@ -1,6 +1,6 @@
 describe('Inputs', () => {
   beforeEach(() => {
-    cy.visit('/inputs');
+    cy.visit('/lazy/inputs');
   })
 
   it('should have default value', () => {

packages/angular/test/base/e2e/src/keep-contents-mounted.spec.ts

@@ -1,19 +1,19 @@
 describe('overlays - keepContentsMounted', () => {
   describe('modal', () => {
     it('should not mount component if false', () => {
-      cy.visit('/modal-inline');
+      cy.visit('/lazy/modal-inline');
 
       cy.get('ion-modal ion-content').should('not.exist');
     });
 
     it('should mount component if true', () => {
-      cy.visit('/keep-contents-mounted');
+      cy.visit('/lazy/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.visit('/lazy/keep-contents-mounted');
 
       cy.get('#open-modal').click();
 
@@ -29,26 +29,26 @@ describe('overlays - keepContentsMounted', () => {
     });
 
     it('should has ion-delegate-host on mount', () => {
-      cy.visit('/keep-contents-mounted');
+      cy.visit('/lazy/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.visit('/lazy/popover-inline');
 
       cy.get('ion-popover ion-content').should('not.exist');
     });
 
     it('should mount component if true', () => {
-      cy.visit('/keep-contents-mounted');
+      cy.visit('/lazy/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.visit('/lazy/keep-contents-mounted');
 
       cy.get('#open-popover').click();
 

packages/angular/test/base/e2e/src/modal.spec.ts

@@ -1,6 +1,6 @@
 describe('Modals', () => {
   beforeEach(() => {
-    cy.visit('/modals');
+    cy.visit('/lazy/modals');
   })
 
   it('should open standalone modal and close', () => {
@@ -45,7 +45,7 @@ describe('Modals', () => {
 
 describe('Modals: Inline', () => {
   beforeEach(() => {
-    cy.visit('/modal-inline');
+    cy.visit('/lazy/modal-inline');
   });
 
   it('should initially have no items', () => {
@@ -95,7 +95,7 @@ describe('Modals: Inline', () => {
 describe('when in a modal', () => {
 
   beforeEach(() => {
-    cy.visit('/modals');
+    cy.visit('/lazy/modals');
     cy.get('#action-button').click();
     cy.get('#close-modal').click();
     cy.get('#action-button').click();

packages/angular/test/base/e2e/src/navigation.spec.ts

@@ -1,10 +1,10 @@
 describe('Navigation', () => {
   beforeEach(() => {
-    cy.visit('/navigation');
+    cy.visit('/lazy/navigation');
   })
 
   it('should navigate correctly', () => {
-    cy.visit('/navigation/page1');
+    cy.visit('/lazy/navigation/page1');
     cy.wait(2000);
     cy.testStack('ion-router-outlet', ['app-navigation-page2', 'app-navigation-page1']);
 

packages/angular/test/base/e2e/src/nested-outlet.spec.ts

@@ -1,6 +1,6 @@
 describe('Nested Outlet', () => {
   beforeEach(() => {
-    cy.visit('/nested-outlet/page');
+    cy.visit('/lazy/nested-outlet/page');
   })
 
   it('should navigate correctly', () => {

packages/angular/test/base/e2e/src/popover.spec.ts

@@ -1,6 +1,6 @@
 describe('Popovers: Inline', () => {
   beforeEach(() => {
-    cy.visit('/popover-inline');
+    cy.visit('/lazy/popover-inline');
   });
 
   it('should initially have no items', () => {

packages/angular/test/base/e2e/src/providers.spec.ts

@@ -1,6 +1,6 @@
 describe('Providers', () => {
   beforeEach(() => {
-    cy.visit('/providers');
+    cy.visit('/lazy/providers');
   })
 
   it('should load all providers', () => {
@@ -17,13 +17,13 @@ describe('Providers', () => {
   });
 
   it('should detect testing mode', () => {
-    cy.visit('/providers?ionic:_testing=true');
+    cy.visit('/lazy/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.visit('/lazy/providers?firstParam=abc&secondParam=true');
 
     cy.get('#query-params').should('have.text', 'firstParam: abc, firstParam: true');
   })

packages/angular/test/base/e2e/src/router-link.spec.ts

@@ -1,6 +1,6 @@
 describe('Router Link', () => {
   beforeEach(() => {
-    cy.visit('/router-link');
+    cy.visit('/lazy/router-link');
   });
 
   describe('router-link params and fragments', () => {
@@ -9,7 +9,7 @@ describe('Router Link', () => {
     const id = 'MyPageID==';
 
     it('should go to a page with properly encoded values', () => {
-      cy.visit('/router-link?ionic:_testing=true');
+      cy.visit('/lazy/router-link?ionic:_testing=true');
       cy.get('#queryParamsFragment').click();
 
       const expectedPath = `${encodeURIComponent(id)}`;
@@ -24,7 +24,7 @@ describe('Router Link', () => {
     });
 
     it('should return to a page with preserved query param and fragment', () => {
-      cy.visit('/router-link?ionic:_testing=true');
+      cy.visit('/lazy/router-link?ionic:_testing=true');
       cy.get('#queryParamsFragment').click();
       cy.get('#goToPage3').click();
 
@@ -46,7 +46,7 @@ describe('Router Link', () => {
     });
 
     it('should preserve query param and fragment with defaultHref string', () => {
-      cy.visit('/router-link-page3?ionic:_testing=true');
+      cy.visit('/lazy/router-link-page3?ionic:_testing=true');
 
       cy.get('#goBackFromPage3').click();
 

packages/angular/test/base/e2e/src/routing.spec.ts

@@ -1,6 +1,6 @@
 describe('Routing', () => {
   beforeEach(() => {
-    cy.visit('/router-link?ionic:mode=ios');
+    cy.visit('/lazy/router-link?ionic:mode=ios');
   })
 
   it('should swipe and abort', () => {

packages/angular/test/base/e2e/src/searchbar.spec.ts

@@ -1,5 +1,5 @@
 describe('Searchbar', () => {
-  beforeEach(() => cy.visit('/searchbar'));
+  beforeEach(() => cy.visit('/lazy/searchbar'));
 
   it('should become valid', () => {
     cy.get('#status').should('have.text', 'INVALID');

packages/angular/test/base/e2e/src/standalone-routing.spec.ts

@@ -1,6 +1,6 @@
 describe('Routing with Standalone Components', () => {
   beforeEach(() => {
-    cy.visit('/standalone');
+    cy.visit('/lazy/standalone');
   });
 
   it('should render the component', () => {

packages/angular/test/base/e2e/src/tabs.spec.ts

@@ -1,6 +1,6 @@
 describe('Tabs', () => {
   beforeEach(() => {
-    cy.visit('/tabs');
+    cy.visit('/lazy/tabs');
   })
 
   describe('entry url - /tabs', () => {
@@ -214,7 +214,7 @@ describe('Tabs', () => {
   describe('entry tab contains navigation extras', () => {
     const expectNestedTabUrlToContain = 'search=hello#fragment';
     const rootUrlParams = 'test=123#rootFragment';
-    const rootUrl = `/tabs/account?${rootUrlParams}`;
+    const rootUrl = `/lazy/tabs/account?${rootUrlParams}`;
 
     beforeEach(() => {
       cy.visit(rootUrl);
@@ -288,7 +288,7 @@ describe('Tabs', () => {
 
   describe('entry url - /tabs/account', () => {
     beforeEach(() => {
-      cy.visit('/tabs/account');
+      cy.visit('/lazy/tabs/account');
     });
     it('should pop to previous view when leaving tabs outlet', () => {
 
@@ -322,7 +322,7 @@ describe('Tabs', () => {
 
   describe('entry url - /', () => {
     it('should pop to the root outlet from the tabs outlet', () => {
-      cy.visit('/');
+      cy.visit('/lazy/');
 
       cy.get('ion-title').should('contain.text', 'Test App');
 
@@ -356,7 +356,7 @@ describe('Tabs', () => {
 
   describe('entry url - /tabs/account/nested/1', () => {
     beforeEach(() => {
-      cy.visit('/tabs/account/nested/1');
+      cy.visit('/lazy/tabs/account/nested/1');
     })
 
     it('should only display the back-button when there is a page in the stack', () => {
@@ -401,7 +401,7 @@ describe('Tabs', () => {
 
   describe('entry url - /tabs/lazy', () => {
     beforeEach(() => {
-      cy.visit('/tabs/lazy');
+      cy.visit('/lazy/tabs/lazy');
     });
 
     it('should not display the back-button if coming from a different stack', () => {
@@ -419,7 +419,7 @@ describe('Tabs', () => {
 
   describe('enter url - /tabs/contact/one', () => {
     beforeEach(() => {
-      cy.visit('/tabs/contact/one');
+      cy.visit('/lazy/tabs/contact/one');
     });
 
     it('should return to correct tab after going to page in different outlet', () => {
@@ -436,7 +436,7 @@ describe('Tabs', () => {
 })
 
 it('Tabs should support conditional slots', () => {
-  cy.visit('/tabs-slots');
+  cy.visit('/lazy/tabs-slots');
 
   cy.get('ion-tabs .tabs-inner + ion-tab-bar').should('have.length', 1);
 

packages/angular/test/base/e2e/src/textarea.spec.ts

@@ -1,5 +1,5 @@
 describe('Textarea', () => {
-  beforeEach(() => cy.visit('/textarea'));
+  beforeEach(() => cy.visit('/lazy/textarea'));
 
   it('should become valid', () => {
     cy.get('#status').should('have.text', 'INVALID');

packages/angular/test/base/e2e/src/view-child.spec.ts

@@ -1,6 +1,6 @@
 describe('View Child', () => {
   beforeEach(() => {
-    cy.visit('/view-child');
+    cy.visit('/lazy/view-child');
   })
 
   it('should get a reference to all children', () => {

packages/angular/test/base/src/app/app-lazy/app-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { routes } from './app.routes';
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

packages/angular/test/base/src/app/app-lazy/app.component.html

@@ -0,0 +1,3 @@
+<ion-app>
+  <ion-router-outlet></ion-router-outlet>
+</ion-app>

packages/angular/test/base/src/app/app-lazy/app.component.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html'
+})
+export class AppComponent {
+}