Skip to content

Commit 2d258df

Browse files
crisbetocrisbeto
committed
test(cdk/drag-drop): reuse component creation function
Reuses the `createComponent` function instead of having to duplicate it in all the tests. Also makes it more ergonomic and reduces some test nesting.
1 parent 9a48e16 commit 2d258df

File tree

4 files changed

+1274
-1330
lines changed

4 files changed

+1274
-1330
lines changed

‎src/cdk/drag-drop/directives/drag.spec.ts

Lines changed: 77 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -16,20 +16,17 @@ import {
1616
Component,
1717
ElementRef,
1818
Input,
19-
Provider,
2019
QueryList,
21-
Type,
2220
ViewChild,
2321
ViewChildren,
2422
ViewEncapsulation,
2523
inject,
2624
signal,
2725
} from '@angular/core';
28-
import {ComponentFixture, TestBed, fakeAsync, flush, tick} from '@angular/core/testing';
26+
import {TestBed, fakeAsync, flush, tick} from '@angular/core/testing';
2927
import {of as observableOf} from 'rxjs';
3028

3129
import {extendStyles} from '../dom/styling';
32-
import {DragDropModule} from '../drag-drop-module';
3330
import {CdkDragDrop, CdkDragEnter, CdkDragStart} from '../drag-events';
3431
import {DragRef, Point, PreviewContainer} from '../drag-ref';
3532
import {moveItemInArray} from '../drag-utils';
@@ -39,6 +36,7 @@ import {CdkDrag} from './drag';
3936
import {CdkDropList} from './drop-list';
4037
import {CdkDropListGroup} from './drop-list-group';
4138
import {
39+
createComponent,
4240
assertDownwardSorting,
4341
assertUpwardSorting,
4442
continueDraggingViaTouch,
@@ -56,41 +54,6 @@ const ITEM_HEIGHT = 25;
5654
const ITEM_WIDTH = 75;
5755

5856
describe('CdkDrag', () => {
59-
function createComponent<T>(
60-
componentType: Type<T>,
61-
providers: Provider[] = [],
62-
dragDistance = 0,
63-
extraDeclarations: Type<any>[] = [],
64-
encapsulation?: ViewEncapsulation,
65-
): ComponentFixture<T> {
66-
TestBed.configureTestingModule({
67-
imports: [DragDropModule, CdkScrollableModule],
68-
providers: [
69-
{
70-
provide: CDK_DRAG_CONFIG,
71-
useValue: {
72-
// We default the `dragDistance` to zero, because the majority of the tests
73-
// don't care about it and drags are a lot easier to simulate when we don't
74-
// have to deal with thresholds.
75-
dragStartThreshold: dragDistance,
76-
pointerDirectionChangeThreshold: 5,
77-
} as DragDropConfig,
78-
},
79-
...providers,
80-
],
81-
declarations: [componentType, ...extraDeclarations],
82-
});
83-
84-
if (encapsulation != null) {
85-
TestBed.overrideComponent(componentType, {
86-
set: {encapsulation},
87-
});
88-
}
89-
90-
TestBed.compileComponents();
91-
return TestBed.createComponent<T>(componentType);
92-
}
93-
9457
describe('in a drop container', () => {
9558
it('should be able to attach data to the drop container', () => {
9659
const fixture = createComponent(DraggableInDropZone);
@@ -250,7 +213,7 @@ describe('CdkDrag', () => {
250213
}));
251214

252215
it('should not toggle dragging class if the element was not dragged more than the threshold', fakeAsync(() => {
253-
const fixture = createComponent(DraggableInDropZone, [], 5);
216+
const fixture = createComponent(DraggableInDropZone, {dragDistance: 5});
254217
fixture.detectChanges();
255218
const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
256219
const dropZone = fixture.componentInstance.dropInstance;
@@ -565,12 +528,14 @@ describe('CdkDrag', () => {
565528
}));
566529

567530
it('should dispatch the correct `dropped` event in RTL horizontal drop zone', fakeAsync(() => {
568-
const fixture = createComponent(DraggableInHorizontalDropZone, [
569-
{
570-
provide: Directionality,
571-
useValue: {value: 'rtl', change: observableOf()},
572-
},
573-
]);
531+
const fixture = createComponent(DraggableInHorizontalDropZone, {
532+
providers: [
533+
{
534+
provide: Directionality,
535+
useValue: {value: 'rtl', change: observableOf()},
536+
},
537+
],
538+
});
574539

575540
fixture.nativeElement.setAttribute('dir', 'rtl');
576541
fixture.detectChanges();
@@ -720,13 +685,9 @@ describe('CdkDrag', () => {
720685
return;
721686
}
722687

723-
const fixture = createComponent(
724-
DraggableInScrollableVerticalDropZone,
725-
[],
726-
undefined,
727-
[],
728-
ViewEncapsulation.ShadowDom,
729-
);
688+
const fixture = createComponent(DraggableInScrollableVerticalDropZone, {
689+
encapsulation: ViewEncapsulation.ShadowDom,
690+
});
730691
fixture.detectChanges();
731692
const dragItems = fixture.componentInstance.dragItems;
732693
const firstItem = dragItems.first;
@@ -901,15 +862,17 @@ describe('CdkDrag', () => {
901862
}));
902863

903864
it('should be able to configure the preview z-index', fakeAsync(() => {
904-
const fixture = createComponent(DraggableInDropZone, [
905-
{
906-
provide: CDK_DRAG_CONFIG,
907-
useValue: {
908-
dragStartThreshold: 0,
909-
zIndex: 3000,
865+
const fixture = createComponent(DraggableInDropZone, {
866+
providers: [
867+
{
868+
provide: CDK_DRAG_CONFIG,
869+
useValue: {
870+
dragStartThreshold: 0,
871+
zIndex: 3000,
872+
},
910873
},
911-
},
912-
]);
874+
],
875+
});
913876
fixture.detectChanges();
914877
const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
915878
startDraggingViaMouse(fixture, item);
@@ -1017,13 +980,9 @@ describe('CdkDrag', () => {
1017980
return;
1018981
}
1019982

1020-
const fixture = createComponent(
1021-
DraggableInScrollableParentContainer,
1022-
[],
1023-
undefined,
1024-
[],
1025-
ViewEncapsulation.ShadowDom,
1026-
);
983+
const fixture = createComponent(DraggableInScrollableParentContainer, {
984+
encapsulation: ViewEncapsulation.ShadowDom,
985+
});
1027986
fixture.componentInstance.boundarySelector = '.cdk-drop-list';
1028987
fixture.detectChanges();
1029988

@@ -1191,7 +1150,7 @@ describe('CdkDrag', () => {
11911150
}));
11921151

11931152
it('should not create a preview if the element was not dragged far enough', fakeAsync(() => {
1194-
const fixture = createComponent(DraggableInDropZone, [], 5);
1153+
const fixture = createComponent(DraggableInDropZone, {dragDistance: 5});
11951154
fixture.detectChanges();
11961155
const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
11971156

@@ -1201,12 +1160,14 @@ describe('CdkDrag', () => {
12011160
}));
12021161

12031162
it('should pass the proper direction to the preview in rtl', fakeAsync(() => {
1204-
const fixture = createComponent(DraggableInDropZone, [
1205-
{
1206-
provide: Directionality,
1207-
useValue: {value: 'rtl', change: observableOf()},
1208-
},
1209-
]);
1163+
const fixture = createComponent(DraggableInDropZone, {
1164+
providers: [
1165+
{
1166+
provide: Directionality,
1167+
useValue: {value: 'rtl', change: observableOf()},
1168+
},
1169+
],
1170+
});
12101171

12111172
fixture.detectChanges();
12121173

@@ -1494,7 +1455,7 @@ describe('CdkDrag', () => {
14941455
}));
14951456

14961457
it('should not create placeholder if the element was not dragged far enough', fakeAsync(() => {
1497-
const fixture = createComponent(DraggableInDropZone, [], 5);
1458+
const fixture = createComponent(DraggableInDropZone, {dragDistance: 5});
14981459
fixture.detectChanges();
14991460
const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
15001461

@@ -2713,12 +2674,14 @@ describe('CdkDrag', () => {
27132674
}));
27142675

27152676
it('should auto-scroll right if the user holds their pointer at right edge in rtl', fakeAsync(() => {
2716-
const fixture = createComponent(DraggableInScrollableHorizontalDropZone, [
2717-
{
2718-
provide: Directionality,
2719-
useValue: {value: 'rtl', change: observableOf()},
2720-
},
2721-
]);
2677+
const fixture = createComponent(DraggableInScrollableHorizontalDropZone, {
2678+
providers: [
2679+
{
2680+
provide: Directionality,
2681+
useValue: {value: 'rtl', change: observableOf()},
2682+
},
2683+
],
2684+
});
27222685
fixture.nativeElement.setAttribute('dir', 'rtl');
27232686
fixture.detectChanges();
27242687
const item = fixture.componentInstance.dragItems.first.element.nativeElement;
@@ -2740,12 +2703,14 @@ describe('CdkDrag', () => {
27402703
}));
27412704

27422705
it('should auto-scroll left if the user holds their pointer at left edge in rtl', fakeAsync(() => {
2743-
const fixture = createComponent(DraggableInScrollableHorizontalDropZone, [
2744-
{
2745-
provide: Directionality,
2746-
useValue: {value: 'rtl', change: observableOf()},
2747-
},
2748-
]);
2706+
const fixture = createComponent(DraggableInScrollableHorizontalDropZone, {
2707+
providers: [
2708+
{
2709+
provide: Directionality,
2710+
useValue: {value: 'rtl', change: observableOf()},
2711+
},
2712+
],
2713+
});
27492714
fixture.nativeElement.setAttribute('dir', 'rtl');
27502715
fixture.detectChanges();
27512716
const item = fixture.componentInstance.dragItems.first.element.nativeElement;
@@ -3181,12 +3146,14 @@ describe('CdkDrag', () => {
31813146
lockAxis: 'y',
31823147
};
31833148

3184-
const fixture = createComponent(PlainStandaloneDropList, [
3185-
{
3186-
provide: CDK_DRAG_CONFIG,
3187-
useValue: config,
3188-
},
3189-
]);
3149+
const fixture = createComponent(PlainStandaloneDropList, {
3150+
providers: [
3151+
{
3152+
provide: CDK_DRAG_CONFIG,
3153+
useValue: config,
3154+
},
3155+
],
3156+
});
31903157
fixture.detectChanges();
31913158
const list = fixture.componentInstance.dropList;
31923159
expect(list.disabled).toBe(true);
@@ -4287,9 +4254,9 @@ describe('CdkDrag', () => {
42874254
);
42884255

42894256
it('should set the receiving class when the list is wrapped in an OnPush component', fakeAsync(() => {
4290-
const fixture = createComponent(ConnectedDropListsInOnPush, undefined, undefined, [
4291-
DraggableInOnPushDropZone,
4292-
]);
4257+
const fixture = createComponent(ConnectedDropListsInOnPush, {
4258+
extraDeclarations: [DraggableInOnPushDropZone],
4259+
});
42934260
fixture.detectChanges();
42944261

42954262
const dropZones = Array.from<HTMLElement>(
@@ -4630,9 +4597,9 @@ describe('CdkDrag', () => {
46304597
'should toggle a class when dragging an item inside a wrapper component component ' +
46314598
'with OnPush change detection',
46324599
fakeAsync(() => {
4633-
const fixture = createComponent(ConnectedWrappedDropZones, [], 0, [
4634-
WrappedDropContainerComponent,
4635-
]);
4600+
const fixture = createComponent(ConnectedWrappedDropZones, {
4601+
extraDeclarations: [WrappedDropContainerComponent],
4602+
});
46364603
fixture.detectChanges();
46374604

46384605
const [startZone, targetZone] = fixture.nativeElement.querySelectorAll('.cdk-drop-list');
@@ -4773,13 +4740,9 @@ describe('CdkDrag', () => {
47734740
return;
47744741
}
47754742

4776-
const fixture = createComponent(
4777-
ConnectedDropZones,
4778-
[],
4779-
undefined,
4780-
[],
4781-
ViewEncapsulation.ShadowDom,
4782-
);
4743+
const fixture = createComponent(ConnectedDropZones, {
4744+
encapsulation: ViewEncapsulation.ShadowDom,
4745+
});
47834746
fixture.detectChanges();
47844747

47854748
const groups = fixture.componentInstance.groupedDragItems;
@@ -4857,13 +4820,9 @@ describe('CdkDrag', () => {
48574820
return;
48584821
}
48594822

4860-
const fixture = createComponent(
4861-
ConnectedDropZones,
4862-
[],
4863-
undefined,
4864-
[],
4865-
ViewEncapsulation.ShadowDom,
4866-
);
4823+
const fixture = createComponent(ConnectedDropZones, {
4824+
encapsulation: ViewEncapsulation.ShadowDom,
4825+
});
48674826
fixture.detectChanges();
48684827

48694828
const shadowRoot = fixture.nativeElement.shadowRoot;
@@ -4959,13 +4918,9 @@ describe('CdkDrag', () => {
49594918
return;
49604919
}
49614920

4962-
const fixture = createComponent(
4963-
ConnectedDropZones,
4964-
[],
4965-
undefined,
4966-
[],
4967-
ViewEncapsulation.ShadowDom,
4968-
);
4921+
const fixture = createComponent(ConnectedDropZones, {
4922+
encapsulation: ViewEncapsulation.ShadowDom,
4923+
});
49694924
fixture.detectChanges();
49704925
const item = fixture.componentInstance.groupedDragItems[0][1];
49714926

@@ -4980,7 +4935,7 @@ describe('CdkDrag', () => {
49804935

49814936
describe('with nested drags', () => {
49824937
it('should not move draggable container when dragging child (multitouch)', fakeAsync(() => {
4983-
const fixture = createComponent(NestedDragsComponent, [], 10);
4938+
const fixture = createComponent(NestedDragsComponent, {dragDistance: 10});
49844939
fixture.detectChanges();
49854940

49864941
// First finger drags container (less then threshold)

0 commit comments

Comments
 (0)