Add some js tests, and update adsense js

assets/javascripts/discourse/components/google-adsense.js.es6

@@ -1,6 +1,10 @@
+import {
+  default as computed,
+  observes
+} from "ember-addons/ember-computed-decorators";
 import loadScript from "discourse/lib/load-script";
 
-var _loaded = false,
+let _loaded = false,
   _promise = null,
   currentUser = Discourse.User.current(),
   publisher_id = Discourse.SiteSettings.adsense_publisher_code;
@@ -30,7 +34,7 @@ function loadAdsense() {
     return _promise;
   }
 
-  var adsenseSrc =
+  const adsenseSrc =
     ("https:" === document.location.protocol ? "https:" : "http:") +
     "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
   _promise = loadScript(adsenseSrc, { scriptTag: true }).then(function() {
@@ -40,7 +44,7 @@ function loadAdsense() {
   return _promise;
 }
 
-var data = {
+let data = {
   "topic-list-top": {},
   "topic-above-post-stream": {},
   "topic-above-suggested": {},
@@ -188,6 +192,7 @@ export default Ember.Component.extend({
     Ember.run.scheduleOnce("afterRender", this, this._triggerAds);
   },
 
+  @observes("listLoading")
   waitForLoad: function() {
     if (this.get("adRequested")) {
       return;
@@ -195,45 +200,46 @@ export default Ember.Component.extend({
     if (!this.get("listLoading")) {
       Ember.run.scheduleOnce("afterRender", this, this._triggerAds);
     }
-  }.observes("listLoading"),
+  },
 
-  isResponsive: function() {
+  @computed("ad_width")
-    return this.get("ad_width") === "auto";
+  isResponsive: function(adWidth) {
-  }.property("ad_width"),
+    return adWidth === "auto";
+  },
 
-  classForSlot: function() {
+  @computed("placement", "checkTrustLevels")
-    return `adsense-${this.get("placement")}`.htmlSafe();
+  classForSlot: function(placement, shown) {
-  }.property("placement"),
+    return shown ? `adsense-${placement}`.htmlSafe() : "";
+  },
 
-  autoAdFormat: function() {
+  @computed("isResponsive")
-    return this.get("isResponsive") ? "auto".htmlSafe() : false;
+  autoAdFormat: function(isResponsive) {
-  }.property("isResponsive"),
+    return isResponsive ? "auto".htmlSafe() : false;
+  },
 
-  adWrapperStyle: function() {
+  @computed("ad_width", "ad_height", "isResponsive")
-    return (this.get("isResponsive")
+  adWrapperStyle: function(w, h, isResponsive) {
-      ? ""
+    return (isResponsive ? "" : `width: ${w}; height: ${h};`).htmlSafe();
-      : `width: ${this.get("ad_width")}; height: ${this.get("ad_height")};`
+  },
-    ).htmlSafe();
-  }.property("ad_width", "ad_height"),
 
-  adInsStyle: function() {
+  @computed("adWrapperStyle", "isResponsive")
+  adInsStyle: function(adWrapperStyle, isResponsive) {
     return `display: ${
-      this.get("isResponsive") ? "block" : "inline-block"
+      isResponsive ? "block" : "inline-block"
-    }; ${this.get("adWrapperStyle")}`.htmlSafe();
+    }; ${adWrapperStyle}`.htmlSafe();
-  }.property("adWrapperStyle", "isResponsive"),
+  },
 
+  @computed()
   checkTrustLevels: function() {
     return !(
       currentUser &&
       currentUser.get("trust_level") >
         Discourse.SiteSettings.adsense_through_trust_level
     );
-  }.property("trust_level"),
+  },
 
-  showAd: function() {
+  @computed("checkTrustLevels")
-    return (
+  showAd: function(shown) {
-      Discourse.SiteSettings.adsense_publisher_code &&
+    return shown && Discourse.SiteSettings.adsense_publisher_code;
-      this.get("checkTrustLevels")
+  }
-    );
-  }.property("checkTrustLevels")
 });

test/javascripts/acceptance/adsense-test.js.es6

@@ -0,0 +1,56 @@
+import { acceptance, replaceCurrentUser } from "helpers/qunit-helpers";
+
+acceptance("AdSense", {
+  loggedIn: true,
+  settings: {
+    adsense_publisher_code: "MYADSENSEID",
+    adsense_through_trust_level: 2,
+    adsense_topic_list_top_code: "list_top_ad_unit",
+    adsense_topic_list_top_ad_sizes: "728*90 - leaderboard",
+    adsense_mobile_topic_list_top_code: "mobile_list_top_ad_unit",
+    adsense_mobile_topic_list_top_ad_size: "300*250 - medium rectangle",
+    adsense_post_bottom_code: "post_bottom_ad_unit",
+    adsense_post_bottom_ad_sizes: "728*90 - leaderboard",
+    adsense_mobile_post_bottom_code: "mobile_post_bottom_ad_unit",
+    adsense_mobile_post_bottom_ad_size: "300*250 - medium rectangle",
+    adsense_nth_post_code: 6
+  }
+});
+
+test("correct number of ads should show", async assert => {
+  replaceCurrentUser({ staff: false, trust_level: 1 });
+  await visit("/t/280"); // 20 posts
+  const ads = find(".google-adsense.adsense-post-bottom");
+  assert.equal(ads.length, 3, "it should render 3 ads");
+  assert.equal(
+    find("#post_6 + .widget-connector").find(
+      ".google-adsense.adsense-post-bottom"
+    ).length,
+    1,
+    "ad after 6th post"
+  );
+  assert.equal(
+    find("#post_12 + .widget-connector").find(
+      ".google-adsense.adsense-post-bottom"
+    ).length,
+    1,
+    "ad after 12th post"
+  );
+  assert.equal(
+    find("#post_18 + .widget-connector").find(
+      ".google-adsense.adsense-post-bottom"
+    ).length,
+    1,
+    "ad after 18th post"
+  );
+});
+
+test("no ads for trust level 3", async assert => {
+  replaceCurrentUser({ staff: false, trust_level: 3 });
+  await visit("/t/280");
+  assert.equal(
+    find(".google-adsense.adsense-post-bottom").length,
+    0,
+    "it should render 0 ads"
+  );
+});