blob: 802286640d1712e212b895649313bf8879516395 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
|
describe("Elements/Button", () => {
beforeEach(() => {
cy.visit("http://127.0.0.1:4000/cyp/elements/button/");
});
it("has a Button", () => {
cy.get(".button").should("exist");
});
it("has a correct Button", () => {
cy.get("#button-default").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white"));
expect(cs.borderColor).to.equal(Cypress.env("grey-lighter"));
expect(cs.borderRadius).to.equal("4px");
expect(cs.color).to.equal(Cypress.env("grey-darker"));
expect(cs.height).to.equal("40px");
expect(cs.lineHeight).to.equal("24px");
expect(cs.padding).to.equal("7px 16px");
});
});
// States
it("has a correct hover Button", () => {
cy.get("#button-hover").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white"));
expect(cs.borderColor).to.equal(Cypress.env("grey-light"));
expect(cs.borderRadius).to.equal("4px");
expect(cs.color).to.equal(Cypress.env("grey-darker"));
expect(cs.height).to.equal("40px");
expect(cs.lineHeight).to.equal("24px");
expect(cs.padding).to.equal("7px 16px");
});
});
it("has a correct focus Button", () => {
cy.get("#button-focus").then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("white"));
expect(cs.borderColor).to.equal(Cypress.env("blue"));
expect(cs.borderRadius).to.equal("4px");
expect(cs.boxShadow).to.equal(
`rgba${Cypress.env("blue").slice(3, -1)}, 0.25) 0px 0px 0px 2px`
);
expect(cs.color).to.equal(Cypress.env("grey-darker"));
expect(cs.height).to.equal("40px");
expect(cs.lineHeight).to.equal("24px");
expect(cs.padding).to.equal("7px 16px");
});
});
// Colors
it(`has correct color Buttons`, () => {
for (let i = 0; i < Cypress.env("color-names").length; i++) {
const name = Cypress.env("color-names")[i];
const baseColor = Cypress.env(name);
const invertColor = Cypress.env(`${name}-invert`);
const lightColor = Cypress.env(`${name}-light`);
const darkColor = Cypress.env(`${name}-dark`);
cy.get(`#button-${name}`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(baseColor);
expect(cs.borderColor).to.equal(Cypress.env("transparent"));
expect(cs.color).to.equal(invertColor);
});
cy.get(`#button-${name}-hover`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderColor).to.equal(Cypress.env("transparent"));
expect(cs.color).to.equal(invertColor);
});
cy.get(`#button-${name}-focus`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.boxShadow).to.equal(
`rgba${baseColor.slice(3, -1)}, 0.25) 0px 0px 0px 2px`
);
expect(cs.borderColor).to.equal(Cypress.env("transparent"));
expect(cs.color).to.equal(invertColor);
});
cy.get(`#button-${name}-active`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.borderColor).to.equal(Cypress.env("transparent"));
expect(cs.color).to.equal(invertColor);
});
cy.get(`#button-${name}-inverted`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(invertColor);
expect(cs.color).to.equal(baseColor);
});
cy.get(`#button-${name}-outlined`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
expect(cs.borderColor).to.equal(baseColor);
expect(cs.color).to.equal(baseColor);
});
cy.get(`#button-${name}-outlined-hover`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(baseColor);
expect(cs.borderColor).to.equal(baseColor);
expect(cs.color).to.equal(invertColor);
});
cy.get(`#button-${name}-inverted-outlined`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(Cypress.env("transparent"));
expect(cs.borderColor).to.equal(invertColor);
expect(cs.color).to.equal(invertColor);
});
cy.get(`#button-${name}-light`).then(($) => {
const cs = window.getComputedStyle($[0]);
expect(cs.backgroundColor).to.equal(lightColor);
expect(cs.color).to.equal(darkColor);
});
}
});
});
|
