Skip to content

Commit 5d68829

Browse files
author
Sepand Parhami
committed
Review comments.
1 parent 63d5708 commit 5d68829

File tree

1 file changed

+61
-46
lines changed

1 file changed

+61
-46
lines changed

‎src/test-imitation-img.ts

Lines changed: 61 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,10 @@ import {imgLoadPromise} from './testing/utils';
2020
const {expect} = chai;
2121
const fourByThreeUri = 'data:image/gif;base64,R0lGODdhBAADAIAAAP///////ywAAAAABAADAAACA4SPVgA7';
2222
const threeByFourUri = 'data:image/gif;base64,R0lGODdhAwAEAIAAAP///////ywAAAAAAwAEAAACA4SPVgA7';
23+
const testLeft = 0;
24+
const testTop = 0;
25+
const testWidth = 10;
26+
const testHeight = 10;
2327

2428
async function updateImg(img, fit, src) {
2529
img.style.objectFit = fit;
@@ -29,12 +33,12 @@ async function updateImg(img, fit, src) {
2933

3034
describe('createImitationImg', () => {
3135
let testContainer;
32-
let img;
36+
let srcImg;
3337

3438
beforeEach(() => {
35-
img = document.createElement('img');
39+
srcImg = document.createElement('img');
3640
testContainer = document.createElement('div');
37-
testContainer.appendChild(img);
41+
testContainer.appendChild(srcImg);
3842
document.body.appendChild(testContainer);
3943
});
4044

@@ -44,115 +48,126 @@ describe('createImitationImg', () => {
4448

4549
describe('for object-fit: contain', () => {
4650
beforeEach(async () => {
47-
await updateImg(img, 'contain', threeByFourUri);
48-
img.style.width = '10px';
49-
img.style.height = '10px';
51+
await updateImg(srcImg, 'contain', threeByFourUri);
52+
srcImg.style.width = `${testWidth}px`;
53+
srcImg.style.height = `${testHeight}px`;
5054
});
5155

5256
describe('the scaleElement', () => {
5357
it('should size correctly', async () => {
54-
const {scaleElement} = createImitationImg(img);
58+
const {scaleElement} = createImitationImg(srcImg);
5559
testContainer.appendChild(scaleElement);
5660

5761
const {width, height} = scaleElement.getBoundingClientRect();
58-
expect(width).to.equal(10);
59-
expect(height).to.equal(10);
62+
expect(width).to.equal(testWidth);
63+
expect(height).to.equal(testHeight);
6064
});
6165
});
6266

6367
describe('the img', () => {
64-
let scaleElement;
65-
let replacementImg;
68+
let imgElement;
6669

6770
beforeEach(() => {
68-
const replacement = createImitationImg(img);
69-
scaleElement = replacement.scaleElement;
70-
replacementImg = replacement.img;
71+
const {img, scaleElement} = createImitationImg(srcImg);
72+
imgElement = img;
7173
testContainer.appendChild(scaleElement);
7274
scaleElement.style.position = 'fixed';
73-
scaleElement.style.top = '10px';
74-
scaleElement.style.left = '10px';
75+
scaleElement.style.top = `${testTop}px`;
76+
scaleElement.style.left = `${testLeft}px`;
7577
})
7678

7779
it('should size correctly', async () => {
78-
const {width, height} = replacementImg.getBoundingClientRect();
80+
const {width, height} = imgElement.getBoundingClientRect();
81+
// (3/4) * testHeight
7982
expect(width).to.equal(7.5);
83+
// Larger dimension is height, so should match testHeight
8084
expect(height).to.equal(10);
8185
});
8286

8387
it('should position correctly', async () => {
84-
const {left, top} = replacementImg.getBoundingClientRect();
85-
expect(left).to.equal(11.25);
86-
expect(top).to.equal(10);
88+
const {left, top} = imgElement.getBoundingClientRect();
89+
// Should center the horizontal and has a width of 7.5
90+
// testLeft + (testWidth - ((3/4) * testWidth)) / 2 = 1.25
91+
expect(left).to.equal(1.25);
92+
// Height matches testHeight, so centered at testTop
93+
expect(top).to.equal(0);
8794
});
8895
});
8996
});
9097

9198
describe('for object-fit: cover', () => {
9299
describe('for portrait images', () => {
93100
beforeEach(async () => {
94-
await updateImg(img, 'cover', threeByFourUri);
95-
img.style.width = '10px';
96-
img.style.height = '10px';
101+
await updateImg(srcImg, 'cover', threeByFourUri);
102+
srcImg.style.width = `${testWidth}px`;
103+
srcImg.style.height = `${testHeight}px`;
97104
});
98105

99106
describe('the img', () => {
100-
let replacementImg;
107+
let imgElement;
101108

102109
beforeEach(() => {
103-
const replacement = createImitationImg(img);
104-
const scaleElement = replacement.scaleElement;
105-
replacementImg = replacement.img;
110+
const {img, scaleElement} = createImitationImg(srcImg);
111+
imgElement = img;
106112
testContainer.appendChild(scaleElement);
107113
scaleElement.style.position = 'fixed';
108-
scaleElement.style.top = '100px';
109-
scaleElement.style.left = '100px';
114+
scaleElement.style.top = `${testTop}px`;
115+
scaleElement.style.left = `${testLeft}px`;
110116
})
111117

112118
it('should size correctly', async () => {
113-
const {width, height} = replacementImg.getBoundingClientRect();
119+
const {width, height} = imgElement.getBoundingClientRect();
120+
// Smaller dimension is width, so should match testWidth
114121
expect(width).to.equal(10);
122+
// (4/3) * testWidth
115123
expect(height).to.be.closeTo(13.333, 0.1);
116124
});
117125

118126
it('should position correctly', async () => {
119-
const {left, top} = replacementImg.getBoundingClientRect();
120-
expect(left).to.equal(100);
121-
expect(top).to.be.closeTo(98.333, 0.1);
127+
const {left, top} = imgElement.getBoundingClientRect();
128+
// Width matches testWidth, so centered at testLeft
129+
expect(left).to.equal(0);
130+
// Should center the vertical and has a height of 13.333
131+
// testLeft + (testWidth - ((4/3) * testWidth)) / 2 = -1.666
132+
expect(top).to.be.closeTo(-1.666, 0.1);
122133
});
123134
});
124135
});
125136

126137
describe('for landscape images', () => {
127138
beforeEach(async () => {
128-
await updateImg(img, 'cover', fourByThreeUri);
129-
img.style.width = '10px';
130-
img.style.height = '10px';
139+
await updateImg(srcImg, 'cover', fourByThreeUri);
140+
srcImg.style.width = `${testWidth}px`;
141+
srcImg.style.height = `${testHeight}px`;
131142
});
132143

133144
describe('the img', () => {
134-
let replacementImg;
145+
let imgElement;
135146

136147
beforeEach(() => {
137-
const replacement = createImitationImg(img);
138-
const scaleElement = replacement.scaleElement;
139-
replacementImg = replacement.img;
148+
const {img, scaleElement} = createImitationImg(srcImg);
149+
imgElement = img;
140150
testContainer.appendChild(scaleElement);
141151
scaleElement.style.position = 'fixed';
142-
scaleElement.style.top = '100px';
143-
scaleElement.style.left = '100px';
152+
scaleElement.style.top = `${testTop}px`;
153+
scaleElement.style.left = `${testLeft}px`;
144154
})
145155

146156
it('should size correctly', async () => {
147-
const {width, height} = replacementImg.getBoundingClientRect();
157+
const {width, height} = imgElement.getBoundingClientRect();
158+
// (4/3) * testHeight = 13.333
148159
expect(width).to.be.closeTo(13.333, 0.1);
160+
// Smaller dimension is height, so should match testHeight
149161
expect(height).to.equal(10);
150162
});
151163

152164
it('should position correctly', async () => {
153-
const {left, top} = replacementImg.getBoundingClientRect();
154-
expect(left).to.be.closeTo(98.333, 0.1);
155-
expect(top).to.equal(100);
165+
const {left, top} = imgElement.getBoundingClientRect();
166+
// Should center the horizontal and has a width of 13.333
167+
// testLeft + (testHeight - ((4/3) * testHeight)) / 2 = -1.666
168+
expect(left).to.be.closeTo(-1.666, 0.1);
169+
// Height matches testHeight, so centered at testTop
170+
expect(top).to.equal(0);
156171
});
157172
});
158173
});

0 commit comments

Comments
 (0)