-
Notifications
You must be signed in to change notification settings - Fork 743
/
svg.ts
84 lines (83 loc) · 3.31 KB
/
svg.ts
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
describe("SVG", () => {
it("Correctly applies transforms", () => {
cy.visit("?test=svg")
.wait(200)
.get("[data-testid='rotate']")
.should(($rotate: any) => {
const rotate = $rotate[0] as SVGRectElement
const { top, left, right, bottom } =
rotate.getBoundingClientRect()
expect(Math.round(top)).to.equal(29)
expect(Math.round(left)).to.equal(29)
expect(Math.round(right)).to.equal(171)
expect(Math.round(bottom)).to.equal(171)
})
.get("[data-testid='scale']")
.should(($scale: any) => {
const scale = $scale[0] as SVGRectElement
const { top, left, right, bottom } =
scale.getBoundingClientRect()
expect(top).to.equal(150)
expect(left).to.equal(0)
expect(right).to.equal(200)
expect(bottom).to.equal(350)
})
.get("[data-testid='translate']")
.should(($translate: any) => {
const translate = $translate[0] as SVGRectElement
const { top, left, right, bottom } =
translate.getBoundingClientRect()
expect(top).to.equal(350)
expect(left).to.equal(150)
expect(right).to.equal(250)
expect(bottom).to.equal(450)
})
})
it("Correctly applies transforms in static mode", () => {
cy.visit("?test=svg&isStatic=true")
.wait(200)
.get("[data-testid='rotate']")
.should(($rotate: any) => {
const rotate = $rotate[0] as SVGRectElement
const { top, left, right, bottom } =
rotate.getBoundingClientRect()
expect(Math.round(top)).to.equal(29)
expect(Math.round(left)).to.equal(29)
expect(Math.round(right)).to.equal(171)
expect(Math.round(bottom)).to.equal(171)
})
.get("[data-testid='scale']")
.should(($scale: any) => {
const scale = $scale[0] as SVGRectElement
const { top, left, right, bottom } =
scale.getBoundingClientRect()
expect(top).to.equal(150)
expect(left).to.equal(0)
expect(right).to.equal(200)
expect(bottom).to.equal(350)
})
.get("[data-testid='translate']")
.should(($translate: any) => {
const translate = $translate[0] as SVGRectElement
const { top, left, right, bottom } =
translate.getBoundingClientRect()
expect(top).to.equal(350)
expect(left).to.equal(150)
expect(right).to.equal(250)
expect(bottom).to.equal(450)
})
})
it("Correctly animates to CSS variables", () => {
cy.visit("?test=svg-css-vars")
.wait(50)
.get("svg")
.click()
.wait(50)
.get("circle")
.should(([$circle]: any) => {
expect($circle.getAttribute("fill")).to.equal(
"rgba(180, 0, 180, 1)"
)
})
})
})