DEV: Update for glimmer header and add system spec (#30)

javascripts/discourse/api-initializers/full-width.gjs

@@ -0,0 +1,30 @@
+import Component from "@glimmer/component";
+import HomeLogo from "discourse/components/header/home-logo";
+import { apiInitializer } from "discourse/lib/api";
+
+export default apiInitializer("0.8", (api) => {
+  document.body.classList.add("full-width-enabled");
+
+  // When the sidebar is visible, force the HomeLogo to be in an 'un-minimized' state.
+  // Importing and using the HomeLogo component here isn't ideal... it's not really public API.
+  // But, it is certainly better than monkey-patching inside the component.
+  api.renderInOutlet(
+    "home-logo",
+    class FullWidthHomeLogo extends Component {
+      get forceMinimizedFalse() {
+        return (
+          this.args.outletArgs.minimized &&
+          api.container.lookup("controller:application").get("showSidebar")
+        );
+      }
+
+      <template>
+        {{#if this.forceMinimizedFalse}}
+          <HomeLogo @minimized={{false}} />
+        {{else}}
+          {{yield}}
+        {{/if}}
+      </template>
+    }
+  );
+});

spec/system/full_width_spec.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+RSpec.describe "Full width component", system: true do
+  let!(:theme) { upload_theme_component }
+  fab!(:topic) { Fabricate(:post).topic }
+  fab!(:posts) { Fabricate.times(10, :post, topic: topic) }
+
+  before {}
+
+  it "should keep the large logo visible when scrolling down a topic with sidebar visible" do
+    visit topic.relative_url
+
+    expect(page).to have_selector("#site-logo.logo-big")
+    expect(page).not_to have_selector(".d-header h1.header-title")
+
+    page.execute_script <<~JS
+      document.querySelector("#post_10").scrollIntoView(true);
+    JS
+
+    expect(page).to have_selector(".d-header h1.header-title")
+    expect(page).to have_selector("#site-logo.logo-big")
+  end
+
+  it "should use default behavior when scrolling down a topic with no sidebar" do
+    visit topic.relative_url
+
+    find(".header-sidebar-toggle .btn").click
+
+    # in CI the visibility check is failing... even though the element was present and correct
+    # visible: false turns off that filter
+    expect(page).to have_selector("#site-logo.logo-big", visible: false)
+    expect(page).not_to have_selector(".d-header h1.header-title")
+
+    page.execute_script <<~JS
+      document.querySelector("#post_10").scrollIntoView(true);
+    JS
+
+    expect(page).to have_selector(".d-header h1.header-title")
+    expect(page).to have_selector("#site-logo.logo-small")
+  end
+end