Merge branch 'release/1.0.1'

.travis.yml

@@ -5,3 +5,9 @@ node_js:
   - "6"
 before_install:
   - npm install react-addons-test-utils
+addons:
+  code_climate:
+    repo_token: d72f1e1053fa2af89bef224409c23b0a2910e71bf7fd4cf4f1c73e96c84b427a
+after_script:
+  - npm install -g codeclimate-test-reporter
+  - codeclimate-test-reporter < ./coverage/lcov.info

CHANGELOG.md

@@ -1,4 +1,7 @@
 #Changelog
 
+###1.0.1
+- Better url handling in context
+
 ###1.0.0
 - Initial release

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mochawesome-report-generator",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Generates gorgeous HTML reports from mochawesome reporter.",
   "scripts": {
     "lint": "eslint bin lib src/js src/components/**/*.js src/components/**/*.jsx test/**/*.js test/**/*.jsx",
@@ -40,7 +40,8 @@
     "reporter": [
       "html",
       "text",
-      "cobertura"
+      "cobertura",
+      "lcov"
     ],
     "extension": [
       ".js",

src/components/test/context.jsx

@@ -6,7 +6,9 @@ import styles from './test.css';
 
 const cx = classNames.bind(styles);
 
-const imgRegEx = /https?:\/\/.*\.(?:png|jpg|gif|jpeg)/i;
+const imgRegEx = /(?:png|jpe?g|gif)$/i;
+const protocolRegEx = /^(?:(?:https?|ftp):\/\/)/i;
+const urlRegEx = /^(?:(?:https?|ftp):\/\/)?(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/ // eslint-disable-line
 
 class TestContext extends Component {
   static displayName = 'TestContext';
@@ -20,16 +22,25 @@ class TestContext extends Component {
     ])
   };
 
-  renderImage = (url, title) => (
-    <a
-      href={ url }
-      className={ cx('image-link') }
-      rel='noopener noreferrer'
-      target='_blank'
-      alt={ title } >
-      <img src={ url } className={ cx('image') } role='presentation' />
-    </a>
-  );
+  renderLink = (url, title) => {
+    const isImage = imgRegEx.test(url);
+    const hasProtocol = protocolRegEx.test(url);
+    const cxname = isImage ? 'image-link' : 'text-link';
+    const linkUrl = `${hasProtocol ? '' : 'http://'}${url}`;
+    return (
+      <a
+        href={ linkUrl }
+        className={ cx(cxname) }
+        rel='noopener noreferrer'
+        target='_blank'
+        alt={ title } >
+        { isImage
+          ? <img src={ linkUrl } className={ cx('image') } role='presentation' />
+          : url
+        }
+      </a>
+    );
+  };
 
   renderContext = (ctx, i) => {
     const containerProps = {
@@ -43,8 +54,8 @@ class TestContext extends Component {
     if (isString(ctx)) {
       return (
         <div { ...containerProps } >
-          { imgRegEx.test(ctx)
-            ? this.renderImage(ctx)
+          { urlRegEx.test(ctx)
+            ? this.renderLink(ctx)
             : <CodeSnippet className={ cx('code-snippet') } code={ ctx } highlight={ false } />
           }
         </div>
@@ -59,8 +70,8 @@ class TestContext extends Component {
       return (
         <div { ...containerProps } >
           <h4 className={ cx('context-item-title') }>{ title }:</h4>
-          { imgRegEx.test(val)
-            ? this.renderImage(val, title)
+          { urlRegEx.test(val)
+            ? this.renderLink(val, title)
             : <CodeSnippet className={ cx('code-snippet') } code={ val } />
           }
         </div>
@@ -89,4 +100,3 @@ class TestContext extends Component {
 }
 
 export default TestContext;
-

src/components/test/test.css

@@ -152,23 +152,43 @@
   @apply --font-regular;
   @apply --text-overflow;
   font-size: 13px;
-  line-height: 24px;
   color: var(--black54);
   margin: 0;
-  padding: 1em 1em 0 1em;
+  padding: 11px 11px 0 11px;
+}
+
+.context-item {
+  padding-top: 11px;
+
+  & .code-snippet {
+    padding-top: 0;
+  }
 }
 
 .context-item-title {
   @apply --font-medium;
   @apply --text-overflow;
   font-size: 13px;
   margin: 0;
-  padding: 1em 1em 0 1em;
+  padding: 0 11px 11px 11px;
+}
+
+.text-link {
+  display: block;
+  padding: 0 1em 1em 1em;
+  font-size: 11px;
+  font-family: var(--font-family-mono);
+  color: var(--ltblue700);
+
+  &:hover {
+    color: var(--ltblue500);
+  }
 }
 
 .image-link {
+  font-size: 11px;
   display: block;
-  padding: 1em 1em 0 1em;
+  padding: 0 1em 1em 1em;
 }
 
 .image {

src/styles/app.global.css

@@ -99,6 +99,7 @@ body {
 }
 
 a {
+  @apply --link-transition;
   text-decoration: none;
 
   &:hover {

test/spec/components/test/context.test.jsx

@@ -14,7 +14,8 @@ describe('<TestContext />', () => {
       wrapper,
       ctx: wrapper.find(TestContext),
       ctxItems: wrapper.find('.context-item'),
-      img: wrapper.find('img'),
+      img: wrapper.find('.test-image-link'),
+      link: wrapper.find('.test-text-link'),
       snippet: wrapper.find(CodeSnippet)
     };
   };
@@ -41,6 +42,29 @@ describe('<TestContext />', () => {
     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'
+    });
+    console.log(wrapper.html());
+    expect(wrapper).to.have.className('test');
+    expect(snippet).to.have.lengthOf(0);
+    expect(link).to.have.lengthOf(1);
+  });
+
+  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'
+    });
+    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', () => {
     const context = 'http://test.url.com/testimage.png';
     const { wrapper, snippet, img } = getInstance({