DEV: Add diffhtml composer preview specs (#22333)

(both fail with the updated diffhtml)

spec/system/composer/preview_spec.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+describe "Composer Preview", type: :system do
+  fab!(:user) { Fabricate(:user, username: "bob") }
+  let(:composer) { PageObjects::Components::Composer.new }
+
+  before { sign_in user }
+
+  it "correctly updates code blocks in diffhtml preview" do
+    SiteSetting.enable_diffhtml_preview = true
+
+    visit("/latest")
+    find("#create-topic").click
+
+    expect(composer).to have_composer_input
+    composer.fill_content <<~MD
+      ```rb
+      const = {
+        id: t.name,
+        text: t.name,
+        name: t.name,
+      ```
+    MD
+
+    within(composer.preview) { expect(find("code.language-ruby")).to have_content("const = {") }
+
+    composer.move_cursor_after("const")
+    composer.type_content("ant")
+
+    within(composer.preview) { expect(find("code.language-ruby")).to have_content("constant = {") }
+  end
+
+  it "correctly updates mentions in diffhtml preview" do
+    SiteSetting.enable_diffhtml_preview = true
+
+    visit("/latest")
+    find("#create-topic").click
+
+    expect(composer).to have_composer_input
+    composer.fill_content <<~MD
+      @bob text
+    MD
+
+    within(composer.preview) { expect(page.find("a.mention")).to have_text("@bob") }
+
+    composer.select_all
+    composer.type_content("@system")
+
+    within(composer.preview) { expect(page.find("a.mention")).to have_text("@system") }
+  end
+end

spec/system/page_objects/components/composer.rb

@@ -82,6 +82,10 @@ module PageObjects
         find(".category-row[data-name='#{category_name}']").click
       end
 
+      def preview
+        find("#{COMPOSER_ID} .d-editor-preview-wrapper")
+      end
+
       def has_emoji_autocomplete?
         has_css?(AUTOCOMPLETE_MENU)
       end
@@ -174,6 +178,24 @@ module PageObjects
         find(".form-template-field[data-field-type='#{field}']")
       end
 
+      def move_cursor_after(text)
+        execute_script(<<~JS, text)
+          const text = arguments[0];
+          const composer = document.querySelector("#{COMPOSER_ID} .d-editor-input");
+          const index = composer.value.indexOf(text);
+          const position = index + text.length;
+
+          composer.setSelectionRange(position, position);
+        JS
+      end
+
+      def select_all
+        execute_script(<<~JS, text)
+          const composer = document.querySelector("#{COMPOSER_ID} .d-editor-input");
+          composer.setSelectionRange(0, composer.value.length);
+        JS
+      end
+
       private
 
       def emoji_preview_selector(emoji)