FEATURE: User selectable color schemes (#10544)

test/javascripts/acceptance/preferences-test.js

@@ -2,7 +2,6 @@ import I18n from "I18n";
 import { acceptance, updateCurrentUser } from "helpers/qunit-helpers";
 import selectKit from "helpers/select-kit-helper";
 import User from "discourse/models/user";
-import cookie, { removeCookie } from "discourse/lib/cookie";
 
 function preferencesPretender(server, helper) {
   server.post("/u/second_factors.json", () => {
@@ -122,51 +121,6 @@ QUnit.test("update some fields", async assert => {
   );
 });
 
-QUnit.test("font size change", async assert => {
-  removeCookie("text_size");
-
-  const savePreferences = async () => {
-    assert.ok(!exists(".saved"), "it hasn't been saved yet");
-    await click(".save-changes");
-    assert.ok(exists(".saved"), "it displays the saved message");
-    find(".saved").remove();
-  };
-
-  await visit("/u/eviltrout/preferences/interface");
-
-  // Live changes without reload
-  await selectKit(".text-size .combobox").expand();
-  await selectKit(".text-size .combobox").selectRowByValue("larger");
-  assert.ok(document.documentElement.classList.contains("text-size-larger"));
-
-  await selectKit(".text-size .combobox").expand();
-  await selectKit(".text-size .combobox").selectRowByValue("largest");
-  assert.ok(document.documentElement.classList.contains("text-size-largest"));
-
-  assert.equal(cookie("text_size"), null, "cookie is not set");
-
-  // Click save (by default this sets for all browsers, no cookie)
-  await savePreferences();
-
-  assert.equal(cookie("text_size"), null, "cookie is not set");
-
-  await selectKit(".text-size .combobox").expand();
-  await selectKit(".text-size .combobox").selectRowByValue("larger");
-  await click(".text-size input[type=checkbox]");
-
-  await savePreferences();
-
-  assert.equal(cookie("text_size"), "larger|1", "cookie is set");
-  await click(".text-size input[type=checkbox]");
-  await selectKit(".text-size .combobox").expand();
-  await selectKit(".text-size .combobox").selectRowByValue("largest");
-
-  await savePreferences();
-  assert.equal(cookie("text_size"), null, "cookie is removed");
-
-  removeCookie("text_size");
-});
-
 QUnit.test("username", async assert => {
   await visit("/u/eviltrout/preferences/username");
   assert.ok(exists("#change_username"), "it has the input element");
@@ -483,16 +437,3 @@ QUnit.test("can select an option from a dropdown", async assert => {
   await field.selectRowByValue("Cat");
   assert.equal(field.header().value(), "Cat", "it sets the value of the field");
 });
-
-acceptance("User Preferences disabling dark mode", {
-  loggedIn: true,
-  settings: { default_dark_mode_color_scheme_id: 1 }
-});
-
-QUnit.test("shows option to disable dark mode", async assert => {
-  await visit("/u/eviltrout/preferences/interface");
-  assert.ok(
-    $(".control-group.dark-mode").length,
-    "it has the option to disable dark mode"
-  );
-});

test/javascripts/acceptance/user-preferences-interface-test.js

@@ -0,0 +1,206 @@
+import { acceptance } from "helpers/qunit-helpers";
+import selectKit from "helpers/select-kit-helper";
+import Site from "discourse/models/site";
+import Session from "discourse/models/session";
+import cookie, { removeCookie } from "discourse/lib/cookie";
+
+acceptance("User Preferences - Interface", {
+  loggedIn: true
+});
+
+QUnit.test("font size change", async assert => {
+  removeCookie("text_size");
+
+  const savePreferences = async () => {
+    assert.ok(!exists(".saved"), "it hasn't been saved yet");
+    await click(".save-changes");
+    assert.ok(exists(".saved"), "it displays the saved message");
+    find(".saved").remove();
+  };
+
+  await visit("/u/eviltrout/preferences/interface");
+
+  // Live changes without reload
+  await selectKit(".text-size .combobox").expand();
+  await selectKit(".text-size .combobox").selectRowByValue("larger");
+  assert.ok(document.documentElement.classList.contains("text-size-larger"));
+
+  await selectKit(".text-size .combobox").expand();
+  await selectKit(".text-size .combobox").selectRowByValue("largest");
+  assert.ok(document.documentElement.classList.contains("text-size-largest"));
+
+  assert.equal(cookie("text_size"), null, "cookie is not set");
+
+  // Click save (by default this sets for all browsers, no cookie)
+  await savePreferences();
+
+  assert.equal(cookie("text_size"), null, "cookie is not set");
+
+  await selectKit(".text-size .combobox").expand();
+  await selectKit(".text-size .combobox").selectRowByValue("larger");
+  await click(".text-size input[type=checkbox]");
+
+  await savePreferences();
+
+  assert.equal(cookie("text_size"), "larger|1", "cookie is set");
+  await click(".text-size input[type=checkbox]");
+  await selectKit(".text-size .combobox").expand();
+  await selectKit(".text-size .combobox").selectRowByValue("largest");
+
+  await savePreferences();
+  assert.equal(cookie("text_size"), null, "cookie is removed");
+
+  removeCookie("text_size");
+});
+
+QUnit.test(
+  "does not show option to disable dark mode by default",
+  async assert => {
+    await visit("/u/eviltrout/preferences/interface");
+    assert.equal($(".control-group.dark-mode").length, 0);
+  }
+);
+
+QUnit.test("shows light/dark color scheme pickers", async assert => {
+  let site = Site.current();
+  site.set("user_color_schemes", [
+    { id: 2, name: "Cool Breeze" },
+    { id: 3, name: "Dark Night", is_dark: true }
+  ]);
+
+  await visit("/u/eviltrout/preferences/interface");
+  assert.ok($(".light-color-scheme").length, "has regular dropdown");
+  assert.ok($(".dark-color-scheme").length, "has dark color scheme dropdown");
+});
+
+function interfacePretender(server, helper) {
+  server.get("/color-scheme-stylesheet/2.json", () => {
+    return helper.response({
+      success: "OK"
+    });
+  });
+}
+
+acceptance("User Preferences Color Schemes (with default dark scheme)", {
+  loggedIn: true,
+  settings: { default_dark_mode_color_scheme_id: 1 },
+  pretend: interfacePretender
+});
+
+QUnit.test("show option to disable dark mode", async assert => {
+  await visit("/u/eviltrout/preferences/interface");
+
+  assert.ok(
+    $(".control-group.dark-mode").length,
+    "it has the option to disable dark mode"
+  );
+});
+
+QUnit.test("no color scheme picker by default", async assert => {
+  let site = Site.current();
+  site.set("user_color_schemes", []);
+
+  await visit("/u/eviltrout/preferences/interface");
+  assert.equal($(".control-group.color-scheme").length, 0);
+});
+
+QUnit.test("light color scheme picker", async assert => {
+  let site = Site.current();
+  site.set("user_color_schemes", [{ id: 2, name: "Cool Breeze" }]);
+
+  await visit("/u/eviltrout/preferences/interface");
+  assert.ok($(".light-color-scheme").length, "has regular picker dropdown");
+  assert.equal(
+    $(".dark-color-scheme").length,
+    0,
+    "does not have a dark color scheme picker"
+  );
+});
+
+QUnit.test("light and dark color scheme pickers", async assert => {
+  let site = Site.current();
+  let session = Session.current();
+  session.userDarkSchemeId = 1; // same as default set in site settings
+
+  site.set("default_dark_color_scheme", { id: 1, name: "Dark" });
+  site.set("user_color_schemes", [
+    { id: 2, name: "Cool Breeze" },
+    { id: 3, name: "Dark Night", is_dark: true }
+  ]);
+
+  const savePreferences = async () => {
+    assert.ok(!exists(".saved"), "it hasn't been saved yet");
+    await click(".save-changes");
+    assert.ok(exists(".saved"), "it displays the saved message");
+    find(".saved").remove();
+  };
+
+  await visit("/u/eviltrout/preferences/interface");
+  assert.ok($(".light-color-scheme").length, "has regular dropdown");
+  assert.ok($(".dark-color-scheme").length, "has dark color scheme dropdown");
+  assert.equal(
+    $(".dark-color-scheme .selected-name").data("value"),
+    session.userDarkSchemeId,
+    "sets site default as selected dark scheme"
+  );
+  assert.equal(
+    $(".control-group.dark-mode").length,
+    0,
+    "it does not show disable dark mode checkbox"
+  );
+
+  removeCookie("color_scheme_id");
+  removeCookie("dark_scheme_id");
+
+  await selectKit(".light-color-scheme .combobox").expand();
+  await selectKit(".light-color-scheme .combobox").selectRowByValue(2);
+  assert.equal(cookie("color_scheme_id"), null, "cookie is not set");
+  assert.ok(
+    exists(".color-scheme-checkbox input:checked"),
+    "defaults to storing values in user options"
+  );
+
+  await savePreferences();
+  assert.equal(cookie("color_scheme_id"), null, "cookie is unchanged");
+
+  // Switch to saving changes in cookies
+  await click(".color-scheme-checkbox input[type=checkbox]");
+  await savePreferences();
+  assert.equal(cookie("color_scheme_id"), 2, "cookie is set");
+
+  // dark scheme
+  await selectKit(".dark-color-scheme .combobox").expand();
+  assert.ok(
+    selectKit(".dark-color-scheme .combobox")
+      .rowByValue(1)
+      .exists(),
+    "default dark scheme is included"
+  );
+
+  await selectKit(".dark-color-scheme .combobox").selectRowByValue(-1);
+  assert.equal(
+    cookie("dark_scheme_id"),
+    null,
+    "cookie is not set before saving"
+  );
+
+  await savePreferences();
+  assert.equal(cookie("dark_scheme_id"), -1, "cookie is set");
+
+  await click("button.undo-preview");
+  assert.equal(
+    selectKit(".light-color-scheme .combobox")
+      .header()
+      .value(),
+    null,
+    "resets light scheme dropdown"
+  );
+
+  assert.equal(
+    selectKit(".dark-color-scheme .combobox")
+      .header()
+      .value(),
+    session.userDarkSchemeId,
+    "resets dark scheme dropdown"
+  );
+});