FEATURE: Dark mode alternative logos (#10441)

2020-08-17 15:43:20 -04:00
parent d5a4318ac1
commit 3745f2bb86
7 changed files with 266 additions and 28 deletions
@@ -1,10 +1,13 @@
 import { moduleForWidget, widgetTest } from "helpers/widget-test";
+import Session from "discourse/models/session";
 moduleForWidget("home-logo");

 const bigLogo = "/images/d-logo-sketch.png?test";
 const smallLogo = "/images/d-logo-sketch-small.png?test";
 const mobileLogo = "/images/d-logo-sketch.png?mobile";
+const darkLogo = "/images/d-logo-sketch.png?dark";
 const title = "Cool Forum";
+const prefersDark = "(prefers-color-scheme: dark)";

 widgetTest("basics", {
  template: '{{mount-widget widget="home-logo" args=args}}',
@@ -38,6 +41,7 @@ widgetTest("basics - minimized", {
    assert.ok(find("img.logo-small").length === 1);
    assert.equal(find("img.logo-small").attr("src"), smallLogo);
    assert.equal(find("img.logo-small").attr("alt"), title);
+    assert.equal(find("img.logo-small").attr("width"), 36);
  }
 });

@@ -79,7 +83,7 @@ widgetTest("mobile logo", {
  },

  test(assert) {
-    assert.ok(find("img#site-logo.logo-big").length === 1);
+    assert.ok(find("img#site-logo.logo-mobile").length === 1);
    assert.equal(find("#site-logo").attr("src"), mobileLogo);
  }
 });
@@ -96,3 +100,139 @@ widgetTest("mobile without logo", {
    assert.equal(find("#site-logo").attr("src"), bigLogo);
  }
 });
+
+widgetTest("logo with dark mode alternative", {
+  template: '{{mount-widget widget="home-logo" args=args}}',
+  beforeEach() {
+    this.siteSettings.site_logo_url = bigLogo;
+    this.siteSettings.site_logo_dark_url = darkLogo;
+    Session.currentProp("darkModeAvailable", true);
+  },
+  afterEach() {
+    Session.currentProp("darkModeAvailable", null);
+  },
+
+  test(assert) {
+    assert.ok(find("img#site-logo.logo-big").length === 1);
+    assert.equal(find("#site-logo").attr("src"), bigLogo);
+
+    assert.equal(
+      find("picture source").attr("media"),
+      prefersDark,
+      "includes dark mode media attribute"
+    );
+    assert.equal(
+      find("picture source").attr("srcset"),
+      darkLogo,
+      "includes dark mode alternative logo source"
+    );
+  }
+});
+
+widgetTest("mobile logo with dark mode alternative", {
+  template: '{{mount-widget widget="home-logo" args=args}}',
+  beforeEach() {
+    this.siteSettings.site_logo_url = bigLogo;
+    this.siteSettings.site_mobile_logo_url = mobileLogo;
+    this.siteSettings.site_mobile_logo_dark_url = darkLogo;
+    Session.currentProp("darkModeAvailable", true);
+
+    this.site.mobileView = true;
+  },
+  afterEach() {
+    Session.currentProp("darkModeAvailable", null);
+  },
+
+  test(assert) {
+    assert.equal(find("#site-logo").attr("src"), mobileLogo);
+
+    assert.equal(
+      find("picture source").attr("media"),
+      prefersDark,
+      "includes dark mode media attribute"
+    );
+    assert.equal(
+      find("picture source").attr("srcset"),
+      darkLogo,
+      "includes dark mode alternative logo source"
+    );
+  }
+});
+
+widgetTest("dark mode enabled but no dark logo set", {
+  template: '{{mount-widget widget="home-logo" args=args}}',
+  beforeEach() {
+    this.siteSettings.site_logo_url = bigLogo;
+    this.siteSettings.site_logo_dark_url = "";
+    Session.currentProp("darkModeAvailable", true);
+  },
+  afterEach() {
+    Session.currentProp("darkModeAvailable", null);
+  },
+
+  test(assert) {
+    assert.ok(find("img#site-logo.logo-big").length === 1);
+    assert.equal(find("#site-logo").attr("src"), bigLogo);
+    assert.ok(
+      find("picture").length === 0,
+      "does not include alternative logo"
+    );
+  }
+});
+
+widgetTest("dark logo set but no dark mode", {
+  template: '{{mount-widget widget="home-logo" args=args}}',
+  beforeEach() {
+    this.siteSettings.site_logo_url = bigLogo;
+    this.siteSettings.site_logo_dark_url = darkLogo;
+  },
+
+  test(assert) {
+    assert.ok(find("img#site-logo.logo-big").length === 1);
+    assert.equal(find("#site-logo").attr("src"), bigLogo);
+    assert.ok(
+      find("picture").length === 0,
+      "does not include alternative logo"
+    );
+  }
+});
+
+widgetTest("dark color scheme and dark logo set", {
+  template: '{{mount-widget widget="home-logo" args=args}}',
+  beforeEach() {
+    this.siteSettings.site_logo_url = bigLogo;
+    this.siteSettings.site_logo_dark_url = darkLogo;
+    Session.currentProp("darkColorScheme", true);
+  },
+  afterEach() {
+    Session.currentProp("darkColorScheme", null);
+  },
+  test(assert) {
+    assert.ok(find("img#site-logo.logo-big").length === 1);
+    assert.equal(find("#site-logo").attr("src"), darkLogo, "uses dark logo");
+    assert.ok(
+      find("picture").length === 0,
+      "does not add dark mode alternative"
+    );
+  }
+});
+
+widgetTest("dark color scheme and dark logo not set", {
+  template: '{{mount-widget widget="home-logo" args=args}}',
+  beforeEach() {
+    this.siteSettings.site_logo_url = bigLogo;
+    this.siteSettings.site_logo_dark_url = "";
+    Session.currentProp("darkColorScheme", true);
+  },
+  afterEach() {
+    Session.currentProp("darkColorScheme", null);
+  },
+  test(assert) {
+    assert.ok(find("img#site-logo.logo-big").length === 1);
+    assert.equal(
+      find("#site-logo").attr("src"),
+      bigLogo,
+      "uses regular logo on dark scheme if no dark logo"
+    );
+  }
+});