Skip to content

Commit 237c4ff

Browse files
setamansetaman
committed
fix: add basic loader testes
1 parent ac1c935 commit 237c4ff

File tree

3 files changed

+94
-141
lines changed

3 files changed

+94
-141
lines changed

‎src/App.vue

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,20 +41,17 @@
4141
<ve-progress
4242
:progress="progress"
4343
:loading="loading"
44+
:no-data="noData"
4445
determinate
4546
:thickness="10"
4647
:empty-thickness="10"
4748
line-mode="out"
4849
:color="gradient"
50+
line="square"
4951
:loader="{
5052
lineMode: 'in ',
5153
opacity: 1,
52-
color: {
53-
colors: [
54-
{ color: 'yellow', offset: '0' },
55-
{ color: 'red', offset: '100' },
56-
],
57-
},
54+
color: 'green',
5855
}"
5956
>
6057
</ve-progress>

‎tests/helper.js

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,23 @@
11
import { mount } from "@vue/test-utils";
2+
import interfaceProps from "@/components/interface";
3+
import { parseOptions } from "@/components/optionsParser";
4+
5+
const defaultProps = {
6+
progress: 50,
7+
index: 0,
8+
id: 0,
9+
};
10+
for (const prop in interfaceProps) {
11+
defaultProps[prop] = interfaceProps[prop].default;
12+
}
13+
defaultProps.progress = 50;
14+
defaultProps.index = 0;
15+
defaultProps.id = 0;
16+
defaultProps.globalThickness = defaultProps.thickness;
17+
defaultProps.globalDot = defaultProps.dot;
18+
defaultProps.globalGap = defaultProps.gap;
19+
defaultProps.loader = {};
20+
defaultProps.data = [];
221

322
const mockProps = {
423
id: 0,
@@ -13,7 +32,7 @@ const mockProps = {
1332
emptyThickness: 10,
1433
line: "round",
1534
lineMode: {
16-
mode: "center",
35+
mode: "normal",
1736
offset: 0,
1837
},
1938
linePosition: {
@@ -75,6 +94,11 @@ export const wait = (ms = 400) => new Promise((resolve) => setTimeout(() => reso
7594
export const setCircleProps = async (wrapper, props = {}) => {
7695
return wrapper.setProps({ options: { ...wrapper.props("options"), ...props } });
7796
};
97+
98+
export const parseRawOptions = (props) => {
99+
return parseOptions({ ...defaultProps, ...props });
100+
};
101+
78102
export const factory = ({ container, props = {}, isCircleFactory = true }) => {
79103
const propsData = isCircleFactory ? { options: { ...mockProps, ...props } } : props;
80104
return mount(container, {

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

Lines changed: 66 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,94 @@
11
import { expect } from "chai";
22
import CircleContainer from "@/components/Circle/CircleContainer.vue";
3-
import Circle from "@/components/Circle/Circle.vue";
4-
import HalfCircle from "@/components/Circle/HalfCircle.vue";
5-
import { factory } from "@/../tests/helper";
3+
import CircleLoader from "@/components/Circle/CircleLoader.vue";
4+
import HalfCircleLoader from "@/components/Circle/HalfCircleLoader.vue";
5+
import { factory, parseRawOptions } from "@/../tests/helper";
66

7-
const localFactory = (props) =>
8-
factory({ container: CircleContainer, props: { colorFill: "black", emptyColorFill: "black", ...props } });
7+
const localFactory = (props) => factory({ container: CircleContainer, props });
98

10-
const linePositionTests = (linePositionProp, selector, half = false, empty = false) => {
11-
describe("linePosition.mode", () => {
12-
describe("linePosition.mode.center", () => {
13-
const wrapper = localFactory({ [linePositionProp]: { position: "center" }, half });
14-
const fillCircleWrapper = wrapper.find(selector);
15-
const circleWrapper = wrapper.findComponent(half ? HalfCircle : Circle);
16-
17-
it("calculates the radius correctly", () => {
18-
const expectedRadius = empty ? circleWrapper.vm.emptyRadius : circleWrapper.vm.radius;
19-
const fillCircleRadius = empty ? circleWrapper.vm.emptyFillRadius : circleWrapper.vm.fillRadius;
20-
expect(fillCircleRadius).to.equal(expectedRadius);
21-
});
22-
23-
it("applies the radius to SVG elements correctly", () => {
24-
let expectedValue = "";
25-
if (half) {
26-
expectedValue = empty ? circleWrapper.vm.emptyFillPath : circleWrapper.vm.fillPath;
27-
} else {
28-
expectedValue = empty ? circleWrapper.vm.emptyRadius : circleWrapper.vm.radius;
29-
}
30-
const value = fillCircleWrapper.element.getAttribute(half ? "d" : "r");
31-
expect(value).to.equal(`${expectedValue}`);
32-
});
9+
const loaderTests = (selector, half = false) => {
10+
describe("loader", () => {
11+
it("do not renders loader component by default", () => {
12+
expect(
13+
localFactory({ half })
14+
.findComponent(half ? HalfCircleLoader : CircleLoader)
15+
.exists()
16+
).to.be.false;
3317
});
34-
describe("linePosition.mode.in", () => {
35-
const thickness = 20;
36-
const size = 200;
37-
const wrapper = localFactory({
38-
[linePositionProp]: { position: "in" },
39-
half,
40-
size,
41-
thickness,
42-
emptyThickness: thickness,
43-
});
44-
const fillCircleWrapper = wrapper.find(selector);
45-
const circleWrapper = wrapper.findComponent(half ? HalfCircle : Circle);
46-
47-
it("calculates the radius correctly", () => {
48-
const expectedRadius = (empty ? circleWrapper.vm.emptyRadius : circleWrapper.vm.radius) + thickness / 2;
49-
const fillCircleRadius = empty ? circleWrapper.vm.emptyFillRadius : circleWrapper.vm.fillRadius;
50-
expect(fillCircleRadius).to.equal(expectedRadius);
51-
});
52-
53-
it("applies the radius to SVG elements correctly", () => {
54-
let expectedValue = "";
55-
const expectedRadius = (empty ? circleWrapper.vm.emptyRadius : circleWrapper.vm.radius) + thickness / 2;
56-
if (half) {
57-
expectedValue = ` M ${size / 2 - expectedRadius}, ${size / 2} a ${expectedRadius},${expectedRadius} 0 1,1 ${
58-
expectedRadius * 2
59-
},0`;
60-
} else {
61-
expectedValue = expectedRadius;
62-
}
63-
const value = fillCircleWrapper.element.getAttribute(half ? "d" : "r");
64-
expect(value).to.equal(`${expectedValue}`);
65-
});
18+
it("do not renders loader component in loading und noData states", () => {
19+
expect(
20+
localFactory({ half, loading: true, noData: true })
21+
.findComponent(half ? HalfCircleLoader : CircleLoader)
22+
.exists()
23+
).to.be.false;
6624
});
67-
describe("linePosition.mode.out", () => {
68-
const thickness = 20;
69-
const size = 200;
70-
const offset = 0;
71-
const wrapper = localFactory({
72-
[linePositionProp]: { position: "out", offset },
73-
half,
74-
size,
75-
thickness,
76-
emptyThickness: thickness,
77-
});
78-
const fillCircleWrapper = wrapper.find(selector);
79-
const circleWrapper = wrapper.findComponent(half ? HalfCircle : Circle);
80-
81-
it("calculates the radius correctly", () => {
82-
const calculatedOffset = thickness / 2 + offset;
83-
const expectedRadius = (empty ? circleWrapper.vm.emptyRadius : circleWrapper.vm.radius) - calculatedOffset;
84-
const fillCircleRadius = empty ? circleWrapper.vm.emptyFillRadius : circleWrapper.vm.fillRadius;
85-
expect(fillCircleRadius).to.equal(expectedRadius);
86-
});
87-
88-
it("applies the radius to SVG elements correctly", () => {
89-
const calculatedOffset = thickness / 2 + offset;
90-
let expectedValue = "";
91-
const expectedRadius = (empty ? circleWrapper.vm.emptyRadius : circleWrapper.vm.radius) - calculatedOffset;
92-
if (half) {
93-
expectedValue = ` M ${size / 2 - expectedRadius}, ${size / 2} a ${expectedRadius},${expectedRadius} 0 1,1 ${
94-
expectedRadius * 2
95-
},0`;
96-
} else {
97-
expectedValue = expectedRadius;
98-
}
99-
const value = fillCircleWrapper.element.getAttribute(half ? "d" : "r");
100-
expect(value).to.equal(`${expectedValue}`);
101-
});
25+
it("renders loader component in loading mod", () => {
26+
expect(
27+
localFactory({ half, loading: true })
28+
.findComponent(half ? HalfCircleLoader : CircleLoader)
29+
.exists()
30+
).to.be.true;
31+
});
32+
it("renders loader component in determinate mod", () => {
33+
expect(
34+
localFactory({ half, determinate: true })
35+
.findComponent(half ? HalfCircleLoader : CircleLoader)
36+
.exists()
37+
).to.be.true;
38+
});
39+
it("has a loading animation class", () => {
40+
expect(localFactory({ half, determinate: true }).find(selector).classes())
41+
.to.be.an("array")
42+
.that.includes("animation__loading");
10243
});
103-
describe("linePosition.mode.out and offset", () => {
104-
const thickness = 20;
105-
const size = 200;
106-
const offset = 20;
107-
const wrapper = localFactory({
108-
[linePositionProp]: { position: "out", offset },
109-
half,
110-
size,
111-
thickness,
112-
emptyThickness: thickness,
113-
});
114-
const fillCircleWrapper = wrapper.find(selector);
115-
const circleWrapper = wrapper.findComponent(half ? HalfCircle : Circle);
44+
describe("replicates progress circle by default", () => {
45+
const props = {
46+
color: "gray",
47+
line: "square",
48+
lineMode: "in 10",
49+
thickness: 15,
50+
};
11651

117-
it("calculates the radius correctly", () => {
118-
const calculatedOffset = thickness / 2 + offset;
119-
const expectedRadius = (empty ? circleWrapper.vm.emptyRadius : circleWrapper.vm.radius) - calculatedOffset;
120-
const fillCircleRadius = empty ? circleWrapper.vm.emptyFillRadius : circleWrapper.vm.fillRadius;
121-
expect(fillCircleRadius).to.equal(expectedRadius);
122-
});
52+
const parsedProps = parseRawOptions({ color: props.color, thickness: props.thickness, line: props.line });
53+
const wrapper = localFactory({ ...parsedProps, half, loading: true });
54+
const loaderWrapper = wrapper.find(selector);
55+
const expectedRadius = wrapper
56+
.find(`.ep-${half ? "half-" : ""}circle--progress`)
57+
.element.getAttribute(half ? "d" : "r");
12358

124-
it("applies the radius to SVG elements correctly", () => {
125-
const calculatedOffset = thickness / 2 + offset;
126-
let expectedValue = "";
127-
const expectedRadius = (empty ? circleWrapper.vm.emptyRadius : circleWrapper.vm.radius) - calculatedOffset;
128-
if (half) {
129-
expectedValue = ` M ${size / 2 - expectedRadius}, ${size / 2} a ${expectedRadius},${expectedRadius} 0 1,1 ${
130-
expectedRadius * 2
131-
},0`;
132-
} else {
133-
expectedValue = expectedRadius;
134-
}
135-
const value = fillCircleWrapper.element.getAttribute(half ? "d" : "r");
136-
expect(value).to.equal(`${expectedValue}`);
137-
});
59+
const testsMap = {
60+
color: () => expect(loaderWrapper.element.getAttribute("stroke")).to.equal(`${props.color}`),
61+
line: () => expect(loaderWrapper.element.getAttribute("stroke-linecap")).to.equal(`${props.line}`),
62+
thickness: () => expect(loaderWrapper.element.getAttribute("stroke-width")).to.equal(`${props.thickness}`),
63+
lineMode: () => expect(loaderWrapper.element.getAttribute(half ? "d" : "r")).to.equal(`${expectedRadius}`),
64+
};
65+
66+
for (const prop in props) {
67+
it(`replicates ${prop} prop`, () => {
68+
testsMap[prop]();
69+
});
70+
}
13871
});
13972
});
14073
};
14174

14275
const runTest = (half = false) => {
14376
const circleClassPrefix = `ep-${half ? "half-" : ""}circle--`;
144-
const circleClassPostfix = `${empty ? "empty" : "progress"}__fill`;
145-
const circleSelector = `.${circleClassPrefix}${circleClassPostfix}`;
146-
linePositionTests(linePositionProp, circleSelector, half, empty);
77+
const circleSelector = `.${circleClassPrefix}loader`;
78+
loaderTests(circleSelector, half);
14779
};
14880

14981
describe("Loader", () => {
15082
describe("Circle", () => {
15183
const half = false;
15284
describe("#loader", () => {
153-
runTest("linePosition", half);
85+
runTest(half);
15486
});
15587
});
15688
describe("Half Circle", () => {
15789
const half = true;
158-
describe("#linePosition", () => {
159-
runTest("linePosition", half);
90+
describe("#loader", () => {
91+
runTest(half);
16092
});
16193
});
16294
});

0 commit comments

Comments
 (0)