diff --git a/src/components/test/code-snippet.jsx b/src/components/test/code-snippet.jsx
index 7cda7d8e..46cc118e 100644
--- a/src/components/test/code-snippet.jsx
+++ b/src/components/test/code-snippet.jsx
@@ -54,8 +54,10 @@ class CodeSnippet extends Component {
render() {
const { className, code, lang, label, showLabel, useInlineDiffs } = this.props;
const isDiff = lang === 'diff';
- const cxName = cx(className, lang, {
- hljs: !this.shouldHighlight(),
+ const shouldHighlight = this.shouldHighlight();
+ const cxName = cx(className, {
+ [lang]: shouldHighlight,
+ hljs: !shouldHighlight,
'code-diff': isDiff,
'inline-diff': isDiff && useInlineDiffs
});
diff --git a/src/components/test/context.jsx b/src/components/test/context.jsx
index c2452c3d..748e3598 100644
--- a/src/components/test/context.jsx
+++ b/src/components/test/context.jsx
@@ -63,8 +63,13 @@ class TestContext extends Component {
return this.renderLink(content, title);
}
- // Default
- const code = isString(content) ? content : JSON.stringify(content, null, 2);
+ // Simple string
+ if (isString(content)) {
+ return ;
+ }
+
+ // All other types (primitives, objects, arrays...)
+ const code = JSON.stringify(content, null, 2);
return (
);
diff --git a/test/spec/components/test/code-snippet.test.jsx b/test/spec/components/test/code-snippet.test.jsx
index a94523c9..60fe2b1d 100644
--- a/test/spec/components/test/code-snippet.test.jsx
+++ b/test/spec/components/test/code-snippet.test.jsx
@@ -39,7 +39,8 @@ describe('', () => {
const props = {
code: 'function(){console.log(\'sample code\');}'
};
- getInstance(props);
+ const wrapper = getInstance(props);
+ expect(wrapper.hasClass('javascript')).to.equal(true);
expect(document.querySelectorAll('.hljs-keyword').length).to.equal(1);
});
@@ -49,6 +50,7 @@ describe('', () => {
lang: 'diff'
};
const wrapper = getInstance(props);
+ expect(wrapper.hasClass('diff')).to.equal(true);
expect(wrapper.hasClass('inline-diff')).to.equal(false);
expect(document.querySelectorAll('.test-code-diff-expected').length).to.equal(1);
expect(document.querySelectorAll('.test-code-diff-actual').length).to.equal(1);
@@ -67,6 +69,7 @@ describe('', () => {
lang: 'diff'
};
const wrapper = getInstance(props, { useInlineDiffs: true });
+ expect(wrapper.hasClass('diff')).to.equal(false);
expect(wrapper.hasClass('inline-diff')).to.equal(true);
expect(document.querySelectorAll('.test-code-diff-expected').length).to.equal(2);
expect(document.querySelectorAll('.test-code-diff-actual').length).to.equal(2);
@@ -75,9 +78,11 @@ describe('', () => {
it('does not highlight when prop is false', () => {
const props = {
code: 'function(){console.log(\'sample code\');}',
- highlight: false
+ highlight: false,
+ lang: 'piglatin'
};
- getInstance(props);
+ const wrapper = getInstance(props);
+ expect(wrapper.hasClass('piglatin')).to.equal(false);
expect(document.querySelectorAll('.hljs-keyword').length).to.equal(0);
});
diff --git a/test/spec/components/test/context.test.jsx b/test/spec/components/test/context.test.jsx
index 074289a2..c75daf7d 100644
--- a/test/spec/components/test/context.test.jsx
+++ b/test/spec/components/test/context.test.jsx
@@ -21,143 +21,152 @@ describe('', () => {
};
};
- it('renders context when value is undefined', () => {
- const context = {
- title: 'sample context',
- value: 'undefined'
- };
- const { wrapper, ctxItems } = getInstance({
- context: JSON.stringify(context),
- className: 'test'
+ describe('when context is a string', () => {
+ it('renders simple string', () => {
+ const context = 'sample context';
+ const { wrapper, snippet } = getInstance({
+ context: JSON.stringify(context),
+ className: 'test'
+ });
+ expect(wrapper).to.have.className('test');
+ expect(snippet).to.have.lengthOf(1);
});
- expect(wrapper).to.have.className('test');
- expect(ctxItems).to.have.lengthOf(1);
- });
- it('renders context with string', () => {
- const context = 'sample context';
- const { wrapper, snippet } = getInstance({
- context: JSON.stringify(context),
- className: 'test'
+ it('renders url with protocol', () => {
+ const context = 'http://test.url.com/somepath';
+ const { wrapper, snippet, link } = getInstance({
+ context: JSON.stringify(context),
+ className: 'test'
+ });
+ expect(wrapper).to.have.className('test');
+ expect(snippet).to.have.lengthOf(0);
+ expect(link).to.have.lengthOf(1);
+ link.simulate('click', { stopPropagation: noop });
});
- expect(wrapper).to.have.className('test');
- expect(snippet).to.have.lengthOf(1);
- });
- it('renders context with string, url with protocol', () => {
- const context = 'http://test.url.com/somepath';
- const { wrapper, snippet, link } = getInstance({
- context: JSON.stringify(context),
- className: 'test'
+ it('renders url without protocol', () => {
+ const context = 'test.url.com/somepath';
+ const { wrapper, snippet, link } = getInstance({
+ context: JSON.stringify(context),
+ className: 'test'
+ });
+ expect(wrapper).to.have.className('test');
+ expect(snippet).to.have.lengthOf(0);
+ expect(link).to.have.lengthOf(1);
});
- expect(wrapper).to.have.className('test');
- expect(snippet).to.have.lengthOf(0);
- expect(link).to.have.lengthOf(1);
- link.simulate('click', { stopPropagation: noop });
- });
- it('renders context with string, url without protocol', () => {
- const context = 'test.url.com/somepath';
- const { wrapper, snippet, link } = getInstance({
- context: JSON.stringify(context),
- className: 'test'
+ it('renders image url with protocol', () => {
+ const context = 'http://test.url.com/testimage.png';
+ const { wrapper, snippet, img } = getInstance({
+ context: JSON.stringify(context),
+ className: 'test'
+ });
+ expect(wrapper).to.have.className('test');
+ expect(snippet).to.have.lengthOf(0);
+ expect(img).to.have.lengthOf(1);
+ img.simulate('click', { stopPropagation: noop });
});
- expect(wrapper).to.have.className('test');
- expect(snippet).to.have.lengthOf(0);
- expect(link).to.have.lengthOf(1);
- });
- it('renders context with string, image url with protocol', () => {
- const context = 'http://test.url.com/testimage.png';
- const { wrapper, snippet, img } = getInstance({
- context: JSON.stringify(context),
- className: 'test'
+ it('renders image url without protocol', () => {
+ const context = 'test.url.com/testimage.png';
+ const { wrapper, snippet, img } = getInstance({
+ context: JSON.stringify(context),
+ className: 'test'
+ });
+ expect(wrapper).to.have.className('test');
+ expect(snippet).to.have.lengthOf(0);
+ expect(img).to.have.lengthOf(1);
});
- expect(wrapper).to.have.className('test');
- expect(snippet).to.have.lengthOf(0);
- expect(img).to.have.lengthOf(1);
- img.simulate('click', { stopPropagation: noop });
- });
- it('renders context with string, image url without protocol', () => {
- const context = 'test.url.com/testimage.png';
- const { wrapper, snippet, img } = getInstance({
- context: JSON.stringify(context),
- className: 'test'
+ it('renders local image', () => {
+ const context = '/testimage.png';
+ const { wrapper, snippet, img } = getInstance({
+ context: JSON.stringify(context),
+ className: 'test'
+ });
+ expect(wrapper).to.have.className('test');
+ expect(snippet).to.have.lengthOf(0);
+ expect(img).to.have.lengthOf(1);
});
- expect(wrapper).to.have.className('test');
- expect(snippet).to.have.lengthOf(0);
- expect(img).to.have.lengthOf(1);
});
- it('renders context with string, local image', () => {
- const context = '/testimage.png';
- const { wrapper, snippet, img } = getInstance({
- context: JSON.stringify(context),
- className: 'test'
+ describe('when context is an object', () => {
+ it('renders undefined value', () => {
+ const context = {
+ title: 'sample context',
+ value: 'undefined'
+ };
+ const { wrapper, ctxItems } = getInstance({
+ context: JSON.stringify(context),
+ className: 'test'
+ });
+ expect(wrapper).to.have.className('test');
+ expect(ctxItems).to.have.lengthOf(1);
});
- expect(wrapper).to.have.className('test');
- expect(snippet).to.have.lengthOf(0);
- expect(img).to.have.lengthOf(1);
- });
- it('renders context with object, string value', () => {
- const context = {
- title: 'sample context',
- value: 'context string'
- };
- const { wrapper, snippet } = getInstance({
- context: JSON.stringify(context),
- className: 'test'
+
+ it('renders string value', () => {
+ const context = {
+ title: 'sample context',
+ value: 'context string'
+ };
+ const { wrapper, snippet } = getInstance({
+ context: JSON.stringify(context),
+ className: 'test'
+ });
+ expect(wrapper).to.have.className('test');
+ expect(snippet).to.have.lengthOf(1);
+ expect(snippet.prop('highlight')).to.equal(false);
});
- expect(wrapper).to.have.className('test');
- expect(snippet).to.have.lengthOf(1);
- });
- it('renders context with object, image url value', () => {
- const context = {
- title: 'sample context',
- value: 'http://test.url.com/testimage.png'
- };
- const { wrapper, snippet, img } = getInstance({
- context: JSON.stringify(context),
- className: 'test'
+ it('renders image url value', () => {
+ const context = {
+ title: 'sample context',
+ value: 'http://test.url.com/testimage.png'
+ };
+ const { wrapper, snippet, img } = getInstance({
+ context: JSON.stringify(context),
+ className: 'test'
+ });
+ expect(wrapper).to.have.className('test');
+ expect(snippet).to.have.lengthOf(0);
+ expect(img).to.have.lengthOf(1);
});
- expect(wrapper).to.have.className('test');
- expect(snippet).to.have.lengthOf(0);
- expect(img).to.have.lengthOf(1);
- });
- it('renders context with object, object value', () => {
- const context = {
- title: 'sample context',
- value: { testing: true }
- };
- const { wrapper, snippet } = getInstance({
- context: JSON.stringify(context),
- className: 'test'
+ it('renders object value', () => {
+ const context = {
+ title: 'sample context',
+ value: { testing: true }
+ };
+ const { wrapper, snippet } = getInstance({
+ context: JSON.stringify(context),
+ className: 'test'
+ });
+ expect(wrapper).to.have.className('test');
+ expect(snippet).to.have.lengthOf(1);
+ expect(snippet.prop('highlight')).to.equal(true);
});
- expect(wrapper).to.have.className('test');
- expect(snippet).to.have.lengthOf(1);
});
- it('renders context with array', () => {
- const context = [
- {
- title: 'sample context a',
- value: 'http://test.url.com/testimage.png'
- },
- {
- title: 'sample context b',
- value: { testing: true }
- }
- ];
- const { wrapper, snippet, img } = getInstance({
- context: JSON.stringify(context),
- className: 'test'
+ describe('when context is an array', () => {
+ it('renders', () => {
+ const context = [
+ {
+ title: 'sample context a',
+ value: 'http://test.url.com/testimage.png'
+ },
+ {
+ title: 'sample context b',
+ value: { testing: true }
+ }
+ ];
+ const { wrapper, snippet, img } = getInstance({
+ context: JSON.stringify(context),
+ className: 'test'
+ });
+ expect(wrapper).to.have.className('test');
+ expect(snippet).to.have.lengthOf(1);
+ expect(img).to.have.lengthOf(1);
});
- expect(wrapper).to.have.className('test');
- expect(snippet).to.have.lengthOf(1);
- expect(img).to.have.lengthOf(1);
});
});