Skip to content

Commit 4aeabc1

Browse files
gajusgajus
committed
Fixes #76.
1 parent 1ee8229 commit 4aeabc1

File tree

5 files changed

+95
-2
lines changed

5 files changed

+95
-2
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"jsdom": "^7.2.2",
2828
"pragmatist": "^2.3.71",
2929
"react": "^0.14.6",
30-
"react-addons-test-utils": "^0.14.6"
30+
"react-addons-test-utils": "^0.14.6",
31+
"react-dom": "^0.14.6"
3132
},
3233
"scripts": {
3334
"pragmatist": "node ./node_modules/.bin/pragmatist --browser",

‎src/linkClass.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@ linkClass = (element, styles = {}, userConfiguration) => {
8787
}
8888

8989
newProps = {
90+
styleName: null,
9091
className: appendClassName
9192
};
9293
}

‎tests/extendReactClass.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
} from 'chai';
66

77
import React from 'react';
8+
import ReactDOM from 'react-dom';
89
import TestUtils from 'react-addons-test-utils';
910
import jsdom from 'jsdom';
1011
import extendReactClass from './../src/extendReactClass';

‎tests/linkClass.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,6 +107,22 @@ describe('linkClass', () => {
107107
expect(subject.props.children[0].props.className).to.equal('foo-1');
108108
expect(subject.props.children[1].props.className).to.equal('bar-1');
109109
});
110+
it('styleName is reset to null', () => {
111+
let subject;
112+
113+
subject = <div>
114+
<p styleName='foo'></p>
115+
<p styleName='bar'></p>
116+
</div>;
117+
118+
subject = linkClass(subject, {
119+
bar: 'bar-1',
120+
foo: 'foo-1'
121+
});
122+
123+
expect(subject.props.children[0].props.styleName).to.equal(null);
124+
expect(subject.props.children[1].props.styleName).to.equal(null);
125+
});
110126
});
111127
context('when multiple descendants have styleName and are iterable', () => {
112128
it('assigns a generated className', () => {
@@ -252,4 +268,34 @@ describe('linkClass', () => {
252268
expect(nodeList.firstChild.className).to.equal('');
253269
});
254270
});
271+
272+
it('unsets styleName property of the target element', () => {
273+
let subject;
274+
275+
subject = <div styleName='foo'></div>;
276+
277+
subject = linkClass(subject, {
278+
foo: 'foo-1'
279+
});
280+
281+
expect(subject.props.className).to.deep.equal('foo-1');
282+
expect(subject.props.styleName).to.deep.equal(null);
283+
});
284+
285+
it('unsets styleName property of the target element (deep)', () => {
286+
let subject;
287+
288+
subject = <div styleName='foo'>
289+
<div styleName='bar'></div>
290+
<div styleName='bar'></div>
291+
</div>;
292+
293+
subject = linkClass(subject, {
294+
foo: 'foo-1',
295+
bar: 'bar-1'
296+
});
297+
298+
expect(subject.props.children[0].props.className).to.deep.equal('bar-1');
299+
expect(subject.props.children[0].props.styleName).to.deep.equal(null);
300+
});
255301
});

‎tests/reactCssModules.js

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ import {
55
} from 'chai';
66

77
import React from 'react';
8+
import ReactDOM from 'react-dom';
89
import TestUtils from 'react-addons-test-utils';
10+
import jsdom from 'jsdom';
911
import reactCssModules from './../src/index';
1012

1113
describe('reactCssModules', () => {
@@ -84,7 +86,6 @@ describe('reactCssModules', () => {
8486
});
8587
});
8688
});
87-
8889
context('a ReactComponent renders nothing', () => {
8990
context('the component is a class that extends React.Component', () => {
9091
it('linkClass must not intervene', () => {
@@ -135,4 +136,47 @@ describe('reactCssModules', () => {
135136
});
136137
});
137138
});
139+
context('rendering element', () => {
140+
beforeEach(() => {
141+
global.document = jsdom.jsdom('<!DOCTYPE html><html><head></head><body></body></html>');
142+
143+
global.window = document.defaultView;
144+
});
145+
146+
context('parent component is using react-css-modules and interpolates props.children', () => {
147+
// @see https://github.com/gajus/react-css-modules/issues/76
148+
it('unsets the styleName property', () => {
149+
let Foo,
150+
Bar,
151+
subject;
152+
153+
Foo = class extends React.Component {
154+
render () {
155+
return <Bar>
156+
<div styleName='test'>foo</div>
157+
</Bar>;
158+
}
159+
};
160+
161+
Foo = reactCssModules(Foo, {
162+
test: 'foo-0'
163+
});
164+
165+
Bar = class extends React.Component {
166+
render () {
167+
return <div>{this.props.children}</div>;
168+
}
169+
};
170+
171+
Bar = reactCssModules(Bar, {
172+
test: 'bar-0'
173+
});
174+
175+
subject = TestUtils.renderIntoDocument(<Foo />);
176+
subject = ReactDOM.findDOMNode(subject);
177+
178+
expect(subject.firstChild.className).to.equal('foo-0');
179+
});
180+
});
181+
});
138182
});

0 commit comments

Comments
 (0)