path = require 'path' fs = require 'fs-plus' temp = require 'temp' ThemeManager = require '../../src/theme-manager' Package = require '../../src/package' describe "ThemeManager", -> themeManager = null resourcePath = NylasEnv.getLoadSettings().resourcePath configDirPath = NylasEnv.getConfigDirPath() beforeEach -> # spyOn(console, "log") spyOn(console, "warn") spyOn(console, "error") theme_dir = path.resolve(__dirname, '../../internal_packages') # Don't load ALL of our packages. Some packages may do very expensive # and asynchronous things on require, including hitting the database. packagePaths = [ path.resolve(__dirname, '../../internal_packages/ui-light') path.resolve(__dirname, '../../internal_packages/ui-dark') ] spyOn(NylasEnv.packages, "getAvailablePackagePaths").andReturn packagePaths NylasEnv.packages.packageDirPaths.unshift(theme_dir) themeManager = new ThemeManager({packageManager: NylasEnv.packages, resourcePath, configDirPath}) afterEach -> themeManager.deactivateThemes() describe "theme getters and setters", -> beforeEach -> NylasEnv.packages.loadPackages() it 'getLoadedThemes get all the loaded themes', -> themes = themeManager.getLoadedThemes() expect(themes.length).toEqual(2) it 'getActiveThemes get all the active themes', -> waitsForPromise -> themeManager.activateThemes() runs -> names = NylasEnv.config.get('core.themes') expect(names.length).toBeGreaterThan(0) themes = themeManager.getActiveThemes() expect(themes).toHaveLength(names.length) describe "when the core.themes config value contains invalid entry", -> it "ignores theme", -> NylasEnv.config.set 'core.themes', [ 'ui-light' null undefined '' false 4 {} [] 'ui-dark' ] expect(themeManager.getEnabledThemeNames()).toEqual ['ui-dark', 'ui-light'] describe "::getImportPaths()", -> it "returns the theme directories before the themes are loaded", -> NylasEnv.config.set('core.themes', ['theme-with-index-less', 'ui-dark', 'ui-light']) paths = themeManager.getImportPaths() # syntax theme is not a dir at this time, so only two. expect(paths.length).toBe 2 expect(paths[0]).toContain 'ui-light' expect(paths[1]).toContain 'ui-dark' it "ignores themes that cannot be resolved to a directory", -> NylasEnv.config.set('core.themes', ['definitely-not-a-theme']) expect(-> themeManager.getImportPaths()).not.toThrow() describe "when the core.themes config value changes", -> it "add/removes stylesheets to reflect the new config value", -> themeManager.onDidChangeActiveThemes didChangeActiveThemesHandler = jasmine.createSpy() waitsForPromise -> themeManager.activateThemes() runs -> didChangeActiveThemesHandler.reset() NylasEnv.config.set('core.themes', []) waitsFor -> didChangeActiveThemesHandler.callCount == 1 runs -> didChangeActiveThemesHandler.reset() expect(document.querySelectorAll('style.theme')).toHaveLength 0 NylasEnv.config.set('core.themes', ['ui-dark']) waitsFor -> didChangeActiveThemesHandler.callCount == 1 runs -> didChangeActiveThemesHandler.reset() sheets = Array.from(document.querySelectorAll('style[priority="1"]')) expect(sheets).toHaveLength 1 expect(sheets[0].getAttribute('source-path')).toMatch /ui-dark/ NylasEnv.config.set('core.themes', ['ui-light', 'ui-dark']) waitsFor -> didChangeActiveThemesHandler.callCount == 1 runs -> didChangeActiveThemesHandler.reset() sheets = Array.from(document.querySelectorAll('style[priority="1"]')) expect(sheets).toHaveLength 2 expect(sheets[0].getAttribute('source-path')).toMatch /ui-dark/ expect(sheets[1].getAttribute('source-path')).toMatch /ui-light/ NylasEnv.config.set('core.themes', []) waitsFor -> didChangeActiveThemesHandler.callCount == 1 runs -> didChangeActiveThemesHandler.reset() sheets = Array.from(document.querySelectorAll('style[priority="1"]')) expect(sheets).toHaveLength(1) # ui-dark has an directory path, the syntax one doesn't NylasEnv.config.set('core.themes', ['theme-with-index-less', 'ui-light']) waitsFor -> didChangeActiveThemesHandler.callCount == 1 runs -> sheets = Array.from(document.querySelectorAll('style[priority="1"]')) expect(sheets).toHaveLength 2 importPaths = themeManager.getImportPaths() expect(importPaths.length).toBe 1 expect(importPaths[0]).toContain 'ui-light' it 'adds theme-* classes to the workspace for each active theme', -> themeManager.onDidChangeActiveThemes didChangeActiveThemesHandler = jasmine.createSpy() waitsForPromise -> themeManager.activateThemes() runs -> expect(document.body.classList.contains('theme-ui-light')).toBe(true) themeManager.onDidChangeActiveThemes didChangeActiveThemesHandler = jasmine.createSpy() NylasEnv.config.set('core.themes', ['theme-with-ui-variables']) waitsFor -> didChangeActiveThemesHandler.callCount > 0 runs -> # `theme-` twice as it prefixes the name with `theme-` expect(document.body.classList.contains('theme-theme-with-ui-variables')).toBe(true) expect(document.body.classList.contains('theme-ui-dark')).toBe(false) describe "when a theme fails to load", -> it "logs a warning", -> NylasEnv.packages.activatePackage('a-theme-that-will-not-be-found') .then () -> expect("This should have thrown!!").toBe(true) .catch (err) -> expect(err.message).toMatch(/Failed to load/) expect(console.warn.callCount).toBe 1 expect(console.warn.argsForCall[0][0]).toContain "Could not resolve 'a-theme-that-will-not-be-found'" describe "::requireStylesheet(path)", -> afterEach -> themeManager.removeStylesheet(path.join(__dirname, '..', 'fixtures', 'css.css')) themeManager.removeStylesheet(path.join(__dirname, '..', 'fixtures', 'sample.less')) it "synchronously loads css at the given path and installs a style tag for it in the head", -> NylasEnv.styles.onDidAddStyleElement styleElementAddedHandler = jasmine.createSpy("styleElementAddedHandler") cssPath = path.join(__dirname, '..', 'fixtures', 'css.css') lengthBefore = document.querySelectorAll('head style').length themeManager.requireStylesheet(cssPath) expect(document.querySelectorAll('head style').length).toBe lengthBefore + 1 expect(styleElementAddedHandler).toHaveBeenCalled() element = document.querySelector('head style[source-path*="css.css"]') expect(element.getAttribute('source-path')).toBe themeManager.stringToId(cssPath) expect(element.textContent).toBe fs.readFileSync(cssPath, 'utf8') # doesn't append twice styleElementAddedHandler.reset() themeManager.requireStylesheet(cssPath) expect(document.querySelectorAll('head style').length).toBe lengthBefore + 1 expect(styleElementAddedHandler).not.toHaveBeenCalled() element.remove() it "synchronously loads and parses less files at the given path and installs a style tag for it in the head", -> lessPath = path.join(__dirname, '..', 'fixtures', 'sample.less') lengthBefore = document.querySelectorAll('head style').length themeManager.requireStylesheet(lessPath) lengthAfter = document.querySelectorAll('head style').length expect(lengthAfter).toBe lengthBefore + 1 element = document.querySelector('head style[source-path*="sample.less"]') expect(element.getAttribute('source-path')).toBe themeManager.stringToId(lessPath) expect(element.textContent).toBe """ #header { color: #4d926f; } h2 { color: #4d926f; } """ # doesn't append twice themeManager.requireStylesheet(lessPath) expect(document.querySelectorAll('head style').length).toBe lengthBefore + 1 element.remove() it "supports requiring css and less stylesheets without an explicit extension", -> themeManager.requireStylesheet path.join(__dirname, '..', 'fixtures', 'css') expect(document.querySelector('head style[source-path*="css.css"]').getAttribute('source-path')).toBe themeManager.stringToId(path.join(__dirname, '..', 'fixtures', 'css.css')) themeManager.requireStylesheet path.join(__dirname, '..', 'fixtures', 'sample') expect(document.querySelector('head style[source-path*="sample.less"]').getAttribute('source-path')).toBe themeManager.stringToId(path.join(__dirname, '..', 'fixtures', 'sample.less')) document.querySelector('head style[source-path*="css.css"]').remove() document.querySelector('head style[source-path*="sample.less"]').remove() it "returns a disposable allowing styles applied by the given path to be removed", -> cssPath = require.resolve('../fixtures/css.css') expect(window.getComputedStyle(document.body)['font-weight']).not.toBe("bold") disposable = themeManager.requireStylesheet(cssPath) expect(window.getComputedStyle(document.body)['font-weight']).toBe("bold") NylasEnv.styles.onDidRemoveStyleElement styleElementRemovedHandler = jasmine.createSpy("styleElementRemovedHandler") disposable.dispose() expect(window.getComputedStyle(document.body)['font-weight']).not.toBe("bold") expect(styleElementRemovedHandler).toHaveBeenCalled() describe "base style sheet loading", -> workspaceElement = null beforeEach -> workspaceElement = document.createElement('nylas-workspace') workspaceElement.appendChild document.createElement('nylas-theme-wrap') jasmine.attachToDOM(workspaceElement) waitsForPromise -> themeManager.activateThemes() runs -> themeManager.onDidChangeActiveThemes didChangeActiveThemesHandler = jasmine.createSpy() additionalDelay = null @waitsForThemeRefresh = -> waitsFor -> # We need to wait a bit of additional time for the browser to actually # apply the CSS to the elements we check. if didChangeActiveThemesHandler.callCount > 0 additionalDelay ?= Date.now() + 100 return Date.now() > additionalDelay return false it "loads the correct values from the theme's ui-variables file", -> NylasEnv.config.set('core.themes', ['theme-with-ui-variables']) @waitsForThemeRefresh() runs -> # an override loaded in the base css of theme-with-ui-variables expect(getComputedStyle(workspaceElement)["background-color"]).toBe "rgb(0, 0, 255)" # a value that is not overridden in the theme node = document.querySelector('nylas-theme-wrap') nodeStyle = window.getComputedStyle(node) expect(nodeStyle['padding-top']).toBe "150px" expect(nodeStyle['padding-right']).toBe "150px" expect(nodeStyle['padding-bottom']).toBe "150px" describe "when there is a theme with incomplete variables", -> it "loads the correct values from the fallback ui-variables", -> NylasEnv.config.set('core.themes', ['theme-with-incomplete-ui-variables']) @waitsForThemeRefresh() runs -> # an override loaded in the base css of theme-with-incomplete-ui-variables expect(getComputedStyle(workspaceElement)["background-color"]).toBe "rgb(0, 0, 255)" # a value that is not overridden in the theme node = document.querySelector('nylas-theme-wrap') nodeStyle = window.getComputedStyle(node) expect(nodeStyle['background-color']).toBe "rgb(152, 123, 0)" describe "when a non-existent theme is present in the config", -> beforeEach -> NylasEnv.config.set('core.themes', ['non-existent-dark-ui']) waitsForPromise -> themeManager.activateThemes() it 'uses the default theme and logs a warning', -> activeThemeNames = themeManager.getActiveThemeNames() expect(console.warn.callCount).toBe(1) expect(activeThemeNames.length).toBe(1) expect(activeThemeNames).toContain('ui-light') describe "when in safe mode", -> beforeEach -> themeManager = new ThemeManager({packageManager: NylasEnv.packages, resourcePath, configDirPath, safeMode: true}) describe 'when the enabled UI theme is bundled with N1', -> beforeEach -> NylasEnv.config.set('core.themes', ['ui-light']) waitsForPromise -> themeManager.activateThemes() it 'uses the enabled themes', -> activeThemeNames = themeManager.getActiveThemeNames() expect(activeThemeNames.length).toBe(1) expect(activeThemeNames).toContain('ui-light') describe 'when the enabled UI theme is not bundled with N1', -> beforeEach -> NylasEnv.config.set('core.themes', ['installed-dark-ui']) waitsForPromise -> themeManager.activateThemes() it 'uses the default UI theme', -> activeThemeNames = themeManager.getActiveThemeNames() expect(activeThemeNames.length).toBe(1) expect(activeThemeNames).toContain('ui-light') describe 'when the enabled UI theme is not bundled with N1', -> beforeEach -> NylasEnv.config.set('core.themes', ['installed-dark-ui']) waitsForPromise -> themeManager.activateThemes() it 'uses the default UI theme', -> activeThemeNames = themeManager.getActiveThemeNames() expect(activeThemeNames.length).toBe(1) expect(activeThemeNames).toContain('ui-light')