chore(tests): #212 Better fake data for tests

content-src/lib/shim.js

@@ -1,4 +1,5 @@
 const fakeData = require("lib/fake-data");
+const faker = require("test/faker");
 
 function dispatch(action) {
   window.dispatchEvent(
@@ -14,10 +15,26 @@ module.exports = function() {
         dispatch({type: "TOP_FRECENT_SITES_RESPONSE", data: fakeData.TopSites.rows});
         break;
       case "RECENT_BOOKMARKS_REQUEST":
-        dispatch({type: "RECENT_BOOKMARKS_RESPONSE", data: fakeData.Bookmarks.rows});
+        if (action.meta && action.meta.append) {
+          dispatch({
+            type: "RECENT_BOOKMARKS_RESPONSE",
+            data: faker.createRows({beforeDate: action.data.beforeDate, type: "bookmark"}),
+            meta: {append: true}
+          });
+        } else {
+          dispatch({type: "RECENT_BOOKMARKS_RESPONSE", data: fakeData.Bookmarks.rows});
+        }
         break;
       case "RECENT_LINKS_REQUEST":
-        dispatch({type: "RECENT_LINKS_RESPONSE", data: fakeData.History.rows});
+        if (action.meta && action.meta.append) {
+          dispatch({
+            type: "RECENT_LINKS_RESPONSE",
+            data: faker.createRows({beforeDate: action.data.beforeDate}),
+            meta: {append: true}
+          });
+        } else {
+          dispatch({type: "RECENT_LINKS_RESPONSE", data: fakeData.History.rows});
+        }
         break;
       case "FRECENT_LINKS_REQUEST":
         dispatch({type: "FRECENT_LINKS_RESPONSE", data: fakeData.FrecentHistory.rows});

content-test/components/ActivityFeed.test.js

@@ -8,7 +8,8 @@ const TestUtils = require("react-addons-test-utils");
 const {prettyUrl} = require("lib/utils");
 const moment = require("moment");
 
-const fakeSites = require("test/test-utils").mockData.Bookmarks.rows;
+const {mockData, faker} = require("test/test-utils");
+const fakeSites = mockData.Bookmarks.rows;
 const fakeSite = {
   "title": "man throws alligator in wendys wptv dnt cnn",
   "dateDisplay": 1456426160465,
@@ -112,8 +113,14 @@ describe("ActivityFeedItem", function() {
 describe("GroupedActivityFeed", function() {
   let instance;
   let el;
+  let sites;
   beforeEach(() => {
-    instance = TestUtils.renderIntoDocument(<GroupedActivityFeed sites={fakeSites} />);
+    sites = [
+      faker.createSite({moment: faker.moment()}),
+      faker.createSite({moment: faker.moment().subtract(2, "days")}),
+      faker.createSite({moment: faker.moment().subtract(4, "days")}),
+    ];
+    instance = TestUtils.renderIntoDocument(<GroupedActivityFeed sites={sites} />);
     el = ReactDOM.findDOMNode(instance);
   });
 
@@ -123,9 +130,9 @@ describe("GroupedActivityFeed", function() {
     });
     it("should render an ActivityFeed for each date", () => {
       const children = TestUtils.scryRenderedComponentsWithType(instance, ActivityFeed);
-      // Each fakeSite has a different lastVisitDate, so there will be one
+      // Each fakeSite is minimum of 24 hours apart
       // ActivityFeed per site.
-      assert.equal(children.length, fakeSites.length);
+      assert.equal(children.length, sites.length);
     });
     it("shouldn't render title if there are no sites", () => {
       const item = TestUtils.renderIntoDocument(<GroupedActivityFeed sites={[]} title="Fake Title" />);

content-test/components/Spotlight.test.js

@@ -6,21 +6,11 @@ const React = require("react");
 const ReactDOM = require("react-dom");
 const TestUtils = require("react-addons-test-utils");
 const SiteIcon = require("components/SiteIcon/SiteIcon");
-const fakeSpotlightItems = require("test/test-utils").mockData.Spotlight.rows;
+const {mockData, faker} = require("test/test-utils");
 
-const fakeSiteWithImage = {
-  "title": "man throws alligator in wendys wptv dnt cnn",
-  "url": "http://www.cnn.com/videos/tv/2016/02/09/man-throws-alligator-in-wendys-wptv-dnt.cnn",
-  "description": "A Florida man faces multiple charges for throwing an alligator through a Wendy's drive-thru window. CNN's affiliate WPTV reports.",
-  "lastVisitDate": 1456426160465,
-  "bestImage": {
-    "url": "http://i2.cdn.turner.com/cnnnext/dam/assets/160209053130-man-throws-alligator-in-wendys-wptv-dnt-00004611-large-169.jpg",
-    "height": 259,
-    "width": 460,
-    "entropy": 3.98714569089,
-    "size": 14757
-  }
-};
+const fakeSpotlightItems = mockData.Spotlight.rows;
+const fakeSiteWithImage = faker.createSite();
+fakeSiteWithImage.bestImage = fakeSiteWithImage.images[0];
 
 describe("Spotlight", function() {
   let instance;

content-test/faker.js

@@ -0,0 +1,179 @@
+const faker = require("faker");
+const moment = require("moment");
+const tiptop = require("tippy-top-sites");
+
+const BASE_TIP_TOP_FAVICON_URL = "favicons/images/";
+
+faker.timestamp = () => {
+  return moment().unix();
+};
+
+faker.internet.rgbColor = () => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(faker.internet.color());
+  return [
+    parseInt(result[1], 16),
+    parseInt(result[2], 16),
+    parseInt(result[3], 16)
+  ];
+};
+
+function arrayOf(mapFn, size) {
+  return Array.apply(null, Array(size)).map(mapFn);
+}
+
+function createColor(color) {
+  return {
+    "color": color || faker.internet.rgbColor(),
+    "weight": 0.3051757812
+  };
+}
+
+function createImage() {
+  return {
+    "caption": null,
+    "url": faker.image.imageUrl() + "?r=" + faker.random.uuid(),
+    "height": 640,
+    "width": 480,
+    "colors": [createColor()],
+    "entropy": 1.2698034041000001
+  };
+}
+
+const CREATE_SITE_DEFAULTS = {
+  images: 1,
+  override: null,
+  type: "history",
+  hasBookmark: false
+};
+
+function createSite(options = {}) {
+  options = Object.assign({}, CREATE_SITE_DEFAULTS, options);
+
+  const date = options.moment || moment().subtract(10, "seconds");
+
+  // Create the basic structure
+  const name = faker.company.companyName();
+
+  // TODO: make this optional
+  const tiptopSite = faker.random.arrayElement(tiptop);
+
+  const site = {
+    // This is stuff from Firefox
+    "bookmarkDateCreated": null,
+    "bookmarkGuid": null,
+    "favicon": "data:image/png;base64,iVBORw0KGgoAA",
+    "title": tiptopSite.title || `${name} - ${faker.company.catchPhrase()}`,
+    "url": tiptopSite.url || faker.internet.url(),
+    "lastVisitDate": date.valueOf(),
+    "frecency": faker.random.number({min: 10, max: 2000}),
+    "type": options.type,
+
+    // This is embedly
+    "description": faker.lorem.sentences(),
+    "favicon_url": BASE_TIP_TOP_FAVICON_URL + tiptopSite.image_url || faker.image.imageUrl(),
+    "media": {},
+    "provider_name": name
+  };
+
+  if (options.override) {
+    Object.assign(site, options.override);
+  }
+
+  // Add images if options.images > 0
+  if (options.images) {
+    site.images = arrayOf(createImage, options.images);
+  }
+
+  // Only create favicon_colors if there is a favicon_url
+  if (site.favicon_url && tiptopSite.background_color_rgb) {
+    site.favicon_colors = [createColor(tiptopSite.background_color_rgb)];
+  }
+  if (site.favicon_url && options.favicon_colors) {
+    site.favicon_colors = arrayOf(createColor, options.favicon_colors);
+  }
+
+  if (options.hasBookmark || site.type === "bookmark") {
+    site.bookmarkDateCreated = date.add(1, "seconds").valueOf();
+    site.bookmarkGuid = "" + faker.random.number();
+  }
+
+  if (site.type === "bookmark") {
+    site.bookmarkId = faker.random.number();
+    site.bookmarkTitle = faker.company.bs();
+    site.lastVisitDate = date.add(1, "seconds").valueOf();
+    site.lastModified = date.add(1, "seconds").valueOf();
+  }
+
+  // Apply overrides again in case we overwrote them
+  if (options.override) {
+    Object.assign(site, options.override);
+  }
+
+  return site;
+}
+
+function range(min, max, increment = 1) {
+  const result = [];
+  for (let i = min; i <= max; i += increment) {
+    result.push(i);
+  }
+  return result;
+}
+
+function createWeightedArray(weights) {
+  let all = [];
+  weights.forEach(item => {
+    for (let i = 0; i < item.weight; i++) {
+      all.push(item);
+    }
+  });
+  return all;
+}
+
+function randomWeighter(weights) {
+  const pick = faker.random.arrayElement(createWeightedArray(weights));
+  if (typeof pick.value !== "undefined") {
+    return pick.value;
+  }
+  if (pick.values) {
+    return faker.random.arrayElement(pick.values);
+  }
+  if (pick.range) {
+    return faker.random.arrayElement(range.apply(null, pick.range));
+  }
+}
+
+function createRows({
+  length = 20,
+  minPauseInSeconds = 0,
+  maxPauseInSeconds = 1200,
+  type = "history",
+  beforeDate = Date.now().valueOf(),
+  images = null
+} = {}) {
+  const rows = [];
+  const m = moment(beforeDate, "x");
+
+  let earliestTime = 5;
+  for (let i = 0; i < length; i++) {
+    // Add a random number of seconds
+    const secondsToAdd = faker.random.number({min: minPauseInSeconds, max: minPauseInSeconds + maxPauseInSeconds});
+    rows.push(createSite({
+      type,
+      images: images || randomWeighter([{weight: 1, value: 0}, {weight: 5, range: [1, 5]}]),
+      moment: m.subtract(earliestTime + secondsToAdd, "s")
+    }));
+    earliestTime += secondsToAdd;
+  }
+  return rows;
+}
+
+module.exports = {
+  arrayOf,
+  createSite,
+  createRows,
+  createWeightedArray,
+  randomWeighter,
+  range,
+  moment
+};

content-test/faker.test.js

@@ -0,0 +1,88 @@
+const {assert} = require("chai");
+const {
+  createSite,
+  createRows,
+  randomWeighter,
+  createWeightedArray
+} = require("test/faker");
+
+describe("createSite", () => {
+  it("should create a site", () => {
+    assert.isObject(createSite());
+  });
+  it("should add n images", () => {
+    const result = createSite({images: 5});
+    assert.isObject(result);
+    assert.isArray(result.images);
+    assert.lengthOf(result.images, 5);
+  });
+  it("should override properties", () => {
+    const result = createSite({override: {title: null, images: null}});
+    assert.isObject(result);
+    assert.isNull(result.title);
+    assert.isNull(result.images);
+  });
+  it("should add n favicon_colors", () => {
+    const result = createSite({favicon_colors: 5});
+    assert.isObject(result);
+    assert.isArray(result.favicon_colors);
+    assert.lengthOf(result.favicon_colors, 5);
+  });
+  it("should omit favicon_colors if favicon_url is falsey", () => {
+    const result = createSite({favicon_colors: 5, override: {favicon_url: null}});
+    assert.isObject(result);
+    assert.notProperty(result, "favicon_colors");
+  });
+});
+
+describe("randomWeighter", () => {
+  it("should build the correct array of items based on weight", () => {
+    const result = createWeightedArray([
+      {weight: 1, value: "yes"},
+      {weight: 3, value: "no"},
+    ]);
+    assert.deepEqual(result, [
+      {weight: 1, value: "yes"},
+      {weight: 3, value: "no"},
+      {weight: 3, value: "no"},
+      {weight: 3, value: "no"}]);
+  });
+  it("should work for options.value", () => {
+    const result = randomWeighter([
+      {weight: 1, value: 1},
+      {weight: 3, value: 2}
+    ]);
+    assert.include([1,2], result);
+  });
+  it("should work for options.values", () => {
+    const result = randomWeighter([
+      {weight: 1, values: [1, 2, 3]},
+      {weight: 3, values: [4, 5, 6]}
+    ]);
+    assert.include([1,2,3,4,5,6], result);
+  });
+  it("should work for options.range", () => {
+    const result = randomWeighter([
+      {weight: 1, range: [1, 10]}
+    ]);
+    assert.include([1,2,3,4,5,6,7,8,9,10], result);
+  });
+
+});
+
+describe("createRows", () => {
+  it("should create rows of n length", () => {
+    assert.lengthOf(createRows({length: 5}), 5);
+  });
+  it("sites should have times in descending order", () => {
+    it("should create rows of n length", () => {
+      const rows = createRows();
+      rows.forEach((item, i) => {
+        if (i === 0) {
+          return;
+        }
+        assert(item.lastVisitDate < rows[i - 1].lastVisitDate);
+      });
+    });
+  });
+});

content-test/index.js

@@ -1,5 +1,6 @@
 const req = require.context(".", true, /\.test.js$/);
 const files = req.keys();
+
 const chai = require("chai");
 chai.use(require("chai-as-promised"));
 chai.should();

content-test/test-utils.js

@@ -30,5 +30,6 @@ module.exports = {
   rawMockData: mockData,
   mockData: Object.assign({}, mockData, selectNewTabSites(mockData)),
   createMockProvider,
-  renderWithProvider
+  renderWithProvider,
+  faker: require("test/faker")
 };

package.json

@@ -51,6 +51,7 @@
     "eslint": "^2.2.0",
     "eslint-plugin-mozilla": "^0.0.3",
     "eslint-plugin-react": "^4.1.0",
+    "faker": "^3.0.1",
     "husky": "^0.10.2",
     "istanbul-instrumenter-loader": "^0.1.3",
     "jpm": "^1.0.5",
@@ -78,6 +79,7 @@
     "redux-mock-store": "0.0.6",
     "requirejs": "^2.1.22",
     "sass-lint": "^1.5.0",
+    "tippy-top-sites": "github:nchapman/tippy-top-sites",
     "webpack": "^1.12.12",
     "webpack-env-loader-plugin": "0.1.4",
     "webpack-notifier": "^1.2.1",
@@ -97,6 +99,7 @@
     "start": "npm-run-all --parallel start:*",
     "prestart": "npm run clean",
     "start:static": "npm run bundle:static -- -w",
+    "start:copyTestImages": "cpx \"node_modules/tippy-top-sites/images/**/*\" data/content/favicons/images",
     "start:webpack": "webpack -w",
     "start:css": "npm run bundle:css && npm run bundle:css -- -w",
     "start:html": "npm run bundle:html -- --baseUrl http://localhost:1963/",

yamscripts.yml

@@ -26,6 +26,7 @@ scripts:
     _parallel: true
     pre: =>clean
     static: =>bundle:static -- -w
+    copyTestImages: cpx "node_modules/tippy-top-sites/images/**/*" data/content/favicons/images
     webpack: webpack -w
     css: =>bundle:css && =>bundle:css -- -w
     html: =>bundle:html -- --baseUrl http://localhost:1963/