Skip to content

Commit

Permalink
fix: test
Browse files Browse the repository at this point in the history
  • Loading branch information
Wendell committed Apr 28, 2019
1 parent e685caf commit 762df30
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 35 deletions.
21 changes: 15 additions & 6 deletions components/carousel/nz-carousel.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD

this.carouselContents.changes.pipe(takeUntil(this.destroy$)).subscribe(() => {
this.markContentActive(0);
this.strategy.withCarouselContents(this.carouselContents);
this.syncStrategy();
});

this.ngZone.runOutsideAngular(() => {
Expand All @@ -141,14 +141,18 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
throttleTime(16)
)
.subscribe(() => {
this.strategy.withCarouselContents(this.carouselContents);
this.syncStrategy();
});
});

this.switchStrategy();
this.markContentActive(0);
this.syncStrategy();

// If embedded in an entry component, it may do initial render at a inappropriate time.
// ngZone.onStable won't do this trick
Promise.resolve().then(() => {
this.switchStrategy();
this.syncStrategy();
});
}

Expand All @@ -157,6 +161,8 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD

if (nzEffect && !nzEffect.isFirstChange()) {
this.switchStrategy();
this.markContentActive(0);
this.syncStrategy();
}

if (!this.nzAutoPlay || !this.nzAutoPlaySpeed) {
Expand Down Expand Up @@ -221,9 +227,6 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
this.nzEffect === 'scrollx'
? new NzCarouselTransformStrategy(this, this.cdr, this.renderer)
: new NzCarouselOpacityStrategy(this, this.cdr, this.renderer);

this.markContentActive(0);
this.strategy.withCarouselContents(this.carouselContents);
}

private scheduleNextTransition(): void {
Expand Down Expand Up @@ -297,6 +300,12 @@ export class NzCarouselComponent implements AfterContentInit, AfterViewInit, OnD
}
};

private syncStrategy(): void {
if (this.strategy) {
this.strategy.withCarouselContents(this.carouselContents);
}
}

private dispose(): void {
this.document.removeEventListener('mousemove', this.pointerMove);
this.document.removeEventListener('touchmove', this.pointerMove);
Expand Down
54 changes: 27 additions & 27 deletions components/carousel/nz-carousel.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ describe('carousel', () => {

it('should dynamic change content work', fakeAsync(() => {
fixture.detectChanges();
tick();
tick(3000);
fixture.detectChanges();
expect(carouselContents.length).toBe(4);
testComponent.array = [];
Expand Down Expand Up @@ -73,7 +73,6 @@ describe('carousel', () => {
});

it('should click content change', () => {
fixture.detectChanges();
expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
carouselWrapper.nativeElement.querySelector('.slick-dots').lastElementChild.click();
fixture.detectChanges();
Expand All @@ -87,16 +86,16 @@ describe('carousel', () => {
expect(carouselContents[0].nativeElement.classList).toContain('slick-active');

dispatchKeyboardEvent(list, 'keydown', LEFT_ARROW);
tickATransition(fixture);
tickMilliseconds(fixture, 700);
expect(carouselContents[3].nativeElement.classList).toContain('slick-active');
dispatchKeyboardEvent(list, 'keydown', LEFT_ARROW);
tickATransition(fixture);
tickMilliseconds(fixture, 700);
expect(carouselContents[2].nativeElement.classList).toContain('slick-active');
dispatchKeyboardEvent(list, 'keydown', RIGHT_ARROW);
tickATransition(fixture);
tickMilliseconds(fixture, 700);
expect(carouselContents[3].nativeElement.classList).toContain('slick-active');
dispatchKeyboardEvent(list, 'keydown', RIGHT_ARROW);
tickATransition(fixture);
tickMilliseconds(fixture, 700);
expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
}));

Expand All @@ -122,22 +121,22 @@ describe('carousel', () => {
'translate3d(0px, 0px, 0px)'
);
carouselWrapper.nativeElement.querySelector('.slick-dots').lastElementChild.click();
tickATransition(fixture);
tickMilliseconds(fixture, 700);
expect(carouselWrapper.nativeElement.querySelector('.slick-track').style.transform).not.toBe('');

testComponent.effect = 'fade';
testComponent.vertical = true;
fixture.detectChanges();
expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
carouselWrapper.nativeElement.querySelector('.slick-dots').lastElementChild.click();
tickATransition(fixture);
tickMilliseconds(fixture, 700);
expect(carouselWrapper.nativeElement.querySelector('.slick-track').style.transform).toBe('');

testComponent.effect = 'scrollx';
fixture.detectChanges();
expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
carouselWrapper.nativeElement.querySelector('.slick-dots').lastElementChild.click();
tickATransition(fixture);
tickMilliseconds(fixture, 700);
expect(carouselWrapper.nativeElement.querySelector('.slick-track').style.transform).not.toBe(
'translate3d(0px, 0px, 0px)'
);
Expand Down Expand Up @@ -180,13 +179,13 @@ describe('carousel', () => {
fixture.detectChanges();
expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
testComponent.nzCarouselComponent.next();
tickATransition(fixture);
tickMilliseconds(fixture, 700);
expect(carouselContents[1].nativeElement.classList).toContain('slick-active');
testComponent.nzCarouselComponent.pre();
tickATransition(fixture);
tickMilliseconds(fixture, 700);
expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
testComponent.nzCarouselComponent.goTo(2);
tickATransition(fixture);
tickMilliseconds(fixture, 700);
expect(carouselContents[2].nativeElement.classList).toContain('slick-active');
}));

Expand All @@ -199,21 +198,21 @@ describe('carousel', () => {

it('should support swiping to switch', fakeAsync(() => {
swipe(testComponent.nzCarouselComponent, 500);
tickATransition(fixture);
tickMilliseconds(fixture, 700);
expect(carouselContents[0].nativeElement.classList).not.toContain('slick-active');
expect(carouselContents[1].nativeElement.classList).toContain('slick-active');

swipe(testComponent.nzCarouselComponent, -500);
tickATransition(fixture);
tickMilliseconds(fixture, 700);
swipe(testComponent.nzCarouselComponent, -500);
tickATransition(fixture);
tickMilliseconds(fixture, 700);
expect(carouselContents[0].nativeElement.classList).not.toContain('slick-active');
expect(carouselContents[3].nativeElement.classList).toContain('slick-active');
}));

it('should prevent swipes that are not long enough', fakeAsync(() => {
swipe(testComponent.nzCarouselComponent, 2);
tickATransition(fixture);
tickMilliseconds(fixture, 700);
expect(carouselContents[0].nativeElement.classList).toContain('slick-active');
}));
});
Expand All @@ -237,22 +236,22 @@ describe('carousel', () => {
swipe(testComponent.nzCarouselComponent, 500);
expect(testComponent.nzCarouselComponent.slickTrackEl.style.transform).not.toBe(`translate3d(0px, 0px, 0px)`);

tickATransition(fixture);
tickMilliseconds(fixture, 700);

swipe(testComponent.nzCarouselComponent, -500);
expect(testComponent.nzCarouselComponent.slickTrackEl.style.transform).toBe(`translate3d(0px, 0px, 0px)`);
tickATransition(fixture);
tickMilliseconds(fixture, 700);

// From first to last.
swipe(testComponent.nzCarouselComponent, -500);
expect(testComponent.nzCarouselComponent.slickTrackEl.style.transform).not.toBe(`translate3d(0px, 0px, 0px)`);
tickATransition(fixture);
tickMilliseconds(fixture, 700);
expect(testComponent.nzCarouselComponent.slickTrackEl.style.transform).not.toBe(`translate3d(0px, 0px, 0px)`);

// From last to first.
swipe(testComponent.nzCarouselComponent, 500);
expect(testComponent.nzCarouselComponent.slickTrackEl.style.transform).not.toBe(`translate3d(0px, 0px, 0px)`);
tickATransition(fixture);
tickMilliseconds(fixture, 700);
expect(testComponent.nzCarouselComponent.slickTrackEl.style.transform).toBe(`translate3d(0px, 0px, 0px)`);
}));

Expand All @@ -264,29 +263,30 @@ describe('carousel', () => {

swipe(testComponent.nzCarouselComponent, 500);
expect(testComponent.nzCarouselComponent.el.style.transform).not.toBe(`translate3d(0px, 0px, 0px)`);
tickATransition(fixture);
tickMilliseconds(fixture, 700);

swipe(testComponent.nzCarouselComponent, -500);
expect(testComponent.nzCarouselComponent.slickTrackEl.style.transform).toBe(`translate3d(0px, 0px, 0px)`);
tickATransition(fixture);
tickMilliseconds(fixture, 700);

// From first to last.
swipe(testComponent.nzCarouselComponent, -500);
expect(testComponent.nzCarouselComponent.slickTrackEl.style.transform).not.toBe(`translate3d(0px, 0px, 0px)`);
tickATransition(fixture);
tickMilliseconds(fixture, 700);
expect(testComponent.nzCarouselComponent.slickTrackEl.style.transform).not.toBe(`translate3d(0px, 0px, 0px)`);

// From last to first.
swipe(testComponent.nzCarouselComponent, 500);
expect(testComponent.nzCarouselComponent.slickTrackEl.style.transform).not.toBe(`translate3d(0px, 0px, 0px)`);
tickATransition(fixture);
tickMilliseconds(fixture, 700);
expect(testComponent.nzCarouselComponent.slickTrackEl.style.transform).toBe(`translate3d(0px, 0px, 0px)`);
}));

it('should disable dragging during transitioning', fakeAsync(() => {
tickMilliseconds(fixture, 700);
testComponent.nzCarouselComponent.goTo(1);
swipe(testComponent.nzCarouselComponent, 500);
tickATransition(fixture);
tickMilliseconds(fixture, 700);
expect(carouselContents[1].nativeElement.classList).toContain('slick-active');
}));
});
Expand Down Expand Up @@ -330,9 +330,9 @@ export class NzTestCarouselBasicComponent {
beforeChange = jasmine.createSpy('beforeChange callback');
}

function tickATransition<T>(fixture: ComponentFixture<T>): void {
function tickMilliseconds<T>(fixture: ComponentFixture<T>, seconds: number = 1): void {
fixture.detectChanges();
tick(700);
tick(seconds);
fixture.detectChanges();
}

Expand Down
2 changes: 1 addition & 1 deletion components/test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@ getTestBed().initTestEnvironment(
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
const context = require.context('./', true, /carousel\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"site:start": "node ./scripts/site/generate-site init && node ./scripts/site/generateColorLess && ng serve --port 0 --open",
"site": "node ./scripts/site/generate-site",
"start": "ng serve --port 0",
"test": "ng test --watch=false --code-coverage"
"test": "ng test --watch=true --code-coverage"
},
"dependencies": {
"@angular/cdk": "^7.3.0",
Expand Down

0 comments on commit 762df30

Please sign in to comment.