Skip to content

Commit 3386261

Browse files
ludmilanesvitiyvalorkin
ludmilanesvitiy
authored and
valorkin
committed
feat(tests): add full e2e coverage for Progressbar component (#4924)
1 parent f17459f commit 3386261

File tree

2 files changed

+207
-0
lines changed

2 files changed

+207
-0
lines changed

‎cypress/full/progressbar_page_spec.ts

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import { ProgressbarPo } from '../support/progressbar.po';
2+
3+
export function checkDynamicProgressbar() {
4+
const progressbar = new ProgressbarPo();
5+
const dynamic = progressbar.exampleDemosArr.dynamic;
6+
7+
8+
progressbar.getBar(dynamic, 0).then($barValue => {
9+
const barValueNumber = Number($barValue.text().split(' /')[0]);
10+
const barType = progressbar.getBarType(barValueNumber);
11+
12+
progressbar.isBarHaveAttrs(dynamic, [{ attr: 'aria-valuenow', value: `${barValueNumber}` }], 0);
13+
progressbar.isProgressbarHaveAttrs(dynamic, [{ attr: 'max', value: '200' }], 0);
14+
15+
progressbar.isBarHaveAttrs(dynamic, [{ attr: 'aria-valuenow', value: `${barValueNumber}` }], 1);
16+
progressbar.isProgressbarHaveAttrs(dynamic, [{ attr: 'max', value: '100' }, { attr: 'type', value: 'success' }], 1);
17+
18+
progressbar.isBarHaveAttrs(dynamic, [{ attr: 'aria-valuenow', value: `${barValueNumber}` }], 2);
19+
progressbar.isBarTxtContain(dynamic, barType, 2);
20+
});
21+
22+
progressbar.isButtonExist(dynamic, 'Randomize');
23+
progressbar.isBarHaveAnimation(dynamic, false, 0);
24+
progressbar.isBarHaveAnimation(dynamic, false, 1);
25+
progressbar.isBarHaveAnimation(dynamic, false, 2);
26+
}
27+
28+
describe('Progressbar demo page test suite', () => {
29+
const progressbar = new ProgressbarPo();
30+
31+
beforeEach(() => progressbar.navigateTo());
32+
33+
describe('Static', () => {
34+
const staticBars = progressbar.exampleDemosArr.static;
35+
36+
it('User see 3 progressbars, 1 value matches config, 2 - "warning", 3 - "danger", animation', () => {
37+
progressbar.scrollToMenu('Static');
38+
progressbar.isProgressbarHaveAttrs(staticBars, [{ attr: 'max', value: '100' }], 0);
39+
progressbar.isProgressbarHaveAttrs(staticBars, [{ attr: 'type', value: 'warning' },
40+
{ attr: 'max', value: '100' }], 1);
41+
progressbar.isProgressbarHaveAttrs(staticBars, [{ attr: 'type', value: 'danger' },
42+
{ attr: 'max', value: '200' }], 2);
43+
44+
progressbar.isBarHaveAttrs(staticBars, [{ attr: 'aria-valuetext', value: '55%' }], 0);
45+
progressbar.isBarHaveAttrs(staticBars, [{ attr: 'aria-valuetext', value: '22%' }], 1);
46+
progressbar.isBarHaveAttrs(staticBars, [{ attr: 'aria-valuetext', value: '83%' },
47+
{ attr: 'aria-valuenow', value: '166' }], 2);
48+
progressbar.isBarHaveAnimationCSS(staticBars, true, 2);
49+
});
50+
});
51+
52+
describe('Dynamic', () => {
53+
const dynamic = progressbar.exampleDemosArr.dynamic;
54+
55+
beforeEach(() => progressbar.scrollToMenu('Dynamic'));
56+
57+
it('user see 3 dynamic progressbars, "Randomize" button, 1 - default, 2 - "success", 3 - depend on value', () => {
58+
checkDynamicProgressbar();
59+
});
60+
61+
it('when user click "Randomize", then value of each bar changed with type (info/warning/success/danger/)', () => {
62+
progressbar.clickOnBtn(dynamic, 0);
63+
checkDynamicProgressbar();
64+
progressbar.clickOnBtn(dynamic, 0);
65+
checkDynamicProgressbar();
66+
});
67+
});
68+
69+
describe('Stacked', () => {
70+
const stacked = progressbar.exampleDemosArr.stacked;
71+
72+
beforeEach(() => progressbar.scrollToMenu('Stacked'));
73+
74+
it('user see 1 progressbar with up to 4 bars inside and "Randomize" button', () => {
75+
progressbar.isProgressBarsLengthEql(stacked, 1);
76+
progressbar.isBarsLengthGreaterThan(stacked, 0);
77+
progressbar.isButtonExist(stacked, 'Randomize');
78+
});
79+
80+
it('When user click "Randomize", then value of each bar changed, bar should have appropriate percentage', () => {
81+
progressbar.clickOnBtn(stacked, 0);
82+
progressbar.getBars(stacked).each(($bar, index) => {
83+
const barValueNumber = Number($bar.text().split(' %')[0]);
84+
85+
progressbar.isBarHaveAttrs(stacked, [{ attr: 'aria-valuenow', value: `${barValueNumber}` },
86+
{ attr: 'style', value: `height: 100%; width: ${barValueNumber}%;` }], index);
87+
progressbar.isBarTypeHaveClass(stacked);
88+
});
89+
});
90+
});
91+
92+
describe('Configuring defaults', () => {
93+
const configDefaults = progressbar.exampleDemosArr.config;
94+
const barConfig = {
95+
value: 136,
96+
type: 'danger',
97+
striped: 'striped',
98+
animate: true,
99+
max: 150
100+
};
101+
102+
beforeEach(() => {
103+
cy.viewport(1440, 900);
104+
progressbar.clickOnDemoMenu('Configuring defaults');
105+
});
106+
107+
it('user see 1 progressbar with specific value and type as in Template src', () => {
108+
progressbar.isProgressBarsLengthEql(configDefaults, 1);
109+
progressbar.isBarsLengthGreaterThan(configDefaults, 0);
110+
progressbar.isBarHaveAttrs(configDefaults, [{ attr: 'aria-valuenow', value: `${barConfig.value}` }]);
111+
progressbar.isBarTypeHaveClass(configDefaults, 0, barConfig.striped);
112+
progressbar.isBarTypeHaveClass(configDefaults, 0, barConfig.type);
113+
progressbar.isBarHaveAnimationCSS(configDefaults, barConfig.animate);
114+
progressbar.isBarTxtContain(configDefaults, `${barConfig.value} / ${barConfig.max}`);
115+
});
116+
});
117+
});

‎cypress/support/progressbar.po.ts

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { BaseComponent } from './base.component';
2+
import { AttrObj } from './interfaces';
23

34
export class ProgressbarPo extends BaseComponent {
45
pageUrl = '/progressbar';
@@ -9,6 +10,95 @@ export class ProgressbarPo extends BaseComponent {
910
tagBar = 'bar';
1011

1112
exampleDemosArr = {
13+
static: 'demo-progressbar-static',
14+
dynamic: 'demo-progressbar-dynamic',
15+
stacked: 'demo-progressbar-stacked',
1216
config: 'demo-progressbar-config'
1317
};
18+
19+
isProgressbarHaveAttrs(baseSelector: string, attributes: AttrObj[], progressBarIndex = 0) {
20+
cy.get(`${ baseSelector } ${ this.tagProgressbar }`).eq(progressBarIndex)
21+
.then(progressbar => {
22+
let i = 0;
23+
for (; i < attributes.length; i++) {
24+
expect(progressbar).to.have.attr(attributes[i].attr, attributes[i].value);
25+
}
26+
});
27+
}
28+
29+
isBarHaveAttrs(baseSelector: string, attributes: AttrObj[], barIndex = 0) {
30+
this.getBar(baseSelector, barIndex).then(bar => {
31+
let i = 0;
32+
for (; i < attributes.length; i++) {
33+
expect(bar).to.have.attr(attributes[i].attr, attributes[i].value);
34+
}
35+
});
36+
}
37+
38+
isBarTypeHaveClass(baseSelector: string, barIndex = 0, expectedClass?: string) {
39+
this.getBar(baseSelector, barIndex).then($bar => {
40+
if (!expectedClass) {
41+
expect($bar.attr('class').split('bg-')[1]).to.match(/^(success|info|danger|warning)$/);
42+
} else {
43+
expect($bar.attr('class').split('bg-')[1]).to.contain(expectedClass);
44+
}
45+
});
46+
}
47+
48+
isBarHaveAnimation(baseSelector: string, animated: boolean, barIndex = 0) {
49+
this.getBar(baseSelector, barIndex).then(bar => animated ? expect(bar).to.have.class('progress-bar-animated') :
50+
expect(bar).not.to.have.class('progress-bar-animated'));
51+
}
52+
53+
isBarHaveAnimationCSS(baseSelector: string, animated: boolean, barIndex = 0) {
54+
this.getBar(baseSelector, barIndex).then(bar => animated ? expect(bar.css('animation')).not.to.be.undefined :
55+
expect(bar.css('animation')).to.be.undefined);
56+
}
57+
58+
isBarTxtContain(baseSelector: string, expectedText: string, barIndex = 0) {
59+
this.getBar(baseSelector, barIndex).invoke('text').should('to.contain', expectedText);
60+
}
61+
62+
getBar(baseSelector: string, barIndex = 0) {
63+
return cy.get(`${baseSelector} ${this.tagProgressbar} ${this.tagBar}`).eq(barIndex);
64+
}
65+
66+
getBarType(barValueNumber: number) {
67+
let barType: string;
68+
69+
switch (true) {
70+
case (barValueNumber >= 25 && barValueNumber < 50) :
71+
barType = 'info';
72+
break;
73+
74+
case (barValueNumber >= 50 && barValueNumber < 75) :
75+
barType = 'warning';
76+
break;
77+
78+
case (barValueNumber < 25) :
79+
barType = 'success';
80+
break;
81+
82+
case (barValueNumber >= 75) :
83+
barType = 'danger';
84+
break;
85+
86+
default:
87+
barType = 'info';
88+
}
89+
90+
return barType;
91+
}
92+
93+
isProgressBarsLengthEql(baseSelector: string, expectedLength: number) {
94+
cy.get(`${ baseSelector } ${ this.tagProgressbar }`).its('length').should('eq', expectedLength);
95+
}
96+
97+
isBarsLengthGreaterThan(baseSelector: string, minLength: number) {
98+
cy.get(`${ baseSelector } ${ this.tagProgressbar } ${ this.tagBar }`).its('length').should('be.gt', minLength);
99+
}
100+
101+
getBars(baseSelector: string) {
102+
return cy.get(`${ baseSelector } ${ this.tagProgressbar } ${ this.tagBar }`);
103+
}
14104
}

0 commit comments

Comments
 (0)