From 168de52538632ae18b95c0757ab2ae5e21ff240c Mon Sep 17 00:00:00 2001
From: Martin Brennan <martin@discourse.org>
Date: Fri, 10 Mar 2023 14:54:57 +1000
Subject: [PATCH] DEV: Change sidebar header dropdown to use wait_for_animation
 (#20627)

* DEV: Change sidebar header dropdown to use wait_for_animation

Introduced in 54351e1b8a9b070bfce6a478e9912a76f1545a54, this
helper should remove the need to have to add the .animated
CSS class in JS for the sidebar.

* DEV: Revert spec change
---
 .../javascripts/discourse/app/components/site-header.js       | 2 --
 plugins/chat/spec/system/page_objects/chat/chat_channel.rb    | 2 --
 spec/system/page_objects/components/base.rb                   | 1 +
 .../system/page_objects/components/sidebar_header_dropdown.rb | 4 +---
 spec/system/page_objects/pages/base.rb                        | 2 ++
 spec/system/viewing_sidebar_spec.rb                           | 2 +-
 6 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/site-header.js b/app/assets/javascripts/discourse/app/components/site-header.js
index f215fa6ec5d..58cf5a78c84 100644
--- a/app/assets/javascripts/discourse/app/components/site-header.js
+++ b/app/assets/javascripts/discourse/app/components/site-header.js
@@ -78,7 +78,6 @@ const SiteHeaderComponent = MountWidget.extend(
       headerCloak.classList.add("animate");
       this._scheduledRemoveAnimate = discourseLater(() => {
         panel.classList.remove("animate");
-        panel.classList.add("animated");
         headerCloak.classList.remove("animate");
       }, 200);
       panel.style.setProperty("--offset", 0);
@@ -90,7 +89,6 @@ const SiteHeaderComponent = MountWidget.extend(
       this._animate = true;
       const headerCloak = document.querySelector(".header-cloak");
       panel.classList.add("animate");
-      panel.classList.remove("animated");
       headerCloak.classList.add("animate");
       if (menuOrigin === "left") {
         panel.style.setProperty("--offset", `-100vw`);
diff --git a/plugins/chat/spec/system/page_objects/chat/chat_channel.rb b/plugins/chat/spec/system/page_objects/chat/chat_channel.rb
index b0729fe3c3c..1d093778b8a 100644
--- a/plugins/chat/spec/system/page_objects/chat/chat_channel.rb
+++ b/plugins/chat/spec/system/page_objects/chat/chat_channel.rb
@@ -3,8 +3,6 @@
 module PageObjects
   module Pages
     class ChatChannel < PageObjects::Pages::Base
-      include SystemHelpers
-
       def type_in_composer(input)
         find(".chat-composer-input").send_keys(input)
       end
diff --git a/spec/system/page_objects/components/base.rb b/spec/system/page_objects/components/base.rb
index cb933c19688..4815a37b240 100644
--- a/spec/system/page_objects/components/base.rb
+++ b/spec/system/page_objects/components/base.rb
@@ -5,6 +5,7 @@ module PageObjects
     class Base
       include Capybara::DSL
       include RSpec::Matchers
+      include SystemHelpers
     end
   end
 end
diff --git a/spec/system/page_objects/components/sidebar_header_dropdown.rb b/spec/system/page_objects/components/sidebar_header_dropdown.rb
index 1d74577f927..3556feb1616 100644
--- a/spec/system/page_objects/components/sidebar_header_dropdown.rb
+++ b/spec/system/page_objects/components/sidebar_header_dropdown.rb
@@ -5,9 +5,7 @@ module PageObjects
     class SidebarHeaderDropdown < PageObjects::Components::Base
       def click
         page.find(".hamburger-dropdown").click
-
-        # `.animated` is important here because we want to wait until dropdown has finished its animation completely
-        page.has_css?(".menu-panel.animated")
+        wait_for_animation(find(".menu-panel"), timeout: 5)
         self
       end
 
diff --git a/spec/system/page_objects/pages/base.rb b/spec/system/page_objects/pages/base.rb
index 48b005fc1c2..42d716abb9a 100644
--- a/spec/system/page_objects/pages/base.rb
+++ b/spec/system/page_objects/pages/base.rb
@@ -4,6 +4,8 @@ module PageObjects
   module Pages
     class Base
       include Capybara::DSL
+      include RSpec::Matchers
+      include SystemHelpers
     end
   end
 end
diff --git a/spec/system/viewing_sidebar_spec.rb b/spec/system/viewing_sidebar_spec.rb
index e830fe59440..1866194e41c 100644
--- a/spec/system/viewing_sidebar_spec.rb
+++ b/spec/system/viewing_sidebar_spec.rb
@@ -5,7 +5,7 @@ describe "Viewing sidebar", type: :system, js: true do
   fab!(:user) { Fabricate(:user) }
   fab!(:category_sidebar_section_link) { Fabricate(:category_sidebar_section_link, user: user) }
 
-  before_all { sign_in(user) }
+  before { sign_in(user) }
 
   describe "when using the legacy navigation menu" do
     before { SiteSetting.navigation_menu = "legacy" }