Make naming consistent for MainMenuToggleComponent and add a component test

HDinger · HDinger · commit 17589d9ace02 · 2025-06-24T09:50:21.000+02:00
diff --git a/app/components/_index.sass b/app/components/_index.sass
@@ -6,7 +6,7 @@
 @import "open_project/common/attribute_help_text_component"
 @import "open_project/common/attribute_label_component"
 @import "open_project/common/submenu_component"
-@import "open_project/common/main_menu_toggler_component"
+@import "open_project/common/main_menu_toggle_component"
 @import "projects/row_component"
 @import "projects/phases/hover_card_component"
 @import "shares/invite_user_form_component"
diff --git a/app/components/open_project/common/main_menu_toggle_component.rb b/app/components/open_project/common/main_menu_toggle_component.rb
@@ -30,47 +30,49 @@
 #
 module OpenProject
   module Common
-    class MainMenuTogglerComponent < ApplicationComponent
-      def initialize(opened:)
-        super
+    class MainMenuToggleComponent < ApplicationComponent
+      def initialize(expanded:)
+        super()
 
-        @opened = opened
+        @expanded = expanded
       end
 
+      def call
+        render(Primer::Beta::IconButton.new(icon:,
+                                            id:,
+                                            aria: { label: aria_label },
+                                            scheme:,
+                                            size:,
+                                            data:))
+      end
+
+      private
+
       def icon
-        @opened ? "sidebar-expand" : :"sidebar-collapse"
+        @expanded ? "sidebar-expand" : :"sidebar-collapse"
       end
 
       def id
-        "menu-toggler--#{@opened ? 'opener' : 'closer'}"
+        "menu-toggle--#{@expanded ? 'collapse-button' : 'expand-button'}"
       end
 
       def aria_label
-        @opened ? I18n.t("js.label_hide_project_menu") : I18n.t("js.label_expand_project_menu")
+        @expanded ? I18n.t("js.label_hide_project_menu") : I18n.t("js.label_expand_project_menu")
       end
 
       def scheme
         :invisible
       end
 
       def size
-        @opened ? :medium : :small
+        @expanded ? :medium : :small
       end
 
       def data
         {
-          action: "click->menus--main-toggler#toggleNavigation"
+          action: "click->menus--main-toggle#toggleNavigation"
         }
       end
-
-      def call
-        render(Primer::Beta::IconButton.new(icon:,
-                                            id:,
-                                            aria: { label: aria_label },
-                                            scheme:,
-                                            size:,
-                                            data:))
-      end
     end
   end
 end
diff --git a/app/components/open_project/common/main_menu_toggle_component.sass b/app/components/open_project/common/main_menu_toggle_component.sass
@@ -26,15 +26,15 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-#menu-toggler--closer
+#menu-toggle--expand-button
   position: absolute
   top: 18px
   left: 11px
 
   @media screen and (max-width: $breakpoint-sm)
     top: 11px
 
-#menu-toggler--opener
+#menu-toggle--collapse-button
   margin-right: 5px
 
   .Button-visual
@@ -47,5 +47,5 @@
       margin-left: 30px
 
   &:not(.hidden-navigation)
-    #menu-toggler--closer
+    #menu-toggle--expand-button
       display: none
diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb
@@ -30,9 +30,9 @@ See COPYRIGHT and LICENSE files for more details.
 <html xmlns="http://www.w3.org/1999/xhtml"
       lang="<%= I18n.locale.to_s %>"
       xml:lang="<%= I18n.locale.to_s %>"
-      class="<%= 'in_modal' unless show_decoration %>">
+      class="<%= "in_modal" unless show_decoration %>">
 <head>
-  <%= render partial: 'layouts/common_head' %>
+  <%= render partial: "layouts/common_head" %>
   <!-- project specific tags -->
   <%= call_hook :view_layouts_base_html_head %>
   <!-- page specific tags -->
@@ -43,13 +43,13 @@ See COPYRIGHT and LICENSE files for more details.
 </head>
 <%= content_tag :body,
                 class: "#{body_css_classes}  __overflowing_element_container __overflowing_body",
-                data: body_data_attributes(local_assigns) do  %>
-<%= render partial: 'warning_bar/warning_bar' %>
+                data: body_data_attributes(local_assigns) do %>
+<%= render partial: "warning_bar/warning_bar" %>
 <noscript>
   <div class="top-shelf">
     <p>
       <span>
-        <%= op_icon 'icon3 icon-warning' %>
+        <%= op_icon "icon3 icon-warning" %>
         <strong><%= t(:noscript_heading) %></strong>
       </span>
       <%= t(:noscript_description) %>
@@ -69,15 +69,15 @@ See COPYRIGHT and LICENSE files for more details.
 <% initial_classes = initial_menu_classes(side_displayed, show_decoration) %>
 <div id="wrapper" style="<%= initial_menu_styles(side_displayed) %>" class="<%= initial_classes %>">
   <% if show_decoration %>
-    <header class="op-app-header<%= ' op-app-header_development' if OpenProject::Configuration.development_highlight_enabled? %>">
+    <header class="op-app-header<%= " op-app-header_development" if OpenProject::Configuration.development_highlight_enabled? %>">
       <div class="op-app-header--start">
         <h1 class="hidden-for-sighted">
           <%= t(:label_top_menu) %>
         </h1>
         <a href="" class="hidden-for-sighted skip-navigation-link"
            id="skip-navigation--content"
-           aria-label="<%= I18n.t('js.work_packages.jump_marks.label_content') %>">
-          <%= I18n.t('js.work_packages.jump_marks.content') %>
+           aria-label="<%= I18n.t("js.work_packages.jump_marks.label_content") %>">
+          <%= I18n.t("js.work_packages.jump_marks.content") %>
         </a>
         <%= render_top_menu_left %>
       </div>
@@ -92,32 +92,34 @@ See COPYRIGHT and LICENSE files for more details.
   <% end %>
   <div id="main"
        class="<%= initial_classes %>"
-       data-controller="menus--main-toggler"
-       data-application-target="dynamic">
+       data-controller="menus--main-toggle">
     <% if (side_displayed && show_decoration) %>
       <div
         id="main-menu"
         class="main-menu"
-        data-controller="menus--main"
-      >
+        data-controller="menus--main">
         <h1 class="hidden-for-sighted"><%= t(:label_main_menu) %></h1>
         <opce-main-menu-resizer></opce-main-menu-resizer>
         <div id="menu-sidebar">
           <%= render(Primer::OpenProject::FlexLayout.new(align_items: :center, mt: 3)) do |flex|
-            flex.with_column(overflow: :hidden, ml: 2) do
-              render_projects_top_menu_node
-            end
-            flex.with_column(text_align: :right, flex: :auto) do
-              render(OpenProject::Common::MainMenuTogglerComponent.new(opened: true))
-            end
-          end %>
+                flex.with_column(overflow: :hidden, ml: 2) do
+                  render_projects_top_menu_node
+                end
+                flex.with_column(text_align: :right, flex: :auto) do
+                  render(OpenProject::Common::MainMenuToggleComponent.new(expanded: true))
+                end
+              end %>
 
-          <%= render(Primer::BaseComponent.new(tag: :hr,
-                                               classes: "main-menu--projects-divider",
-                                               role: :presentation,
-                                               aria: {
-                                                 hidden: true
-                                               })) %>
+          <%= render(
+                Primer::BaseComponent.new(
+                  tag: :hr,
+                  classes: "main-menu--projects-divider",
+                  role: :presentation,
+                  aria: {
+                    hidden: true
+                  }
+                )
+              ) %>
           <%= main_menu %>
           <%= content_for :main_menu %>
           <%= call_hook :view_layouts_base_main_menu %>
@@ -136,11 +138,11 @@ See COPYRIGHT and LICENSE files for more details.
         <section data-augmented-model-wrapper
                  data-modal-initialize-now="true"
                  data-modal-class-name="onboarding-modal">
-          <%= render partial: '/onboarding/configuration_modal' %>
+          <%= render partial: "/onboarding/configuration_modal" %>
         </section>
       <% end %>
       <%= content_tag :div,
-                      id: 'content',
+                      id: "content",
                       class: "#{initial_classes} #{'content--split' if content_for?(:content_body_right)}" do %>
         <h1 class="hidden-for-sighted accessibility-helper"><%= t(:label_content) %></h1>
         <% if content_for?(:content_header) %>
@@ -150,7 +152,7 @@ See COPYRIGHT and LICENSE files for more details.
         <% end %>
 
         <div id="content-body">
-          <%= render(OpenProject::Common::MainMenuTogglerComponent.new(opened: false)) %>
+          <%= render(OpenProject::Common::MainMenuToggleComponent.new(expanded: false)) %>
           <%= content_for :content_body %>
           <% unless local_assigns[:no_layout_yield] %>
             <%= yield %>
diff --git a/frontend/src/app/shared/components/resizer/resizer/main-menu-resizer.component.ts b/frontend/src/app/shared/components/resizer/resizer/main-menu-resizer.component.ts
@@ -62,7 +62,7 @@ import {
 export class MainMenuResizerComponent extends UntilDestroyedMixin implements OnInit {
   public toggleTitle:string;
 
-  private resizeEvent:string;
+  private resizeEvent:string = 'main-menu-resize';
 
   private elementWidth:number;
 
@@ -81,8 +81,6 @@ export class MainMenuResizerComponent extends UntilDestroyedMixin implements OnI
   }
 
   ngOnInit() {
-    this.resizeEvent = 'main-menu-resize';
-
     this.isOpen = this.toggleService.showNavigation;
 
     // Listen on sidebar changes and toggle resizer classes, if necessary
diff --git a/frontend/src/stimulus/controllers/dynamic/menus/main-toggle.controller.ts b/frontend/src/stimulus/controllers/dynamic/menus/main-toggle.controller.ts
@@ -1,11 +1,17 @@
 import { Controller } from '@hotwired/stimulus';
 import { MainMenuToggleService } from 'core-app/core/main-menu/main-menu-toggle.service';
 
-export default class MainTogglerController extends Controller {
+export default class MainToggleController extends Controller {
   mainMenuService:MainMenuToggleService;
 
   initialize() {
-    void window.OpenProject.getPluginContext()
+    console.count("INIT");
+
+  }
+
+  async connect() {
+    console.count("CONNECT");
+    await window.OpenProject.getPluginContext()
       .then((pluginContext) => pluginContext.injector.get(MainMenuToggleService))
       .then((service) => {
         this.mainMenuService = service;
diff --git a/spec/components/open_project/common/main_menu_toggle_component_spec.rb b/spec/components/open_project/common/main_menu_toggle_component_spec.rb
@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) the OpenProject GmbH
+#
+# 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-2013 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 COPYRIGHT and LICENSE files for more details.
+#++
+
+require "rails_helper"
+
+RSpec.describe OpenProject::Common::MainMenuToggleComponent, type: :component do
+  let(:expanded) { true }
+
+  subject do
+    render_inline(described_class.new(expanded:)) do
+      content
+    end
+
+    page
+  end
+
+  context "in expended state" do
+    it "does render the expanded icon" do
+      expect(subject).to have_element class: "octicon-sidebar-expand"
+      expect(subject).to have_no_element class: "octicon-sidebar-collapse"
+      expect(subject).to have_element id: "menu-toggle--collapse-button"
+      expect(subject).to have_element "tool-tip",
+                                      text: "Collapse project menu",
+                                      for: "menu-toggle--collapse-button",
+                                      popover: "manual",
+                                      "data-type": "label"
+    end
+  end
+
+  context "in collapsed state" do
+    let(:expanded) { false }
+
+    it "does render the collapsed icon" do
+      expect(subject).to have_element class: "octicon-sidebar-collapse"
+      expect(subject).to have_no_element class: "octicon-sidebar-expand"
+      expect(subject).to have_element id: "menu-toggle--expand-button"
+      expect(subject).to have_element "tool-tip",
+                                      text: "Expand project menu",
+                                      for: "menu-toggle--expand-button",
+                                      popover: "manual",
+                                      "data-type": "label"
+    end
+  end
+end
diff --git a/spec/support/edit_fields/edit_field.rb b/spec/support/edit_fields/edit_field.rb
@@ -110,7 +110,7 @@ def activate!(expect_open: true)
     retry_block(args: { tries: 2 }) do
       unless active?
         SeleniumHubWaiter.wait unless using_cuprite?
-        scroll_to_and_click(display_trigger_element)
+        scroll_to_and_click(display_trigger_element, block: :nearest)
         SeleniumHubWaiter.wait unless using_cuprite?
       end
 
diff --git a/spec/support/shared/scroll_into_view_helpers.rb b/spec/support/shared/scroll_into_view_helpers.rb
@@ -34,7 +34,7 @@
 #   One of `:start`, `:center`, `:end`, or `:nearest`. Defaults to `:start`.
 # @param inline [Symbol] (optional) Defines horizontal alignment.
 #   One of `:start`, `:center`, `:end`, or `:nearest`. Defaults to `:nearest`..
-def scroll_to_element(element, block: :nearest, inline: :nearest)
+def scroll_to_element(element, block: :start, inline: :nearest)
   script = <<-JS
     arguments[0].scrollIntoView({block: "#{block}", inline: "#{inline}"});
   JS
@@ -45,9 +45,9 @@ def scroll_to_element(element, block: :nearest, inline: :nearest)
   end
 end
 
-def scroll_to_and_click(element)
+def scroll_to_and_click(element, block: :start, inline: :nearest)
   retry_block do
-    scroll_to_element(element)
+    scroll_to_element(element, block:, inline:)
     element.click
   end
 end
