DEV: Slight refactor and add specs for composer peek (#142)

Followup cf9fd864dd

javascripts/discourse/api-initializers/composer-peek-toggle-connector.js

@@ -1,6 +1,6 @@
 import { apiInitializer } from "discourse/lib/api";
-import peekModeToggle from "../components/composer-peek-mode-toggle";
+import ComposerPeekModeToggle from "../components/composer-peek-mode-toggle";
 
 export default apiInitializer("1.8.0", (api) => {
-  api.renderInOutlet("before-composer-toggles", peekModeToggle);
+  api.renderInOutlet("before-composer-toggles", ComposerPeekModeToggle);
 });

javascripts/discourse/components/composer-peek-mode-toggle.gjs

@@ -5,27 +5,28 @@ import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
 import bodyClass from "discourse/helpers/body-class";
 
-export default class PeekModeToggle extends Component {
+export default class ComposerPeekModeToggle extends Component {
   @service composer;
+  @service keyValueStore;
 
   @tracked
-  peekModeActive = localStorage.getItem("peekModeActive") === "true" || false;
+  peekModeActive = this.keyValueStore.getItem("peekModeActive") === "true";
 
-  get bodyClassText() {
+  get bodyCssClass() {
     return this.peekModeActive ? "peek-mode-active" : "";
   }
 
   @action
   togglePeekMode() {
     this.peekModeActive = !this.peekModeActive;
-    localStorage.setItem("peekModeActive", this.peekModeActive);
+    this.keyValueStore.setItem("peekModeActive", this.peekModeActive);
     if (this.composer.showPreview) {
       this.composer.togglePreview();
     }
   }
 
   <template>
-    {{bodyClass this.bodyClassText}}
+    {{bodyClass this.bodyCssClass}}
     <DButton
       @action={{this.togglePeekMode}}
       @preventFocus={{true}}

spec/system/anon_sidebar_topic_button_spec.rb

@@ -1,11 +0,0 @@
-# frozen_string_literal: true
-
-RSpec.describe "Sidebar New Topic Button", system: true do
-  before { upload_theme }
-
-  it "does not render the sidebar button for anons" do
-    visit("/latest")
-    expect(page).not_to have_css(".sidebar-new-topic-button__wrapper")
-    expect(page).not_to have_css(".sidebar-new-topic-button:not(.disabled)")
-  end
-end

spec/system/composer_peek_spec.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+describe "Composer peek", type: :system do
+  fab!(:current_user) { Fabricate(:user, refresh_auto_groups: true) }
+  fab!(:topic) { Fabricate(:topic_with_op) }
+
+  let(:topic_page) { PageObjects::Pages::Topic.new }
+  let(:composer) { PageObjects::Components::Composer.new }
+
+  before do
+    upload_theme
+    sign_in(current_user)
+  end
+
+  it "does not show composer peek for small windows" do
+    topic_page.visit_topic(topic)
+    topic_page.click_footer_reply
+    expect(composer).to be_opened
+
+    resize_window(width: 600) { expect(page).to have_no_css(".peek-mode-toggle") }
+  end
+
+  it "turns on composer peek and remembers this preference on page load" do
+    topic_page.visit_topic(topic)
+    topic_page.click_footer_reply
+    expect(composer).to be_opened
+
+    resize_window(width: 1380) do
+      find(".peek-mode-toggle").click
+      expect(page).to have_css("body.peek-mode-active")
+
+      topic_page.visit_topic(topic)
+      topic_page.click_footer_reply
+      expect(composer).to be_opened
+      expect(page).to have_css("body.peek-mode-active")
+
+      find(".peek-mode-toggle").click
+      expect(page).to have_no_css("body.peek-mode-active")
+    end
+  end
+
+  it "hides the composer preview when toggling" do
+    topic_page.visit_topic(topic)
+    topic_page.click_footer_reply
+    expect(composer).to be_opened
+    expect(composer).to have_composer_preview
+
+    resize_window(width: 1380) do
+      find(".peek-mode-toggle").click
+      expect(page).to have_css("body.peek-mode-active")
+      expect(composer).to have_no_composer_preview
+    end
+  end
+end

spec/system/core_feature_spec.rb

@@ -1,22 +0,0 @@
-# frozen_string_literal: true
-
-RSpec.describe "Core features", type: :system do
-  fab!(:current_user) { Fabricate(:user, refresh_auto_groups: true) }
-  let(:composer) { PageObjects::Components::Composer.new }
-
-  before { upload_theme }
-
-  it_behaves_like "having working core features",
-                  skip_examples: %i[topics:create search:quick_search]
-
-  it "creates a new topic" do
-    sign_in(current_user)
-    visit("/new-topic")
-    composer.fill_title("This is a new topic")
-    composer.fill_content("This is a long enough sentence.")
-    expect(page).to have_css(".d-editor-preview p", visible: true)
-    within(".save-or-cancel") { click_button("Create Topic") }
-    expect(page).to have_content("This is a new topic")
-    expect(page).to have_content("This is a long enough sentence.")
-  end
-end

spec/system/core_features_spec.rb

@@ -1,8 +1,22 @@
 # frozen_string_literal: true
 
 RSpec.describe "Core features", type: :system do
+  fab!(:current_user) { Fabricate(:user, refresh_auto_groups: true) }
+  let(:composer) { PageObjects::Components::Composer.new }
+
   before { upload_theme_or_component }
 
   it_behaves_like "having working core features",
                   skip_examples: %i[search:quick_search topics:create]
+
+  it "creates a new topic" do
+    sign_in(current_user)
+    visit("/new-topic")
+    composer.fill_title("This is a new topic")
+    composer.fill_content("This is a long enough sentence.")
+    expect(page).to have_css(".d-editor-preview p", visible: true)
+    within(".save-or-cancel") { click_button("Create Topic") }
+    expect(page).to have_content("This is a new topic")
+    expect(page).to have_content("This is a long enough sentence.")
+  end
 end

spec/system/sidebar_topic_button_spec.rb

@@ -12,34 +12,44 @@ RSpec.describe "Sidebar New Topic Button", system: true do
     c
   end
 
-  before { sign_in(user) }
+  context "for signed in users" do
+    before { sign_in(user) }
 
-  it "renders the new topic button in the sidebar" do
+    it "renders the new topic button in the sidebar" do
-    visit("/latest")
+      visit("/latest")
-    expect(page).to have_css(".sidebar-new-topic-button__wrapper")
+      expect(page).to have_css(".sidebar-new-topic-button__wrapper")
-    expect(page).to have_css(".sidebar-new-topic-button:not(.disabled)")
+      expect(page).to have_css(".sidebar-new-topic-button:not(.disabled)")
+    end
+
+    it "opens the composer when clicked" do
+      visit("/")
+      find(".sidebar-new-topic-button").click
+      expect(page).to have_css("#reply-title")
+    end
+
+    it "shows draft menu when drafts exist" do
+      Draft.create!(user: user, draft_key: "topic_1", data: {})
+
+      visit("/")
+      expect(page).to have_css(".sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger")
+    end
+
+    it "disables button when visiting read-only category" do
+      visit("/c/#{private_category.slug}/#{private_category.id}")
+
+      expect(page).to have_css(".sidebar-new-topic-button[disabled]")
+
+      visit("/c/#{category.slug}/#{category.id}")
+
+      expect(page).not_to have_css(".sidebar-new-topic-button[disabled]")
+    end
   end
 
-  it "opens the composer when clicked" do
+  context "for anon" do
-    visit("/")
+    it "does not render the sidebar button for anons" do
-    find(".sidebar-new-topic-button").click
+      visit("/latest")
-    expect(page).to have_css("#reply-title")
+      expect(page).not_to have_css(".sidebar-new-topic-button__wrapper")
-  end
+      expect(page).not_to have_css(".sidebar-new-topic-button:not(.disabled)")
-
+    end
-  it "shows draft menu when drafts exist" do
-    Draft.create!(user: user, draft_key: "topic_1", data: {})
-
-    visit("/")
-    expect(page).to have_css(".sidebar-new-topic-button__wrapper .topic-drafts-menu-trigger")
-  end
-
-  it "disables button when visiting read-only category" do
-    visit("/c/#{private_category.slug}/#{private_category.id}")
-
-    expect(page).to have_css(".sidebar-new-topic-button[disabled]")
-
-    visit("/c/#{category.slug}/#{category.id}")
-
-    expect(page).not_to have_css(".sidebar-new-topic-button[disabled]")
   end
 end