From e4d2934c67278c7a33d1a22178b4e5f6184e5c9a Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 21 Apr 2018 00:33:42 -0700
Subject: [PATCH] fix themes (#199)

Fixes #194
---
 inline-script.js                              |  2 +-
 .../settings/instances/[instanceName].html    |  6 +++---
 templates/2xx.html                            |  2 +-
 tests/spec/020-themes.js                      | 20 +++++++++++++++++++
 tests/utils.js                                |  1 +
 5 files changed, 26 insertions(+), 5 deletions(-)
 create mode 100644 tests/spec/020-themes.js

diff --git a/inline-script.js b/inline-script.js
index b35def29..dffe370b 100644
--- a/inline-script.js
+++ b/inline-script.js
@@ -17,7 +17,7 @@ window.__themeColors = {
 if (localStorage.store_currentInstance && localStorage.store_instanceThemes) {
   let safeParse = (str) => str === 'undefined' ? undefined : JSON.parse(str)
   let theme = safeParse(localStorage.store_instanceThemes)[safeParse(localStorage.store_currentInstance)]
-  if (theme !== 'default') {
+  if (theme && theme !== 'default') {
     document.body.classList.add(`theme-${theme}`)
     let link = document.createElement('link')
     link.rel = 'stylesheet'
diff --git a/routes/_pages/settings/instances/[instanceName].html b/routes/_pages/settings/instances/[instanceName].html
index 0a8d6c5e..0ec35ef3 100644
--- a/routes/_pages/settings/instances/[instanceName].html
+++ b/routes/_pages/settings/instances/[instanceName].html
@@ -120,13 +120,13 @@
     },
     computed: {
       instanceName: (params) => params.instanceName,
-      selectedTheme: ($instanceThemes, instanceName) => $instanceThemes[instanceName],
+      selectedTheme: ($instanceThemes, instanceName) => $instanceThemes[instanceName] || 'default',
       verifyCredentials: ($verifyCredentials, instanceName) => $verifyCredentials && $verifyCredentials[instanceName]
     },
     methods: {
       onThemeChange () {
-        let { newTheme, instanceName } = this.get()
-        changeTheme(instanceName, newTheme)
+        let { selectedTheme, instanceName } = this.get()
+        changeTheme(instanceName, selectedTheme)
       },
       onSwitchToThisInstance (e) {
         e.preventDefault()
diff --git a/templates/2xx.html b/templates/2xx.html
index 7a9aca2f..44c2db4b 100644
--- a/templates/2xx.html
+++ b/templates/2xx.html
@@ -60,7 +60,7 @@ window.__themeColors = {
 if (localStorage.store_currentInstance && localStorage.store_instanceThemes) {
   let safeParse = (str) => str === 'undefined' ? undefined : JSON.parse(str)
   let theme = safeParse(localStorage.store_instanceThemes)[safeParse(localStorage.store_currentInstance)]
-  if (theme !== 'default') {
+  if (theme && theme !== 'default') {
     document.body.classList.add(`theme-${theme}`)
     let link = document.createElement('link')
     link.rel = 'stylesheet'
diff --git a/tests/spec/020-themes.js b/tests/spec/020-themes.js
new file mode 100644
index 00000000..d9f579f9
--- /dev/null
+++ b/tests/spec/020-themes.js
@@ -0,0 +1,20 @@
+import {
+  settingsNavButton
+} from '../utils'
+import { foobarRole } from '../roles'
+import { Selector as $ } from 'testcafe'
+
+fixture`020-themes.js`
+  .page`http://localhost:4002`
+
+test('can set a theme', async t => {
+  await t.useRole(foobarRole)
+    .click(settingsNavButton)
+    .click($('a[href="/settings/instances"]'))
+    .click($('a[href="/settings/instances/localhost:3000"]'))
+    .expect($('body').getAttribute('class')).eql(undefined)
+    .click($('input[value="scarlet"]'))
+    .expect($('body').getAttribute('class')).eql('theme-scarlet')
+    .click($('input[value="default"]'))
+    .expect($('body').getAttribute('class')).eql('')
+})
diff --git a/tests/utils.js b/tests/utils.js
index e1c38399..13a75c56 100644
--- a/tests/utils.js
+++ b/tests/utils.js
@@ -14,6 +14,7 @@ export const homeNavButton = $('nav a[href="/"]')
 export const localTimelineNavButton = $('nav a[href="/local"]')
 export const searchNavButton = $('nav a[href="/search"]')
 export const communityNavButton = $('nav a[href="/community"]')
+export const settingsNavButton = $('nav a[href="/settings"]')
 export const formError = $('.form-error-user-error')
 export const composeInput = $('.compose-box-input')
 export const composeContentWarning = $('.content-warning-input')