PERF: Migrate header to discourse widgets

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

@@ -0,0 +1,101 @@
+import { moduleForWidget, widgetTest } from 'helpers/widget-test';
+
+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";
+
+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('args', { minimized: false });
+  },
+
+  test(assert) {
+    assert.ok(this.$('.title').length === 1);
+    assert.ok(this.$('a[data-auto-route]').length === 1);
+
+    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);
+  }
+});
+
+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('args', { minimized: false });
+  },
+
+  test(assert) {
+    assert.ok(this.$('a[data-auto-route]').length === 1);
+
+    assert.ok(this.$('h2#site-text-logo.text-logo').length === 1);
+    assert.equal(this.$('#site-text-logo').text(), title);
+  }
+});
+
+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;
+    this.site.mobileView = true;
+  },
+
+  test(assert) {
+    assert.ok(this.$('img#site-logo.logo-big').length === 1);
+    assert.equal(this.$('#site-logo').attr('src'), mobileLogo);
+  }
+});
+
+widgetTest('mobile without logo', {
+  template: '{{mount-widget widget="home-logo" args=args}}',
+  setup() {
+    this.siteSettings.logo_url = bigLogo;
+    this.site.mobileView = true;
+  },
+
+  test(assert) {
+    assert.ok(this.$('img#site-logo.logo-big').length === 1);
+    assert.equal(this.$('#site-logo').attr('src'), bigLogo);
+  }
+});

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";