test(angular): add queryparam and fragment tests (#18372)

* add queryparam and fragment tests

* reorder imports

angular/test/test-app/angular.json

@@ -20,7 +20,16 @@
             "tsConfig": "src/tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "assets"
+              },
+              {
+                "glob": "**/*.svg",
+                "input": "node_modules/ionicons/dist/ionicons/svg",
+                "output": "./svg"
+              }
             ],
             "styles": [
               "src/styles.css"

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

@@ -1,5 +1,49 @@
-import { browser, element, by } from 'protractor';
+import { browser, element, by, protractor } from 'protractor';
 import { waitTime, testStack, testLifeCycle, handleErrorMessages } from './utils';
+import { HttpUrlEncodingCodec } from '@angular/common/http';
+
+const EC = protractor.ExpectedConditions;
+
+describe('router-link params and fragments', () => {
+  const queryParam = 'A&=#Y';
+  const fragment = 'myDiv1';
+  const id = 'MyPageID==';
+  
+  afterEach(() => {
+    handleErrorMessages();
+  });
+  
+  it('should go to a page with properly encoded values', async () => {
+    await browser.get('/router-link?ionic:_testing=true');
+    await element(by.css('#queryParamsFragment')).click();
+    
+    const expectedRoute = `${encodeURIComponent(id)}?token=${encodeURIComponent(queryParam)}#${encodeURIComponent(fragment)}`;
+
+    browser.wait(EC.urlContains(expectedRoute), 5000);
+  });
+  
+  it('should return to a page with preserved query param and fragment', async () => {
+    await browser.get('/router-link?ionic:_testing=true');
+    await element(by.css('#queryParamsFragment')).click();
+    await element(by.css('#goToPage3')).click(); 
+    
+    browser.wait(EC.urlContains('router-link-page3'), 5000);
+    
+    await element(by.css('#goBackFromPage3')).click(); 
+    
+    const expectedRoute = `${encodeURIComponent(id)}?token=${encodeURIComponent(queryParam)}#${encodeURIComponent(fragment)}`;
+    browser.wait(EC.urlContains(expectedRoute), 5000);
+  });
+  
+  it('should preserve query param and fragment with defaultHref string', async () => {
+    await browser.get('/router-link-page3?ionic:_testing=true');
+    
+    await element(by.css('#goBackFromPage3')).click();
+
+    const expectedRoute = '?token=ABC#fragment';
+    browser.wait(EC.urlContains(expectedRoute), 5000);
+  });
+});
 
 describe('router-link', () => {
 

angular/test/test-app/src/app/app-routing.module.ts

@@ -4,6 +4,8 @@ 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 { TabsComponent } from './tabs/tabs.component';
 import { TabsTab1Component } from './tabs-tab1/tabs-tab1.component';
@@ -31,6 +33,8 @@ const routes: Routes = [
   { 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: 'slides', component: SlidesComponent },
   { path: 'virtual-scroll', component: VirtualScrollComponent },
   { path: 'virtual-scroll-detail/:itemId', component: VirtualScrollDetailComponent },

angular/test/test-app/src/app/app.module.ts

@@ -11,6 +11,8 @@ 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 { TabsComponent } from './tabs/tabs.component';
 import { TabsTab1Component } from './tabs-tab1/tabs-tab1.component';
@@ -39,6 +41,8 @@ import { NavigationPage3Component } from './navigation-page3/navigation-page3.co
     ModalExampleComponent,
     RouterLinkComponent,
     RouterLinkPageComponent,
+    RouterLinkPage2Component,
+    RouterLinkPage3Component,
     HomePageComponent,
     TabsComponent,
     TabsTab1Component,

angular/test/test-app/src/app/router-link-page2/router-link-page2.component.html

@@ -0,0 +1,12 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+    <ion-title>Router Page 2</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  <ion-button routerLink="/router-link-page3" id="goToPage3">Go to Page 3</ion-button>
+</ion-content>

angular/test/test-app/src/app/router-link-page2/router-link-page2.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-router-link-page2',
+  templateUrl: './router-link-page2.component.html'
+})
+export class RouterLinkPage2Component implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

angular/test/test-app/src/app/router-link-page3/router-link-page3.component.html

@@ -0,0 +1,12 @@
+<ion-header>
+  <ion-toolbar color="dark">
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="/?token=ABC#fragment" id="goBackFromPage3"></ion-back-button>
+    </ion-buttons>
+    <ion-title>Router Page 3</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content padding>
+  Page 3
+</ion-content>

angular/test/test-app/src/app/router-link-page3/router-link-page3.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-router-link-page3',
+  templateUrl: './router-link-page3.component.html'
+})
+export class RouterLinkPage3Component implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

angular/test/test-app/src/app/router-link/router-link.component.html

@@ -26,5 +26,7 @@
   <p><button (click)="navigateForward()" id="button-forward">navigateForward</button></p>
   <p><button (click)="navigateRoot()" id="button-root">navigateForward</button></p>
   <p><button (click)="navigateBack()" id="button-back">navigateBack</button></p>
-
+  
+  <p><button id="queryParamsFragment" routerLink="/router-link-page2/MyPageID==" [queryParams]="{ token: 'A&=#Y' }" fragment="myDiv1">Query Params and Fragment</button></p>
+  
 </ion-content>