FIX: Color palette switching when Horizon is not default (#95)

When Horizon is not the default theme, and the color palette
switcher is used, we were ending up in a broken CSS state because
the color definitions were not loaded correctly when calling
`/color-scheme-stylesheet/` to get the new stylesheet URLs.

The problem was that we were not giving the theme ID to this URL,
we were only doing `/color-scheme-stylesheet/:palette_id`, not
`/color-scheme-stylesheet/:palette_id/:theme_id`, so the theme
color definitions like the ones that define the background color
were not loaded.

This commit fixes the issue and also changes to recreating the
`<link>` tags for the CSS in the head so we can check if they
are loaded correctly for easier testing in system specs.

spec/system/page_objects/components/user_color_palette_selector.rb

@@ -29,6 +29,10 @@ module PageObjects
         has_css?(".user-color-palette-selector[data-selected-color-palette-id='#{palette.id}']")
       end
 
+      def has_loaded_css?
+        has_css?(".user-color-palette-selector.user-color-palette-css-loaded")
+      end
+
       def has_tertiary_color?(palette)
         computed_color_hex =
           page.evaluate_script(

spec/system/user_color_palette_selector_spec.rb

@@ -3,8 +3,9 @@
 require_relative "./page_objects/components/user_color_palette_selector"
 
 describe "Horizon theme | User color palette selector", type: :system do
+  let(:set_theme_as_default) { true }
   let!(:theme) do
-    horizon_theme = upload_theme
+    horizon_theme = upload_theme(set_theme_as_default: set_theme_as_default)
     ColorScheme.where(theme_id: horizon_theme.id).update_all(user_selectable: true)
     horizon_theme
   end
@@ -33,10 +34,10 @@ describe "Horizon theme | User color palette selector", type: :system do
       visit "/"
       palette_selector.open_palette_menu
       palette_selector.click_palette_menu_item(marigold_palette.name)
-      expect(palette_selector).to have_no_palette_menu
-      page.refresh
 
+      expect(palette_selector).to have_no_palette_menu
       expect(palette_selector).to have_selected_palette(marigold_palette)
+      expect(palette_selector).to have_loaded_css
       expect(palette_selector).to have_tertiary_color(marigold_palette)
 
       page.refresh
@@ -47,10 +48,10 @@ describe "Horizon theme | User color palette selector", type: :system do
       visit "/"
       palette_selector.open_palette_menu
       palette_selector.click_palette_menu_item(marigold_palette.name)
-      expect(palette_selector).to have_no_palette_menu
-      page.refresh
 
+      expect(palette_selector).to have_no_palette_menu
       expect(palette_selector).to have_selected_palette(marigold_palette)
+      expect(palette_selector).to have_loaded_css
       expect(palette_selector).to have_computed_color("oklch(0.92 0.0708528 68.5036)")
 
       interface_color_selector.expand
@@ -62,6 +63,23 @@ describe "Horizon theme | User color palette selector", type: :system do
       expect(palette_selector).to have_selected_palette(marigold_palette)
       expect(palette_selector).to have_computed_color("oklch(0.481966 0.0354264 68.5036)")
     end
+
+    context "when the theme is not default but is selected by a user" do
+      let(:set_theme_as_default) { false }
+
+      it "can open the user color palette menu and select a palette, which is preseved on reload" do
+        theme.update!(user_selectable: true)
+        current_user.user_option.update!(theme_ids: [theme.id])
+        visit "/"
+        palette_selector.open_palette_menu
+        palette_selector.click_palette_menu_item(marigold_palette.name)
+
+        expect(palette_selector).to have_no_palette_menu
+        expect(palette_selector).to have_selected_palette(marigold_palette)
+        expect(palette_selector).to have_loaded_css
+        expect(palette_selector).to have_tertiary_color(marigold_palette)
+      end
+    end
   end
 
   describe "for anon" do
@@ -69,10 +87,10 @@ describe "Horizon theme | User color palette selector", type: :system do
       visit "/"
       palette_selector.open_palette_menu
       palette_selector.click_palette_menu_item(marigold_palette.name)
-      expect(palette_selector).to have_no_palette_menu
-      page.refresh
 
+      expect(palette_selector).to have_no_palette_menu
       expect(palette_selector).to have_selected_palette(marigold_palette)
+      expect(palette_selector).to have_loaded_css
       expect(palette_selector).to have_tertiary_color(marigold_palette)
     end
 
@@ -80,16 +98,17 @@ describe "Horizon theme | User color palette selector", type: :system do
       visit "/"
       palette_selector.open_palette_menu
       palette_selector.click_palette_menu_item(marigold_palette.name)
-      expect(palette_selector).to have_no_palette_menu
-      page.refresh
 
+      expect(palette_selector).to have_no_palette_menu
       expect(palette_selector).to have_selected_palette(marigold_palette)
+      expect(palette_selector).to have_loaded_css
       expect(palette_selector).to have_computed_color("oklch(0.92 0.0708528 68.5036)")
 
       interface_color_selector.expand
       interface_color_selector.dark_option.click
       expect(interface_color_mode).to have_dark_mode_forced
       expect(palette_selector).to have_selected_palette(marigold_palette)
+      expect(palette_selector).to have_loaded_css
       expect(palette_selector).to have_computed_color("oklch(0.481966 0.0354264 68.5036)")
 
       page.refresh