2 files changed, 82 insertions, 0 deletions
diff --git a/spec/javascripts/fixtures/right_sidebar.html.haml b/spec/javascripts/fixtures/right_sidebar.html.haml
new file mode 100644
index 00000000000..95efaff4b69
--- /dev/null
+++ b/spec/javascripts/fixtures/right_sidebar.html.haml
@@ -0,0 +1,13 @@
+%div
+  %div.page-gutter.page-with-sidebar
+
+  %aside.right-sidebar
+    %div.block.issuable-sidebar-header
+      %a.gutter-toggle.pull-right.js-sidebar-toggle
+        %i.fa.fa-angle-double-left
+
+    %form.issuable-context-form
+      %div.block.labels
+        %div.sidebar-collapsed-icon
+          %i.fa.fa-tags
+          %span 1
diff --git a/spec/javascripts/right_sidebar_spec.js.coffee b/spec/javascripts/right_sidebar_spec.js.coffee
new file mode 100644
index 00000000000..2075cacdb67
--- /dev/null
+++ b/spec/javascripts/right_sidebar_spec.js.coffee
@@ -0,0 +1,69 @@
+#= require right_sidebar
+#= require jquery
+#= require jquery.cookie
+
+@sidebar    = null
+$aside      = null
+$toggle     = null
+$icon       = null
+$page       = null
+$labelsIcon = null
+
+
+assertSidebarState = (state) ->
+
+  shouldBeExpanded  = state is 'expanded'
+  shouldBeCollapsed = state is 'collapsed'
+
+  expect($aside.hasClass('right-sidebar-expanded')).toBe shouldBeExpanded
+  expect($page.hasClass('right-sidebar-expanded')).toBe shouldBeExpanded
+  expect($icon.hasClass('fa-angle-double-right')).toBe shouldBeExpanded
+
+  expect($aside.hasClass('right-sidebar-collapsed')).toBe shouldBeCollapsed
+  expect($page.hasClass('right-sidebar-collapsed')).toBe shouldBeCollapsed
+  expect($icon.hasClass('fa-angle-double-left')).toBe shouldBeCollapsed
+
+
+describe 'RightSidebar', ->
+
+  fixture.preload 'right_sidebar.html'
+
+  beforeEach ->
+    fixture.load 'right_sidebar.html'
+
+    @sidebar    = new Sidebar
+    $aside      = $ '.right-sidebar'
+    $page       = $ '.page-with-sidebar'
+    $icon       = $aside.find 'i'
+    $toggle     = $aside.find '.js-sidebar-toggle'
+    $labelsIcon = $aside.find '.sidebar-collapsed-icon'
+
+
+  it 'should expand the sidebar when arrow is clicked', ->
+
+    $toggle.click()
+    assertSidebarState 'expanded'
+
+
+  it 'should collapse the sidebar when arrow is clicked', ->
+
+    $toggle.click()
+    assertSidebarState 'expanded'
+
+    $toggle.click()
+    assertSidebarState 'collapsed'
+
+
+  it 'should float over the page and when sidebar icons clicked', ->
+
+    $labelsIcon.click()
+    assertSidebarState 'expanded'
+
+
+  it 'should collapse when the icon arrow clicked while it is floating on page', ->
+
+    $labelsIcon.click()
+    assertSidebarState 'expanded'
+
+    $toggle.click()
+    assertSidebarState 'collapsed'