Skip to content

Commit fbdaa97

Browse files
setamansetaman
committed
test: correctly set props
1 parent 4752be8 commit fbdaa97

File tree

5 files changed

+35
-28
lines changed

5 files changed

+35
-28
lines changed

‎src/components/Circle/radiusCalculation.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,11 @@ export const radius = (options) => {
8787
bottom: () => radiusBottomMode(options),
8888
top: () => radiusTopMode(options),
8989
};
90+
if (!options.lineMode) {
91+
console.log("");
92+
}
9093
const modeHandler = modes[options.lineMode.mode];
94+
9195
return modeHandler ? modeHandler() : baseRadius(options);
9296
};
9397

‎tests/unit/circle/circle-animation.spec.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,22 +32,22 @@ const animationTypeTests = (container, circleClass, prefix = "circle |") => {
3232
}, 250);
3333
});
3434
it(`${prefix} applies @bounce animation class correctly`, async () => {
35-
wrapper.setProps({ animation: "bounce 500 500" });
35+
await wrapper.setProps({ options: { ...wrapper.props().options, animation: "bounce 500 500" } });
3636
await Vue.nextTick();
3737
expect(circleProgressWrapper.classes()).to.include("animation__bounce");
3838
});
3939
it(`${prefix} applies @loop animation class correctly`, async () => {
40-
wrapper.setProps({ animation: "loop 500 500" });
40+
await wrapper.setProps({ options: { ...wrapper.props().options, animation: "loop 500 500" } });
4141
await Vue.nextTick();
4242
expect(circleProgressWrapper.classes()).to.include("animation__loop");
4343
});
4444
it(`${prefix} applies @reverse animation class correctly`, async () => {
45-
wrapper.setProps({ animation: "reverse 500 500" });
45+
await wrapper.setProps({ options: { ...wrapper.props().options, animation: "reverse 500 500" } });
4646
await Vue.nextTick();
4747
expect(circleProgressWrapper.classes()).to.include("animation__reverse");
4848
});
4949
it(`${prefix} applies @rs animation class correctly`, async () => {
50-
wrapper.setProps({ animation: "rs 500 500" });
50+
await wrapper.setProps({ options: { ...wrapper.props().options, animation: "rs 500 500" } });
5151
await Vue.nextTick();
5252
expect(circleProgressWrapper.classes()).to.include("animation__rs");
5353
});

‎tests/unit/circle/circle-dot.spec.js

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { expect } from "chai";
2-
import { mount } from "@vue/test-utils";
32
import Vue from "vue";
43
import CircleContainer from "@/components/Circle/CircleContainer.vue";
5-
import VueEllipseProgress from "@/components/VueEllipseProgress.vue";
4+
// import VueEllipseProgress from "@/components/VueEllipseProgress.vue";
65
import Circle from "@/components/Circle/Circle.vue";
76
import CircleDot from "@/components/Circle/CircleDot.vue";
87
import { dotParser } from "@/components/optionsParser";
@@ -73,7 +72,7 @@ describe("#dot", () => {
7372
const rotationStart = angle + 90;
7473
expect(circleDotWrapper.element.style.transform).to.equal(`rotate(${rotationStart}deg)`);
7574

76-
wrapper.setProps({ half: true });
75+
await wrapper.setProps({ options: { ...wrapper.props().options, half: true } });
7776
const halfRotationStart = angle - 90;
7877
await Vue.nextTick();
7978
expect(circleDotWrapper.element.style.transform).to.equal(`rotate(${halfRotationStart}deg)`);

‎tests/unit/circle/circle-line.spec.js

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,12 @@ describe("#line", () => {
2929
expect(circleProgressWrapper.element.getAttribute("stroke-linecap")).to.equal(`${line}`);
3030

3131
line = "butt";
32-
wrapper.setProps({ line });
32+
await wrapper.setProps({ options: { ...wrapper.props().options, line } });
3333
await Vue.nextTick();
3434
expect(circleProgressWrapper.element.getAttribute("stroke-linecap")).to.equal(`${line}`);
3535

3636
line = "square";
37-
wrapper.setProps({ line });
37+
await wrapper.setProps({ options: { ...wrapper.props().options, line } });
3838
await Vue.nextTick();
3939
expect(circleProgressWrapper.element.getAttribute("stroke-linecap")).to.equal(`${line}`);
4040
});
@@ -71,7 +71,8 @@ describe("#lineMode", () => {
7171

7272
thickness = emptyThickness = 10;
7373

74-
wrapper.setProps({ thickness, emptyThickness });
74+
await wrapper.setProps({ options: { ...wrapper.props().options, thickness, emptyThickness } });
75+
7576
await Vue.nextTick();
7677

7778
expectedProgressCircleRadius = baseRadius - thickness / 2;
@@ -80,7 +81,7 @@ describe("#lineMode", () => {
8081
});
8182
it("in case #thickness >= #emptyThickness and #lineMode.offset = 10", async () => {
8283
// offset must be ignored in this mode
83-
wrapper.setProps({ lineMode: "normal 10" });
84+
await wrapper.setProps({ options: { ...wrapper.props().options, lineMode: "normal 10" } });
8485
await Vue.nextTick();
8586

8687
let expectedProgressCircleRadius = baseRadius - thickness / 2;
@@ -89,7 +90,7 @@ describe("#lineMode", () => {
8990

9091
thickness = emptyThickness = 10;
9192

92-
wrapper.setProps({ thickness, emptyThickness });
93+
await wrapper.setProps({ options: { ...wrapper.props().options, thickness, emptyThickness } });
9394
await Vue.nextTick();
9495

9596
expectedProgressCircleRadius = baseRadius - thickness / 2;
@@ -100,7 +101,7 @@ describe("#lineMode", () => {
100101
thickness = 10;
101102
emptyThickness = 20;
102103

103-
wrapper.setProps({ thickness, emptyThickness });
104+
await wrapper.setProps({ options: { ...wrapper.props().options, thickness, emptyThickness } });
104105
await Vue.nextTick();
105106

106107
const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2;
@@ -112,7 +113,9 @@ describe("#lineMode", () => {
112113
thickness = 10;
113114
emptyThickness = 20;
114115

115-
wrapper.setProps({ thickness, emptyThickness, lineMode: "normal 10" });
116+
await wrapper.setProps({
117+
options: { ...wrapper.props().options, thickness, emptyThickness, lineMode: "normal 10" },
118+
});
116119
await Vue.nextTick();
117120

118121
const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2;
@@ -188,7 +191,7 @@ describe("#lineMode", () => {
188191

189192
thickness = emptyThickness = 10;
190193

191-
wrapper.setProps({ thickness, emptyThickness });
194+
await wrapper.setProps({ options: { ...wrapper.props().options, thickness, emptyThickness } });
192195
await Vue.nextTick();
193196

194197
expectedProgressCircleRadius = baseRadius - thickness / 2;
@@ -199,7 +202,7 @@ describe("#lineMode", () => {
199202
thickness = 10;
200203
emptyThickness = 20;
201204

202-
wrapper.setProps({ thickness, emptyThickness });
205+
await wrapper.setProps({ options: { ...wrapper.props().options, thickness, emptyThickness } });
203206
await Vue.nextTick();
204207

205208
const expectedEmptyCircleRadius = baseRadius - emptyThickness / 2;
@@ -244,7 +247,7 @@ describe("#lineMode", () => {
244247
thickness = 10;
245248
emptyThickness = 20;
246249

247-
wrapper.setProps({ thickness, emptyThickness });
250+
await wrapper.setProps({ options: { ...wrapper.props().options, thickness, emptyThickness } });
248251
await Vue.nextTick();
249252

250253
let expectedEmptyCircleRadius = baseRadius - emptyThickness / 2;
@@ -253,7 +256,7 @@ describe("#lineMode", () => {
253256

254257
thickness = emptyThickness = 20;
255258

256-
wrapper.setProps({ thickness, emptyThickness });
259+
await wrapper.setProps({ options: { ...wrapper.props().options, thickness, emptyThickness } });
257260
await Vue.nextTick();
258261

259262
expectedEmptyCircleRadius = baseRadius - emptyThickness / 2;

‎tests/unit/circle/circle.spec.js

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
3030

3131
expect(wrapper.vm.progressOffset).to.equal(expectedOffset);
3232
});
33-
it("calculates the negative progress circle stroke offset correctly", () => {
33+
it("calculates the negative progress circle stroke offset correctly", async () => {
3434
progress = -50;
35-
wrapper.setProps({ progress });
35+
await wrapper.setProps({ options: { ...wrapper.props().options, progress } });
3636
const radius = size / 2 - thickness / 2;
3737
const circumference = radius * 2 * Math.PI;
3838
const expectedOffset = circumference - (progress / 100) * circumference;
@@ -47,9 +47,9 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
4747

4848
expect(circleWrapper.element.style.strokeDashoffset).to.equal(`${expectedOffset}`);
4949
});
50-
it("lets progress circle visible for -1 < progress < 1", () => {
50+
it("lets progress circle visible for -1 < progress < 1", async () => {
5151
progress = 0;
52-
wrapper.setProps({ progress });
52+
await wrapper.setProps({ options: { ...wrapper.props().options, half: true } });
5353
const radius = size / 2 - thickness / 2;
5454
const circumference = radius * 2 * Math.PI;
5555

@@ -245,13 +245,13 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
245245
});
246246
it("sets the rotation of the svg container correctly", async () => {
247247
const angle = 80;
248-
circleWrapper.setProps({ angle });
248+
await circleWrapper.setProps({ options: { ...circleWrapper.props().options, angle } });
249249
await Vue.nextTick();
250250
expect(circleWrapper.element.style.transform).to.equal(`rotate(${angle}deg)`);
251251
});
252252
it("sets @0 value as the rotation of the svg container correctly", async () => {
253253
const angle = 0;
254-
circleWrapper.setProps({ angle });
254+
await circleWrapper.setProps({ options: { ...circleWrapper.props().options, angle } });
255255
await Vue.nextTick();
256256
expect(circleWrapper.element.style.transform).to.equal(`rotate(${angle}deg)`);
257257
});
@@ -282,10 +282,11 @@ describe("[ CircleProgress.vue | HalfCircleProgress.vue ]", () => {
282282
data.push({ progress: 50, gap: 0 });
283283
data.push({ progress: 50 });
284284

285-
const wrapper = localFactory(
286-
{ data, gap: globalGap, thickness: globalThickness, size, dot: globalDot },
287-
VueEllipseProgress
288-
);
285+
const wrapper = factory({
286+
container: VueEllipseProgress,
287+
props: { data, gap: globalGap, thickness: globalThickness, size, dot: globalDot },
288+
isCircleFactory: false,
289+
});
289290
const circleWrappers = wrapper.findAllComponents(Circle);
290291

291292
const calculateThickness = (t) => (t.toString().includes("%") ? (parseFloat(t) * size) / 100 : t);

0 commit comments

Comments
 (0)