Merge pull request #46 from adobe/fix-youtube-06-2019

Fix for YouTube Embedding

.circleci/config.yml

@@ -68,6 +68,10 @@ jobs:
         name: Semantic Release
         command: npm run semantic-release
 
+    - run:
+        name: Set Unsplash Token
+        command: wsk action update helix-services/`node -e "console.log(require('./package.json').name.replace('@adobe/helix-', ''))"`@`node -e "console.log(require('./package.json').version)"` -p UNSPLASH_AUTH $UNSPLASH_AUTH
+
     - run:
         name: Post-Deployment Integration Test
         command: npm run test-postdeploy
@@ -76,8 +80,8 @@ jobs:
         path: junit
 
     - run:
-        name: Set Epsagon Token
-        command: wsk action update helix-services/`node -e "console.log(require('./package.json').name.replace('@adobe/helix-', ''))"`@`node -e "console.log(require('./package.json').version)"` -p EPSAGON_TOKEN $EPSAGON_TOKEN
+        name: Set Epsagon Token and Unspash Token
+        command: wsk action update helix-services/`node -e "console.log(require('./package.json').name.replace('@adobe/helix-', ''))"`@`node -e "console.log(require('./package.json').version)"` -p EPSAGON_TOKEN $EPSAGON_TOKEN -p UNSPLASH_AUTH $UNSPLASH_AUTH
 
     - run:
         name: Link Sequence (Latest)
@@ -106,18 +110,22 @@ jobs:
 
     - run:
         name: Branch Deployment
-        command: npx wsk-builder -v --entryFile index.js --deploy --test --name helix-services/`node -e "console.log(require('./package.json').name.replace('@adobe/helix-', ''))"`@ci$CIRCLE_BUILD_NUM
-
+        command: npx wsk-builder -v --raw-http --entryFile index.js --deploy --test --name helix-services/`node -e "console.log(require('./package.json').name.replace('@adobe/helix-', ''))"`@ci$CIRCLE_BUILD_NUM
+
+    - run:
+        name: Set Unsplash Token
+        command: wsk action update helix-services/`node -e "console.log(require('./package.json').name.replace('@adobe/helix-', ''))"`@ci$CIRCLE_BUILD_NUM -p UNSPLASH_AUTH $UNSPLASH_AUTH
+
     - run:
         name: Post-Deployment Integration Test
         command: npm run test-postdeploy
+
+    - run:
+        name: Set Epsagon Token and Unsplash Token
+        command: wsk action update helix-services/`node -e "console.log(require('./package.json').name.replace('@adobe/helix-', ''))"`@ci$CIRCLE_BUILD_NUM -p EPSAGON_TOKEN $EPSAGON_TOKEN  -p UNSPLASH_AUTH $UNSPLASH_AUTH
 
     - store_test_results:
         path: junit
-
-    - run:
-        name: Set Epsagon Token
-        command: wsk action update helix-services/`node -e "console.log(require('./package.json').name.replace('@adobe/helix-', ''))"`@ci$CIRCLE_BUILD_NUM -p EPSAGON_TOKEN $EPSAGON_TOKEN
 
     - run:
         name: Link Sequence (CI)

package.json

@@ -15,7 +15,7 @@
     "deploy-iframely": "npm run zip && wsk action update embed embed.zip --kind nodejs:10 --web raw --web-secure false -p api http://iframe.ly/api/oembed -p api_key insert-here",
     "deploy-embedly": "npm run zip && wsk action update embed embed.zip --kind nodejs:10 --web raw --web-secure false -p api https://api.embedly.com/1/oembed -p key insert-here",
     "build": "wsk-builder -v --entryFile index.js",
-    "deploy": "wsk-builder -v --deploy --test --entryFile index.js"
+    "deploy": "wsk-builder -v  --raw-http --deploy --test --entryFile index.js"
   },
   "repository": {
     "type": "git",
@@ -49,6 +49,7 @@
     "@semantic-release/npm": "^5.1.13",
     "@semantic-release/release-notes-generator": "^7.2.1",
     "ajv": "^6.10.0",
+    "chai": "^4.2.0",
     "chai-http": "^4.3.0",
     "codecov": "^3.3.0",
     "eslint": "^5.16.0",
@@ -69,4 +70,4 @@
   "wsk": {
     "name": "helix-services/embed@1.0.0"
   }
-}
+}

src/embed.js

@@ -19,25 +19,25 @@ matchers.push(spark);
 matchers.push(unsplash);
 
 function toHTML({
-  oembed = {}, open_graph = {}, twitter_card = {}, other = {},
+  oEmbed = {}, open_graph = {}, twitter_card = {}, other = {},
   title: otherTitle, description: otherDescription, classname,
 }, fallbackURL) {
   // there is a provider preference, let's go with it.
-  if (oembed.html) {
+  if (oEmbed.html) {
     return `<div class="embed embed-oembed">
-  ${oembed.html}
+  ${oEmbed.html}
 </div>`;
   }
 
   // gather information from different providers
-  const url = oembed.url || twitter_card.url || open_graph.url || other.canonical || fallbackURL;
+  const url = oEmbed.url || twitter_card.url || open_graph.url || other.canonical || fallbackURL;
   const title = twitter_card.title || open_graph.title || other.title || otherTitle;
   const description = twitter_card.description || open_graph.description || otherDescription;
   const icon = url && other.appleTouchIcon ? URI.resolve(url, other.appleTouchIcon) : null;
   const twitterImage = twitter_card.images ? twitter_card.images[0].url : null;
   const ogImage = open_graph.images ? open_graph.images[0].url : null;
-  const oembedImage = oembed.url !== url ? oembed.url : null;
-  const image = oembed.thumbnail_url || twitterImage || ogImage || oembedImage;
+  const oembedImage = oEmbed.url !== url ? oEmbed.url : null;
+  const image = oEmbed.thumbnail_url || twitterImage || ogImage || oembedImage;
 
   const classnames = ['embed', classname];
   let html = [];
@@ -101,13 +101,15 @@ function embed(url, params) {
     };
   }
 
-  return unfurl(url, opts).then(enrich(params)).then(metadata => ({
-    headers: {
-      'Content-Type': 'text/html',
-      'Cache-Control': `max-age=${metadata.oembed && metadata.oembed.cacheAge ? metadata.oembed.cacheAge : '3600'}`,
-    },
-    body: toHTML(metadata, url),
-  })).catch(error => ({
+  return unfurl(url, opts).then(enrich(params)).then((metadata) => {
+    return {
+      headers: {
+        'Content-Type': 'text/html',
+        'Cache-Control': `max-age=${metadata.oembed && metadata.oembed.cacheAge ? metadata.oembed.cacheAge : '3600'}`,
+      },
+      body: toHTML(metadata, url),
+    };
+  }).catch(error => ({
     headers: {
       'Content-Type': 'text/html',
       'Cache-Control': 'max-age=3600',

src/spark.js

@@ -40,7 +40,7 @@ function decorator(metadata) {
   const enriched = Object.assign({}, metadata);
   const alt = metadata.title.replace(/\n/g, '');
   const src = metadata.open_graph.images[0].url;
-  enriched.oembed = {
+  enriched.oEmbed = {
     html: `<img alt="${alt}" class="embed-spark" sizes="100vw" src="${src}" srcset="${srcset(src)}">`,
   };
   return Object.assign(enriched);

src/unsplash.js

@@ -47,7 +47,7 @@ async function decorator(metadata, options) {
     user, urls, description, width,
   } = await meta(src, options.UNSPLASH_AUTH);
 
-  enriched.oembed = {
+  enriched.oEmbed = {
     html: `<img alt="${description}" class="embed-unsplash" sizes="100vw" src="${urls.full}" srcset="${srcset(urls, width)}">
 <p class="unsplash-attribution">Photo by <a href="https://unsplash.com/@${user.username}?utm_source=Helix%20Embed&utm_medium=referral">${user.name}</a> on <a href="https://unsplash.com/?utm_source=Helix%20Embed&utm_medium=referral">Unsplash</a>
 </p>`,

test/embed.test.js

@@ -25,10 +25,19 @@ function assertContains(actual, patterns) {
   patterns.map(expected => assert.ok(new RegExp(expected).test(actual), `${actual} does not match ${expected}`));
 }
 
+describe('Standalone Tests', () => {
+  // this test fails when recorded with Polly
+  it('Supports OEmbed for Youtube', async () => {
+    const { headers, body } = await embed('https://www.youtube.com/watch?v=ccYpEv4APec');
+    assert.equal(headers['Content-Type'], 'text/html');
+    assertContains(body, ['https://www.youtube.com/', 'iframe', 'oembed']);
+  });
+});
+
 describe('Embed Tests', () => {
   setupPolly({
-    recordFailedRequests: true,
-    recordIfMissing: false,
+    recordFailedRequests: false,
+    recordIfMissing: true,
     logging: false,
     adapters: [NodeHttpAdapter],
     persister: FSPersister,
@@ -73,13 +82,6 @@ describe('Embed Tests', () => {
     assertContains(body, ['embed-has-image']);
   });
 
-
-  it('Supports OEmbed Providers', async () => {
-    const { headers, body } = await embed('https://www.nytimes.com/2018/11/05/us/politics/house-senate-elections-georgia-trump.html');
-    assert.equal(headers['Content-Type'], 'text/html');
-    assertContains(body, ['https://www.nytimes.com/']);
-  });
-
   it('Supports Adobe Spark', async () => {
     const { headers, body } = await embed('https://spark.adobe.com/post/z4eHLkF8nZII1/');
     assert.equal(headers['Content-Type'], 'text/html');

test/postdeploy.test.js

@@ -1,5 +1,5 @@
 /*
- * Copyright 2019 Adobe. All rights reserved.
+ * Copyright 2018 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
  * of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -30,14 +30,40 @@ function getbaseurl() {
 }
 
 describe('Running Post-Deployment Integration Tests', () => {
-  it('Service is reachable', async () => {
+  it('Youtube OEmbed', async () => {
     await chai
       .request('https://adobeioruntime.net/')
-      .get(getbaseurl() + "/https://www.youtube.com/watch?v=TTCVn4EByfI")
+      .get(`${getbaseurl()}/https://www.youtube.com/watch?v=TTCVn4EByfI`)
       .then((response) => {
         expect(response).to.have.status(200);
-        // eslint-disable-next-line  no-console
         expect(response.text).to.contain('youtube.com');
+        expect(response.text).to.contain('iframe');
+        expect(response.text).to.contain('oembed');
+      }).catch((e) => {
+        throw e;
+      });
+  });
+
+  it('Spark srcset', async () => {
+    await chai
+      .request('https://adobeioruntime.net/')
+      .get(`${getbaseurl()}/https://spark.adobe.com/post/z4eHLkF8nZII1/`)
+      .then((response) => {
+        expect(response).to.have.status(200);
+        expect(response.text).to.contain('srcset');
+      }).catch((e) => {
+        throw e;
+      });
+  });
+
+  it('Unsplash srcset', async () => {
+    await chai
+      .request('https://adobeioruntime.net/')
+      .get(`${getbaseurl()}/https://unsplash.com/photos/0lD9SSMC6jo`)
+      .then((response) => {
+        expect(response).to.have.status(200);
+        expect(response.text).to.contain('Unsplash');
+        expect(response.text).to.contain('srcset');
       }).catch((e) => {
         throw e;
       });
@@ -46,7 +72,7 @@ describe('Running Post-Deployment Integration Tests', () => {
   it('Service reports status', async () => {
     await chai
       .request('https://adobeioruntime.net/')
-      .get(getbaseurl() + "")
+      .get(`${getbaseurl()}`)
       .then((response) => {
         expect(response).to.have.status(200);
         expect(response).to.have.header('Content-Type', 'application/xml; charset=UTF-8');