Merge branch 'master' into mkirova/grid-master-detail

Author: kdinev

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

@@ -4,7 +4,8 @@ import {
     TestBed,
     ComponentFixture,
     fakeAsync,
-    tick
+    tick,
+    flush
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import {
@@ -19,6 +20,8 @@ import { configureTestSuite } from '../test-utils/configure-suite';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxSlideComponent } from './slide.component';
 
+declare var Simulator: any;
+
 describe('Carousel', () => {
     configureTestSuite();
     let fixture;
@@ -427,7 +430,7 @@ describe('Carousel', () => {
             expect(carousel.onSlideChanged.emit).toHaveBeenCalledTimes(1);
         });
 
-        it('should stop/play on mouse enter/leave and on tab key', () => {
+        it('should stop/play on mouse enter/leave ', () => {
             carousel.interval = 1000;
             carousel.play();
             fixture.detectChanges();
@@ -450,17 +453,64 @@ describe('Carousel', () => {
             expect(carousel.onCarouselPlaying.emit).toHaveBeenCalledTimes(1);
             expect(carousel.onCarouselPaused.emit).toHaveBeenCalledTimes(1);
 
-            UIInteractions.triggerKeyDownEvtUponElem('Tab', carousel.nativeElement, true);
+            // When the carousel is stopped mouseleave does not start playing
+            carousel.stop();
             fixture.detectChanges();
 
             expect(carousel.isPlaying).toBeFalsy();
+            expect(carousel.onCarouselPlaying.emit).toHaveBeenCalledTimes(1);
             expect(carousel.onCarouselPaused.emit).toHaveBeenCalledTimes(2);
 
-            UIInteractions.triggerKeyDownEvtUponElem('Tab', carousel.nativeElement, true);
+            UIInteractions.hoverElement(carousel.nativeElement, true);
             fixture.detectChanges();
+
+            expect(carousel.isPlaying).toBeFalsy();
+
+            UIInteractions.unhoverElement(carousel.nativeElement, true);
+            fixture.detectChanges();
+            expect(carousel.isPlaying).toBeFalsy();
+            expect(carousel.onCarouselPlaying.emit).toHaveBeenCalledTimes(1);
+        });
+
+        it('should stop/play on tap ', async () => {
+            carousel.interval = 1000;
+            carousel.play();
+            fixture.detectChanges();
+
+            spyOn(carousel.onCarouselPaused, 'emit');
+            spyOn(carousel.onCarouselPlaying, 'emit');
+
             expect(carousel.isPlaying).toBeTruthy();
-            expect(carousel.onCarouselPlaying.emit).toHaveBeenCalledTimes(2);
-            expect(carousel.onCarouselPaused.emit).toHaveBeenCalledTimes(2);
+
+            Simulator.gestures.press(carousel.nativeElement, { duration: 180 });
+            fixture.detectChanges();
+            await wait(200);
+
+            expect(carousel.isPlaying).toBeFalsy();
+
+            Simulator.gestures.press(carousel.nativeElement, { duration: 180 });
+            fixture.detectChanges();
+            await wait(200);
+
+            expect(carousel.isPlaying).toBeTruthy();
+
+            // When the carousel is stopped tap does not start playing
+            carousel.stop();
+            fixture.detectChanges();
+
+            expect(carousel.isPlaying).toBeFalsy();
+
+            Simulator.gestures.press(carousel.nativeElement, { duration: 180 });
+            fixture.detectChanges();
+            await wait(200);
+
+            expect(carousel.isPlaying).toBeFalsy();
+
+            Simulator.gestures.press(carousel.nativeElement, { duration: 180 });
+            fixture.detectChanges();
+            await wait(200);
+
+            expect(carousel.isPlaying).toBeFalsy();
         });
     });
 
@@ -601,19 +651,19 @@ describe('Carousel', () => {
             HelperTestFunctions.verifyActiveSlide(carousel, 0);
         }));
 
-        it('should add slides to the carousel when collection is changed',  fakeAsync(() => {
+        it('should add slides to the carousel when collection is changed', fakeAsync(() => {
             tick();
             spyOn(carousel.onSlideAdded, 'emit');
 
             // add a slide
-            slides.push({text: 'Slide 5'});
+            slides.push({ text: 'Slide 5' });
             fixture.detectChanges();
 
             HelperTestFunctions.verifyActiveSlide(carousel, 2);
             expect(carousel.total).toEqual(5);
 
             // add an active slide
-            slides.push({text: 'Slide 6', active: true});
+            slides.push({ text: 'Slide 6', active: true });
             fixture.detectChanges();
             tick(100);
 
@@ -623,7 +673,7 @@ describe('Carousel', () => {
             expect(carousel.onSlideAdded.emit).toHaveBeenCalledTimes(2);
         }));
 
-        it('should remove slides in the carousel',  fakeAsync(() => {
+        it('should remove slides in the carousel', fakeAsync(() => {
             tick();
             spyOn(carousel.onSlideRemoved, 'emit');
 
@@ -646,7 +696,7 @@ describe('Carousel', () => {
             expect(carousel.onSlideRemoved.emit).toHaveBeenCalledTimes(2);
         }));
 
-        it('should not render navigation buttons and indicators when carousel does not have slides',  fakeAsync(() => {
+        it('should not render navigation buttons and indicators when carousel does not have slides', fakeAsync(() => {
             fixture.componentInstance.removeAllSlides();
             fixture.detectChanges();
             tick(200);
@@ -657,13 +707,13 @@ describe('Carousel', () => {
             expect(HelperTestFunctions.getNextButton(fixture).hidden).toBeTruthy();
             expect(HelperTestFunctions.getPreviousButton(fixture).hidden).toBeTruthy();
 
-             // add a slide
-             fixture.componentInstance.addSlides();
-             fixture.detectChanges();
-             tick(200);
+            // add a slide
+            fixture.componentInstance.addSlides();
+            fixture.detectChanges();
+            tick(200);
 
-             expect(carousel.total).toEqual(2);
-             expect(HelperTestFunctions.getIndicatorsContainer(fixture)).toBeDefined();
+            expect(carousel.total).toEqual(2);
+            expect(HelperTestFunctions.getIndicatorsContainer(fixture)).toBeDefined();
             expect(HelperTestFunctions.getIndicatorsContainer(fixture, CarouselIndicatorsOrientation.top)).toBeDefined();
             expect(HelperTestFunctions.getNextButton(fixture).hidden).toBeFalsy();
             expect(HelperTestFunctions.getPreviousButton(fixture).hidden).toBeFalsy();
@@ -824,10 +874,10 @@ class CarouselDynamicSlidesComponent {
 
     addNewSlide() {
         this.slides.push(
-            {text: 'Slide 1', active: false},
-            {text: 'Slide 2', active: false},
-            {text: 'Slide 3', active: true},
-            {text: 'Slide 4', active: false}
+            { text: 'Slide 1', active: false },
+            { text: 'Slide 2', active: false },
+            { text: 'Slide 3', active: true },
+            { text: 'Slide 4', active: false }
         );
     }
 
@@ -837,8 +887,8 @@ class CarouselDynamicSlidesComponent {
 
     public addSlides() {
         this.slides.push(
-            {text: 'Slide 1'},
-            {text: 'Slide 2'}
+            { text: 'Slide 1' },
+            { text: 'Slide 2' }
         );
     }
 }

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

@@ -176,7 +176,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
      */
     set interval(value: number) {
         this._interval = +value;
-        this._restartInterval();
+        this.restartInterval();
     }
 
     /**
@@ -333,20 +333,21 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
     @Output() public onCarouselPlaying = new EventEmitter<IgxCarouselComponent>();
 
     private _interval: number;
-    private _lastInterval: any;
-    private _playing: boolean;
-    private _destroyed: boolean;
     private _resourceStrings = CurrentResourceStrings.CarouselResStrings;
+    private lastInterval: any;
+    private playing: boolean;
+    private stoppedByInteraction: boolean;
+    private destroyed: boolean;
     private destroy$ = new Subject<any>();
-    private _differ: IterableDiffer<IgxSlideComponent> | null = null;
+    private differ: IterableDiffer<IgxSlideComponent> | null = null;
     private enterAnimationPlayer?: AnimationPlayer;
     private leaveAnimationPlayer?: AnimationPlayer;
     private currentSlide: IgxSlideComponent;
     private previousSlide: IgxSlideComponent;
     private animationDuration = 320;
 
-    constructor(private element: ElementRef, private _iterableDiffers: IterableDiffers, private builder: AnimationBuilder) {
-        this._differ = this._iterableDiffers.find([]).create(null);
+    constructor(private element: ElementRef, private iterableDiffers: IterableDiffers, private builder: AnimationBuilder) {
+        this.differ = this.iterableDiffers.find([]).create(null);
     }
 
     /**
@@ -366,9 +367,9 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
     public ngOnDestroy() {
         this.destroy$.next(true);
         this.destroy$.complete();
-        this._destroyed = true;
-        if (this._lastInterval) {
-            clearInterval(this._lastInterval);
+        this.destroyed = true;
+        if (this.lastInterval) {
+            clearInterval(this.lastInterval);
         }
     }
 
@@ -405,7 +406,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
                 this.currentSlide = slide;
             }
             this.onSlideChanged.emit({ carousel: this, slide });
-            this._restartInterval();
+            this.restartInterval();
         }
     }
 
@@ -496,7 +497,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
     }
 
     private initSlides(change: QueryList<IgxSlideComponent>) {
-        const diff = this._differ.diff(change.toArray());
+        const diff = this.differ.diff(change.toArray());
         if (diff) {
             this.slides.reduce((any, c, ind) => c.index = ind, 0); // reset slides indexes
             diff.forEachAddedItem((record: IterableChangeRecord<IgxSlideComponent>) => {
@@ -614,7 +615,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
      * @memberOf IgxCarouselComponent
      */
     public get isPlaying(): boolean {
-        return this._playing;
+        return this.playing;
     }
 
     /**
@@ -625,7 +626,7 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
      * @memberOf IgxCarouselComponent
      */
     public get isDestroyed(): boolean {
-        return this._destroyed;
+        return this.destroyed;
     }
     /**
      * Returns a reference to the carousel element in the DOM.
@@ -738,10 +739,11 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
      * @memberOf IgxCarouselComponent
      */
     public play() {
-        if (!this._playing) {
-            this._playing = true;
+        if (!this.playing) {
+            this.playing = true;
             this.onCarouselPlaying.emit(this);
-            this._restartInterval();
+            this.restartInterval();
+            this.stoppedByInteraction = false;
         }
     }
 
@@ -756,26 +758,26 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
      */
     public stop() {
         if (this.pause) {
-            this._playing = false;
+            this.playing = false;
             this.onCarouselPaused.emit(this);
-            this._resetInterval();
+            this.resetInterval();
         }
     }
 
-    private _resetInterval() {
-        if (this._lastInterval) {
-            clearInterval(this._lastInterval);
-            this._lastInterval = null;
+    private resetInterval() {
+        if (this.lastInterval) {
+            clearInterval(this.lastInterval);
+            this.lastInterval = null;
         }
     }
 
-    private _restartInterval() {
-        this._resetInterval();
+    private restartInterval() {
+        this.resetInterval();
 
         if (!isNaN(this.interval) && this.interval > 0) {
-            this._lastInterval = setInterval(() => {
+            this.lastInterval = setInterval(() => {
                 const tick = +this.interval;
-                if (this._playing && this.total && !isNaN(tick) && tick > 0) {
+                if (this.playing && this.total && !isNaN(tick) && tick > 0) {
                     this.next();
                 } else {
                     this.stop();
@@ -807,12 +809,17 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
     }
 
     /** @hidden */
-    @HostListener('keydown.Tab')
-    public onTab() {
+    @HostListener('tap')
+    public onTap() {
         if (this.isPlaying) {
+            if (this.pause && this.isPlaying) {
+                this.stoppedByInteraction = true;
+            }
             this.stop();
         } else {
-            this.play();
+            if (this.stoppedByInteraction) {
+                this.play();
+            }
         }
     }
 
@@ -845,6 +852,9 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
      */
     @HostListener('mouseenter')
     public onMouseEnter() {
+        if (this.pause && this.isPlaying) {
+            this.stoppedByInteraction = true;
+        }
         this.stop();
     }
 
@@ -853,7 +863,9 @@ export class IgxCarouselComponent implements OnDestroy, AfterContentInit {
      */
     @HostListener('mouseleave')
     public onMouseLeave() {
-        this.play();
+        if ( this.stoppedByInteraction ) {
+            this.play();
+       }
     }
 
     /**