Feat/tiles utility functions (#1868)

* feat:Tiles utility functions added * feat:tests for utils * feat: all tiles using utils * chore: yarn updated * fix: yarn.lock revert * chore: fix deps
newsuk · Apr 10, 2019 · 64fc486 · 64fc486
1 parent 6a8d1c7
commit 64fc486
Show file tree

Hide file tree

Showing 46 changed files with 322 additions and 264 deletions.
diff --git a/packages/edition-slices/__tests__/android/utils.test.js b/packages/edition-slices/__tests__/android/utils.test.js
@@ -0,0 +1,3 @@
+import shared from "../utils.base";
+
+shared();
diff --git a/packages/edition-slices/__tests__/ios/utils.test.js b/packages/edition-slices/__tests__/ios/utils.test.js
@@ -0,0 +1,3 @@
+import shared from "../utils.base";
+
+shared();
diff --git a/packages/edition-slices/__tests__/shared-components.base.js b/packages/edition-slices/__tests__/shared-components.base.js
@@ -9,7 +9,6 @@ import { mockEditionSlice } from "@times-components/fixture-generator";
 import StarButton from "@times-components/star-button";
 import { TileH, TileX } from "../src/tiles";
 import {
-  getCrop,
   TileImage,
   TileLink,
   TileStar,
@@ -206,65 +205,6 @@ export default () => {
         expect(fn).toHaveBeenCalled();
       }
     },
-    {
-      name: "getCrop - return null if there is no lead asset",
-      test: () => {
-        expect(getCrop(null, "crop169")).toEqual(null);
-      }
-    },
-    {
-      name: "getCrop - return poster image crop if lead asset is a video",
-      test: () => {
-        const leadAsset = {
-          __typename: "Video",
-          posterImage: {
-            caption: null,
-            credits: null,
-            crop169: {
-              ratio: "16:9",
-              url:
-                "https://www.thetimes.co.uk/imageserver/image/%2Fmethode%2Ftimes%2Fprod%2Fweb%2Fbin%2F674e242a-3f8b-11e9-aa0a-30b9d78dd63b.jpg?crop=3483%2C1959%2C9%2C366"
-            },
-            id: "64806087-c6d0-4104-df61-1faf30525989",
-            title: "Potholes"
-          }
-        };
-        expect(getCrop(leadAsset, "crop169")).toEqual(
-          leadAsset.posterImage.crop169.url
-        );
-      }
-    },
-    {
-      name:
-        "getCrop - return undefined if lead asset doesnt have the right crop",
-      test: () => {
-        const leadAsset = {
-          caption: null,
-          credits: null,
-          crop169: null,
-          id: "64806087-c6d0-4104-df61-1faf30525989",
-          title: "Potholes"
-        };
-        expect(getCrop(leadAsset, "crop45")).toEqual(undefined);
-      }
-    },
-    {
-      name:
-        "getCrop - return empty object if lead asset is a video but doesnt have a poster image of the right crop",
-      test: () => {
-        const leadAsset = {
-          __typename: "Video",
-          posterImage: {
-            caption: null,
-            credits: null,
-            crop169: null,
-            id: "64806087-c6d0-4104-df61-1faf30525989",
-            title: "Potholes"
-          }
-        };
-        expect(getCrop(leadAsset, "crop45")).toEqual(undefined);
-      }
-    },
     {
       name: "Tile Star is rendered as already saved in default light theme",
       test: () => {

diff --git a/packages/edition-slices/__tests__/utils.base.js b/packages/edition-slices/__tests__/utils.base.js
@@ -0,0 +1,157 @@
+import { mockEditionSlice } from "@times-components/fixture-generator";
+import {
+  getTileImageUri,
+  getTileSummary,
+  getTileStrapline
+} from "../src/tiles/shared";
+
+const tile = mockEditionSlice(1).items[0];
+
+export default () => {
+  describe("getTileImageUri should", () => {
+    test("getTileImageUri - return null if there is no lead asset", () => {
+      const tileWithoutLeadAsset = {
+        ...tile,
+        article: {
+          ...tile.article,
+          leadAsset: null,
+          listingAsset: null
+        },
+        leadAsset: null
+      };
+      expect(getTileImageUri(tileWithoutLeadAsset, "crop169")).toEqual(null);
+    });
+    test("getTileImageUri - return poster image crop if lead asset is a video", () => {
+      const leadAsset = {
+        __typename: "Video",
+        posterImage: {
+          caption: null,
+          credits: null,
+          crop169: {
+            ratio: "16:9",
+            url:
+              "https://www.thetimes.co.uk/imageserver/image/%2Fmethode%2Ftimes%2Fprod%2Fweb%2Fbin%2F674e242a-3f8b-11e9-aa0a-30b9d78dd63b.jpg?crop=3483%2C1959%2C9%2C366"
+          },
+          id: "64806087-c6d0-4104-df61-1faf30525989",
+          title: "Potholes"
+        }
+      };
+      const tileWithLeadAsset = {
+        ...tile,
+        article: {
+          ...tile.article,
+          leadAsset,
+          listingAsset: leadAsset
+        },
+        leadAsset
+      };
+      expect(getTileImageUri(tileWithLeadAsset, "crop169")).toEqual(
+        leadAsset.posterImage.crop169.url
+      );
+    });
+    test("getTileImageUri - return undefined if lead asset doesnt have the right crop", () => {
+      const leadAsset = {
+        caption: null,
+        credits: null,
+        crop169: null,
+        id: "64806087-c6d0-4104-df61-1faf30525989",
+        title: "Potholes"
+      };
+      const tileWithLeadAsset = {
+        ...tile,
+        article: {
+          ...tile.leadAsset,
+          leadAsset,
+          listingAsset: leadAsset
+        },
+        leadAsset
+      };
+      expect(getTileImageUri(tileWithLeadAsset, "crop45")).toEqual(undefined);
+    });
+    test("getTileImageUri - return empty object if lead asset is a video but doesnt have a poster image of the right crop", () => {
+      const leadAsset = {
+        __typename: "Video",
+        posterImage: {
+          caption: null,
+          credits: null,
+          crop169: null,
+          id: "64806087-c6d0-4104-df61-1faf30525989",
+          title: "Potholes"
+        }
+      };
+      const tileWithLeadAsset = {
+        ...tile,
+        article: {
+          ...tile.leadAsset,
+          leadAsset,
+          listingAsset: leadAsset
+        },
+        leadAsset
+      };
+      expect(getTileImageUri(tileWithLeadAsset, "crop45")).toEqual(undefined);
+    });
+  });
+
+  describe("getTileSummary should", () => {
+    test("getTileSummary should return ast for summary with 125 characters", () => {
+      const length = 125;
+      const summary125 = [
+        {
+          attributes: {},
+          children: [
+            {
+              attributes: {
+                value:
+                  "Theresa May has two objectives tomorrow when MPs get to vote on Brexit — the trouble is both are fraught with difficulty."
+              },
+              children: [],
+              name: "text"
+            }
+          ],
+          name: "paragraph"
+        }
+      ];
+      const tileWithSummary125 = {
+        ...tile,
+        article: {
+          ...tile.article,
+          summary125
+        }
+      };
+      expect(getTileSummary(tileWithSummary125, length)).toEqual(summary125);
+    });
+    test("getTileSummary should return ast for summary with 300 characters", () => {
+      const length = 300;
+      const summary300 = [
+        {
+          attributes: {},
+          children: [
+            {
+              attributes: {
+                value:
+                  "‘The prodigal son returns.” So read a banner tied to the wall of the Paul Strank Stand at Kingsmeadow, the home of AFC Wimbledon, on Saturday, alongside the sepia-toned image of a fresh-faced Wally Downes, sporting an 80s haircut and Wimbledon strip, with a mischievous glint in his eye."
+              },
+              children: [],
+              name: "text"
+            }
+          ],
+          name: "paragraph"
+        }
+      ];
+      const tileWithSummary300 = {
+        ...tile,
+        article: {
+          ...tile.article,
+          summary300
+        }
+      };
+      expect(getTileSummary(tileWithSummary300, length)).toEqual(summary300);
+    });
+  });
+
+  describe("getTileStrapline should", () => {
+    test("getTileStrapline should return strapline", () => {
+      expect(getTileStrapline(tile)).toBe(tile.strapline);
+    });
+  });
+};
diff --git a/packages/edition-slices/__tests__/web/utils.test.js b/packages/edition-slices/__tests__/web/utils.test.js
@@ -0,0 +1,3 @@
+import shared from "../utils.base";
+
+shared();
diff --git a/packages/edition-slices/src/tiles/shared/get-crop.js b/packages/edition-slices/src/tiles/shared/get-crop.js
diff --git a/packages/edition-slices/src/tiles/shared/index.js b/packages/edition-slices/src/tiles/shared/index.js
@@ -1,4 +1,4 @@
-import getCrop from "./get-crop";
+import { getTileImageUri, getTileSummary, getTileStrapline } from "./utils";
 import TileImage from "./tile-image";
 import TileLink from "./tile-link";
 import TileStar from "./tile-star";
@@ -7,7 +7,9 @@ import withTileTracking from "./tile-tracking-events";
 import withPuzzleTileTracking from "./puzzle-tracking-events";
 
 export {
-  getCrop,
+  getTileImageUri,
+  getTileSummary,
+  getTileStrapline,
   TileImage,
   TileLink,
   TileStar,

diff --git a/packages/edition-slices/src/tiles/shared/utils.js b/packages/edition-slices/src/tiles/shared/utils.js
@@ -0,0 +1,20 @@
+const getTileImageUri = (tile, crop) => {
+  const leadAsset =
+    tile.leadAsset || tile.article.listingAsset || tile.article.leadAsset;
+  if (!leadAsset) return null;
+
+  // eslint-disable-next-line no-underscore-dangle
+  const isVideo = leadAsset.__typename === "Video";
+  const displayImage = isVideo
+    ? leadAsset.posterImage[crop] || {}
+    : leadAsset[crop] || {};
+
+  return displayImage.url;
+};
+
+const getTileSummary = (tile, length) =>
+  tile[`teaser${length}`] || tile.article[`summary${length}`];
+
+const getTileStrapline = tile => tile.strapline || tile.article.strapline;
+
+export { getTileImageUri, getTileSummary, getTileStrapline };
diff --git a/packages/edition-slices/src/tiles/tile-a/index.js b/packages/edition-slices/src/tiles/tile-a/index.js
@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import {
-  getCrop,
+  getTileImageUri,
   TileImage,
   TileLink,
   TileSummary,
@@ -19,10 +19,7 @@ const TileA = ({ onPress, tile }) => (
     <TileImage
       aspectRatio={16 / 9}
       style={styles.imageContainer}
-      uri={getCrop(
-        tile.leadAsset || tile.article.listingAsset || tile.article.leadAsset,
-        "crop169"
-      )}
+      uri={getTileImageUri(tile, "crop169")}
     />
   </TileLink>
 );

diff --git a/packages/edition-slices/src/tiles/tile-aa/index.js b/packages/edition-slices/src/tiles/tile-aa/index.js
@@ -2,7 +2,7 @@ import React from "react";
 import { View } from "react-native";
 import PropTypes from "prop-types";
 import {
-  getCrop,
+  getTileImageUri,
   TileImage,
   TileLink,
   TileSummary,
@@ -16,10 +16,7 @@ const TileT = ({ onPress, tile }) => (
       <TileImage
         aspectRatio={16 / 9}
         style={styles.imageContainer}
-        uri={getCrop(
-          tile.leadAsset || tile.article.listingAsset || tile.article.leadAsset,
-          "crop169"
-        )}
+        uri={getTileImageUri(tile, "crop169")}
       />
       <TileSummary
         headlineStyle={styles.headline}

diff --git a/packages/edition-slices/src/tiles/tile-ab/index.js b/packages/edition-slices/src/tiles/tile-ab/index.js
@@ -2,7 +2,8 @@ import React from "react";
 import { View } from "react-native";
 import PropTypes from "prop-types";
 import {
-  getCrop,
+  getTileImageUri,
+  getTileSummary,
   TileImage,
   TileLink,
   TileSummary,
@@ -17,19 +18,11 @@ const TileH = ({ onPress, tile }) => (
         bylines={tile.article.bylines}
         headlineStyle={styles.headline}
         style={styles.summaryContainer}
-        summary={tile.teaser125 || tile.article.summary125}
+        summary={getTileSummary(tile, 125)}
         tile={tile}
       />
       <View style={styles.imageContainer}>
-        <TileImage
-          aspectRatio={2 / 3}
-          uri={getCrop(
-            tile.leadAsset ||
-              tile.article.listingAsset ||
-              tile.article.leadAsset,
-            "crop23"
-          )}
-        />
+        <TileImage aspectRatio={2 / 3} uri={getTileImageUri(tile, "crop23")} />
       </View>
     </View>
   </TileLink>

diff --git a/packages/edition-slices/src/tiles/tile-ac/index.js b/packages/edition-slices/src/tiles/tile-ac/index.js
@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { editionBreakpoints } from "@times-components/styleguide";
 import {
-  getCrop,
+  getTileImageUri,
   TileImage,
   TileLink,
   TileSummary,
@@ -19,10 +19,7 @@ const TileAC = ({ onPress, tile, breakpoint }) => {
       <TileImage
         aspectRatio={16 / 9}
         style={imageContainer}
-        uri={getCrop(
-          tile.leadAsset || tile.article.listingAsset || tile.article.leadAsset,
-          "crop169"
-        )}
+        uri={getTileImageUri(tile, "crop169")}
       />
       <TileSummary
         headlineStyle={headline}