Skip to content

Commit 15fc559

Browse files
graphierosgraphieros
committed
Tests - Rewrite VueUiThermometer component test
1 parent 59270ca commit 15fc559

File tree

4 files changed

+57
-123
lines changed

4 files changed

+57
-123
lines changed

‎cypress/fixtures/thermometer.json

Lines changed: 0 additions & 68 deletions
This file was deleted.

‎cypress/fixtures/vdui-components.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1454,6 +1454,10 @@ export const components = [
14541454
from: -100,
14551455
to: 100,
14561456
steps: 20,
1457+
colors: {
1458+
from: '#dc3912',
1459+
to: '#3366cc'
1460+
}
14571461
},
14581462
wrapperClass: ".vue-ui-thermometer",
14591463
config: {
@@ -1464,6 +1468,10 @@ export const components = [
14641468
right: 200,
14651469
},
14661470
},
1471+
title: {
1472+
text: 'Title',
1473+
subtitle: { text: 'Subtitle' }
1474+
}
14671475
},
14681476
},
14691477
},

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

Lines changed: 31 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,34 @@
1-
import VueUiThermometer from './vue-ui-thermometer.vue'
1+
import VueUiThermometer from './vue-ui-thermometer.vue';
2+
import { components } from '../../cypress/fixtures/vdui-components';
3+
import { testCommonFeatures } from '../../cypress/fixtures';
24

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="user-options-summary"]`).click();
28-
5+
const { config, dataset } = components.find(c => c.name === 'VueUiThermometer');
296

30-
cy.get(`[data-cy="thermometer-datalabel"]`).then(($label) => {
31-
cy.wrap($label)
32-
.should('exist')
33-
34-
cy.wrap($label)
35-
.invoke('attr', 'fill')
36-
.should('eq', fixture.config.style.chart.label.color);
37-
38-
cy.wrap($label)
39-
.invoke('attr', 'font-size')
40-
.should('eq', String(fixture.config.style.chart.label.fontSize));
41-
42-
cy.wrap($label)
43-
.invoke('attr', 'font-weight')
44-
.should('eq', fixture.config.style.chart.label.bold ? 'bold' : 'normal');
45-
});
46-
47-
cy.get(`[data-cy="user-options-summary"]`).click();
48-
49-
});
50-
});
7+
describe('<VueUiThermometer />', () => {
8+
it('renders', () => {
9+
cy.mount(VueUiThermometer, {
10+
props: {
11+
dataset,
12+
config
13+
}
14+
}).then(() => {
15+
testCommonFeatures({
16+
userOptions: true,
17+
title: true,
18+
subtitle: true
19+
});
20+
21+
cy.log('pill');
22+
cy.get('[data-cy="pill-underlayer"]').should('exist').and('be.visible');
23+
cy.get('[data-cy="pill-graduation-rect"]').should('exist').and('be.visible').and('have.length', dataset.steps);
24+
cy.get('[data-cy="graduation-left"]').should('exist').and('have.css', 'opacity', '1').and('have.length', dataset.steps);
25+
cy.get('[data-cy="graduation-right"]').should('exist').and('have.css', 'opacity', '1').and('have.length', dataset.steps);
26+
cy.get('[data-cy="graduation-left-intermediary"]').should('exist').and('have.css', 'opacity', '1').and('have.length', dataset.steps * 3);
27+
cy.get('[data-cy="graduation-right-intermediary"]').should('exist').and('have.css', 'opacity', '1').and('have.length', dataset.steps * 3);
28+
29+
cy.log('temperature');
30+
cy.get('[data-cy="temperature-rect"]').should('exist').and('be.visible');
31+
cy.get('[data-cy="temperature-label"]').should('exist').and('be.visible').and('contain', dataset.value);
32+
});
33+
});
5134
});

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

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -390,6 +390,7 @@ defineExpose({
390390

391391
<g clip-path="url(#vueUiPill)">
392392
<rect
393+
data-cy="pill-underlayer"
393394
:x="drawingArea.left"
394395
:y="drawingArea.top"
395396
:height="drawingArea.height - usablePadding.top - usablePadding.bottom"
@@ -398,6 +399,7 @@ defineExpose({
398399
/>
399400
<g v-for="(graduation, i) in graduations" :key="`graduation_${i}`">
400401
<rect
402+
data-cy="pill-graduation-rect"
401403
:x="graduation.x"
402404
:y="graduation.y"
403405
:height="graduation.height"
@@ -407,7 +409,8 @@ defineExpose({
407409
/>
408410

409411
<!-- GRADUATIONS LEFT -->
410-
<line
412+
<line
413+
data-cy="graduation-left"
411414
v-if="FINAL_CONFIG.style.chart.graduations.show && ['both', 'left'].includes(FINAL_CONFIG.style.chart.graduations.sides)"
412415
:x1="graduation.x"
413416
:x2="graduation.x + 10"
@@ -418,7 +421,8 @@ defineExpose({
418421
stroke-linecap="round"
419422
/>
420423
<template v-if="FINAL_CONFIG.style.chart.graduations.showIntermediate">
421-
<line
424+
<line
425+
data-cy="graduation-left-intermediary"
422426
v-if="FINAL_CONFIG.style.chart.graduations.show && ['both', 'left'].includes(FINAL_CONFIG.style.chart.graduations.sides)"
423427
:x1="graduation.x"
424428
:x2="graduation.x + 5"
@@ -429,6 +433,7 @@ defineExpose({
429433
stroke-linecap="round"
430434
/>
431435
<line
436+
data-cy="graduation-left-intermediary"
432437
v-if="FINAL_CONFIG.style.chart.graduations.show && ['both', 'left'].includes(FINAL_CONFIG.style.chart.graduations.sides)"
433438
:x1="graduation.x"
434439
:x2="graduation.x + 2.5"
@@ -438,7 +443,8 @@ defineExpose({
438443
:stroke="FINAL_CONFIG.style.chart.graduations.stroke"
439444
stroke-linecap="round"
440445
/>
441-
<line
446+
<line
447+
data-cy="graduation-left-intermediary"
442448
v-if="FINAL_CONFIG.style.chart.graduations.show && ['both', 'left'].includes(FINAL_CONFIG.style.chart.graduations.sides)"
443449
:x1="graduation.x"
444450
:x2="graduation.x + 2.5"
@@ -452,6 +458,7 @@ defineExpose({
452458

453459
<!-- GRADUATIONS RIGHT -->
454460
<line
461+
data-cy="graduation-right"
455462
v-if="FINAL_CONFIG.style.chart.graduations.show && ['both', 'right'].includes(FINAL_CONFIG.style.chart.graduations.sides)"
456463
:x1="drawingArea.right"
457464
:x2="drawingArea.right - 10"
@@ -462,7 +469,8 @@ defineExpose({
462469
stroke-linecap="round"
463470
/>
464471
<template v-if="FINAL_CONFIG.style.chart.graduations.showIntermediate">
465-
<line
472+
<line
473+
data-cy="graduation-right-intermediary"
466474
v-if="FINAL_CONFIG.style.chart.graduations.show && ['both', 'right'].includes(FINAL_CONFIG.style.chart.graduations.sides)"
467475
:x1="drawingArea.right"
468476
:x2="drawingArea.right - 5"
@@ -472,7 +480,8 @@ defineExpose({
472480
:stroke="FINAL_CONFIG.style.chart.graduations.stroke"
473481
stroke-linecap="round"
474482
/>
475-
<line
483+
<line
484+
data-cy="graduation-right-intermediary"
476485
v-if="FINAL_CONFIG.style.chart.graduations.show && ['both', 'right'].includes(FINAL_CONFIG.style.chart.graduations.sides)"
477486
:x1="drawingArea.right"
478487
:x2="drawingArea.right - 2.5"
@@ -482,7 +491,8 @@ defineExpose({
482491
:stroke="FINAL_CONFIG.style.chart.graduations.stroke"
483492
stroke-linecap="round"
484493
/>
485-
<line
494+
<line
495+
data-cy="graduation-right-intermediary"
486496
v-if="FINAL_CONFIG.style.chart.graduations.show && ['both', 'right'].includes(FINAL_CONFIG.style.chart.graduations.sides)"
487497
:x1="drawingArea.right"
488498
:x2="drawingArea.right - 2.5"
@@ -495,6 +505,7 @@ defineExpose({
495505
</template>
496506
</g>
497507
<rect
508+
data-cy="temperature-rect"
498509
:class="{'vue-ui-thermometer-temperature': FINAL_CONFIG.style.chart.animation.use }"
499510
:x="drawingArea.left"
500511
:y="drawingArea.top"
@@ -504,7 +515,7 @@ defineExpose({
504515
/>
505516
</g>
506517
<text
507-
data-cy="thermometer-datalabel"
518+
data-cy="temperature-label"
508519
:class="{'vue-ui-thermometer-temperature-value': FINAL_CONFIG.style.chart.animation.use }"
509520
:y="temperature + drawingArea.top + (FINAL_CONFIG.style.chart.label.fontSize / 3)"
510521
:x="drawingArea.left - 10"

0 commit comments

Comments
 (0)