Merge pull request #84 from danactive/wikipedia-link-#70

Add Wikipedia link conditionally to lightbox title  [#70]

.travis.yml

@@ -19,7 +19,6 @@ install:
   - yarn install
 before_script:
   - yarn lint
-scripts:
   - yarn test:all
   - yarn test:react
 after_success:

package.json

@@ -9,7 +9,7 @@
     "release": "standard-version",
     "start": "webpack --config plugins/webpack.js && node .",
     "test:all": "gulp --gulpfile plugins/gulpfile.js test",
-    "test": "nyc tape plugins/**/*.spec.js",
+    "test": "nyc  --extension .jsx tape plugins/**/*.spec.js",
     "test:react": "babel-tape-runner plugins/album/test/*.js | faucet",
     "ci-cover:coveralls": "nyc report --reporter=text-lcov | coveralls",
     "ci-cover:prep-codeclimate": "nyc report --reporter=text-lcov > coverage.lcov",
@@ -80,6 +80,7 @@
     "gulp-print": "^2.0.1",
     "gulp-rename": "^1.2.0",
     "gulp-tape": "0.0.9",
+    "jsdom": "^9.9.1",
     "nyc": "^10.0.0",
     "react-addons-test-utils": "^15.4.1",
     "react-unit": "^2.0.0",

plugins/album/public/album.js

@@ -14,24 +14,16 @@ function photoViewed() {
 
   // lightbox
   jQuery('#cboxOverlay').css('background', `rgb(${dominateColour[0]},${dominateColour[1]},${dominateColour[2]})`);
-  jQuery('#cboxTitle').hide();
-  jQuery('#cboxLoadedContent').append(jQuery('#cboxTitle').html()).css({ color: jQuery('#cboxTitle').css('color') });
   jQuery.fn.colorbox.resize();
+
   if (map) {
     const index = parseInt($thumbBox.attr('id').replace('photo', ''), 10);
     map.pin.go(index);
   }
 }
 jQuery('#albumBox a').colorbox({
-  right: '25%',
   preloading: true,
   onComplete: photoViewed,
-  title: function title() {
-    if (this && this.dataset && this.dataset.caption) {
-      return this.dataset.caption;
-    }
-    return jQuery(this).data('caption');
-  },
   transition: 'none',
 });
 

plugins/album/test/react-enzyme-setup.js

@@ -0,0 +1,15 @@
+/* global document */
+
+const jsdom = require('jsdom').jsdom;
+
+global.document = jsdom('');
+global.window = document.defaultView;
+Object.keys(document.defaultView).forEach((property) => {
+  if (typeof global[property] === 'undefined') {
+    global[property] = document.defaultView[property];
+  }
+});
+
+global.navigator = {
+  userAgent: 'node.js',
+};

plugins/album/test/react-thumb-enzyme.js

@@ -2,6 +2,7 @@ import test from 'tape'
 import React from 'react'
 import { shallow, mount } from 'enzyme';
 
+import './react-enzyme-setup';
 import Thumb from '../views/thumb';
 
 test('React Component - Thumb', (describe) => {
@@ -11,12 +12,36 @@ test('React Component - Thumb', (describe) => {
     thumbPath: 'b',
   };
 
-  describe.test('shallow', (assert) => {
+  describe.test('* Thumbnail image and caption', (assert) => {
     const wrapper = shallow(<Thumb item={item} />)
-    assert.equal(wrapper.contains(<a href={item.mediaPath} rel="set">
-      <img src={item.thumbPath} alt={item.thumbCaption} title={item.caption} />
-    </a>), true);
-    assert.equal(wrapper.contains(<div className="albumBoxPhotoCaption">{item.thumbCaption}</div>), true);
+    assert.ok(wrapper.contains(<img src={item.thumbPath} alt={item.thumbCaption} title={item.caption} />));
+    assert.ok(wrapper.contains(<div className="albumBoxPhotoCaption">{item.thumbCaption}</div>));
+    assert.end();
+  });
+
+  describe.test('* Title - Photo City', (assert) => {
+    item.photoCity = 'Vancouver, BC';
+    const wrapper = mount(<Thumb item={item} />);
+    const title = wrapper.find('a').props().title;
+
+    assert.equal(title, item.photoCity, 'Has title with Photo City');
+
+    delete item.photoCity;
+    assert.end();
+  });
+
+  describe.test('* Title - Wikipedia', (assert) => {
+    item.ref = {
+      name: "Vancouver_International_Airport",
+      source: "wikipedia"
+    };
+    const wrapper = mount(<Thumb item={item} />);
+    const title = wrapper.find('a').props().title;
+    const titleHtml = '<a href=\'https://en.wikipedia.org/wiki/Vancouver_International_Airport\' target=\'_blank\'>Wiki</a>';
+
+    assert.equal(title, titleHtml, 'Has title with Wikipedia link');
+
+    delete item.ref;
     assert.end();
   });
 });

plugins/album/test/react-thumb-unit.js

@@ -28,9 +28,10 @@ test('React Component - Thumb', (describe) => {
     const renderer = createRenderer();
     renderer.render(<Thumb item={item} />);
     const result = renderer.getRenderOutput();
+
     assert.jsxEquals(result, <li className="liAlbumPhoto">
       <div className="albumBoxPhotoImg">
-        <a href="c" rel="set">
+        <a href="c" rel="set" title="">
           <img alt="a" src="b" title={undefined} />
         </a>
       </div>
@@ -39,4 +40,30 @@ test('React Component - Thumb', (describe) => {
 
     assert.end();
   });
+
+  describe.test('* Title - Photo City', { skip: false }, (assert) => {
+    item.photoCity = 'Vancouver, BC';
+    const component = createComponent.shallow(<Thumb item={item} />);
+    const title = component.findByQuery('a')[0].props.title;
+
+    assert.equal(title, item.photoCity, 'Has title with Photo City');
+
+    delete item.photoCity;
+    assert.end();
+  });
+
+  describe.test('* Title - Wikipedia', { skip: false }, (assert) => {
+    item.ref = {
+      name: "Vancouver_International_Airport",
+      source: "wikipedia"
+    };
+    const component = createComponent.shallow(<Thumb item={item} />);
+    const title = component.findByQuery('a')[0].props.title;
+    const titleHtml = '<a href=\'https://en.wikipedia.org/wiki/Vancouver_International_Airport\' target=\'_blank\'>Wiki</a>';
+
+    assert.equal(title, titleHtml, 'Has title with Wikipedia link');
+
+    delete item.ref;
+    assert.end();
+  });
 });

plugins/album/views/thumb.jsx

@@ -1,9 +1,21 @@
 const React = require('react');
 
 function Thumb({ item }) {
+  const title = [];
+
+  if (item.photoCity) {
+    title.push(item.photoCity);
+  }
+
+  if (item.ref) {
+    if (item.ref.source === 'wikipedia') {
+      title.push(`<a href='https://en.wikipedia.org/wiki/${item.ref.name}' target='_blank'>Wiki</a>`);
+    }
+  }
+
   return (<li className="liAlbumPhoto">
     <div className="albumBoxPhotoImg">
-      <a href={item.mediaPath} rel="set">
+      <a href={item.mediaPath} rel="set" title={title.join(' | ')}>
         <img src={item.thumbPath} alt={item.thumbCaption} title={item.caption} />
       </a>
     </div>

plugins/gulpfile.js

@@ -18,7 +18,7 @@ const paths = {
     'album/test/cases.js',
   ],
   test: [
-    '**/test/*.js', '!album/test/cases.js', '!album/test/react-thumb*.js',
+    '*/test/*.js', '!album/test/cases.js', '!album/test/react-thumb*.js',
   ],
 };