1 files changed, 23 insertions, 29 deletions

diff --git a/browser/components/newtab/test/unit/content-src/components/TopSites.test.jsx b/browser/components/newtab/test/unit/content-src/components/TopSites.test.jsx
index 1977066f0d..798bb9b8c7 100644
--- a/browser/components/newtab/test/unit/content-src/components/TopSites.test.jsx
+++ b/browser/components/newtab/test/unit/content-src/components/TopSites.test.jsx
@@ -1488,20 +1488,21 @@ describe("<TopSiteList>", () => {
       TOP_SITES_DEFAULT_ROWS * TOP_SITES_MAX_SITES_PER_ROW
     );
   });
-  it("should fill with placeholders if TopSites rows is less than TopSitesRows", () => {
+  it("should add a single placeholder is there is availible space in the row", () => {
     const rows = [{ url: "https://foo.com" }, { url: "https://bar.com" }];
+    const availibleRows = 1;
     const wrapper = shallow(
       <TopSiteList
         {...DEFAULT_PROPS}
         TopSites={{ rows }}
-        TopSitesRows={1}
+        TopSitesRows={availibleRows}
         App={{ APP }}
       />
     );
     assert.lengthOf(wrapper.find(TopSite), 2, "topSites");
     assert.lengthOf(
       wrapper.find(TopSitePlaceholder),
-      TOP_SITES_MAX_SITES_PER_ROW - 2,
+      availibleRows >= wrapper.find(TopSite).length ? 0 : 1,
       "placeholders"
     );
   });
@@ -1522,11 +1523,7 @@ describe("<TopSiteList>", () => {
       />
     );
     assert.lengthOf(wrapper.find(TopSite), 2, "topSites");
-    assert.lengthOf(
-      wrapper.find(TopSitePlaceholder),
-      TOP_SITES_MAX_SITES_PER_ROW - 2,
-      "placeholders"
-    );
+    assert.lengthOf(wrapper.find(TopSitePlaceholder), 4, "placeholders");
   });
   it("should fill any holes in TopSites with placeholders", () => {
     const rows = [{ url: "https://foo.com" }];
@@ -1540,11 +1537,7 @@ describe("<TopSiteList>", () => {
       />
     );
     assert.lengthOf(wrapper.find(TopSite), 2, "topSites");
-    assert.lengthOf(
-      wrapper.find(TopSitePlaceholder),
-      TOP_SITES_MAX_SITES_PER_ROW - 2,
-      "placeholders"
-    );
+    assert.lengthOf(wrapper.find(TopSitePlaceholder), 1, "placeholders");
   });
   it("should update state onDragStart and clear it onDragEnd", () => {
     const wrapper = shallow(<TopSiteList {...DEFAULT_PROPS} App={{ APP }} />);
@@ -1638,6 +1631,7 @@ describe("<TopSiteList>", () => {
         App={{ APP }}
       />
     );
+    const addButton = { isAddButton: true };
     let instance = wrapper.instance();
     instance.setState({
       draggedIndex: 0,
@@ -1652,7 +1646,7 @@ describe("<TopSiteList>", () => {
       site2,
       draggedSite,
       site3,
-      null,
+      addButton,
       null,
       null,
       null,
@@ -1662,7 +1656,7 @@ describe("<TopSiteList>", () => {
       site2,
       site3,
       draggedSite,
-      null,
+      addButton,
       null,
       null,
       null,
@@ -1671,7 +1665,7 @@ describe("<TopSiteList>", () => {
     assert.deepEqual(instance._makeTopSitesPreview(3), [
       site2,
       site3,
-      null,
+      addButton,
       draggedSite,
       null,
       null,
@@ -1683,7 +1677,7 @@ describe("<TopSiteList>", () => {
       site2,
       draggedSite,
       site3,
-      null,
+      addButton,
       null,
       null,
       null,
@@ -1693,7 +1687,7 @@ describe("<TopSiteList>", () => {
       site3,
       site2,
       draggedSite,
-      null,
+      addButton,
       null,
       null,
       null,
@@ -1704,7 +1698,7 @@ describe("<TopSiteList>", () => {
       site2,
       draggedSite,
       site3,
-      null,
+      addButton,
       null,
       null,
       null,
@@ -1714,7 +1708,7 @@ describe("<TopSiteList>", () => {
       site2,
       site3,
       draggedSite,
-      null,
+      addButton,
       null,
       null,
       null,
@@ -1725,7 +1719,7 @@ describe("<TopSiteList>", () => {
       site2,
       draggedSite,
       site3,
-      null,
+      addButton,
       null,
       null,
       null,
@@ -1735,7 +1729,7 @@ describe("<TopSiteList>", () => {
       site2,
       site3,
       draggedSite,
-      null,
+      addButton,
       null,
       null,
       null,
@@ -1752,7 +1746,7 @@ describe("<TopSiteList>", () => {
       draggedSite,
       site1,
       site3,
-      null,
+      addButton,
       null,
       null,
       null,
@@ -1762,7 +1756,7 @@ describe("<TopSiteList>", () => {
       site1,
       site3,
       draggedSite,
-      null,
+      addButton,
       null,
       null,
       null,
@@ -1779,7 +1773,7 @@ describe("<TopSiteList>", () => {
       draggedSite,
       site2,
       site1,
-      null,
+      addButton,
       null,
       null,
       null,
@@ -1797,7 +1791,7 @@ describe("<TopSiteList>", () => {
       draggedSite,
       site2,
       site1,
-      null,
+      addButton,
       null,
       null,
       null,
@@ -1822,13 +1816,13 @@ describe("<TopSiteList>", () => {
 });
 
 describe("TopSitePlaceholder", () => {
-  it("should dispatch a TOP_SITES_EDIT action when edit-button is clicked", () => {
+  it("should dispatch a TOP_SITES_EDIT action when the addbutton is clicked", () => {
     const dispatch = sinon.spy();
     const wrapper = shallow(
-      <TopSitePlaceholder dispatch={dispatch} index={7} />
+      <TopSitePlaceholder dispatch={dispatch} index={7} isAddButton={true} />
     );
 
-    wrapper.find(".edit-button").first().simulate("click");
+    wrapper.find(".add-button").first().simulate("click");
 
     assert.calledOnce(dispatch);
     assert.calledWithExactly(dispatch, {