Add the user settings icon, with a popup box

2 files changed, 44 insertions, 0 deletions

diff --git a/web-ui/test/spec/page/user_settings_box.spec.js b/web-ui/test/spec/page/user_settings_box.spec.js
new file mode 100644
index 00000000..f769d313
--- /dev/null
+++ b/web-ui/test/spec/page/user_settings_box.spec.js
@@ -0,0 +1,31 @@
+describeComponent('page/user_settings_box', function () {
+  'use strict';
+
+  var features;
+
+  beforeEach(function () {
+    this.setupComponent();
+    features = require('features');
+  });
+
+  it('is extra high when the logout button is present', function() {
+    spyOn(features, 'isLogoutEnabled').and.returnValue(true);
+
+    expect(this.$node.hasClass('extra-bottom-space')).toBe(true);
+  });
+
+  it('toggles when receiving a toggle event', function () {
+    expect(this.$node.hasClass('hidden')).toBe(false);
+    this.component.trigger(document, Pixelated.events.ui.userSettingsBox.toggle);
+    expect(this.$node.hasClass('hidden')).toBe(true);
+    this.component.trigger(document, Pixelated.events.ui.userSettingsBox.toggle);
+    expect(this.$node.hasClass('hidden')).toBe(false);
+  });
+
+  it('hides iteslf when the right arrow is clicked', function () {
+    this.$node.removeClass('hidden');
+    this.component.select('close').click();
+
+    expect(this.$node.hasClass('hidden')).toBe(true);
+  });
+});
diff --git a/web-ui/test/spec/page/user_settings_icon.spec.js b/web-ui/test/spec/page/user_settings_icon.spec.js
new file mode 100644
index 00000000..60e06d36
--- /dev/null
+++ b/web-ui/test/spec/page/user_settings_icon.spec.js
@@ -0,0 +1,13 @@
+describeComponent('page/user_settings_icon', function () {
+  'use strict';
+
+  beforeEach(function () {
+    this.setupComponent();
+  });
+
+  it('toggles the user settings box when clicked', function () {
+    var toggleEvent = spyOnEvent(document, Pixelated.events.ui.userSettingsBox.toggle);
+    this.$node.click();
+    expect(toggleEvent).toHaveBeenTriggeredOn(document);
+  });
+});