-
Notifications
You must be signed in to change notification settings - Fork 10.3k
/
gatsby-plugin-image.js
81 lines (67 loc) · 2.95 KB
/
gatsby-plugin-image.js
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
before(() => {
cy.exec(`npm run reset`)
})
after(() => {
cy.exec(`npm run reset`)
})
describe(`remote-file`, () => {
it(`should render correct dimensions`, () => {
cy.visit(`/remote-file/`).waitForRouteChange()
cy.get('[data-testid="public"]').then($urls => {
const urls = Array.from($urls.map((_, $url) => $url.getAttribute("href")))
expect(urls[0].endsWith(".jpg")).to.be.true
expect(urls[1].endsWith(".jpg")).to.be.true
expect(urls[2].endsWith(".jpg")).to.be.true
})
cy.get(".resize").then($imgs => {
const imgDimensions = $imgs.map((_, $img) => $img.getBoundingClientRect())
expect(imgDimensions[0].width).to.be.equal(100)
expect(imgDimensions[0].height).to.be.equal(133)
expect(imgDimensions[1].width).to.be.equal(100)
expect(imgDimensions[1].height).to.be.equal(160)
expect(imgDimensions[2].width).to.be.equal(100)
expect(imgDimensions[2].height).to.be.equal(67)
})
cy.get(".fixed").then($imgs => {
const imgDimensions = $imgs.map((_, $img) => $img.getBoundingClientRect())
expect(imgDimensions[0].width).to.be.equal(100)
expect(imgDimensions[0].height).to.be.equal(133)
expect(imgDimensions[1].width).to.be.equal(100)
expect(imgDimensions[1].height).to.be.equal(160)
expect(imgDimensions[2].width).to.be.equal(100)
expect(imgDimensions[2].height).to.be.equal(67)
})
cy.get(".constrained").then($imgs => {
const imgDimensions = $imgs.map((_, $img) => $img.getBoundingClientRect())
expect(imgDimensions[0].width).to.be.equal(300)
expect(imgDimensions[0].height).to.be.equal(400)
expect(imgDimensions[1].width).to.be.equal(300)
expect(imgDimensions[1].height).to.be.equal(481)
expect(imgDimensions[2].width).to.be.equal(300)
expect(imgDimensions[2].height).to.be.equal(200)
})
cy.get(".full").then($imgs => {
const parentWidth = $imgs[0].parentElement.getBoundingClientRect().width
const imgDimensions = $imgs.map((_, $img) => $img.getBoundingClientRect())
expect(imgDimensions[0].width).to.be.equal(parentWidth)
expect(Math.ceil(imgDimensions[0].height)).to.be.equal(1229)
expect(imgDimensions[1].width).to.be.equal(parentWidth)
expect(Math.ceil(imgDimensions[1].height)).to.be.equal(1478)
expect(imgDimensions[2].width).to.be.equal(parentWidth)
expect(Math.ceil(imgDimensions[2].height)).to.be.equal(614)
})
})
it(`should render a placeholder`, () => {
cy.visit(`/remote-file/`).waitForRouteChange()
cy.get(".fixed [data-placeholder-image]")
.first()
.should("have.css", "background-color", "rgb(232, 184, 8)")
cy.get(".constrained [data-placeholder-image]")
.first()
.should("have.prop", "tagName", "IMG")
cy.get(".constrained [data-placeholder-image]")
.first()
.should("contain.prop", "src", "data:image/jpg;base64")
cy.get(".full [data-placeholder-image]").first().should("be.empty")
})
})