Add system spec for syntax highlight preview

Author: rossta

app/controllers/concerns/syntax_highlighting.rb

@@ -6,16 +6,16 @@ module SyntaxHighlighting
   end
 
   def find_syntax_highlight
-    @syntax_highlight ||= preview_syntax_highlight || session_syntax_highlight || default_syntax_highlight
+    @syntax_highlight ||= preview_syntax_highlight || default_syntax_highlight
   end
 
-  def preview_syntax_highlight_id = params.fetch(:settings, {}).permit(:syntax_highlight)[:syntax_highlight]
+  def preview_syntax_highlight_name = params.fetch(:settings, {}).permit(:syntax_highlight_name)[:syntax_highlight_name]
 
-  def session_syntax_highlight_id = session[:syntax_highlight]
+  def session_syntax_highlight_name = session[:syntax_highlight]
 
-  def preview_syntax_highlight = @preview_syntax_highlight ||= preview_syntax_highlight_id && Settings::SyntaxHighlight.find(preview_syntax_highlight_id)
+  def preview_syntax_highlight = @preview_syntax_highlight ||= preview_syntax_highlight_name && Settings::SyntaxHighlight.find(preview_syntax_highlight_name)
 
-  def session_syntax_highlight = @session_syntax_highlight ||= session_syntax_highlight_id && Settings::SyntaxHighlight.find(session_syntax_highlight_id)
+  def session_syntax_highlight = @session_syntax_highlight ||= session_syntax_highlight_name && Settings::SyntaxHighlight.find(session_syntax_highlight_name)
 
   def default_syntax_highlight = @default_syntax_highlight ||= Settings::SyntaxHighlight.default
 end

app/controllers/settings/syntax_highlights_controller.rb

@@ -1,7 +1,7 @@
 class Settings::SyntaxHighlightsController < ApplicationController
   def show
     render Settings::SyntaxHighlights::ShowView.new(
-      current_highlight: find_syntax_highlight,
+      settings: Settings.new(syntax_highlight: find_syntax_highlight),
       available_highlights: Settings::SyntaxHighlight.curated
     )
   end

app/models/settings.rb

@@ -1,11 +1,14 @@
 class Settings
   include ActiveModel::Model
 
-  attr_accessor :color_scheme
+  attr_accessor :color_scheme, :syntax_highlight
 
-  def initialize(color_scheme:)
+  def initialize(color_scheme: nil, syntax_highlight: nil)
     @color_scheme = color_scheme
+    @syntax_highlight = syntax_highlight
   end
 
   def color_scheme_id = color_scheme.id
+
+  def syntax_highlight_name = syntax_highlight.name
 end

app/models/settings/syntax_highlight.rb

@@ -31,6 +31,10 @@ def initialize(name:, mode:, **)
     @mode = mode
   end
 
+  def display_name
+    name.titleize
+  end
+
   def ==(other)
     return false if other.nil? || !other.is_a?(self.class)
 

app/views/application/_footer.html.erb

@@ -18,7 +18,7 @@
           <%= link_to "Settings", settings_color_scheme_path %>
         </li>
         <li class="">
-          <%= link_to "Syntax Highlight", settings_syntax_highlight_path %>
+          <%= link_to "Syntax Highlighting", settings_syntax_highlight_path %>
         </li>
         <!--
         <li>

app/views/settings/syntax_highlights/form.rb

@@ -5,8 +5,9 @@ class Settings::SyntaxHighlights::Form < ApplicationView
   include Phlex::Rails::Helpers::ContentFor
   include Phlex::Rails::Helpers::StylesheetLinkTag
 
-  def initialize(current_highlight:, available_highlights:)
-    @current_highlight = current_highlight
+  def initialize(settings:, available_highlights:)
+    @settings = settings
+    @current_highlight = settings.syntax_highlight
     @available_highlights = available_highlights
   end
 
@@ -17,22 +18,23 @@ def view_template
       p do
         plain %(Current syntax highlight style:)
         whitespace
-        strong { @current_highlight.name }
+        strong { @current_highlight.display_name }
       end
       form_with(
-        model: @current_highlight,
+        model: @settings,
         url: settings_syntax_highlight_path,
         method: :get
       ) do |form|
         fieldset do
-          form.label :name, "Choose a syntax highlight style:"
-          form.select :name,
-            syntax_highlight_options_for_select,
-            {
-              selected: @current_highlight.name
-            },
-            name: "settings[syntax_highlight]",
-            onchange: "this.form.requestSubmit()"
+          flex_block do
+            form.label :syntax_highlight_name, "Choose a syntax highlight style to preview:"
+            form.select :syntax_highlight_name,
+              syntax_highlight_options_for_select,
+              {
+                selected: @current_highlight.name
+              },
+              onchange: "this.form.requestSubmit()"
+          end
         end
       end
 
@@ -76,6 +78,10 @@ def each(&)
 
   private
 
+  def flex_block(options = {}, &)
+    div(class: "flex items-start flex-col space-col-4 grid-cols-12 md:items-center md:flex-row md:space-row-4 #{options[:class]}", &)
+  end
+
   def syntax_highlight_options_for_select
     @available_highlights
       .group_by { |sh| sh.mode }

app/views/settings/syntax_highlights/show_view.rb

@@ -1,8 +1,8 @@
 class Settings::SyntaxHighlights::ShowView < ApplicationView
   include Phlex::Rails::Helpers::TurboFrameTag
 
-  def initialize(current_highlight:, available_highlights:)
-    @current_highlight = current_highlight
+  def initialize(settings:, available_highlights:)
+    @settings = settings
     @available_highlights = available_highlights
   end
 
@@ -12,7 +12,7 @@ def view_template
     section(class: %(secton-content container py-gap)) do
       turbo_frame_tag "syntax-highlight-form", data: {turbo_action: "advance"} do
         render Settings::SyntaxHighlights::Form.new(
-          current_highlight: @current_highlight,
+          settings: @settings,
           available_highlights: @available_highlights
         )
       end

spec/system/settings/syntax_highlights_spec.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+require "rails_helper"
+
+RSpec.describe "Customize Syntax Highlighting", type: :system do
+  it "user can selected a curated syntax highlight" do
+    visit root_path
+
+    click_link "Syntax Highlighting"
+
+    expect(page).to have_content("Choose a syntax highlight style to preview")
+    expect(page).to have_content("Current syntax highlight style: Dracula")
+
+    select "Fruity", from: "settings[syntax_highlight_name]"
+
+    expect(page).to have_content("Current syntax highlight style: Fruity")
+    expect(page).not_to have_content("Current syntax highlight style: Dracula")
+
+    expect(page).to have_css("link[data-syntax-highlight*=fruity]", visible: false)
+  end
+end