Skip to content

Commit 42e2d26

Browse files
graphierosgraphieros
committed
VueUiThermometer add e2e component test
1 parent 7d4ab6a commit 42e2d26

File tree

3 files changed

+149
-5
lines changed

3 files changed

+149
-5
lines changed

‎cypress/fixtures/thermometer.json‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
{
2+
"dataset": {
3+
"value": 30.77,
4+
"from": -100,
5+
"to": 100,
6+
"steps": 20,
7+
"colors": {
8+
"from": "#dc3912",
9+
"to": "#3366cc"
10+
}
11+
},
12+
"config": {
13+
"style": {
14+
"fontFamily":"inherit",
15+
"chart": {
16+
"backgroundColor":"#FFFFFF",
17+
"color":"#2D353C",
18+
"height": 360,
19+
"thermometer": {
20+
"width": 48
21+
},
22+
"padding": {
23+
"top": 12,
24+
"bottom": 12,
25+
"left": 64,
26+
"right": 64
27+
},
28+
"graduations": {
29+
"show": true,
30+
"sides": "both",
31+
"height": 2,
32+
"stroke":"#e1e5e8",
33+
"strokeWidth": 1,
34+
"showIntermediate": true,
35+
"gradient": {
36+
"show": true,
37+
"intensity": 20
38+
}
39+
},
40+
"animation": {
41+
"use": true,
42+
"speedMs": 1000
43+
},
44+
"label": {
45+
"fontSize": 20,
46+
"rounding": 1,
47+
"bold": true,
48+
"color": "#2D353C"
49+
}
50+
},
51+
"title": {
52+
"useDiv": true,
53+
"text": "Title",
54+
"color": "#2D353C",
55+
"fontSize": 20,
56+
"bold": true,
57+
"subtitle": {
58+
"color": "#A1A1A1",
59+
"text": "Subtitle",
60+
"fontSize": 16,
61+
"bold": false
62+
}
63+
}
64+
},
65+
"userOptions": {
66+
"show": true,
67+
"title": "options",
68+
"labels": {
69+
"useDiv": "Title inside"
70+
}
71+
}
72+
}
73+
}

‎src/components/vue-ui-thermometer.cy.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import VueUiThermometer from './vue-ui-thermometer.vue'
2+
3+
describe('<VueUiThermometer />', () => {
4+
5+
beforeEach(function () {
6+
cy.fixture('thermometer.json').as('fixture');
7+
cy.viewport(360, 800);
8+
});
9+
10+
it('renders', () => {
11+
cy.get('@fixture').then((fixture) => {
12+
cy.mount(VueUiThermometer, {
13+
props: {
14+
dataset: fixture.dataset,
15+
config: fixture.config
16+
}
17+
});
18+
19+
cy.get(`[data-cy="thermometer-div-title"]`)
20+
.should('exist')
21+
.contains(fixture.config.style.title.text);
22+
23+
cy.get(`[data-cy="thermometer-div-subtitle"]`)
24+
.should('exist')
25+
.contains(fixture.config.style.title.subtitle.text);
26+
27+
cy.get(`[data-cy="thermometer-summary"]`).click();
28+
29+
cy.get(`[data-cy="thermometer-checkbox-title"]`).check();
30+
31+
cy.get(`[data-cy="thermometer-text-title"]`)
32+
.should('exist')
33+
.contains(fixture.config.style.title.text);
34+
35+
cy.get(`[data-cy="thermometer-text-subtitle"]`)
36+
.should('exist')
37+
.contains(fixture.config.style.title.subtitle.text);
38+
39+
cy.get(`[data-cy="thermometer-checkbox-title"]`).uncheck();
40+
41+
cy.get(`[data-cy="thermometer-datalabel"]`).then(($label) => {
42+
cy.wrap($label)
43+
.should('exist')
44+
.contains(Number(fixture.dataset.value.toFixed(fixture.config.style.chart.label.rounding)).toLocaleString());
45+
46+
cy.wrap($label)
47+
.invoke('attr', 'fill')
48+
.should('eq', fixture.config.style.chart.label.color);
49+
50+
cy.wrap($label)
51+
.invoke('attr', 'font-size')
52+
.should('eq', String(fixture.config.style.chart.label.fontSize));
53+
54+
cy.wrap($label)
55+
.invoke('attr', 'font-weight')
56+
.should('eq', fixture.config.style.chart.label.bold ? 'bold' : 'normal');
57+
});
58+
59+
cy.get(`[data-cy="thermometer-pdf"]`).click();
60+
cy.wait(500);
61+
cy.readFile(`cypress\\Downloads\\${fixture.config.style.title.text}.pdf`);
62+
cy.clearDownloads();
63+
64+
cy.get(`[data-cy="thermometer-summary"]`).click();
65+
66+
});
67+
});
68+
});

‎src/components/vue-ui-thermometer.vue‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -212,14 +212,14 @@ defineExpose({
212212
<Title
213213
:config="{
214214
title: {
215-
cy: 'thermo-div-title',
215+
cy: 'thermometer-div-title',
216216
text: thermoConfig.style.title.text,
217217
color: thermoConfig.style.title.color,
218218
fontSize: thermoConfig.style.title.fontSize,
219219
bold: thermoConfig.style.title.bold
220220
},
221221
subtitle: {
222-
cy: 'thermo-div-subtitle',
222+
cy: 'thermometer-div-subtitle',
223223
text: thermoConfig.style.title.subtitle.text,
224224
color: thermoConfig.style.title.subtitle.color,
225225
fontSize: thermoConfig.style.title.subtitle.fontSize,
@@ -231,15 +231,15 @@ defineExpose({
231231

232232
<!-- OPTIONS -->
233233
<details class="vue-ui-thermometer-user-options" :style="`background:${thermoConfig.style.chart.backgroundColor};color:${thermoConfig.style.chart.color}`" data-html2canvas-ignore v-if="thermoConfig.userOptions.show" ref="details">
234-
<summary :style="`background:${thermoConfig.style.chart.backgroundColor};color:${thermoConfig.style.chart.color}`">{{ thermoConfig.userOptions.title }}</summary>
234+
<summary data-cy="thermometer-summary" :style="`background:${thermoConfig.style.chart.backgroundColor};color:${thermoConfig.style.chart.color}`">{{ thermoConfig.userOptions.title }}</summary>
235235
<div class="vue-ui-thermometer-user-options-items" :style="`background:${thermoConfig.style.chart.backgroundColor};color:${thermoConfig.style.chart.color}`">
236236
<div class="vue-ui-thermometer-user-option-item">
237-
<input type="checkbox" :id="`vue-ui-thermometer-option-title_${uid}`" :name="`vue-ui-thermometer-option-title_${uid}`"
237+
<input data-cy="thermometer-checkbox-title" type="checkbox" :id="`vue-ui-thermometer-option-title_${uid}`" :name="`vue-ui-thermometer-option-title_${uid}`"
238238
v-model="mutableConfig.inside" @change="setPaddingTop
239239
">
240240
<label :for="`vue-ui-thermometer-option-title_${uid}`">{{ thermoConfig.userOptions.labels.useDiv }}</label>
241241
</div>
242-
<button class="vue-ui-thermometer-button" @click="generatePdf" :disabled="isPrinting" style="margin-top:12px" :style="`background:${thermoConfig.style.chart.backgroundColor};color:${thermoConfig.style.chart.color}`">
242+
<button data-cy="thermometer-pdf" class="vue-ui-thermometer-button" @click="generatePdf" :disabled="isPrinting" style="margin-top:12px" :style="`background:${thermoConfig.style.chart.backgroundColor};color:${thermoConfig.style.chart.color}`">
243243
<svg class="vue-ui-thermometer-print-icon" xmlns="http://www.w3.org/2000/svg" v-if="isPrinting" width="20" height="20" viewBox="0 0 24 24" stroke-width="1.5" :stroke="thermoConfig.style.chart.color" fill="none" stroke-linecap="round" stroke-linejoin="round">
244244
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
245245
<path d="M18 16v.01" />
@@ -279,6 +279,7 @@ defineExpose({
279279
<!-- TITLE AS G -->
280280
<g v-if="thermoConfig.style.title.text && mutableConfig.inside && !isPrinting">
281281
<text
282+
data-cy="thermometer-text-title"
282283
:font-size="thermoConfig.style.title.fontSize"
283284
:fill="thermoConfig.style.title.color"
284285
:x="drawingArea.width / 2"
@@ -289,6 +290,7 @@ defineExpose({
289290
{{ thermoConfig.style.title.text }}
290291
</text>
291292
<text
293+
data-cy="thermometer-text-subtitle"
292294
v-if="thermoConfig.style.title.subtitle.text"
293295
:font-size="thermoConfig.style.title.subtitle.fontSize"
294296
:fill="thermoConfig.style.title.subtitle.color"
@@ -417,6 +419,7 @@ defineExpose({
417419
/>
418420
</g>
419421
<text
422+
data-cy="thermometer-datalabel"
420423
:class="{'vue-ui-thermometer-temperature-value': thermoConfig.style.chart.animation.use }"
421424
:y="temperature + drawingArea.top + (thermoConfig.style.chart.label.fontSize / 3)"
422425
:x="drawingArea.left - 10"

0 commit comments

Comments
 (0)