pulsar/spec/theme-manager-spec.js
2019-05-31 18:33:56 +02:00

652 lines
21 KiB
JavaScript

const path = require('path');
const fs = require('fs-plus');
const temp = require('temp').track();
describe('atom.themes', function() {
beforeEach(function() {
spyOn(atom, 'inSpecMode').andReturn(false);
spyOn(console, 'warn');
});
afterEach(function() {
waitsForPromise(() => atom.themes.deactivateThemes());
runs(function() {
try {
temp.cleanupSync();
} catch (error) {}
});
});
describe('theme getters and setters', function() {
beforeEach(function() {
jasmine.snapshotDeprecations();
atom.packages.loadPackages();
});
afterEach(() => jasmine.restoreDeprecationsSnapshot());
describe('getLoadedThemes', () =>
it('gets all the loaded themes', function() {
const themes = atom.themes.getLoadedThemes();
expect(themes.length).toBeGreaterThan(2);
}));
describe('getActiveThemes', () =>
it('gets all the active themes', function() {
waitsForPromise(() => atom.themes.activateThemes());
runs(function() {
const names = atom.config.get('core.themes');
expect(names.length).toBeGreaterThan(0);
const themes = atom.themes.getActiveThemes();
expect(themes).toHaveLength(names.length);
});
}));
});
describe('when the core.themes config value contains invalid entry', () =>
it('ignores theme', function() {
atom.config.set('core.themes', [
'atom-light-ui',
null,
undefined,
'',
false,
4,
{},
[],
'atom-dark-ui'
]);
expect(atom.themes.getEnabledThemeNames()).toEqual([
'atom-dark-ui',
'atom-light-ui'
]);
}));
describe('::getImportPaths()', function() {
it('returns the theme directories before the themes are loaded', function() {
atom.config.set('core.themes', [
'theme-with-index-less',
'atom-dark-ui',
'atom-light-ui'
]);
const paths = atom.themes.getImportPaths();
// syntax theme is not a dir at this time, so only two.
expect(paths.length).toBe(2);
expect(paths[0]).toContain('atom-light-ui');
expect(paths[1]).toContain('atom-dark-ui');
});
it('ignores themes that cannot be resolved to a directory', function() {
atom.config.set('core.themes', ['definitely-not-a-theme']);
expect(() => atom.themes.getImportPaths()).not.toThrow();
});
});
describe('when the core.themes config value changes', function() {
it('add/removes stylesheets to reflect the new config value', function() {
let didChangeActiveThemesHandler;
atom.themes.onDidChangeActiveThemes(
(didChangeActiveThemesHandler = jasmine.createSpy())
);
spyOn(atom.styles, 'getUserStyleSheetPath').andCallFake(() => null);
waitsForPromise(() => atom.themes.activateThemes());
runs(function() {
didChangeActiveThemesHandler.reset();
atom.config.set('core.themes', []);
});
waitsFor('a', () => didChangeActiveThemesHandler.callCount === 1);
runs(function() {
didChangeActiveThemesHandler.reset();
expect(document.querySelectorAll('style.theme')).toHaveLength(0);
atom.config.set('core.themes', ['atom-dark-ui']);
});
waitsFor('b', () => didChangeActiveThemesHandler.callCount === 1);
runs(function() {
didChangeActiveThemesHandler.reset();
expect(document.querySelectorAll('style[priority="1"]')).toHaveLength(
2
);
expect(
document
.querySelector('style[priority="1"]')
.getAttribute('source-path')
).toMatch(/atom-dark-ui/);
atom.config.set('core.themes', ['atom-light-ui', 'atom-dark-ui']);
});
waitsFor('c', () => didChangeActiveThemesHandler.callCount === 1);
runs(function() {
didChangeActiveThemesHandler.reset();
expect(document.querySelectorAll('style[priority="1"]')).toHaveLength(
2
);
expect(
document
.querySelectorAll('style[priority="1"]')[0]
.getAttribute('source-path')
).toMatch(/atom-dark-ui/);
expect(
document
.querySelectorAll('style[priority="1"]')[1]
.getAttribute('source-path')
).toMatch(/atom-light-ui/);
atom.config.set('core.themes', []);
});
waitsFor(() => didChangeActiveThemesHandler.callCount === 1);
runs(function() {
didChangeActiveThemesHandler.reset();
expect(document.querySelectorAll('style[priority="1"]')).toHaveLength(
2
);
// atom-dark-ui has a directory path, the syntax one doesn't
atom.config.set('core.themes', [
'theme-with-index-less',
'atom-dark-ui'
]);
});
waitsFor(() => didChangeActiveThemesHandler.callCount === 1);
runs(function() {
expect(document.querySelectorAll('style[priority="1"]')).toHaveLength(
2
);
const importPaths = atom.themes.getImportPaths();
expect(importPaths.length).toBe(1);
expect(importPaths[0]).toContain('atom-dark-ui');
});
});
it('adds theme-* classes to the workspace for each active theme', function() {
atom.config.set('core.themes', ['atom-dark-ui', 'atom-dark-syntax']);
let didChangeActiveThemesHandler;
atom.themes.onDidChangeActiveThemes(
(didChangeActiveThemesHandler = jasmine.createSpy())
);
waitsForPromise(() => atom.themes.activateThemes());
const workspaceElement = atom.workspace.getElement();
runs(function() {
expect(workspaceElement).toHaveClass('theme-atom-dark-ui');
atom.themes.onDidChangeActiveThemes(
(didChangeActiveThemesHandler = jasmine.createSpy())
);
atom.config.set('core.themes', [
'theme-with-ui-variables',
'theme-with-syntax-variables'
]);
});
waitsFor(() => didChangeActiveThemesHandler.callCount > 0);
runs(function() {
// `theme-` twice as it prefixes the name with `theme-`
expect(workspaceElement).toHaveClass('theme-theme-with-ui-variables');
expect(workspaceElement).toHaveClass(
'theme-theme-with-syntax-variables'
);
expect(workspaceElement).not.toHaveClass('theme-atom-dark-ui');
expect(workspaceElement).not.toHaveClass('theme-atom-dark-syntax');
});
});
});
describe('when a theme fails to load', () =>
it('logs a warning', function() {
console.warn.reset();
atom.packages
.activatePackage('a-theme-that-will-not-be-found')
.then(function() {}, function() {});
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)', function() {
beforeEach(() => jasmine.snapshotDeprecations());
afterEach(() => jasmine.restoreDeprecationsSnapshot());
it('synchronously loads css at the given path and installs a style tag for it in the head', function() {
let styleElementAddedHandler;
atom.styles.onDidAddStyleElement(
(styleElementAddedHandler = jasmine.createSpy(
'styleElementAddedHandler'
))
);
const cssPath = getAbsolutePath(
atom.project.getDirectories()[0],
'css.css'
);
const lengthBefore = document.querySelectorAll('head style').length;
atom.themes.requireStylesheet(cssPath);
expect(document.querySelectorAll('head style').length).toBe(
lengthBefore + 1
);
expect(styleElementAddedHandler).toHaveBeenCalled();
const element = document.querySelector(
'head style[source-path*="css.css"]'
);
expect(element.getAttribute('source-path')).toEqualPath(cssPath);
expect(element.textContent).toBe(fs.readFileSync(cssPath, 'utf8'));
// doesn't append twice
styleElementAddedHandler.reset();
atom.themes.requireStylesheet(cssPath);
expect(document.querySelectorAll('head style').length).toBe(
lengthBefore + 1
);
expect(styleElementAddedHandler).not.toHaveBeenCalled();
document
.querySelectorAll('head style[id*="css.css"]')
.forEach(styleElement => {
styleElement.remove();
});
});
it('synchronously loads and parses less files at the given path and installs a style tag for it in the head', function() {
const lessPath = getAbsolutePath(
atom.project.getDirectories()[0],
'sample.less'
);
const lengthBefore = document.querySelectorAll('head style').length;
atom.themes.requireStylesheet(lessPath);
expect(document.querySelectorAll('head style').length).toBe(
lengthBefore + 1
);
const element = document.querySelector(
'head style[source-path*="sample.less"]'
);
expect(element.getAttribute('source-path')).toEqualPath(lessPath);
expect(element.textContent.toLowerCase()).toBe(`\
#header {
color: #4d926f;
}
h2 {
color: #4d926f;
}
\
`);
// doesn't append twice
atom.themes.requireStylesheet(lessPath);
expect(document.querySelectorAll('head style').length).toBe(
lengthBefore + 1
);
document
.querySelectorAll('head style[id*="sample.less"]')
.forEach(styleElement => {
styleElement.remove();
});
});
it('supports requiring css and less stylesheets without an explicit extension', function() {
atom.themes.requireStylesheet(path.join(__dirname, 'fixtures', 'css'));
expect(
document
.querySelector('head style[source-path*="css.css"]')
.getAttribute('source-path')
).toEqualPath(
getAbsolutePath(atom.project.getDirectories()[0], 'css.css')
);
atom.themes.requireStylesheet(path.join(__dirname, 'fixtures', 'sample'));
expect(
document
.querySelector('head style[source-path*="sample.less"]')
.getAttribute('source-path')
).toEqualPath(
getAbsolutePath(atom.project.getDirectories()[0], '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', function() {
const cssPath = require.resolve('./fixtures/css.css');
expect(getComputedStyle(document.body).fontWeight).not.toBe('700');
const disposable = atom.themes.requireStylesheet(cssPath);
expect(getComputedStyle(document.body).fontWeight).toBe('700');
let styleElementRemovedHandler;
atom.styles.onDidRemoveStyleElement(
(styleElementRemovedHandler = jasmine.createSpy(
'styleElementRemovedHandler'
))
);
disposable.dispose();
expect(getComputedStyle(document.body).fontWeight).not.toBe('bold');
expect(styleElementRemovedHandler).toHaveBeenCalled();
});
});
describe('base style sheet loading', function() {
beforeEach(function() {
const workspaceElement = atom.workspace.getElement();
jasmine.attachToDOM(atom.workspace.getElement());
workspaceElement.appendChild(document.createElement('atom-text-editor'));
waitsForPromise(() => atom.themes.activateThemes());
});
it("loads the correct values from the theme's ui-variables file", function() {
let didChangeActiveThemesHandler;
atom.themes.onDidChangeActiveThemes(
(didChangeActiveThemesHandler = jasmine.createSpy())
);
atom.config.set('core.themes', [
'theme-with-ui-variables',
'theme-with-syntax-variables'
]);
waitsFor(() => didChangeActiveThemesHandler.callCount > 0);
runs(function() {
// an override loaded in the base css
expect(
getComputedStyle(atom.workspace.getElement())['background-color']
).toBe('rgb(0, 0, 255)');
// from within the theme itself
expect(
getComputedStyle(document.querySelector('atom-text-editor'))
.paddingTop
).toBe('150px');
expect(
getComputedStyle(document.querySelector('atom-text-editor'))
.paddingRight
).toBe('150px');
expect(
getComputedStyle(document.querySelector('atom-text-editor'))
.paddingBottom
).toBe('150px');
});
});
describe('when there is a theme with incomplete variables', () =>
it('loads the correct values from the fallback ui-variables', function() {
let didChangeActiveThemesHandler;
atom.themes.onDidChangeActiveThemes(
(didChangeActiveThemesHandler = jasmine.createSpy())
);
atom.config.set('core.themes', [
'theme-with-incomplete-ui-variables',
'theme-with-syntax-variables'
]);
waitsFor(() => didChangeActiveThemesHandler.callCount > 0);
runs(function() {
// an override loaded in the base css
expect(
getComputedStyle(atom.workspace.getElement())['background-color']
).toBe('rgb(0, 0, 255)');
// from within the theme itself
expect(
getComputedStyle(document.querySelector('atom-text-editor'))
.backgroundColor
).toBe('rgb(0, 152, 255)');
});
}));
});
describe('user stylesheet', function() {
let userStylesheetPath;
beforeEach(function() {
userStylesheetPath = path.join(temp.mkdirSync('atom'), 'styles.less');
fs.writeFileSync(
userStylesheetPath,
'body {border-style: dotted !important;}'
);
spyOn(atom.styles, 'getUserStyleSheetPath').andReturn(userStylesheetPath);
});
describe('when the user stylesheet changes', function() {
beforeEach(() => jasmine.snapshotDeprecations());
afterEach(() => jasmine.restoreDeprecationsSnapshot());
it('reloads it', function() {
let styleElementAddedHandler, styleElementRemovedHandler;
waitsForPromise(() => atom.themes.activateThemes());
runs(function() {
atom.styles.onDidRemoveStyleElement(
(styleElementRemovedHandler = jasmine.createSpy(
'styleElementRemovedHandler'
))
);
atom.styles.onDidAddStyleElement(
(styleElementAddedHandler = jasmine.createSpy(
'styleElementAddedHandler'
))
);
spyOn(atom.themes, 'loadUserStylesheet').andCallThrough();
expect(getComputedStyle(document.body).borderStyle).toBe('dotted');
fs.writeFileSync(userStylesheetPath, 'body {border-style: dashed}');
});
waitsFor(() => atom.themes.loadUserStylesheet.callCount === 1);
runs(function() {
expect(getComputedStyle(document.body).borderStyle).toBe('dashed');
expect(styleElementRemovedHandler).toHaveBeenCalled();
expect(
styleElementRemovedHandler.argsForCall[0][0].textContent
).toContain('dotted');
expect(styleElementAddedHandler).toHaveBeenCalled();
expect(
styleElementAddedHandler.argsForCall[0][0].textContent
).toContain('dashed');
styleElementRemovedHandler.reset();
fs.removeSync(userStylesheetPath);
});
waitsFor(() => atom.themes.loadUserStylesheet.callCount === 2);
runs(function() {
expect(styleElementRemovedHandler).toHaveBeenCalled();
expect(
styleElementRemovedHandler.argsForCall[0][0].textContent
).toContain('dashed');
expect(getComputedStyle(document.body).borderStyle).toBe('none');
});
});
});
describe('when there is an error reading the stylesheet', function() {
let addErrorHandler = null;
beforeEach(function() {
atom.themes.loadUserStylesheet();
spyOn(atom.themes.lessCache, 'cssForFile').andCallFake(function() {
throw new Error('EACCES permission denied "styles.less"');
});
atom.notifications.onDidAddNotification(
(addErrorHandler = jasmine.createSpy())
);
});
it('creates an error notification and does not add the stylesheet', function() {
atom.themes.loadUserStylesheet();
expect(addErrorHandler).toHaveBeenCalled();
const note = addErrorHandler.mostRecentCall.args[0];
expect(note.getType()).toBe('error');
expect(note.getMessage()).toContain('Error loading');
expect(
atom.styles.styleElementsBySourcePath[
atom.styles.getUserStyleSheetPath()
]
).toBeUndefined();
});
});
describe('when there is an error watching the user stylesheet', function() {
let addErrorHandler = null;
beforeEach(function() {
const { File } = require('pathwatcher');
spyOn(File.prototype, 'on').andCallFake(function(event) {
if (event.indexOf('contents-changed') > -1) {
throw new Error('Unable to watch path');
}
});
spyOn(atom.themes, 'loadStylesheet').andReturn('');
atom.notifications.onDidAddNotification(
(addErrorHandler = jasmine.createSpy())
);
});
it('creates an error notification', function() {
atom.themes.loadUserStylesheet();
expect(addErrorHandler).toHaveBeenCalled();
const note = addErrorHandler.mostRecentCall.args[0];
expect(note.getType()).toBe('error');
expect(note.getMessage()).toContain('Unable to watch path');
});
});
it("adds a notification when a theme's stylesheet is invalid", function() {
const addErrorHandler = jasmine.createSpy();
atom.notifications.onDidAddNotification(addErrorHandler);
expect(() =>
atom.packages
.activatePackage('theme-with-invalid-styles')
.then(function() {}, function() {})
).not.toThrow();
expect(addErrorHandler.callCount).toBe(2);
expect(addErrorHandler.argsForCall[1][0].message).toContain(
'Failed to activate the theme-with-invalid-styles theme'
);
});
});
describe('when a non-existent theme is present in the config', function() {
beforeEach(function() {
console.warn.reset();
atom.config.set('core.themes', [
'non-existent-dark-ui',
'non-existent-dark-syntax'
]);
waitsForPromise(() => atom.themes.activateThemes());
});
it('uses the default one-dark UI and syntax themes and logs a warning', function() {
const activeThemeNames = atom.themes.getActiveThemeNames();
expect(console.warn.callCount).toBe(2);
expect(activeThemeNames.length).toBe(2);
expect(activeThemeNames).toContain('one-dark-ui');
expect(activeThemeNames).toContain('one-dark-syntax');
});
});
describe('when in safe mode', function() {
describe('when the enabled UI and syntax themes are bundled with Atom', function() {
beforeEach(function() {
atom.config.set('core.themes', ['atom-light-ui', 'atom-dark-syntax']);
waitsForPromise(() => atom.themes.activateThemes());
});
it('uses the enabled themes', function() {
const activeThemeNames = atom.themes.getActiveThemeNames();
expect(activeThemeNames.length).toBe(2);
expect(activeThemeNames).toContain('atom-light-ui');
expect(activeThemeNames).toContain('atom-dark-syntax');
});
});
describe('when the enabled UI and syntax themes are not bundled with Atom', function() {
beforeEach(function() {
atom.config.set('core.themes', [
'installed-dark-ui',
'installed-dark-syntax'
]);
waitsForPromise(() => atom.themes.activateThemes());
});
it('uses the default dark UI and syntax themes', function() {
const activeThemeNames = atom.themes.getActiveThemeNames();
expect(activeThemeNames.length).toBe(2);
expect(activeThemeNames).toContain('one-dark-ui');
expect(activeThemeNames).toContain('one-dark-syntax');
});
});
describe('when the enabled UI theme is not bundled with Atom', function() {
beforeEach(function() {
atom.config.set('core.themes', [
'installed-dark-ui',
'atom-light-syntax'
]);
waitsForPromise(() => atom.themes.activateThemes());
});
it('uses the default one-dark UI theme', function() {
const activeThemeNames = atom.themes.getActiveThemeNames();
expect(activeThemeNames.length).toBe(2);
expect(activeThemeNames).toContain('one-dark-ui');
expect(activeThemeNames).toContain('atom-light-syntax');
});
});
describe('when the enabled syntax theme is not bundled with Atom', function() {
beforeEach(function() {
atom.config.set('core.themes', [
'atom-light-ui',
'installed-dark-syntax'
]);
waitsForPromise(() => atom.themes.activateThemes());
});
it('uses the default one-dark syntax theme', function() {
const activeThemeNames = atom.themes.getActiveThemeNames();
expect(activeThemeNames.length).toBe(2);
expect(activeThemeNames).toContain('atom-light-ui');
expect(activeThemeNames).toContain('one-dark-syntax');
});
});
});
});
function getAbsolutePath(directory, relativePath) {
if (directory) {
return directory.resolve(relativePath);
}
}