diff --git a/spec/features/work_packages/table/hierarchy_spec.rb b/spec/features/work_packages/table/hierarchy_spec.rb
new file mode 100644
index 0000000000..6ec6334df2
--- /dev/null
+++ b/spec/features/work_packages/table/hierarchy_spec.rb
@@ -0,0 +1,95 @@
+require 'spec_helper'
+
+describe 'Work Package table hierarchy', js: true do
+  let(:user) { FactoryGirl.create :admin }
+  let(:project) { FactoryGirl.create(:project) }
+
+  let(:category) { FactoryGirl.create :category, project: project, name: 'Foo' }
+
+  let!(:wp_root) { FactoryGirl.create(:work_package, project: project) }
+  let!(:wp_inter) { FactoryGirl.create(:work_package, project: project, parent: wp_root) }
+  let!(:wp_leaf) { FactoryGirl.create(:work_package, project: project, category: category, parent: wp_inter) }
+  let!(:wp_other) { FactoryGirl.create(:work_package, project: project) }
+  let(:wp_table) { Pages::WorkPackagesTable.new(project) }
+  let(:hierarchy) { ::Components::WorkPackages::Hierarchies.new }
+
+  let!(:query) do
+    query              = FactoryGirl.build(:query, user: user, project: project)
+    query.column_names = ['subject', 'category']
+    query.filters.clear
+    query.add_filter('category_id', '=', [category.id])
+
+    query.save!
+    query
+  end
+
+  def expect_listed(*wps)
+    wps.each do |wp|
+      wp_table.expect_work_package_listed(wp)
+    end
+  end
+
+  def expect_hidden(*wps)
+    wps.each do |wp|
+      hierarchy.expect_hidden(wp)
+    end
+  end
+
+  before do
+    login_as(user)
+  end
+
+  it 'shows hierarchy correctly' do
+    wp_table.visit!
+    expect_listed(wp_root, wp_inter, wp_leaf, wp_other)
+
+    hierarchy.expect_no_hierarchies
+
+    # Hierarchy mode is disabled by default
+    hierarchy.enable_hierarchy
+
+    hierarchy.expect_hierarchy_at(wp_root)
+    hierarchy.expect_hierarchy_at(wp_inter)
+    hierarchy.expect_leaf_at(wp_leaf)
+    hierarchy.expect_leaf_at(wp_other)
+
+    # Toggling hierarchies hides the inner children
+    hierarchy.toggle_row(wp_root)
+
+    # Root, other showing
+    expect_listed(wp_root, wp_other)
+    # Inter, Leaf hidden
+    expect_hidden(wp_inter, wp_leaf)
+
+    # Show all again
+    hierarchy.toggle_row(wp_root)
+    expect_listed(wp_root, wp_other, wp_inter, wp_leaf)
+
+    # Disable hierarchies
+    hierarchy.disable_hierarchy
+    hierarchy.expect_no_hierarchies
+
+    # Now visiting the query for category
+    wp_table.visit_query(query)
+
+    # Should only list the matching leaf
+    wp_table.expect_work_package_listed(wp_leaf)
+
+    # When toggling hierarchies, shows root and intermediate node
+    # Hierarchy mode is disabled by default
+    hierarchy.enable_hierarchy
+
+    hierarchy.expect_hierarchy_at(wp_root)
+    hierarchy.expect_hierarchy_at(wp_inter)
+
+    hierarchy.toggle_row(wp_root)
+    expect_listed(wp_root)
+    expect_listed(wp_inter, wp_leaf)
+
+    # Disabling hierarchy hides them again
+    hierarchy.disable_hierarchy
+
+    expect(page).to have_no_selector("#wp-row-#{wp_root.id}")
+    expect(page).to have_no_selector("#wp-row-#{wp_inter.id}")
+  end
+end
diff --git a/spec/support/components/work_packages/hierarchies.rb b/spec/support/components/work_packages/hierarchies.rb
new file mode 100644
index 0000000000..5d714a2142
--- /dev/null
+++ b/spec/support/components/work_packages/hierarchies.rb
@@ -0,0 +1,75 @@
+#-- copyright
+# OpenProject is a project management system.
+# Copyright (C) 2012-2017 the OpenProject Foundation (OPF)
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2017 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See doc/COPYRIGHT.rdoc for more details.
+#++
+
+module Components
+  module WorkPackages
+    class Hierarchies
+      include Capybara::DSL
+      include RSpec::Matchers
+
+      def enable_hierarchy
+        find('#work-packages-settings-button').click
+        page.find('#settingsDropdown a.menu-item', text: 'Display hierarchy').click
+      end
+
+      def disable_hierarchy
+        find('#work-packages-settings-button').click
+        expect(page).to have_selector('#settingsDropdown .menu-item')
+        page.find('#settingsDropdown a.menu-item', text: 'Hide hierarchy').click
+      end
+
+      def expect_no_hierarchies
+        expect(page).to have_no_selector('.wp-table--hierarchy-span')
+      end
+
+      def expect_leaf_at(work_package)
+        expect(page).to have_selector("#wp-row-#{work_package.id} .wp-table--leaf-indicator")
+      end
+
+      def expect_hierarchy_at(work_package, collapsed = false)
+        selector = "#wp-row-#{work_package.id} .wp-table--hierarchy-indicator"
+        collapsed_sel = ".-hierarchy-collapsed"
+
+        if collapsed
+          expect(page).to have_selector("#{selector}#{collapsed_sel}")
+        else
+          expect(page).to have_selector(selector)
+          expect(page).to have_no_selector("#{selector}#{collapsed_sel}")
+        end
+      end
+
+      def expect_hidden(work_package)
+        expect(page).to have_selector("#wp-row-#{work_package.id}", visible: :hidden)
+      end
+
+      def toggle_row(work_package)
+        find("#wp-row-#{work_package.id} .wp-table--hierarchy-indicator").click
+      end
+    end
+  end
+end