fix themes (#199)

Fixes #194

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'

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()
+        let { selectedTheme, instanceName } = this.get()
-        changeTheme(instanceName, newTheme)
+        changeTheme(instanceName, selectedTheme)
       },
       onSwitchToThisInstance (e) {
         e.preventDefault()

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'

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('')
+})

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')