test(angular): add support for multi-version testing (#25665)

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

@@ -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');
+  });
+});

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

@@ -0,0 +1,131 @@
+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,
+        range: 5
+      });
+    });
+
+    it('should become valid', () => {
+      cy.get('ion-input.required').invoke('prop', 'value', 'Some value');
+      testStatus('INVALID');
+
+      // TODO: FW-1160 - Remove when v7 is released
+      cy.wait(300);
+
+      cy.get('ion-select').invoke('prop', 'value', 'nes');
+      testStatus('INVALID');
+
+      cy.get('ion-range').invoke('prop', 'value', 40);
+      testStatus('VALID');
+
+      testData({
+        datetime: '2010-08-20',
+        select: 'nes',
+        toggle: false,
+        input: 'Some value',
+        input2: 'Default Value',
+        checkbox: false,
+        range: 40
+      });
+    });
+
+    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,
+        range: 5
+      });
+    });
+
+    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,
+        range: 5
+      });
+    });
+
+    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,
+        range: 5
+      });
+      cy.get('ion-checkbox').click();
+      testData({
+        datetime: '2010-08-20',
+        select: null,
+        toggle: true,
+        input: '',
+        input2: 'Default Value',
+        checkbox: true,
+        range: 5
+      });
+    });
+  });
+});
+
+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);
+  })
+}

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

@@ -0,0 +1,61 @@
+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');
+    cy.get('ion-range').should('have.prop', 'value').and('equal', 10);
+  });
+
+  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);
+    cy.get('ion-input').should('have.prop', 'value').and('equal', '');
+    cy.get('ion-datetime').should('have.prop', 'value').and('equal', '');
+    cy.get('ion-select').should('have.prop', 'value').and('equal', '');
+    cy.get('ion-range').should('have.prop', 'value').and('be.NaN');
+  });
+
+  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');
+    cy.get('ion-range').should('have.prop', 'value').and('equal', 10);
+  });
+
+  it('change values should update angular', () => {
+    cy.get('#reset-button').click();
+
+    cy.get('ion-checkbox').invoke('prop', 'checked', true);
+    cy.get('ion-toggle').invoke('prop', 'checked', true);
+    cy.get('ion-input').invoke('prop', 'value', 'hola');
+    cy.get('ion-datetime').invoke('prop', 'value', '1996-03-15');
+    cy.get('ion-select').invoke('prop', 'value', 'playstation');
+    cy.get('ion-range').invoke('prop', 'value', 20);
+
+    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', '1996-03-15');
+    cy.get('#select-note').should('have.text', 'playstation');
+    cy.get('#range-note').should('have.text', '20');
+  });
+
+  it('nested components should not interfere with NgModel', () => {
+    cy.get('#range-note').should('have.text', '10');
+    cy.get('#nested-toggle').click();
+    cy.get('#range-note').should('have.text', '10');
+  });
+})

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

@@ -0,0 +1,60 @@
+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');
+    });
+  })
+  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');
+    });
+  });
+});

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

@@ -0,0 +1,119 @@
+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('[formControlName="select"]').invoke('attr', 'value', 0);
+    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('[formControlName="select"]').invoke('attr', 'value', undefined);
+    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('[formControlName="select"]').invoke('attr', 'value', null);
+    cy.get('#inputWithFloatingLabel').should('not.have.class', 'item-has-value');
+  });
+
+});

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

@@ -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');
+  });
+})
+

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

@@ -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();
+  });
+
+});
+

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

@@ -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');
+  });
+});

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

@@ -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');
+  })
+});
+

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

@@ -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,
+  });
+}

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

@@ -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');
+  });
+})

angular/test/base/e2e/src/slides.spec.ts

@@ -0,0 +1,44 @@
+describe('Slides', () => {
+  beforeEach(() => {
+    cy.visit('/slides');
+    cy.wait(30);
+  })
+
+  it('should change index on slide change', () => {
+    cy.get('ion-slide').should('have.length', 0);
+
+    cy.get('#add-slides').click();
+
+    cy.get('ion-slide').should('have.length', 3);
+
+    // Should be on the first slide
+    checkIndex('0');
+
+    // Swipe to the second slide
+    nextSlide();
+    checkIndex('1');
+
+    // Swipe to the third slide
+    nextSlide();
+    checkIndex('2');
+
+    // Go back to the second slide
+    prevSlide();
+    checkIndex('1');
+  });
+});
+
+function checkIndex(index) {
+  cy.get('#slide-index').should('have.text', index);
+  cy.get('#slide-index-2').should('have.text', index);
+}
+
+function nextSlide() {
+  cy.get('#btn-next').click();
+  cy.wait(800);
+}
+
+function prevSlide() {
+  cy.get('#btn-prev').click();
+  cy.wait(800);
+}

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

@@ -0,0 +1,353 @@
+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();
+      testTabTitle('Tab 1 - Page 2 (1)');
+
+      cy.get('#goto-next').click();
+      testTabTitle('Tab 1 - Page 2 (2)');
+
+      cy.get('#tab-button-contact').click();
+      testTabTitle('Tab 2 - Page 1');
+
+      cy.get('#tab-button-account').click();
+      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();
+      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();
+      tab = testTabTitle('Tab 1 - Page 2 (1)');
+
+      tab.find('#goto-next').click();
+      testTabTitle('Tab 1 - Page 2 (2)');
+
+      cy.ionTabClick('Tab Two');
+      testTabTitle('Tab 2 - Page 1');
+
+      cy.ionTabClick('Tab One');
+      testTabTitle('Tab 1 - Page 2 (2)');
+
+      cy.ionTabClick('Tab One');
+      testTabTitle('Tab 1 - Page 1');
+
+      testUrlContains(rootUrl);
+    });
+  })
+
+  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');
+    });
+  })
+})
+
+
+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);
+}

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

@@ -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');
+  });
+});
+

angular/test/base/e2e/src/virtual-scroll.spec.ts

@@ -0,0 +1,11 @@
+describe('Virtual Scroll', () => {
+  beforeEach(() => {
+    cy.visit('/virtual-scroll');
+    cy.wait(30);
+  })
+
+  it('should open virtual-scroll', () => {
+    cy.get('ion-virtual-scroll > *').its('length').should('be.gt', 0);
+  });
+});
+