Bug 1521132 - Combine spoc rendering functions into selectLayoutRender.js (#4686)

content-src/components/DiscoveryStreamBase/DiscoveryStreamBase.jsx

@@ -39,27 +39,6 @@ export function isAllowedCSS(property, value) {
     url.slice(5).startsWith(prefix)));
 }
 
-function maybeInjectSpocs(data, spocs) {
-  if (!data || !spocs || !spocs.positions || !spocs.positions.length) {
-    return data;
-  }
-
-  const recommendations = [...data.recommendations];
-
-  for (let position of spocs.positions) {
-    const {result} = position;
-    if (result) {
-      // Insert spoc into the desired index.
-      recommendations.splice(position.index, 0, result);
-    }
-  }
-
-  return {
-    ...data,
-    recommendations,
-  };
-}
-
 export class _DiscoveryStreamBase extends React.PureComponent {
   constructor(props) {
     super(props);
@@ -137,7 +116,7 @@ export class _DiscoveryStreamBase extends React.PureComponent {
           <ImpressionStats rows={rows} dispatch={this.props.dispatch} source={component.type}>
             <CardGrid
               title={component.header && component.header.title}
-              data={maybeInjectSpocs(component.data, component.spocs)}
+              data={component.data}
               feed={component.feed}
               border={component.properties.border}
               type={component.type}
@@ -151,7 +130,7 @@ export class _DiscoveryStreamBase extends React.PureComponent {
           <ImpressionStats rows={rows} dispatch={this.props.dispatch} source={component.type}>
             <Hero
               title={component.header && component.header.title}
-              data={maybeInjectSpocs(component.data, component.spocs)}
+              data={component.data}
               border={component.properties.border}
               type={component.type}
               dispatch={this.props.dispatch}

content-src/lib/selectLayoutRender.js

@@ -14,17 +14,25 @@ export const selectLayoutRender = createSelector(
   function layoutRender(layout, feeds, spocs) {
     let spocIndex = 0;
 
-    function calculateSpocs(component) {
-      return component.spocs.positions.map(position => {
-        const rickRoll = Math.random();
-        if (spocs.data.spocs[spocIndex] && rickRoll <= component.spocs.probability) {
-          return {
-            ...position,
-            result: spocs.data.spocs[spocIndex++],
-          };
+    function maybeInjectSpocs(data, spocsConfig) {
+      if (data &&
+          spocsConfig && spocsConfig.positions && spocsConfig.positions.length &&
+          spocs.data.spocs && spocs.data.spocs.length) {
+        const recommendations = [...data.recommendations];
+        for (let position of spocsConfig.positions) {
+          let rickRoll = Math.random();
+          if (spocs.data.spocs[spocIndex] && rickRoll <= spocsConfig.probability) {
+            recommendations.splice(position.index, 0, spocs.data.spocs[spocIndex++]);
+          }
         }
-        return position;
-      });
+
+        return {
+          ...data,
+          recommendations,
+        };
+      }
+
+      return data;
     }
 
     return layout.map(row => ({
@@ -37,15 +45,7 @@ export const selectLayoutRender = createSelector(
           return component;
         }
 
-        // Calculate if we should display a spoc or not.
-        if (component.spocs && spocs.data.spocs && spocs.data.spocs.length) {
-          component.spocs = {
-            ...component.spocs,
-            positions: calculateSpocs(component),
-          };
-        }
-
-        return {...component, data: feeds[component.feed.url].data};
+        return {...component, data: maybeInjectSpocs(feeds[component.feed.url].data, component.spocs)};
       }),
     }));
   }

test/unit/content-src/lib/selectLayoutRender.test.js

@@ -5,7 +5,7 @@ import {reducers} from "common/Reducers.jsm";
 import {selectLayoutRender} from "content-src/lib/selectLayoutRender";
 
 const FAKE_LAYOUT = [{width: 3, components: [{type: "foo", feed: {url: "foo.com"}}]}];
-const FAKE_FEEDS = {"foo.com": {data: ["foo", "bar"]}};
+const FAKE_FEEDS = {"foo.com": {data: {recommendations: ["foo", "bar"]}}};
 
 describe("selectLayoutRender", () => {
   let store;
@@ -33,7 +33,7 @@ describe("selectLayoutRender", () => {
 
     assert.lengthOf(result, 1);
     assert.propertyVal(result[0], "width", 3);
-    assert.deepEqual(result[0].components[0], {type: "foo", feed: {url: "foo.com"}, data: ["foo", "bar"]});
+    assert.deepEqual(result[0].components[0], {type: "foo", feed: {url: "foo.com"}, data: {recommendations: ["foo", "bar"]}});
   });
 
   it("should return layout property without data if feed isn't available", () => {
@@ -50,7 +50,7 @@ describe("selectLayoutRender", () => {
   it("should return spoc result for rolls below the probability", () => {
     const fakeSpocConfig = {positions: [{index: 0}, {index: 1}], probability: 0.5};
     const fakeLayout = [{width: 3, components: [{type: "foo", feed: {url: "foo.com"}, spocs: fakeSpocConfig}]}];
-    const fakeSpocsData = {lastUpdated: 0, spocs: {spocs: ["foo", "bar"]}};
+    const fakeSpocsData = {lastUpdated: 0, spocs: {spocs: ["fooSpoc", "barSpoc"]}};
 
     store.dispatch({type: at.DISCOVERY_STREAM_LAYOUT_UPDATE, data: {layout: fakeLayout}});
     store.dispatch({type: at.DISCOVERY_STREAM_FEEDS_UPDATE, data: FAKE_FEEDS});
@@ -60,14 +60,16 @@ describe("selectLayoutRender", () => {
     const result = selectLayoutRender(store.getState());
 
     assert.lengthOf(result, 1);
-    assert.deepEqual(result[0].components[0].spocs.positions[0], {index: 0, result: "foo"});
-    assert.deepEqual(result[0].components[0].spocs.positions[1], {index: 1, result: "bar"});
+    assert.deepEqual(result[0].components[0].data.recommendations[0], "fooSpoc");
+    assert.deepEqual(result[0].components[0].data.recommendations[1], "barSpoc");
+    assert.deepEqual(result[0].components[0].data.recommendations[2], "foo");
+    assert.deepEqual(result[0].components[0].data.recommendations[3], "bar");
   });
 
   it("should not return spoc result for rolls above the probability", () => {
     const fakeSpocConfig = {positions: [{index: 0}, {index: 1}], probability: 0.5};
     const fakeLayout = [{width: 3, components: [{type: "foo", feed: {url: "foo.com"}, spocs: fakeSpocConfig}]}];
-    const fakeSpocsData = {lastUpdated: 0, spocs: {spocs: ["foo", "bar"]}};
+    const fakeSpocsData = {lastUpdated: 0, spocs: {spocs: ["fooSpoc", "barSpoc"]}};
 
     store.dispatch({type: at.DISCOVERY_STREAM_LAYOUT_UPDATE, data: {layout: fakeLayout}});
     store.dispatch({type: at.DISCOVERY_STREAM_FEEDS_UPDATE, data: FAKE_FEEDS});
@@ -77,7 +79,7 @@ describe("selectLayoutRender", () => {
     const result = selectLayoutRender(store.getState());
 
     assert.lengthOf(result, 1);
-    assert.deepEqual(result[0].components[0].spocs.positions[0], {index: 0});
-    assert.deepEqual(result[0].components[0].spocs.positions[1], {index: 1});
+    assert.deepEqual(result[0].components[0].data.recommendations[0], "foo");
+    assert.deepEqual(result[0].components[0].data.recommendations[1], "bar");
   });
 });