DEV: Add missing navigation_menu setting and simplify click in PO

The acceptance tests are flaky so I've decided to port them to system
test which makes them easier to work with and reason about.

app/assets/javascripts/discourse/tests/acceptance/sidebar-mobile-test.js

@@ -1,86 +0,0 @@
-import I18n from "I18n";
-import { test } from "qunit";
-
-import { click, visit } from "@ember/test-helpers";
-
-import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
-
-acceptance("Sidebar - Mobile - User with sidebar enabled", function (needs) {
-  needs.user();
-
-  needs.settings({
-    navigation_menu: "sidebar",
-  });
-
-  needs.mobileView();
-
-  test("hidden by default", async function (assert) {
-    await visit("/");
-
-    assert.ok(
-      !exists(".sidebar-hamburger-dropdown"),
-      "sidebar is not displayed"
-    );
-  });
-
-  test("clicking outside sidebar collapses it", async function (assert) {
-    await visit("/");
-
-    await click(".hamburger-dropdown");
-
-    assert.ok(exists(".sidebar-hamburger-dropdown"), "sidebar is displayed");
-
-    await click("#main-outlet");
-
-    assert.ok(!exists(".sidebar-hamburger-dropdown"), "sidebar is collapsed");
-  });
-
-  test("clicking on a link or button in sidebar collapses it", async function (assert) {
-    await visit("/");
-
-    await click(".hamburger-dropdown");
-    await click(".sidebar-section-community .sidebar-section-header-button");
-
-    assert.ok(
-      !exists(".sidebar-hamburger-dropdown"),
-      "sidebar is collapsed when a button in sidebar is clicked"
-    );
-
-    await click(".hamburger-dropdown");
-    await click(".sidebar-section-community .sidebar-section-link-everything");
-
-    assert.ok(
-      !exists(".sidebar-hamburger-dropdown"),
-      "sidebar is collapsed when a link in sidebar is clicked"
-    );
-  });
-
-  test("button to toggle between mobile and desktop view", async function (assert) {
-    await visit("/");
-    await click(".hamburger-dropdown");
-
-    assert.ok(
-      exists(
-        `.sidebar-footer-actions-toggle-mobile-view[title="${I18n.t(
-          "desktop_view"
-        )}"]`
-      ),
-      "displays the right title for the button"
-    );
-
-    assert.ok(
-      exists(".sidebar-footer-actions-toggle-mobile-view .d-icon-desktop"),
-      "displays the desktop icon for the button"
-    );
-  });
-
-  test("keyboard shortcuts button is hidden", async function (assert) {
-    await visit("/");
-    await click(".hamburger-dropdown");
-
-    assert.notOk(
-      exists(".sidebar-footer-actions-keyboard-shortcuts"),
-      "keyboard shortcuts button is not shown on mobile"
-    );
-  });
-});

spec/system/page_objects/components/composer.rb

@@ -3,13 +3,19 @@
 module PageObjects
   module Components
     class Composer < PageObjects::Components::Base
+      COMPOSER_ID = "#reply-control"
+
+      def opened?
+        page.has_css?("#{COMPOSER_ID}.open")
+      end
+
       def open_composer_actions
         find(".composer-action-title .btn").click
         self
       end
 
       def fill_title(title)
-        find("#reply-control #reply-title").fill_in(with: title)
+        find("#{COMPOSER_ID} #reply-title").fill_in(with: title)
         self
       end
 
@@ -37,7 +43,7 @@ module PageObjects
       end
 
       def create
-        find("#reply-control .btn-primary").click
+        find("#{COMPOSER_ID} .btn-primary").click
       end
 
       def action(action_title)
@@ -45,11 +51,11 @@ module PageObjects
       end
 
       def button_label
-        find("#reply-control .btn-primary .d-button-label")
+        find("#{COMPOSER_ID} .btn-primary .d-button-label")
       end
 
       def composer_input
-        find("#reply-control .d-editor .d-editor-input")
+        find("#{COMPOSER_ID} .d-editor .d-editor-input")
       end
     end
   end

spec/system/page_objects/components/sidebar_header_dropdown.rb

@@ -7,8 +7,34 @@ module PageObjects
         page.find(".hamburger-dropdown").click
       end
 
+      SIDEBAR_HAMBURGER_DROPDOWN = ".sidebar-hamburger-dropdown"
+
+      def width
+        page.find(SIDEBAR_HAMBURGER_DROPDOWN).rect.width
+      end
+
       def visible?
-        page.has_css?(".sidebar-hamburger-dropdown")
+        page.has_css?(SIDEBAR_HAMBURGER_DROPDOWN)
+      end
+
+      def hidden?
+        page.has_no_css?(SIDEBAR_HAMBURGER_DROPDOWN)
+      end
+
+      def has_no_keyboard_shortcuts_button?
+        page.has_no_css?(".sidebar-footer-actions-keyboard-shortcuts")
+      end
+
+      def click_community_header_button
+        find(".sidebar-section-header-button").click
+      end
+
+      def click_everything_link
+        find(".sidebar-section-link-everything").click
+      end
+
+      def click_toggle_to_desktop_view_button
+        find(".sidebar-footer-actions-toggle-mobile-view").click
       end
     end
   end

spec/system/viewing_sidebar_mobile_spec.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+describe "Viewing sidebar mobile", type: :system, js: true, mobile: true do
+  fab!(:user) { Fabricate(:user) }
+  let(:sidebar_dropdown) { PageObjects::Components::SidebarHeaderDropdown.new }
+  let(:composer) { PageObjects::Components::Composer.new }
+
+  before do
+    SiteSetting.navigation_menu = "sidebar"
+    sign_in(user)
+  end
+
+  around do |example|
+    original_disable_animation = Capybara.disable_animation
+    Capybara.disable_animation = true
+
+    example.run
+
+    Capybara.disable_animation = original_disable_animation
+  end
+
+  it "does not display the sidebar by default" do
+    visit("/latest")
+
+    expect(sidebar_dropdown).to be_hidden
+  end
+
+  it "does not display the keyboard shortcuts button" do
+    visit("/latest")
+
+    sidebar_dropdown.click
+
+    expect(sidebar_dropdown).to be_visible
+    expect(sidebar_dropdown).to have_no_keyboard_shortcuts_button
+  end
+
+  it "collapses the sidebar when clicking outside of it" do
+    visit("/latest")
+
+    sidebar_dropdown.click
+
+    expect(sidebar_dropdown).to be_visible
+
+    # Simulate clicking outside of the sidebar
+    page.execute_script("document.elementFromPoint(#{sidebar_dropdown.width + 10}, 1).click();")
+
+    expect(sidebar_dropdown).to be_hidden
+  end
+
+  it "collpases the sidebar when clicking on a link in the sidebar" do
+    visit("/latest")
+
+    sidebar_dropdown.click
+
+    expect(sidebar_dropdown).to be_visible
+
+    sidebar_dropdown.click_everything_link
+
+    expect(sidebar_dropdown).to be_hidden
+  end
+
+  it "collapses the sidebar when clicking on a button in the sidebar" do
+    visit("/latest")
+
+    sidebar_dropdown.click
+
+    expect(sidebar_dropdown).to be_visible
+
+    sidebar_dropdown.click_community_header_button
+
+    expect(composer).to be_opened
+    expect(sidebar_dropdown).to be_hidden
+  end
+
+  it "toggles to desktop view after clicking on the toggle to desktop view button", mobile: true do
+    visit ("/latest")
+
+    expect(page).to have_css(".mobile-view")
+
+    sidebar_dropdown.click
+    sidebar_dropdown.click_toggle_to_desktop_view_button
+
+    expect(page).to have_css(".desktop-view")
+  end
+end