PERF: Migrate header to discourse widgets

test/javascripts/acceptance/hamburger-menu-staff-test.js.es6

@@ -1,13 +0,0 @@
-import { acceptance } from "helpers/qunit-helpers";
-
-acceptance("Hamburger Menu - Staff", { loggedIn: true });
-
-test("Menu Items", (assert) => {
-  visit("/");
-  click("#toggle-hamburger-menu");
-  andThen(() => {
-    assert.ok(exists(".hamburger-panel .admin-link"));
-    assert.ok(exists(".hamburger-panel .flagged-posts-link"));
-    assert.ok(exists(".hamburger-panel .flagged-posts.badge-notification"), "it displays flag notifications");
-  });
-});

test/javascripts/acceptance/hamburger-menu-test.js.es6

@@ -1,21 +0,0 @@
-import { acceptance } from "helpers/qunit-helpers";
-
-acceptance("Hamburger Menu");
-
-test("Menu Items", (assert) => {
-  visit("/");
-  click("#toggle-hamburger-menu");
-  andThen(() => {
-    assert.ok(!exists(".hamburger-panel .admin-link"), 'does not have admin link');
-    assert.ok(!exists(".hamburger-panel .flagged-posts-link"), 'does not have flagged posts link');
-
-    assert.ok(exists(".hamburger-panel .latest-topics-link"), 'last link to latest');
-    assert.ok(exists(".hamburger-panel .badge-link"), 'has link to badges');
-    assert.ok(exists(".hamburger-panel .user-directory-link"), 'has user directory link');
-    assert.ok(exists(".hamburger-panel .faq-link"), 'has faq link');
-    assert.ok(exists(".hamburger-panel .about-link"), 'has about link');
-    assert.ok(exists(".hamburger-panel .categories-link"), 'has categories link');
-
-    assert.ok(exists('.hamburger-panel .category-link'), 'has at least one category');
-  });
-});

test/javascripts/acceptance/header-anonymous-test.js.es6

@@ -1,30 +0,0 @@
-import { acceptance } from "helpers/qunit-helpers";
-acceptance("Header (Anonymous)");
-
-test("header", () => {
-  visit("/");
-  andThen(() => {
-    ok(exists("header"), "is rendered");
-    ok(exists(".logo-big"), "it renders the large logo by default");
-    not(exists("#notifications-dropdown li"), "no notifications at first");
-    not(exists("#user-dropdown:visible"), "initially user dropdown is closed");
-    not(exists("#search-dropdown:visible"), "initially search box is closed");
-  });
-
-  // Logo changing
-  andThen(() => {
-    controllerFor('header').set("showExtraInfo", true);
-  });
-
-  andThen(() => {
-    ok(exists(".logo-small"), "it shows the small logo when `showExtraInfo` is enabled");
-  });
-
-  // Search
-  click("#search-button");
-  andThen(() => {
-    ok(exists(".search-menu:visible"), "after clicking a button search box opens");
-    not(exists(".search-menu .heading"), "initially, immediately after opening, search box is empty");
-  });
-
-});

test/javascripts/acceptance/header-test-staff.js.es6

@@ -1,14 +0,0 @@
-import { acceptance } from "helpers/qunit-helpers";
-
-acceptance("Header (Staff)", { loggedIn: true });
-
-test("header", () => {
-  visit("/");
-
-  // User dropdown
-  click("#current-user");
-  andThen(() => {
-    ok(exists(".user-menu:visible"), "is lazily rendered after user opens it");
-    ok(exists(".user-menu .menu-links-header"), "has showing / hiding user-dropdown links correctly bound");
-  });
-});

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

@@ -12,6 +12,7 @@ test("search", (assert) => {
   });
 
   fillIn('#search-term', 'dev');
+  keyEvent('#search-term', 'keyup', 16);
   andThen(() => {
     assert.ok(exists('.search-menu .results ul li'), 'it shows results');
   });

test/javascripts/components/menu-panel-test.js.es6

@@ -1,65 +0,0 @@
-import componentTest from 'helpers/component-test';
-moduleForComponent('menu-panel', {integration: true});
-
-componentTest('as a dropdown', {
-  template: `
-    <div id='outside-area'>click me</div>
-
-    <div class='menu-selected'></div>
-
-    {{#menu-panel visible=panelVisible markActive=".menu-selected" force="drop-down"}}
-      Some content
-    {{/menu-panel}}
-  `,
-
-  setup() {
-    this.set('panelVisible', false);
-  },
-
-  test(assert) {
-    assert.ok(exists(".menu-panel.hidden"), "hidden by default");
-
-    this.set('panelVisible', true);
-    andThen(() => {
-      assert.ok(!exists(".menu-panel.hidden"), "toggling visible makes it appear");
-    });
-
-    click('#outside-area');
-    andThen(() => {
-      assert.ok(exists(".menu-panel.hidden"), "clicking the body hides the menu");
-      assert.equal(this.get('panelVisible'), false, 'it updates the bound variable');
-    });
-  }
-});
-
-componentTest('as a slide-in', {
-  template: `
-    <div id='outside-area'>click me</div>
-    <div class='menu-selected'></div>
-
-    {{#menu-panel visible=panelVisible markActive=".menu-selected" force="slide-in"}}
-      Some content
-    {{/menu-panel}}
-  `,
-
-  setup() {
-    this.set('panelVisible', false);
-  },
-
-  test(assert) {
-    assert.ok(exists(".menu-panel.hidden"), "hidden by default");
-
-    this.set('panelVisible', true);
-    andThen(() => {
-      assert.ok(!exists(".menu-panel.hidden"), "toggling visible makes it appear");
-    });
-
-    click('#outside-area');
-    andThen(() => {
-      assert.ok(exists(".menu-panel.hidden"), "clicking the body hides the menu");
-      assert.equal(this.get('panelVisible'), false, 'it updates the bound variable');
-      this.set('panelVisible', true);
-    });
-
-  }
-});

test/javascripts/controllers/topic-test.js.es6

@@ -1,7 +1,7 @@
 import { blank, present } from 'helpers/qunit-helpers';
 
 moduleFor('controller:topic', 'controller:topic', {
-  needs: ['controller:header', 'controller:modal', 'controller:composer', 'controller:quote-button',
+  needs: ['controller:modal', 'controller:composer', 'controller:quote-button',
           'controller:topic-progress', 'controller:application']
 });
 

test/javascripts/helpers/component-test.js.es6

@@ -1,6 +1,7 @@
 import AppEvents from 'discourse/lib/app-events';
 import createStore from 'helpers/create-store';
 import { autoLoadModules } from 'discourse/initializers/auto-load-modules';
+import TopicTrackingState from 'discourse/models/topic-tracking-state';
 
 export default function(name, opts) {
   opts = opts || {};
@@ -22,11 +23,19 @@ export default function(name, opts) {
 
     autoLoadModules();
 
-    if (opts.setup) {
-      const store = createStore();
-      this.currentUser = Discourse.User.create();
-      this.container.register('store:main', store, { instantiate: false });
+    const store = createStore();
+    if (!opts.anonymous) {
+      const currentUser = Discourse.User.create({ username: 'eviltrout' });
+      this.currentUser = currentUser;
       this.container.register('current-user:main', this.currentUser, { instantiate: false });
+      this.container.register('topic-tracking-state:main',
+                              TopicTrackingState.create({ currentUser }),
+                              { instantiate: false });
+    }
+
+    this.container.register('store:main', store, { instantiate: false });
+
+    if (opts.setup) {
       opts.setup.call(this, store);
     }
 

test/javascripts/helpers/qunit-helpers.js.es6

@@ -2,7 +2,7 @@
 
 import sessionFixtures from 'fixtures/session-fixtures';
 import siteFixtures from 'fixtures/site-fixtures';
-import HeaderView from 'discourse/views/header';
+import HeaderComponent from 'discourse/components/site-header';
 
 function currentUser() {
   return Discourse.User.create(sessionFixtures['/session/current.json'].current_user);
@@ -41,7 +41,7 @@ function acceptance(name, options) {
       Discourse.Utilities.avatarImg = () => "";
 
       // For now don't do scrolling stuff in Test Mode
-      HeaderView.reopen({examineDockHeader: Ember.K});
+      HeaderComponent.reopen({examineDockHeader: Ember.K});
 
       var siteJson = siteFixtures['site.json'].site;
       if (options) {

test/javascripts/widgets/actions-summary-test.js.es6

@@ -7,8 +7,8 @@ widgetTest('listing actions', {
   setup() {
     this.set('args', {
       actionsSummary: [
-        {action: 'off_topic', description: 'very off topic'},
-        {action: 'spam', description: 'suspicious message'}
+        {id: 1, action: 'off_topic', description: 'very off topic'},
+        {id: 2, action: 'spam', description: 'suspicious message'}
       ]
     });
   },

test/javascripts/widgets/hamburger-menu-test.js.es6

@@ -0,0 +1,173 @@
+import { moduleForWidget, widgetTest } from 'helpers/widget-test';
+
+moduleForWidget('hamburger-menu');
+
+widgetTest('prioritize faq', {
+  template: '{{mount-widget widget="hamburger-menu"}}',
+
+  setup() {
+    this.siteSettings.faq_url = 'http://example.com/faq';
+    this.currentUser.set('read_faq', false);
+  },
+
+  test(assert) {
+    assert.ok(this.$('.faq-priority').length);
+    assert.ok(!this.$('.faq-link').length);
+  }
+});
+
+widgetTest('prioritize faq - user has read', {
+  template: '{{mount-widget widget="hamburger-menu"}}',
+
+  setup() {
+    this.siteSettings.faq_url = 'http://example.com/faq';
+    this.currentUser.set('read_faq', true);
+  },
+
+  test(assert) {
+    assert.ok(!this.$('.faq-priority').length);
+    assert.ok(this.$('.faq-link').length);
+  }
+});
+
+widgetTest('staff menu - not staff', {
+  template: '{{mount-widget widget="hamburger-menu"}}',
+
+  setup() {
+    this.currentUser.set('staff', false);
+  },
+
+  test(assert) {
+    assert.ok(!this.$('.admin-link').length);
+  }
+});
+
+widgetTest('staff menu', {
+  template: '{{mount-widget widget="hamburger-menu"}}',
+
+  setup() {
+    this.currentUser.setProperties({ staff: true, site_flagged_posts_count: 3 });
+  },
+
+  test(assert) {
+    assert.ok(this.$('.admin-link').length);
+    assert.ok(this.$('.flagged-posts-link').length);
+    assert.equal(this.$('.flagged-posts').text(), '3');
+    assert.ok(!this.$('.settings-link').length);
+  }
+});
+
+widgetTest('staff menu - admin', {
+  template: '{{mount-widget widget="hamburger-menu"}}',
+
+  setup() {
+    this.currentUser.setProperties({ staff: true, admin: true });
+  },
+
+  test(assert) {
+    assert.ok(this.$('.settings-link').length);
+  }
+});
+
+
+widgetTest('queued posts', {
+  template: '{{mount-widget widget="hamburger-menu"}}',
+
+  setup() {
+    this.currentUser.setProperties({
+      staff: true,
+      show_queued_posts: true,
+      post_queue_new_count: 5
+    });
+  },
+
+  test(assert) {
+    assert.ok(this.$('.queued-posts-link').length);
+    assert.equal(this.$('.queued-posts').text(), '5');
+  }
+});
+
+widgetTest('queued posts - disabled', {
+  template: '{{mount-widget widget="hamburger-menu"}}',
+
+  setup() {
+    this.currentUser.setProperties({ staff: true, show_queued_posts: false });
+  },
+
+  test(assert) {
+    assert.ok(!this.$('.queued-posts-link').length);
+  }
+});
+
+
+widgetTest('logged in links', {
+  template: '{{mount-widget widget="hamburger-menu"}}',
+
+  test(assert) {
+    assert.ok(this.$('.new-topics-link').length);
+    assert.ok(this.$('.unread-topics-link').length);
+  }
+});
+
+widgetTest('general links', {
+  template: '{{mount-widget widget="hamburger-menu"}}',
+  anonymous: true,
+
+  test(assert) {
+    assert.ok(this.$('.latest-topics-link').length);
+    assert.ok(!this.$('.new-topics-link').length);
+    assert.ok(!this.$('.unread-topics-link').length);
+    assert.ok(this.$('.top-topics-link').length);
+    assert.ok(this.$('.badge-link').length);
+    assert.ok(this.$('.category-link').length > 0);
+  }
+});
+
+widgetTest('badges link - disabled', {
+  template: '{{mount-widget widget="hamburger-menu"}}',
+
+  setup() {
+    this.siteSettings.enable_badges = false;
+  },
+
+  test(assert) {
+    assert.ok(!this.$('.badge-link').length);
+  }
+});
+
+widgetTest('badges link', {
+  template: '{{mount-widget widget="hamburger-menu"}}',
+
+  test(assert) {
+    assert.ok(this.$('.badge-link').length);
+  }
+});
+
+widgetTest('user directory link', {
+  template: '{{mount-widget widget="hamburger-menu"}}',
+
+  test(assert) {
+    assert.ok(this.$('.user-directory-link').length);
+  }
+});
+
+widgetTest('user directory link - disabled', {
+  template: '{{mount-widget widget="hamburger-menu"}}',
+
+  setup() {
+    this.siteSettings.enable_user_directory = false;
+  },
+
+  test(assert) {
+    assert.ok(!this.$('.user-directory-link').length);
+  }
+});
+
+widgetTest('general links', {
+  template: '{{mount-widget widget="hamburger-menu"}}',
+
+  test(assert) {
+    assert.ok(this.$('.about-link').length);
+    assert.ok(this.$('.keyboard-shortcuts-link').length);
+  }
+});

test/javascripts/widgets/header-test.js.es6

@@ -0,0 +1,37 @@
+import { moduleForWidget, widgetTest } from 'helpers/widget-test';
+
+moduleForWidget('header');
+
+widgetTest('rendering basics', {
+  template: '{{mount-widget widget="header"}}',
+  test(assert) {
+    assert.ok(this.$('header.d-header').length);
+    assert.ok(this.$('#site-logo').length);
+  }
+});
+
+widgetTest('sign up / login buttons', {
+  template: '{{mount-widget widget="header" showCreateAccount="showCreateAccount" showLogin="showLogin" args=args}}',
+  anonymous: true,
+
+  setup() {
+    this.set('args', { canSignUp: true });
+    this.on('showCreateAccount', () => this.signupShown = true);
+    this.on('showLogin', () => this.loginShown = true);
+  },
+
+  test(assert) {
+    assert.ok(this.$('button.sign-up-button').length);
+    assert.ok(this.$('button.login-button').length);
+
+    click('button.sign-up-button');
+    andThen(() => {
+      assert.ok(this.signupShown);
+    });
+
+    click('button.login-button');
+    andThen(() => {
+      assert.ok(this.loginShown);
+    });
+  }
+});

test/javascripts/widgets/home-logo-test.js.es6

@@ -1,19 +1,19 @@
-import componentTest from 'helpers/component-test';
+import { moduleForWidget, widgetTest } from 'helpers/widget-test';
 
-moduleForComponent('home-logo', {integration: true});
+moduleForWidget('home-logo');
 
 const bigLogo = '/images/d-logo-sketch.png?test';
 const smallLogo = '/images/d-logo-sketch-small.png?test';
 const mobileLogo = '/images/d-logo-sketch.png?mobile';
 const title = "Cool Forum";
 
-componentTest('basics', {
-  template: '{{home-logo minimized=minimized}}',
+widgetTest('basics', {
+  template: '{{mount-widget widget="home-logo" args=args}}',
   setup() {
     this.siteSettings.logo_url = bigLogo;
     this.siteSettings.logo_small_url= smallLogo;
     this.siteSettings.title = title;
-    this.set('minimized', false);
+    this.set('args', { minimized: false });
   },
 
   test(assert) {
@@ -23,23 +23,32 @@ componentTest('basics', {
     assert.ok(this.$('img#site-logo.logo-big').length === 1);
     assert.equal(this.$('#site-logo').attr('src'), bigLogo);
     assert.equal(this.$('#site-logo').attr('alt'), title);
-
-    this.set('minimized', true);
-    andThen(() => {
-      assert.ok(this.$('img.logo-small').length === 1);
-      assert.equal(this.$('img.logo-small').attr('src'), smallLogo);
-      assert.equal(this.$('img.logo-small').attr('alt'), title);
-    });
   }
 });
 
-componentTest('no logo', {
-  template: '{{home-logo minimized=minimized}}',
+widgetTest('basics - minmized', {
+  template: '{{mount-widget widget="home-logo" args=args}}',
+  setup() {
+    this.siteSettings.logo_url = bigLogo;
+    this.siteSettings.logo_small_url= smallLogo;
+    this.siteSettings.title = title;
+    this.set('args', { minimized: true });
+  },
+
+  test(assert) {
+    assert.ok(this.$('img.logo-small').length === 1);
+    assert.equal(this.$('img.logo-small').attr('src'), smallLogo);
+    assert.equal(this.$('img.logo-small').attr('alt'), title);
+  }
+});
+
+widgetTest('no logo', {
+  template: '{{mount-widget widget="home-logo" args=args}}',
   setup() {
     this.siteSettings.logo_url = '';
     this.siteSettings.logo_small_url = '';
     this.siteSettings.title = title;
-    this.set('minimized', false);
+    this.set('args', { minimized: false });
   },
 
   test(assert) {
@@ -47,16 +56,25 @@ componentTest('no logo', {
 
     assert.ok(this.$('h2#site-text-logo.text-logo').length === 1);
     assert.equal(this.$('#site-text-logo').text(), title);
-
-    this.set('minimized', true);
-    andThen(() => {
-      assert.ok(this.$('i.fa-home').length === 1);
-    });
   }
 });
 
-componentTest('mobile logo', {
-  template: "{{home-logo}}",
+widgetTest('no logo - minimized', {
+  template: '{{mount-widget widget="home-logo" args=args}}',
+  setup() {
+    this.siteSettings.logo_url = '';
+    this.siteSettings.logo_small_url = '';
+    this.siteSettings.title = title;
+    this.set('args', { minimized: true });
+  },
+
+  test(assert) {
+    assert.ok(this.$('i.fa-home').length === 1);
+  }
+});
+
+widgetTest('mobile logo', {
+  template: '{{mount-widget widget="home-logo" args=args}}',
   setup() {
     this.siteSettings.mobile_logo_url = mobileLogo;
     this.siteSettings.logo_small_url= smallLogo;
@@ -69,8 +87,8 @@ componentTest('mobile logo', {
   }
 });
 
-componentTest('mobile without logo', {
-  template: "{{home-logo}}",
+widgetTest('mobile without logo', {
+  template: '{{mount-widget widget="home-logo" args=args}}',
   setup() {
     this.siteSettings.logo_url = bigLogo;
     this.site.mobileView = true;
@@ -81,10 +99,3 @@ componentTest('mobile without logo', {
     assert.equal(this.$('#site-logo').attr('src'), bigLogo);
   }
 });
-
-componentTest("changing url", {
-  template: '{{home-logo targetUrl="https://www.discourse.org"}}',
-  test(assert) {
-    assert.equal(this.$('a').attr('href'), 'https://www.discourse.org');
-  }
-});

test/javascripts/widgets/post-gutter-test.js.es6

@@ -6,6 +6,7 @@ widgetTest("duplicate links", {
   template: '{{mount-widget widget="post-gutter" args=args}}',
   setup() {
     this.set('args', {
+      id: 2,
       links: [
         { title: "Evil Trout Link", url: "http://eviltrout.com" },
         { title: "Evil Trout Link", url: "http://dupe.eviltrout.com" }
@@ -21,6 +22,7 @@ widgetTest("collapsed links", {
   template: '{{mount-widget widget="post-gutter" args=args}}',
   setup() {
     this.set('args', {
+      id: 1,
       links: [
         { title: "Link 1", url: "http://eviltrout.com?1" },
         { title: "Link 2", url: "http://eviltrout.com?2" },

test/javascripts/widgets/user-menu-test.js.es6

@@ -0,0 +1,106 @@
+import { moduleForWidget, widgetTest } from 'helpers/widget-test';
+
+moduleForWidget('user-menu');
+
+widgetTest('basics', {
+  template: '{{mount-widget widget="user-menu"}}',
+
+  test(assert) {
+    assert.ok(this.$('.user-menu').length);
+    assert.ok(this.$('.user-activity-link').length);
+    assert.ok(this.$('.user-bookmarks-link').length);
+    assert.ok(this.$('.user-preferences-link').length);
+    assert.ok(this.$('.notifications').length);
+  }
+});
+
+widgetTest('log out', {
+  template: '{{mount-widget widget="user-menu" logout="logout"}}',
+
+  setup() {
+    this.on('logout', () => this.loggedOut = true);
+  },
+
+  test(assert) {
+    assert.ok(this.$('.logout').length);
+
+    click('.logout');
+    andThen(() => {
+      assert.ok(this.loggedOut);
+    });
+  }
+});
+
+widgetTest('private messages - disabled', {
+  template: '{{mount-widget widget="user-menu"}}',
+  setup() {
+    this.siteSettings.enable_private_messages = false;
+  },
+
+  test(assert) {
+    assert.ok(!this.$('.user-pms-link').length);
+  }
+});
+
+widgetTest('private messages - enabled', {
+  template: '{{mount-widget widget="user-menu"}}',
+  setup() {
+    this.siteSettings.enable_private_messages = true;
+  },
+
+  test(assert) {
+    assert.ok(this.$('.user-pms-link').length);
+  }
+});
+
+widgetTest('anonymous', {
+  template: '{{mount-widget widget="user-menu" toggleAnonymous="toggleAnonymous"}}',
+
+  setup() {
+    this.currentUser.setProperties({ is_anonymous: false, trust_level: 3 });
+    this.siteSettings.allow_anonymous_posting = true;
+    this.siteSettings.anonymous_posting_min_trust_level = 3;
+
+    this.on('toggleAnonymous', () => this.anonymous = true);
+  },
+
+  test(assert) {
+    assert.ok(this.$('.enable-anonymous').length);
+    click('.enable-anonymous');
+    andThen(() => {
+      assert.ok(this.anonymous);
+    });
+  }
+});
+
+widgetTest('anonymous - disabled', {
+  template: '{{mount-widget widget="user-menu"}}',
+
+  setup() {
+    this.siteSettings.allow_anonymous_posting = false;
+  },
+
+  test(assert) {
+    assert.ok(!this.$('.enable-anonymous').length);
+  }
+});
+
+widgetTest('anonymous - switch back', {
+  template: '{{mount-widget widget="user-menu" toggleAnonymous="toggleAnonymous"}}',
+
+  setup() {
+    this.currentUser.setProperties({ is_anonymous: true });
+    this.siteSettings.allow_anonymous_posting = true;
+
+    this.on('toggleAnonymous', () => this.anonymous = true);
+  },
+
+  test(assert) {
+    assert.ok(this.$('.disable-anonymous').length);
+    click('.disable-anonymous');
+    andThen(() => {
+      assert.ok(this.anonymous);
+    });
+  }
+});
+

test/javascripts/widgets/widget-test.js.es6

@@ -89,6 +89,7 @@ widgetTest('widget state', {
   setup() {
     createWidget('state-test', {
       tagName: 'button.test',
+      buildKey: () => `button-test`,
 
       defaultState() {
         return { clicks: 0 };
@@ -121,6 +122,7 @@ widgetTest('widget update with promise', {
   setup() {
     createWidget('promise-test', {
       tagName: 'button.test',
+      buildKey: () => 'promise-test',
 
       html(attrs, state) {
         return state.name || "No name";