From 1e85f172f9700741bb482ebe293421c0f16b2f69 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 10 Apr 2023 16:00:29 -0400
Subject: [PATCH] chore(angular): test apps use modern label syntax (#27154)

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- 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 test apps use the legacy label syntax for the e2e test
templates.

<!-- Issues are required for both bug fixes and features. -->
Issue URL: N/A


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

- Updates the test templates for the Angular test apps to use the modern
syntax available in Ionic v7.

## 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. -->
---
 .../form-controls/range/range.component.html  |  5 +--
 .../base/src/app/form/form.component.html     | 24 +++++++-------
 .../base/src/app/inputs/inputs.component.html | 32 +++++++++----------
 .../app/searchbar/searchbar.component.html    |  2 +-
 4 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/angular/test/base/src/app/form-controls/range/range.component.html b/angular/test/base/src/app/form-controls/range/range.component.html
index 91c7df9d62..2dab1a129c 100644
--- a/angular/test/base/src/app/form-controls/range/range.component.html
+++ b/angular/test/base/src/app/form-controls/range/range.component.html
@@ -7,8 +7,9 @@
   <form [formGroup]="form">
     <ion-list>
       <ion-item>
-        <ion-label>Range</ion-label>
-        <ion-range formControlName="range" min="0" max="20"></ion-range>
+        <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>
diff --git a/angular/test/base/src/app/form/form.component.html b/angular/test/base/src/app/form/form.component.html
index 5204d60dfa..4ba9b9621f 100644
--- a/angular/test/base/src/app/form/form.component.html
+++ b/angular/test/base/src/app/form/form.component.html
@@ -17,8 +17,7 @@
       </ion-item>
 
       <ion-item>
-        <ion-label>Select</ion-label>
-        <ion-select formControlName="select">
+        <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>
@@ -30,25 +29,25 @@
       </ion-item>
 
       <ion-item>
-        <ion-label>Toggle</ion-label>
-        <ion-toggle formControlName="toggle" slot="end"></ion-toggle>
+        <ion-toggle formControlName="toggle">
+          Toggle
+        </ion-toggle>
       </ion-item>
 
       <ion-item>
-        <ion-label>Input (required)</ion-label>
-        <ion-input formControlName="input" class="required" id="touched-input-test"></ion-input>
+        <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-label>Input</ion-label>
-        <ion-input formControlName="input2"></ion-input>
+        <ion-input label="Input" formControlName="input2"></ion-input>
       </ion-item>
 
       <ion-item>
-        <ion-label>Checkbox</ion-label>
-        <ion-checkbox formControlName="checkbox" slot="start"></ion-checkbox>
+        <ion-checkbox formControlName="checkbox">
+          Checkbox
+        </ion-checkbox>
       </ion-item>
 
     </ion-list>
@@ -67,8 +66,9 @@
   </form>
   <ion-list>
     <ion-item>
-      <ion-label>Outside form</ion-label>
-      <ion-toggle [formControl]="outsideToggle"></ion-toggle>
+      <ion-toggle [formControl]="outsideToggle">
+        Outside form
+      </ion-toggle>
       <ion-note slot="end">{{outsideToggle.value}}</ion-note>
     </ion-item>
   </ion-list>
diff --git a/angular/test/base/src/app/inputs/inputs.component.html b/angular/test/base/src/app/inputs/inputs.component.html
index 65391e5731..ea19d0c77e 100644
--- a/angular/test/base/src/app/inputs/inputs.component.html
+++ b/angular/test/base/src/app/inputs/inputs.component.html
@@ -22,8 +22,7 @@
     </ion-item>
 
     <ion-item>
-      <ion-label>Select</ion-label>
-      <ion-select [(ngModel)]="select" id="game-console">
+      <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>
@@ -36,8 +35,7 @@
     </ion-item>
 
     <ion-item color="dark">
-      <ion-label>Select Mirror</ion-label>
-      <ion-select [(ngModel)]="select">
+      <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>
@@ -50,38 +48,40 @@
     </ion-item>
 
     <ion-item>
-      <ion-label>Toggle</ion-label>
-      <ion-toggle [(ngModel)]="toggle" slot="end"></ion-toggle>
+      <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-label>Toggle Mirror</ion-label>
-      <ion-toggle [(ngModel)]="toggle" slot="end"></ion-toggle>
+      <ion-toggle [(ngModel)]="toggle" slot="end">
+        Toggle Mirror
+      </ion-toggle>
       <ion-note slot="end">{{toggle}}</ion-note>
     </ion-item>
 
     <ion-item>
-      <ion-label>Input</ion-label>
-      <ion-input [(ngModel)]="input"></ion-input>
+      <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-label>Input Mirror</ion-label>
-      <ion-input [(ngModel)]="input"></ion-input>
+      <ion-input label="Input Mirror" [(ngModel)]="input"></ion-input>
       <ion-note slot="end">{{input}}</ion-note>
     </ion-item>
 
     <ion-item>
-      <ion-label>Checkbox</ion-label>
-      <ion-checkbox [(ngModel)]="checkbox" slot="start" id="first-checkbox"></ion-checkbox>
+      <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-label>Checkbox Mirror</ion-label>
-      <ion-checkbox [(ngModel)]="checkbox" slot="start"></ion-checkbox>
+      <ion-checkbox [(ngModel)]="checkbox" slot="start">
+        Checkbox Mirror
+      </ion-checkbox>
       <ion-note slot="end">{{checkbox}}</ion-note>
     </ion-item>
 
diff --git a/angular/test/base/src/app/searchbar/searchbar.component.html b/angular/test/base/src/app/searchbar/searchbar.component.html
index 52ce6106d1..7dde40195c 100644
--- a/angular/test/base/src/app/searchbar/searchbar.component.html
+++ b/angular/test/base/src/app/searchbar/searchbar.component.html
@@ -13,4 +13,4 @@
   <p>
     Form value: <span id="value">{{ form.value | json }}</span>
   </p>
-</ion-content>
\ No newline at end of file
+</ion-content>