Skip to content
This repository was archived by the owner on Jan 26, 2024. It is now read-only.

Commit 2553cc4

Browse files
benox3benox3
authored
Merge pull request #41 from benox3/v0.1.0
Release v0.1.0
2 parents b40a8a1 + b1663fa commit 2553cc4

File tree

5 files changed

+128
-59
lines changed

5 files changed

+128
-59
lines changed

‎lib/server/NoScriptImg.js‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,13 @@ export default class NoScriptImg extends Component {
55
render() {
66
const { alt, style, image} = this.props;
77

8-
if(!image) {
9-
return null;
10-
}
11-
128
return (
139
<noscript dangerouslySetInnerHTML={{
14-
__html: `
15-
<img
16-
alt='${alt}'
17-
style='${convertReactToHTMLStyle(style)}'
18-
src='${image.url}' />
19-
`
10+
__html:
11+
'<img ' +
12+
`alt='${alt}' ` +
13+
`style='${convertReactToHTMLStyle(style)}' ` +
14+
`src='${image.url}' />`
2015
}} />
2116
);
2217
}

‎lib/utils/getResponsiveImage.js‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,6 @@ import reduce from 'core-js/library/fn/array/reduce';
1111
*/
1212
export default function getResponsiveImage(imageSlotWidth, images, currentImg) {
1313
return reduce(images, (prev, cur) => {
14-
15-
if (prev && prev.width === imageSlotWidth) {
16-
return prev;
17-
}
18-
19-
if (cur.width === imageSlotWidth) {
20-
return cur;
21-
}
22-
2314
if (prev.width < imageSlotWidth) {
2415
return cur;
2516
} else {

‎package.json‎

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-pic",
3-
"version": "0.0.14",
3+
"version": "0.1.0",
44
"description": "React component for progressive and responsive image loading.",
55
"author": "Ben Budnevich",
66
"main": "dist/commonjs/react-pic.js",
@@ -42,33 +42,35 @@
4242
"url": "https://github.com/benox3/react-pic/issues"
4343
},
4444
"devDependencies": {
45-
"babel-cli": "^6.16.0",
46-
"babel-core": "^6.17.0",
47-
"babel-eslint": "^6.0.0",
48-
"babel-loader": "^6.2.5",
49-
"babel-plugin-transform-object-rest-spread": "^6.16.0",
50-
"babel-preset-es2015": "^6.16.0",
51-
"babel-preset-react": "^6.16.0",
52-
"chai": "^3.5.0",
53-
"core-js": "^2.4.1",
54-
"coveralls": "^2.11.14",
55-
"cross-env": "^1.0.7",
56-
"enzyme": "^2.4.1",
57-
"eslint": "^2.0.0",
58-
"eslint-plugin-react": "^4.2.3",
59-
"express": "^4.14.0",
60-
"istanbul": "^1.0.0-alpha.2",
61-
"mocha": "^3.0.2",
62-
"nodemon": "^1.10.2",
63-
"npm-run-all": "^3.1.0",
64-
"react": "^15.3.2",
65-
"react-addons-shallow-compare": "^15.3.2",
66-
"react-addons-test-utils": "^15.3.2",
67-
"react-dom": "^15.3.2",
68-
"sinon": "^1.17.6",
69-
"watch": "^0.19.2",
70-
"webpack": "^1.13.2",
71-
"webpack-dev-server": "^1.16.1"
45+
"babel-cli": "6.16.0",
46+
"babel-core": "6.17.0",
47+
"babel-eslint": "6.0.0",
48+
"babel-loader": "6.2.5",
49+
"babel-plugin-transform-object-rest-spread": "6.16.0",
50+
"babel-preset-es2015": "6.16.0",
51+
"babel-preset-react": "6.16.0",
52+
"chai": "3.5.0",
53+
"core-js": "2.4.1",
54+
"coveralls": "2.11.14",
55+
"cross-env": "1.0.7",
56+
"enzyme": "2.4.1",
57+
"eslint": "2.0.0",
58+
"eslint-plugin-react": "4.2.3",
59+
"express": "4.14.0",
60+
"istanbul": "1.0.0-alpha.2",
61+
"jsdom": "9.8.3",
62+
"mocha": "3.0.2",
63+
"nodemon": "1.10.2",
64+
"npm-run-all": "3.1.0",
65+
"react": "15.3.2",
66+
"react-addons-shallow-compare": "15.3.2",
67+
"react-addons-test-utils": "15.3.2",
68+
"react-dom": "15.3.2",
69+
"rimraf": "2.5.4",
70+
"sinon": "1.17.6",
71+
"watch": "0.19.2",
72+
"webpack": "1.13.2",
73+
"webpack-dev-server": "1.16.1"
7274
},
7375
"peerDependencies": {
7476
"react": "0.14.x || ^15.0.0-0 || 15.x",

‎test/component.js‎

Lines changed: 87 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,19 @@ import React from 'react';
22
import { expect } from 'chai';
33
import { shallow, mount, render } from 'enzyme';
44
import Pic from '../lib/';
5-
import { spy } from 'sinon';
5+
import sinon from 'sinon';
66

77
describe('Pic', function() {
8+
let sandbox;
9+
10+
beforeEach(function() {
11+
sandbox = sinon.sandbox.create();
12+
});
13+
14+
afterEach(function () {
15+
sandbox.restore();
16+
});
17+
818
it('should render the first image in images', function() {
919
const props = {
1020
alt: 'heart',
@@ -104,10 +114,30 @@ describe('Pic', function() {
104114
]
105115
};
106116

107-
spy(Pic.prototype, 'inViewHandler');
117+
sandbox.spy(Pic.prototype, 'inViewHandler');
108118
mount(<Pic { ...props } />);
109119

110-
expect(Pic.prototype.inViewHandler).to.have.property('callCount', 1);
120+
expect(Pic.prototype.inViewHandler.callCount).to.equal(1);
121+
});
122+
123+
it('should call componentWillUnmount when unmounted', function() {
124+
const props = {
125+
images: [
126+
{
127+
width: 290,
128+
url: 'http://placehold.it/290?text=♥'
129+
},
130+
{
131+
width: 320,
132+
url: 'http://placehold.it/320?text=♥'
133+
}
134+
]
135+
};
136+
137+
sandbox.spy(Pic.prototype, 'componentWillUnmount');
138+
const wrapper = mount(<Pic { ...props } />);
139+
wrapper.unmount();
140+
expect(Pic.prototype.componentWillUnmount.callCount).to.equal(1);
111141
});
112142

113143
it('should set optimal image if renderOutOfView is true', function() {
@@ -125,10 +155,10 @@ describe('Pic', function() {
125155
]
126156
};
127157

128-
spy(Pic.prototype, 'setResponsiveImage');
158+
sandbox.spy(Pic.prototype, 'setResponsiveImage');
129159
mount(<Pic { ...props } />);
130160

131-
expect(Pic.prototype.setResponsiveImage).to.have.property('callCount', 1);
161+
expect(Pic.prototype.setResponsiveImage.callCount).to.equal(1);
132162
});
133163

134164
it('should set blur to false by default', function() {
@@ -250,4 +280,56 @@ describe('Pic', function() {
250280
pic.find('div').first().attr('style')
251281
).to.contain(`background-color:${props.baseStyle.backgroundColor};`);
252282
});
283+
284+
it('should not render if a url in images is not a string', function() {
285+
const props = {
286+
alt: 'heart',
287+
images: [
288+
{
289+
width: 290,
290+
url: 'http://placehold.it/290?text=♥'
291+
},
292+
{
293+
width: 320,
294+
url: {}
295+
}
296+
]
297+
};
298+
299+
const wrapper = shallow(<Pic {...props} />);
300+
expect(wrapper.find('img')).to.have.length(0);
301+
302+
});
303+
304+
it('should not render if a width in images is not a number', function() {
305+
const props = {
306+
alt: 'heart',
307+
images: [
308+
{
309+
width: 290,
310+
url: 'http://placehold.it/290?text=♥'
311+
},
312+
{
313+
width: 'test',
314+
url: 'http://placehold.it/290?text=♥'
315+
}
316+
]
317+
};
318+
319+
const wrapper = shallow(<Pic {...props} />);
320+
expect(wrapper.find('img')).to.have.length(0);
321+
322+
});
323+
324+
it('should not render if no images passed through', function() {
325+
const props = {
326+
alt: 'heart',
327+
images: []
328+
};
329+
330+
const wrapper = shallow(<Pic {...props} />);
331+
expect(wrapper.find('img')).to.have.length(0);
332+
333+
});
334+
253335
});

‎test/utils.js‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,17 +25,16 @@ describe('Utils', function() {
2525
];
2626

2727
it('should select the correct image in images', function() {
28-
expect(getResponsiveImage('40', images, images[0])).to.equal(images[0]);
29-
expect(getResponsiveImage('290', images, images[0])).to.equal(images[1]);
30-
expect(getResponsiveImage('200', images, images[0])).to.equal(images[1]);
31-
expect(getResponsiveImage('320', images, images[0])).to.equal(images[2]);
32-
expect(getResponsiveImage('40', images, images[2])).to.equal(images[2]);
28+
expect(getResponsiveImage(40, images, images[0])).to.equal(images[0]);
29+
expect(getResponsiveImage(290, images, images[0])).to.equal(images[1]);
30+
expect(getResponsiveImage(200, images, images[0])).to.equal(images[1]);
31+
expect(getResponsiveImage(320, images, images[0])).to.equal(images[2]);
3332
});
3433

3534
it(`should never select a smaller image than one that is
3635
already loaded`, function() {
37-
expect(getResponsiveImage('40', images, images[2])).to.equal(images[2]);
38-
expect(getResponsiveImage('290', images, images[2])).to.equal(images[2]);
36+
expect(getResponsiveImage(40, images, images[2])).to.equal(images[2]);
37+
expect(getResponsiveImage(290, images, images[2])).to.equal(images[2]);
3938
});
4039
});
4140

0 commit comments

Comments
 (0)