Add support for video links with media fragments (#131)

Fixes adamgruber/mochawesome#287
adamgruber · Jul 5, 2019 · 276adb2 · 276adb2
1 parent 95e2c26
commit 276adb2
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,8 @@
 # mochawesome-report-generator changelog
 
 ## [Unreleased]
+### Changed
+- Video links in context now support mediafragment uris [mochawesome #287](https://github.com/adamgruber/mochawesome/issues/287)
 
 ## [4.0.0] / 2019-06-04
 ### Changed

diff --git a/src/client/components/test/context.js b/src/client/components/test/context.js
@@ -13,6 +13,15 @@ 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
 const base64ImgRegEx = /^data:image\/([a-zA-Z0-9-_.])+;base64,([^"]*)$/i;
 
+const isVideo = str => {
+  if (!isString(str)) {
+    return false;
+  }
+
+  const hashIndex = str.indexOf('#');
+  return videoRegEx.test(hashIndex > 0 ? str.slice(0, hashIndex) : str);
+}
+
 class TestContext extends Component {
   static displayName = 'TestContext';
 
@@ -80,7 +89,7 @@ class TestContext extends Component {
 
   renderContextContent = (content, title, highlight = false) => {
     // Videos
-    if (videoRegEx.test(content)) {
+    if (isVideo(content)) {
       return this.renderVideo(content, title);
     }
 

diff --git a/test/spec/components/test/context.test.js b/test/spec/components/test/context.test.js
@@ -175,6 +175,26 @@ describe('<TestContext />', () => {
       );
     });
 
+    it('renders video url with protocol and mediafragment', () => {
+      const context = 'http://test.url.com/testvideo.mp4#t=123';
+      const { wrapper, snippet, videoLink } = getInstance({
+        context: JSON.stringify(context),
+        className: 'test',
+      });
+      expect(wrapper).to.have.className('test');
+      expect(snippet).to.have.lengthOf(0);
+      expect(wrapper)
+        .to.have.exactly(1)
+        .descendants('video');
+      expect(wrapper)
+        .to.have.exactly(1)
+        .descendants('a.test-video-link');
+      expect(videoLink).to.have.attr(
+        'href',
+        'http://test.url.com/testvideo.mp4#t=123'
+      );
+    });
+
     it('renders image url without protocol', () => {
       const context = 'test.url.com/testvideo.mp4';
       const { wrapper, snippet, videoLink } = getInstance({