Skip to content

Commit 7ba89de

Browse files
lencionilencioni
authored
Merge pull request #42 from happo/jimp
Replace jimp with sharp
2 parents b5daa28 + 7c01174 commit 7ba89de

File tree

8 files changed

+415
-878
lines changed

8 files changed

+415
-878
lines changed

‎.circleci/config.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,4 @@ jobs:
88
steps:
99
- checkout
1010
- run: yarn install
11-
- run: yarn test-ci
11+
- run: yarn test

‎package.json‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@
1616
},
1717
"license": "MIT",
1818
"scripts": {
19-
"start-server": "http-server -p 5411 -c1 src/__tests__/test-images",
20-
"test-ci": "yarn start-server & yarn test",
2119
"test": "jest"
2220
},
2321
"prettier": {
@@ -32,8 +30,7 @@
3230
"imagetracerjs": "^1.2.5"
3331
},
3432
"devDependencies": {
35-
"http-server": "^14.1.1",
3633
"jest": "^29.7.0",
37-
"jimp": "^0.8.5"
34+
"sharp": "^0.34.1"
3835
}
3936
}

‎snapshots/logo/diff.png‎

-413 Bytes
Loading

‎src/__tests__/computeAndInjectDiffs-test.js‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,46 @@
1-
const Jimp = require('jimp');
2-
const crypto = require('crypto');
31
const path = require('path');
2+
const crypto = require('crypto');
3+
const sharp = require('sharp');
44

55
const computeAndInjectDiffs = require('../computeAndInjectDiffs');
66

77
function createHash(data) {
8-
return crypto
9-
.createHash('md5')
10-
.update(data)
11-
.digest('hex');
12-
};
8+
return crypto.createHash('md5').update(data).digest('hex');
9+
}
1310

1411
let image1;
1512
let image2;
1613
let hashFunction;
1714
let subject;
1815

1916
beforeEach(async () => {
20-
image1 = (await Jimp.read(
17+
const image1Sharp = sharp(
2118
path.resolve(__dirname, '../../static/google-logo.png'),
22-
)).bitmap;
23-
image2 = (await Jimp.read(
19+
);
20+
const image2Sharp = sharp(
2421
path.resolve(__dirname, '../../static/github-logo.png'),
25-
)).bitmap;
22+
);
23+
24+
const [image1Metadata, image2Metadata] = await Promise.all([
25+
image1Sharp.metadata(),
26+
image2Sharp.metadata(),
27+
]);
28+
29+
const [image1Buffer, image2Buffer] = await Promise.all([
30+
image1Sharp.raw().toBuffer(),
31+
image2Sharp.raw().toBuffer(),
32+
]);
33+
34+
image1 = {
35+
data: image1Buffer,
36+
width: image1Metadata.width,
37+
height: image1Metadata.height,
38+
};
39+
image2 = {
40+
data: image2Buffer,
41+
width: image2Metadata.width,
42+
height: image2Metadata.height,
43+
};
2644
hashFunction = undefined;
2745
subject = () =>
2846
computeAndInjectDiffs({

‎src/__tests__/createDiffImage-test.js‎

Lines changed: 86 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
const crypto = require('crypto');
21
const path = require('path');
3-
4-
const Jimp = require('jimp');
2+
const sharp = require('sharp');
53

64
const computeAndInjectDiffs = require('../computeAndInjectDiffs');
75
const createDiffImage = require('../createDiffImage');
@@ -11,8 +9,34 @@ let image2;
119
let subject;
1210

1311
beforeEach(async () => {
14-
image1 = (await Jimp.read('http://127.0.0.1:5411/aa-ffffff.png')).bitmap;
15-
image2 = (await Jimp.read('http://127.0.0.1:5411/aa-f7f7f7.png')).bitmap;
12+
const image1Sharp = sharp(
13+
path.resolve(__dirname, 'test-images/aa-ffffff.png'),
14+
);
15+
const image2Sharp = sharp(
16+
path.resolve(__dirname, 'test-images/aa-f7f7f7.png'),
17+
);
18+
19+
const [image1Metadata, image2Metadata] = await Promise.all([
20+
image1Sharp.metadata(),
21+
image2Sharp.metadata(),
22+
]);
23+
24+
const [image1Buffer, image2Buffer] = await Promise.all([
25+
image1Sharp.raw().toBuffer(),
26+
image2Sharp.raw().toBuffer(),
27+
]);
28+
29+
image1 = {
30+
data: image1Buffer,
31+
width: image1Metadata.width,
32+
height: image1Metadata.height,
33+
};
34+
image2 = {
35+
data: image2Buffer,
36+
width: image2Metadata.width,
37+
height: image2Metadata.height,
38+
};
39+
1640
subject = () =>
1741
createDiffImage(
1842
computeAndInjectDiffs({
@@ -24,14 +48,39 @@ beforeEach(async () => {
2448

2549
it('has a total diff value and a max diff', async () => {
2650
const { diff, maxDiff } = await subject();
27-
expect(diff).toEqual(0.000013924627638992437);
28-
expect(maxDiff).toEqual(0.0009183359547574563);
51+
expect(diff).toEqual(0.000008817411988770792);
52+
expect(maxDiff).toEqual(0.0009424140621439462);
2953
});
3054

3155
describe('when images are of different width', () => {
3256
beforeEach(async () => {
33-
image1 = (await Jimp.read('http://127.0.0.1:5411/alert-before.png')).bitmap;
34-
image2 = (await Jimp.read('http://127.0.0.1:5411/alert-after.png')).bitmap;
57+
const image1Sharp = sharp(
58+
path.resolve(__dirname, 'test-images/alert-before.png'),
59+
);
60+
const image2Sharp = sharp(
61+
path.resolve(__dirname, 'test-images/alert-after.png'),
62+
);
63+
64+
const [image1Metadata, image2Metadata] = await Promise.all([
65+
image1Sharp.metadata(),
66+
image2Sharp.metadata(),
67+
]);
68+
69+
const [image1Buffer, image2Buffer] = await Promise.all([
70+
image1Sharp.raw().toBuffer(),
71+
image2Sharp.raw().toBuffer(),
72+
]);
73+
74+
image1 = {
75+
data: image1Buffer,
76+
width: image1Metadata.width,
77+
height: image1Metadata.height,
78+
};
79+
image2 = {
80+
data: image2Buffer,
81+
width: image2Metadata.width,
82+
height: image2Metadata.height,
83+
};
3584
});
3685

3786
it('has a total diff and a max diff', async () => {
@@ -43,13 +92,38 @@ describe('when images are of different width', () => {
4392

4493
describe('when images are of different height', () => {
4594
beforeEach(async () => {
46-
image1 = (await Jimp.read('http://127.0.0.1:5411/button-before.png')).bitmap;
47-
image2 = (await Jimp.read('http://127.0.0.1:5411/button-after.png')).bitmap;
95+
const image1Sharp = sharp(
96+
path.resolve(__dirname, 'test-images/button-before.png'),
97+
);
98+
const image2Sharp = sharp(
99+
path.resolve(__dirname, 'test-images/button-after.png'),
100+
);
101+
102+
const [image1Metadata, image2Metadata] = await Promise.all([
103+
image1Sharp.metadata(),
104+
image2Sharp.metadata(),
105+
]);
106+
107+
const [image1Buffer, image2Buffer] = await Promise.all([
108+
image1Sharp.raw().toBuffer(),
109+
image2Sharp.raw().toBuffer(),
110+
]);
111+
112+
image1 = {
113+
data: image1Buffer,
114+
width: image1Metadata.width,
115+
height: image1Metadata.height,
116+
};
117+
image2 = {
118+
data: image2Buffer,
119+
width: image2Metadata.width,
120+
height: image2Metadata.height,
121+
};
48122
});
49123

50124
it('has a total diff and a max diff', async () => {
51125
const { diff, maxDiff } = await subject();
52-
expect(diff).toBeTruthy()
126+
expect(diff).toBeTruthy();
53127
expect(maxDiff).toBeTruthy();
54128
});
55129
});

‎src/__tests__/index-test.js‎

Lines changed: 51 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
const Jimp = require('jimp');
21
const path = require('path');
2+
const sharp = require('sharp');
33

44
const imageDiff = require('../');
55

@@ -10,12 +10,33 @@ let subject;
1010

1111
beforeEach(async () => {
1212
hashFunction = undefined;
13-
image1 = (await Jimp.read(
13+
const image1Sharp = sharp(
1414
path.resolve(__dirname, '../../static/google-logo.png'),
15-
)).bitmap;
16-
image2 = (await Jimp.read(
15+
);
16+
const image2Sharp = sharp(
1717
path.resolve(__dirname, '../../static/github-logo.png'),
18-
)).bitmap;
18+
);
19+
20+
const [image1Metadata, image2Metadata] = await Promise.all([
21+
image1Sharp.metadata(),
22+
image2Sharp.metadata(),
23+
]);
24+
25+
const [image1Buffer, image2Buffer] = await Promise.all([
26+
image1Sharp.raw().toBuffer(),
27+
image2Sharp.raw().toBuffer(),
28+
]);
29+
30+
image1 = {
31+
data: image1Buffer,
32+
width: image1Metadata.width,
33+
height: image1Metadata.height,
34+
};
35+
image2 = {
36+
data: image2Buffer,
37+
width: image2Metadata.width,
38+
height: image2Metadata.height,
39+
};
1940
subject = () => imageDiff(image1, image2, hashFunction);
2041
});
2142

@@ -42,12 +63,33 @@ it('has meta-data', () => {
4263
});
4364

4465
it('has maxDiff=1 when images are of different size', async () => {
45-
image1 = (await Jimp.read(
66+
const image1Sharp = sharp(
4667
path.resolve(__dirname, 'test-images/button-before.png'),
47-
)).bitmap;
48-
image2 = (await Jimp.read(
68+
);
69+
const image2Sharp = sharp(
4970
path.resolve(__dirname, 'test-images/button-after.png'),
50-
)).bitmap;
71+
);
72+
73+
const [image1Metadata, image2Metadata] = await Promise.all([
74+
image1Sharp.metadata(),
75+
image2Sharp.metadata(),
76+
]);
77+
78+
const [image1Buffer, image2Buffer] = await Promise.all([
79+
image1Sharp.raw().toBuffer(),
80+
image2Sharp.raw().toBuffer(),
81+
]);
82+
83+
image1 = {
84+
data: image1Buffer,
85+
width: image1Metadata.width,
86+
height: image1Metadata.height,
87+
};
88+
image2 = {
89+
data: image2Buffer,
90+
width: image2Metadata.width,
91+
height: image2Metadata.height,
92+
};
5193
const { diff, maxDiff } = subject();
5294
expect(diff).toBeLessThan(1);
5395
expect(maxDiff).toEqual(1);

‎src/__tests__/snapshots-test.js‎

Lines changed: 42 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,12 @@ const childProcess = require('child_process');
33
const fs = require('fs');
44
const path = require('path');
55

6-
const Jimp = require('jimp');
6+
const sharp = require('sharp');
77

88
const imageDiff = require('../');
99

1010
function hashFunction(data) {
11-
return crypto
12-
.createHash('md5')
13-
.update(data)
14-
.digest('hex');
11+
return crypto.createHash('md5').update(data).digest('hex');
1512
}
1613

1714
const snapshots = childProcess
@@ -24,16 +21,41 @@ jest.setTimeout(60000);
2421
describe('snapshot tests', () => {
2522
snapshots.forEach(snapshot => {
2623
it(snapshot, async () => {
27-
console.log('Starting', snapshot);
24+
const pathToBefore = path.resolve('snapshots', snapshot, 'before.png');
25+
const pathToAfter = path.resolve('snapshots', snapshot, 'after.png');
26+
27+
console.log('Starting', snapshot, pathToBefore, pathToAfter);
28+
29+
const image1Sharp = sharp(pathToBefore);
30+
const image2Sharp = sharp(pathToAfter);
31+
32+
const [image1Metadata, image2Metadata] = await Promise.all([
33+
image1Sharp.metadata(),
34+
image2Sharp.metadata(),
35+
]);
36+
2837
const [image1, image2] = await Promise.all([
29-
Jimp.read(path.resolve('snapshots', snapshot, 'before.png')),
30-
Jimp.read(path.resolve('snapshots', snapshot, 'after.png')),
38+
image1Sharp.raw().toBuffer(),
39+
image2Sharp.raw().toBuffer(),
3140
]);
41+
3242
console.log('Images ready', snapshot);
3343

34-
const diffImage = imageDiff(image1.bitmap, image2.bitmap, {
35-
hashFunction,
36-
});
44+
const diffImage = imageDiff(
45+
{
46+
data: image1,
47+
width: image1Metadata.width,
48+
height: image1Metadata.height,
49+
},
50+
{
51+
data: image2,
52+
width: image2Metadata.width,
53+
height: image2Metadata.height,
54+
},
55+
{
56+
hashFunction,
57+
},
58+
);
3759

3860
console.log('Created diff image', snapshot);
3961
const pathToDiff = path.resolve('snapshots', snapshot, 'diff.png');
@@ -46,13 +68,18 @@ describe('snapshot tests', () => {
4668
console.log(
4769
`No previous diff image for ${snapshot} found -- saving diff.png.`,
4870
);
49-
const newDiffImage = await new Jimp(diffImage);
50-
await newDiffImage.write(pathToDiff);
71+
await sharp(diffImage.data, {
72+
raw: {
73+
width: diffImage.width,
74+
height: diffImage.height,
75+
channels: 4,
76+
},
77+
}).toFile(pathToDiff);
5178
}
5279

53-
const expectedDiffImage = (await Jimp.read(pathToDiff)).bitmap;
80+
const expectedDiffImage = await sharp(pathToDiff).raw().toBuffer();
5481
const diffHash = hashFunction(diffImage.data);
55-
const expectedHash = hashFunction(expectedDiffImage.data);
82+
const expectedHash = hashFunction(expectedDiffImage);
5683

5784
if (diffHash !== expectedHash) {
5885
console.log(

0 commit comments

Comments
 (0)