Skip to content

Commit d21008f

Browse files
David-DesmaisonsDavid-Desmaisons
committed
Correcting broken tests - vue-jest breaking changes on minor updates...
1 parent cde2dc5 commit d21008f

File tree

2 files changed

+53
-41
lines changed

2 files changed

+53
-41
lines changed

‎tests/unit/vuedraggable.integrated.spec.js‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -24,27 +24,36 @@ function getEvent(name) {
2424
}
2525

2626
const expectedArray = [0, 1, 3, 4, 5, 6, 7, 2, 8, 9];
27-
const expectedDomNoTransition = `<span>${expectedArray.map(nu => `<div>${nu}</div>`).join('')}</span>`;
28-
const expectedDomTransition = `<div>${expectedDomNoTransition}</div>`;
27+
const expectedDomWithWrapper = wrapper => `<${wrapper}>${expectedArray.map(nu => `<div>${nu}</div>`).join('')}</${wrapper}>`;
28+
29+
const expectedDomNoTransition = expectedDomWithWrapper('span');
30+
const expectedDomTransition = `<div>${expectedDomWithWrapper('transition-group-stub')}</div>`;
31+
32+
function normalizeHTML(wrapper) {
33+
return wrapper.html().replace(/(\r\n\t|\n|\r\t| )/gm,"");
34+
}
35+
36+
function expectHTML(wrapper, expected) {
37+
const htmlStripped = normalizeHTML(wrapper);
38+
expect(htmlStripped).toEqual(expected);
39+
}
2940

3041
describe.each([
31-
[DraggableWithList, "draggable with list", expectedDomNoTransition],
32-
[DraggableWithModel, "draggable with model", expectedDomNoTransition],
33-
[DraggableWithTransition, "draggable with transition", expectedDomTransition]
42+
[DraggableWithList, "draggable with list", expectedDomNoTransition, "span"],
43+
[DraggableWithModel, "draggable with model", expectedDomNoTransition, "span"],
44+
[DraggableWithTransition, "draggable with transition", expectedDomTransition, "transition-group-stub"]
3445
])
3546
(
3647
"should update list and DOM with component: %s %s",
37-
(component, _, expectedDom) => {
48+
(component, _, expectedDom, expectWrapper) => {
3849

3950
describe("when handling sort", () => {
4051

4152
beforeEach(async () => {
4253
jest.resetAllMocks();
43-
wrapper = mount(component, {
44-
attachToDocument: true
45-
});
54+
wrapper = mount(component);
4655
vm = wrapper.vm;
47-
element = wrapper.find('span').element;
56+
element = wrapper.find(expectWrapper).element;
4857

4958
const item = element.children[2];
5059
const startEvt = { item };
@@ -74,7 +83,7 @@ describe.each([
7483
});
7584

7685
it("updates DOM", async () => {
77-
expect(wrapper.html()).toEqual(expectedDom);
86+
expectHTML(wrapper, expectedDom);
7887
});
7988
});
8089
}

‎tests/unit/vuedraggable.spec.js‎

Lines changed: 33 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import Vue from "vue";
1212
import Fake from "./helper/FakeComponent.js"
1313
import FakeFunctional from "./helper/FakeFunctionalComponent.js"
1414

15-
1615
let wrapper;
1716
let vm;
1817
let props;
@@ -22,7 +21,16 @@ let element;
2221
let input;
2322
const initialRender = "<div><header></header><div>a</div><div>b</div><div>c</div><footer></footer></div>";
2423
const initialRenderRaw = "<div><div>a</div><div>b</div><div>c</div></div>";
25-
const initialRenderTransition = "<div><span><div>a</div><div>b</div><div>c</div></span></div>";
24+
const initialRenderTransition = "<div><transition-group-stub><div>a</div><div>b</div><div>c</div></transition-group-stub></div>";
25+
26+
function normalizeHTML(wrapper) {
27+
return wrapper.html().replace(/(\r\n\t|\n|\r\t| )/gm,"");
28+
}
29+
30+
function expectHTML(wrapper, expected) {
31+
const htmlStripped = normalizeHTML(wrapper);
32+
expect(htmlStripped).toEqual(expected);
33+
}
2634

2735
function getEvent(name) {
2836
return Sortable.mock.calls[0][1][name];
@@ -39,7 +47,6 @@ describe("draggable.vue when initialized with list", () => {
3947
resetMocks();
4048
items = ["a", "b", "c"];
4149
wrapper = shallowMount(draggable, {
42-
attachToDocument: true,
4350
propsData: {
4451
list: items
4552
},
@@ -74,7 +81,6 @@ describe("draggable.vue when initialized with list", () => {
7481

7582
it("log an error when list and value are both not null", () => {
7683
wrapper = shallowMount(draggable, {
77-
attachToDocument: true,
7884
propsData: {
7985
list: [],
8086
value: []
@@ -88,7 +94,6 @@ describe("draggable.vue when initialized with list", () => {
8894

8995
it("warns when options is used", () => {
9096
wrapper = shallowMount(draggable, {
91-
attachToDocument: true,
9297
propsData: {
9398
options: {
9499
group: "led zeppelin"
@@ -103,7 +108,6 @@ describe("draggable.vue when initialized with list", () => {
103108

104109
it("warns when element is used", () => {
105110
wrapper = shallowMount(draggable, {
106-
attachToDocument: true,
107111
propsData: {
108112
element: "li"
109113
},
@@ -173,23 +177,23 @@ describe("draggable.vue when initialized with list", () => {
173177
})
174178

175179
it("renders root element correctly", () => {
176-
expect(wrapper.html()).toMatch(/^<div>.*<\/div>$/);
180+
expect(normalizeHTML(wrapper)).toMatch(/^<div>.*<\/div>$/);
177181
})
178182

179183
it("renders footer slot element correctly", () => {
180-
expect(wrapper.html()).toMatch(/<footer><\/footer><\/div>$/);
184+
expect(normalizeHTML(wrapper)).toMatch(/<footer><\/footer><\/div>$/);
181185
})
182186

183187
it("renders header slot element correctly", () => {
184-
expect(wrapper.html()).toMatch(/^<div><header><\/header>/);
188+
expect(normalizeHTML(wrapper)).toMatch(/^<div><header><\/header>/);
185189
})
186190

187191
it("renders default slot element correctly", () => {
188-
expect(wrapper.html()).toContain("<div>a</div><div>b</div><div>c</div>");
192+
expect(normalizeHTML(wrapper)).toContain("<div>a</div><div>b</div><div>c</div>");
189193
})
190194

191195
it("renders correctly", () => {
192-
expect(wrapper.html()).toEqual(initialRender);
196+
expectHTML(wrapper, initialRender);
193197
})
194198

195199
describe.each([
@@ -227,6 +231,7 @@ describe("draggable.vue when initialized with list", () => {
227231
const computeIndexes = jest.fn();
228232
wrapper.setMethods({ computeIndexes })
229233
wrapper.setProps({ list: ["c", "d", "e", "f", "g"] });
234+
await Vue.nextTick();
230235
expect(computeIndexes).toHaveBeenCalled()
231236
});
232237

@@ -371,7 +376,7 @@ describe("draggable.vue when initialized with list", () => {
371376

372377
it("DOM changes should be reverted", async () => {
373378
await Vue.nextTick();
374-
expect(wrapper.html()).toEqual(initialRender);
379+
expectHTML(wrapper, initialRender);
375380
})
376381

377382
it("list should be updated", async () => {
@@ -537,7 +542,7 @@ describe("draggable.vue when initialized with list", () => {
537542

538543
it("DOM changes should be reverted", async () => {
539544
await Vue.nextTick();
540-
expect(wrapper.html()).toEqual(initialRender);
545+
expectHTML(wrapper, initialRender);
541546
})
542547

543548
it("list should be updated", async () => {
@@ -579,7 +584,7 @@ describe("draggable.vue when initialized with list", () => {
579584

580585
it("DOM changes should be reverted", async () => {
581586
await Vue.nextTick();
582-
expect(wrapper.html()).toEqual(initialRender);
587+
expectHTML(wrapper, initialRender);
583588
})
584589

585590
it("list should be updated", async () => {
@@ -627,7 +632,6 @@ describe("draggable.vue when initialized with list", () => {
627632
beforeEach(() => {
628633
resetMocks();
629634
wrapper = shallowMount(draggable, {
630-
attachToDocument: true,
631635
propsData: {
632636
list: items
633637
},
@@ -659,7 +663,7 @@ describe("draggable.vue when initialized with list", () => {
659663

660664
it("DOM changes should be reverted", async () => {
661665
await Vue.nextTick();
662-
expect(wrapper.html()).toEqual(initialRenderRaw);
666+
expectHTML(wrapper, initialRenderRaw);
663667
})
664668

665669
it("list should be not updated", async () => {
@@ -689,7 +693,6 @@ describe("draggable.vue when initialized with list", () => {
689693
beforeEach(() => {
690694
resetMocks();
691695
wrapper = shallowMount(draggable, {
692-
attachToDocument: true,
693696
propsData: {
694697
list: items
695698
},
@@ -724,7 +727,7 @@ describe("draggable.vue when initialized with list", () => {
724727

725728
it("DOM changes should be reverted", async () => {
726729
await Vue.nextTick();
727-
expect(wrapper.html()).toEqual(initialRenderRaw);
730+
expectHTML(wrapper, initialRenderRaw);
728731
})
729732

730733
it("list should be not updated", async () => {
@@ -763,8 +766,9 @@ describe("draggable.vue when initialized with list", () => {
763766
["to-be-camelized", 1, "toBeCamelized"]
764767
])(
765768
"attribute %s change for value %o, calls sortable option with %s attribute",
766-
(attribute, value, sortableAttribute) => {
769+
async (attribute, value, sortableAttribute) => {
767770
vm.$attrs = { [attribute]: value };
771+
await Vue.nextTick();
768772
expect(SortableFake.option).toHaveBeenCalledWith(sortableAttribute, value);
769773
}
770774
);
@@ -782,8 +786,9 @@ describe("draggable.vue when initialized with list", () => {
782786
["to-be-camelized", 1, "toBeCamelized"]
783787
])(
784788
"when option %s change for value %o, calls sortable option with %s attribute",
785-
(attribute, value, sortableAttribute) => {
789+
async (attribute, value, sortableAttribute) => {
786790
wrapper.setProps({ options: { [attribute]: value } });
791+
await Vue.nextTick();
787792
expect(SortableFake.option).toHaveBeenCalledWith(sortableAttribute, value);
788793
}
789794
);
@@ -850,7 +855,6 @@ describe("draggable.vue when initialized with value", () => {
850855
Sortable.mockClear();
851856
items = ["a", "b", "c"];
852857
wrapper = shallowMount(draggable, {
853-
attachToDocument: true,
854858
propsData: {
855859
value: items
856860
},
@@ -869,14 +873,15 @@ describe("draggable.vue when initialized with value", () => {
869873
});
870874

871875
it("renders correctly", () => {
872-
expect(wrapper.html()).toEqual(initialRenderRaw);
876+
expectHTML(wrapper, initialRenderRaw);
873877
})
874878

875879
it("update indexes", async () => {
876880
await Vue.nextTick();
877881
const computeIndexes = jest.fn();
878882
wrapper.setMethods({ computeIndexes })
879883
wrapper.setProps({ value: ["c", "d", "e", "f", "g"] });
884+
await Vue.nextTick();
880885
expect(computeIndexes).toHaveBeenCalled()
881886
});
882887

@@ -924,7 +929,7 @@ describe("draggable.vue when initialized with value", () => {
924929

925930
it("DOM changes should be reverted", async () => {
926931
await Vue.nextTick();
927-
expect(wrapper.html()).toEqual(initialRenderRaw);
932+
expectHTML(wrapper, initialRenderRaw);
928933
})
929934

930935
it("input should with updated value", async () => {
@@ -962,7 +967,7 @@ describe("draggable.vue when initialized with value", () => {
962967

963968
it("DOM changes should be reverted", async () => {
964969
await Vue.nextTick();
965-
expect(wrapper.html()).toEqual(initialRenderRaw);
970+
expectHTML(wrapper, initialRenderRaw);
966971
})
967972

968973
it("send an input event", async () => {
@@ -1014,7 +1019,6 @@ describe("draggable.vue when initialized with a transition group", () => {
10141019
const inside = items.map(item => `<div>${item}</div>`).join("");
10151020
const template = `<transition-group>${inside}</transition-group>`
10161021
wrapper = shallowMount(draggable, {
1017-
attachToDocument: true,
10181022
propsData: {
10191023
value: items
10201024
},
@@ -1041,7 +1045,7 @@ describe("draggable.vue when initialized with a transition group", () => {
10411045
});
10421046

10431047
it("enders correctly", () => {
1044-
expect(wrapper.html()).toEqual(initialRenderTransition);
1048+
expectHTML(wrapper, initialRenderTransition);
10451049
})
10461050

10471051
it("creates sortable instance with options on transition root", () => {
@@ -1086,7 +1090,7 @@ describe("draggable.vue when initialized with a transition group", () => {
10861090

10871091
it("DOM changes should be reverted", async () => {
10881092
await Vue.nextTick();
1089-
expect(wrapper.html()).toEqual(initialRenderTransition);
1093+
expectHTML(wrapper, initialRenderTransition);
10901094
})
10911095

10921096
it("input should with updated value", async () => {
@@ -1125,7 +1129,7 @@ describe("draggable.vue when initialized with a transition group", () => {
11251129

11261130
it("DOM changes should be reverted", async () => {
11271131
await Vue.nextTick();
1128-
expect(wrapper.html()).toEqual(initialRenderTransition);
1132+
expectHTML(wrapper, initialRenderTransition);
11291133
})
11301134

11311135
it("send an input event", async () => {
@@ -1215,7 +1219,6 @@ describe("draggable.vue when initialized with a transition group", () => {
12151219
resetMocks();
12161220
items = ["a", "b", "c"];
12171221
wrapper = shallowMount(draggable, {
1218-
attachToDocument: true,
12191222
propsData: {
12201223
list: items
12211224
},
@@ -1237,7 +1240,7 @@ describe("draggable.vue when initialized with a transition group", () => {
12371240
});
12381241

12391242
it("renders correctly", () => {
1240-
expect(wrapper.html()).toEqual(initialRender);
1243+
expectHTML(wrapper, initialRender);
12411244
})
12421245
});
12431246
});

0 commit comments

Comments
 (0)