test(angular): add test for dynamic slides (#17167)

angular/test/test-app/e2e/src/slides.e2e-spec.ts

@@ -11,6 +11,10 @@ describe('slides', () => {
   });
 
   it('should change index on slide change', async () => {
+    expect(await element.all(by.css('ion-slide')).count()).toEqual(0);
+    await addSlides();
+    expect(await element.all(by.css('ion-slide')).count()).toEqual(3);
+
     await checkIndex('0');
 
     await nextSlide();
@@ -29,6 +33,12 @@ async function checkIndex(index: string) {
   expect(await element(by.css('#slide-index-2')).getText()).toEqual(index);
 }
 
+async function addSlides() {
+  await element(by.css('#add-slides')).click();
+  await waitTime(800);
+}
+
+
 async function nextSlide() {
   await element(by.css('#btn-next')).click();
   await waitTime(800);
@@ -37,4 +47,4 @@ async function nextSlide() {
 async function prevSlide() {
   await element(by.css('#btn-prev')).click();
   await waitTime(800);
-}
+}

angular/test/test-app/src/app/slides/slides.component.html

@@ -8,17 +8,10 @@
 <ion-content>
   <ion-slides pager="true" (ionSlideDidChange)="checkIndex()">
 
-    <ion-slide>
-      <h1>Slide 1</h1>
+    <ion-slide *ngFor="let text of slidesData">
+      <h1>{{text}}</h1>
     </ion-slide>
 
-    <ion-slide>
-      <h1>Slide 2</h1>
-    </ion-slide>
-
-    <ion-slide>
-      <h1>Slide 3</h1>
-    </ion-slide>
   </ion-slides>
 
   <p>
@@ -26,6 +19,9 @@
     index2: <span id="slide-index-2">{{slideIndex2}}</span>
   </p>
 
+  <ion-button id="add-slides" (click)="addSlides()">
+    Add Slides
+  </ion-button>
   <ion-button id="btn-prev" (click)="prevSlide()">
     Prev Slide
   </ion-button>

angular/test/test-app/src/app/slides/slides.component.ts

@@ -10,6 +10,7 @@ export class SlidesComponent implements AfterViewInit {
 
   slideIndex = 0;
   slideIndex2 = 0;
+  slidesData = [];
 
   constructor() { }
 
@@ -19,6 +20,11 @@ export class SlidesComponent implements AfterViewInit {
     });
   }
 
+  addSlides() {
+    const start = this.slidesData.length + 1;
+    this.slidesData.push(`Slide ${start}`, `Slide ${start + 1}`, `Slide ${start + 2}`);
+  }
+
   prevSlide() {
     this.slides.slidePrev();
   }