Merge pull request #15430 from IgniteUI/dpetev/control-flow-test-track-leftovers

test(*): leftover control flow for track adjustments

Author: kdinev

projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts

@@ -1224,7 +1224,7 @@ class CarouselTemplateSetInTypescriptTestComponent {
 @Component({
     template: `
         <igx-carousel #carousel [loop]="loop" [animationType]="'none'">
-            @for (slide of slides; track slide) {
+            @for (slide of slides; track slide.text) {
                 <igx-slide [active]="slide.active">
                     <igx-slide><h3>{{slide.text}}</h3></igx-slide>
                 </igx-slide>
@@ -1240,10 +1240,6 @@ class CarouselDynamicSlidesComponent {
     public slides = [];
 
     constructor() {
-        this.addNewSlide();
-    }
-
-    public addNewSlide() {
         this.slides.push(
             { text: 'Slide 1', active: false },
             { text: 'Slide 2', active: false },

projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.spec.ts

@@ -2107,13 +2107,13 @@ class TestDragDropStrategiesComponent extends TestDragDropLinkedSingleComponent
                 <igx-icon igxDragHandle>drag_indicator</igx-icon>
                 <span>Movies list</span>
             </div>
-            @for (category of categoriesNotes; track category) {
+            @for (category of categoriesNotes; track category.text) {
                 <div class="movieListItem" igxDrag [ghost]="false">
                     <div>
                         <igx-icon igxDragHandle>drag_indicator</igx-icon>
                         <span>{{category.text}}</span>
                     </div>
-                    @for (note of getCategoryMovies(category.text); track note) {
+                    @for (note of getCategoryMovies(category.text); track note.text) {
                         <div class="movieListItem" igxDrag [ghost]="false">
                             <div>
                                 <igx-icon igxDragHandle>drag_indicator</igx-icon>
@@ -2128,11 +2128,11 @@ class TestDragDropStrategiesComponent extends TestDragDropLinkedSingleComponent
     imports: [IgxIconComponent, IgxDragDirective, IgxDragHandleDirective]
 })
 class TestDragDropNestedComponent extends TestDragDropComponent {
-    public categoriesNotes = [
+    protected categoriesNotes = [
         { text: 'Action', dragged: false },
         { text: 'Fantasy', dragged: false }
     ];
-    public listNotes = [
+    protected listNotes = [
         { text: 'Avengers: Endgame', category: 'Action', dragged: false },
         { text: 'Avatar', category: 'Fantasy', dragged: false },
         { text: 'Titanic', category: 'Drama', dragged: false },
@@ -2142,7 +2142,7 @@ class TestDragDropNestedComponent extends TestDragDropComponent {
         { text: 'The Avengers', category: 'Action', dragged: false }
     ];
 
-    public getCategoryMovies(inCategory: string){
+    protected getCategoryMovies(inCategory: string){
         return this.listNotes.filter(item => item.category === inCategory);
     }
  }

projects/igniteui-angular/src/lib/select/select.component.spec.ts

@@ -3053,7 +3053,7 @@ class IgxSelectTemplateFormComponent {
                 <igx-icon>alarm</igx-icon>
             </igx-prefix>
             <igx-select-item>None</igx-select-item>
-            @for (item of items; track item) {
+            @for (item of items; track item.field) {
                 <igx-select-item [value]="item.field">
                     {{ item.field }}
                 </igx-select-item>

projects/igniteui-angular/src/lib/tabs/tabs/tabs.component.spec.ts

@@ -493,7 +493,7 @@ describe('IgxTabs', () => {
             expect(tabs.items.length).toBe(2);
             expect(tabs.selectedIndex).toBe(0);
 
-            fixture.componentInstance.addTab(3);
+            fixture.componentInstance.addTab();
             fixture.detectChanges();
             tick(100);
 

projects/igniteui-angular/src/lib/test-utils/tabs-components.spec.ts

@@ -98,7 +98,7 @@ export class TabsTestComponent {
     template: `
     <div #wrapperDiv style="display: flex;">
         <igx-tabs>
-            @for (tab of collection; track tab) {
+            @for (tab of collection; track trackByItemRef(tab)) {
                 <igx-tab-item>
                     <igx-tab-header><span igxTabHeaderLabel>{{ tab.name }}</span></igx-tab-header>
                     <igx-tab-content></igx-tab-content>
@@ -112,7 +112,7 @@ export class TabsTestComponent {
 export class TabsTest2Component {
     @ViewChild(IgxTabsComponent, { static: true }) public tabs: IgxTabsComponent;
     @ViewChild('wrapperDiv', { static: true }) public wrapperDiv: any;
-    public collection: any[];
+    protected collection: any[];
 
     constructor() {
         this.resetCollectionThreeTabs();
@@ -151,6 +151,9 @@ export class TabsTest2Component {
     public resetToEmptyCollection() {
         this.collection = [];
     }
+
+    /** Explicitly track object so collection changes entirely for index logic test */
+    protected trackByItemRef = (x: any) => x;
 }
 
 @Component({
@@ -198,7 +201,7 @@ export class TemplatedTabsTestComponent {
     template: `
     <div>
         <igx-tabs [selectedIndex]="2">
-            @for (tab of collection; track tab) {
+            @for (tab of collection; track tab.name) {
                 <igx-tab-item>
                     <igx-tab-header><span igxTabHeaderLabel>{{ tab.name }}</span></igx-tab-header>
                 </igx-tab-item>
@@ -210,7 +213,7 @@ export class TemplatedTabsTestComponent {
 })
 export class TabsTestSelectedTabComponent {
     @ViewChild(IgxTabsComponent, { static: true }) public tabs: IgxTabsComponent;
-    public collection: any[];
+    protected collection: any[];
 
     constructor() {
         this.collection =
@@ -525,7 +528,7 @@ export class TabsWithPrefixSuffixTestComponent extends TabsTestComponent {
     template: `
     <div #wrapperDiv>
         <igx-tabs>
-            @for (contact of contacts; track contact) {
+            @for (contact of contacts; track contact.Name) {
                 <igx-tab-item>
                     <igx-tab-header>
                         <span igxTabHeaderLabel>{{contact.Name}}</span>
@@ -547,7 +550,7 @@ export class TabsContactsComponent extends TabsTestComponent {
     template: `
     <div #wrapperDiv style="display: flex;">
         <igx-tabs>
-            @for (tab of collection; track tab) {
+            @for (tab of collection; track tab.name) {
                 <igx-tab-item [(selected)]="tab.selected">
                     <igx-tab-header><span igxTabHeaderLabel>{{ tab.name }}</span></igx-tab-header>
                     <igx-tab-content></igx-tab-content>
@@ -560,25 +563,25 @@ export class TabsContactsComponent extends TabsTestComponent {
 })
 export class AddingSelectedTabComponent {
     @ViewChild(IgxTabsComponent, { static: true }) public tabs: IgxTabsComponent;
-    public collection: any[];
+    protected collection: any[];
     constructor() {
         this.collection = [
             { name: 'tab1', selected: true },
             { name: 'tab2', selected: false }
         ];
     }
 
-    public addTab(num: number) {
+    public addTab() {
         this.collection.forEach(t => t.selected = false);
-        this.collection.push({ name: 'tab' + num, selected: true });
+        this.collection.push({ name: 'tab' + (this.collection.length + 1), selected: true });
     }
 }
 
 @Component({
     template: `
     <div #wrapperDiv>
         <igx-tabs>
-            @for (tab of collection; track tab) {
+            @for (tab of collection; track tab.name) {
                 <igx-tab-item>
                     <igx-tab-header><span igxTabHeaderLabel>{{ tab.name }}</span></igx-tab-header>
                     <igx-tab-content></igx-tab-content>
@@ -592,18 +595,15 @@ export class AddingSelectedTabComponent {
 export class TabsRtlComponent {
     @ViewChild(IgxTabsComponent, { static: true }) public tabs: IgxTabsComponent;
     @ViewChild('wrapperDiv', { static: true }) public wrapperDiv: any;
-    public collection: any[];
-    constructor() {
-        this.collection = [
-            { name: 'tab1', selected: true },
-            { name: 'tab2', selected: false },
-            { name: 'tab3', selected: false },
-            { name: 'tab4', selected: false },
-            { name: 'tab5', selected: false },
-            { name: 'tab6', selected: false },
-            { name: 'tab7', selected: false },
-            { name: 'tab8', selected: false },
-            { name: 'tab9', selected: false },
-        ];
-    }
+    protected collection = [
+        { name: 'tab1', selected: true },
+        { name: 'tab2', selected: false },
+        { name: 'tab3', selected: false },
+        { name: 'tab4', selected: false },
+        { name: 'tab5', selected: false },
+        { name: 'tab6', selected: false },
+        { name: 'tab7', selected: false },
+        { name: 'tab8', selected: false },
+        { name: 'tab9', selected: false },
+    ];
 }