Machine decaf settings-view specs

packages/settings-view/spec/atom-io-client-spec.js

@@ -0,0 +1,63 @@
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
+ */
+const AtomIoClient = require('../lib/atom-io-client');
+
+describe("AtomIoClient", function() {
+
+  beforeEach(function() {
+    return this.client = new AtomIoClient;
+  });
+
+  it("fetches avatar from cache if the network is unavailable", function() {
+    spyOn(this.client, 'online').andReturn(false);
+    spyOn(this.client, 'fetchAndCacheAvatar');
+    expect(this.client.fetchAndCacheAvatar).not.toHaveBeenCalled();
+    return this.client.avatar('test-user', function() {});
+  });
+
+  describe("request", function() {
+    it("fetches api json from cache if the network is unavailable", function() {
+      spyOn(this.client, 'online').andReturn(false);
+      spyOn(this.client, 'fetchFromCache').andReturn({});
+      spyOn(this.client, 'request');
+      this.client.package('test-package', function() {});
+
+      expect(this.client.fetchFromCache).toHaveBeenCalled();
+      return expect(this.client.request).not.toHaveBeenCalled();
+    });
+
+    return it("returns an error if the API response is not JSON", function() {
+      const jsonParse = JSON.parse;
+
+      waitsFor(function(done) {
+        spyOn(this.client, 'parseJSON').andThrow();
+        return this.client.request('path', function(error, data) {
+          expect(error).not.toBeNull();
+          return done();
+        });
+      });
+
+      return runs(() => // Tests will throw without this as cleanup requires JSON.parse to work
+      JSON.parse = jsonParse);
+    });
+  });
+
+  it("handles glob errors", function() {
+    spyOn(this.client, 'avatarGlob').andReturn(`${__dirname}/**`);
+    spyOn(require('fs'), 'readdir').andCallFake((dirPath, callback) => process.nextTick(() => callback(new Error('readdir error'))));
+
+    const callback = jasmine.createSpy('cacheAvatar callback');
+    this.client.cachedAvatar('fakeperson', callback);
+
+    waitsFor(() => callback.callCount === 1);
+
+    return runs(() => expect(callback.argsForCall[0][0].message).toBe('readdir error'));
+  });
+
+  return xit("purges old items from cache correctly");
+});
+    // "correctly" in this case means "remove all old items but one" so that we
+    // always have stale data to return if the network is gone.

packages/settings-view/spec/editor-panel-spec.js

@@ -0,0 +1,127 @@
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
+ */
+const EditorPanel = require('../lib/editor-panel');
+
+describe("EditorPanel", function() {
+  let panel = null;
+
+  const getValueForId = function(id) {
+    const element = panel.element.querySelector(`#${id.replace(/\./g, '\\.')}`);
+    if (element?.tagName === "INPUT") {
+      return element.checked;
+    } else if (element?.tagName === "SELECT") {
+      return element.value;
+    } else if (element != null) {
+      return element.getModel().getText();
+    } else {
+      return;
+    }
+  };
+
+  const setValueForId = function(id, value) {
+    const element = panel.element.querySelector(`#${id.replace(/\./g, '\\.')}`);
+    if (element.tagName === "INPUT") {
+      element.checked = value;
+      return element.dispatchEvent(new Event('change', {bubbles: true}));
+    } else if (element.tagName === "SELECT") {
+      element.value = value;
+      return element.dispatchEvent(new Event('change', {bubbles: true}));
+    } else {
+      element.getModel().setText(value?.toString());
+      return window.advanceClock(10000); // wait for contents-modified to be triggered
+    }
+  };
+
+  beforeEach(function() {
+    atom.config.set('editor.boolean', true);
+    atom.config.set('editor.string', 'hey');
+    atom.config.set('editor.object', {boolean: true, int: 3, string: 'test'});
+    atom.config.set('editor.simpleArray', ['a', 'b', 'c']);
+    atom.config.set('editor.complexArray', ['a', 'b', {c: true}]);
+
+    atom.config.setSchema('', {type: 'object'});
+
+    return panel = new EditorPanel();
+  });
+
+  it("automatically binds named fields to their corresponding config keys", function() {
+    expect(getValueForId('editor.boolean')).toBeTruthy();
+    expect(getValueForId('editor.string')).toBe('hey');
+    expect(getValueForId('editor.object.boolean')).toBeTruthy();
+    expect(getValueForId('editor.object.int')).toBe('3');
+    expect(getValueForId('editor.object.string')).toBe('test');
+
+    atom.config.set('editor.boolean', false);
+    atom.config.set('editor.string', 'hey again');
+    atom.config.set('editor.object.boolean', false);
+    atom.config.set('editor.object.int', 6);
+    atom.config.set('editor.object.string', 'hi');
+
+    expect(getValueForId('editor.boolean')).toBeFalsy();
+    expect(getValueForId('editor.string')).toBe('hey again');
+    expect(getValueForId('editor.object.boolean')).toBeFalsy();
+    expect(getValueForId('editor.object.int')).toBe('6');
+    expect(getValueForId('editor.object.string')).toBe('hi');
+
+    setValueForId('editor.string', "oh hi");
+    setValueForId('editor.boolean', true);
+    setValueForId('editor.object.boolean', true);
+    setValueForId('editor.object.int', 9);
+    setValueForId('editor.object.string', 'yo');
+
+    expect(atom.config.get('editor.boolean')).toBe(true);
+    expect(atom.config.get('editor.string')).toBe('oh hi');
+    expect(atom.config.get('editor.object.boolean')).toBe(true);
+    expect(atom.config.get('editor.object.int')).toBe(9);
+    expect(atom.config.get('editor.object.string')).toBe('yo');
+
+    setValueForId('editor.string', '');
+    setValueForId('editor.object.int', '');
+    setValueForId('editor.object.string', '');
+
+    expect(atom.config.get('editor.string')).toBeUndefined();
+    expect(atom.config.get('editor.object.int')).toBeUndefined();
+    return expect(atom.config.get('editor.object.string')).toBeUndefined();
+  });
+
+  it("does not save the config value until it has been changed to a new value", function() {
+    const observeHandler = jasmine.createSpy("observeHandler");
+    atom.config.observe("editor.simpleArray", observeHandler);
+    observeHandler.reset();
+
+    window.advanceClock(10000); // wait for contents-modified to be triggered
+    expect(observeHandler).not.toHaveBeenCalled();
+
+    setValueForId('editor.simpleArray', 2);
+    expect(observeHandler).toHaveBeenCalled();
+    observeHandler.reset();
+
+    setValueForId('editor.simpleArray', 2);
+    return expect(observeHandler).not.toHaveBeenCalled();
+  });
+
+  it("does not update the editor text unless the value it parses to changes", function() {
+    setValueForId('editor.simpleArray', "a, b,");
+    expect(atom.config.get('editor.simpleArray')).toEqual(['a', 'b']);
+    return expect(getValueForId('editor.simpleArray')).toBe('a, b,');
+  });
+
+  it("only adds editors for arrays when all the values in the array are strings", function() {
+    expect(getValueForId('editor.simpleArray')).toBe('a, b, c');
+    expect(getValueForId('editor.complexArray')).toBeUndefined();
+
+    setValueForId('editor.simpleArray', 'a, d');
+
+    expect(atom.config.get('editor.simpleArray')).toEqual(['a', 'd']);
+    return expect(atom.config.get('editor.complexArray')).toEqual(['a', 'b', {c: true}]);
+});
+
+  return it("shows the package settings notes for core and editor settings", function() {
+    expect(panel.element.querySelector('#editor-settings-note')).toExist();
+    return expect(panel.element.querySelector('#editor-settings-note').textContent).toContain('Check language settings');
+  });
+});

packages/settings-view/spec/general-panel-spec.js

@@ -0,0 +1,106 @@
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
+ */
+const GeneralPanel = require('../lib/general-panel');
+
+describe("GeneralPanel", function() {
+  let panel = null;
+
+  const getValueForId = function(id) {
+    const element = panel.element.querySelector(`#${id.replace(/\./g, '\\.')}`);
+    if (element.tagName === "INPUT") {
+      return element.checked;
+    } else if (element.tagName === "SELECT") {
+      return element.value;
+    } else {
+      return element.getModel().getText();
+    }
+  };
+
+  const setValueForId = function(id, value) {
+    const element = panel.element.querySelector(`#${id.replace(/\./g, '\\.')}`);
+    if (element.tagName === "INPUT") {
+      element.checked = value;
+      return element.dispatchEvent(new Event('change', {bubbles: true}));
+    } else if (element.tagName === "SELECT") {
+      element.value = value;
+      return element.dispatchEvent(new Event('change', {bubbles: true}));
+    } else {
+      element.getModel().setText(value?.toString());
+      return window.advanceClock(10000); // wait for contents-modified to be triggered
+    }
+  };
+
+  beforeEach(function() {
+    atom.config.set('core.enum', 4);
+    atom.config.set('core.int', 22);
+    atom.config.set('core.float', 0.1);
+
+    atom.config.setSchema('', {type: 'object'});
+    atom.config.setSchema('core.enum', {
+      type: 'integer',
+      default: 2,
+      enum: [2, 4, 6, 8]
+    }
+    );
+
+    return panel = new GeneralPanel();
+  });
+
+  it("automatically binds named fields to their corresponding config keys", function() {
+    expect(getValueForId('core.enum')).toBe('4');
+    expect(getValueForId('core.int')).toBe('22');
+    expect(getValueForId('core.float')).toBe('0.1');
+
+    atom.config.set('core.enum', 6);
+    atom.config.set('core.int', 222);
+    atom.config.set('core.float', 0.11);
+
+    expect(getValueForId('core.enum')).toBe('6');
+    expect(getValueForId('core.int')).toBe('222');
+    expect(getValueForId('core.float')).toBe('0.11');
+
+    setValueForId('core.enum', '2');
+    setValueForId('core.int', 90);
+    setValueForId('core.float', 89.2);
+
+    expect(atom.config.get('core.enum')).toBe(2);
+    expect(atom.config.get('core.int')).toBe(90);
+    expect(atom.config.get('core.float')).toBe(89.2);
+
+    setValueForId('core.int', '');
+    setValueForId('core.float', '');
+
+    expect(atom.config.get('core.int')).toBeUndefined();
+    return expect(atom.config.get('core.float')).toBeUndefined();
+  });
+
+  it("does not save the config value until it has been changed to a new value", function() {
+    const observeHandler = jasmine.createSpy("observeHandler");
+    atom.config.observe("core.int", observeHandler);
+    observeHandler.reset();
+
+    window.advanceClock(10000); // wait for contents-modified to be triggered
+    expect(observeHandler).not.toHaveBeenCalled();
+
+    setValueForId('core.int', 2);
+    expect(observeHandler).toHaveBeenCalled();
+    observeHandler.reset();
+
+    setValueForId('core.int', 2);
+    return expect(observeHandler).not.toHaveBeenCalled();
+  });
+
+  it("does not update the editor text unless the value it parses to changes", function() {
+    setValueForId('core.int', "2.");
+    expect(atom.config.get('core.int')).toBe(2);
+    return expect(getValueForId('core.int')).toBe('2.');
+  });
+
+  return it("shows the package settings notes for core and editor settings", function() {
+    expect(panel.element.querySelector('#core-settings-note')).toExist();
+    return expect(panel.element.querySelector('#core-settings-note').textContent).toContain('their package card in');
+  });
+});

packages/settings-view/spec/install-panel-spec.js

@@ -0,0 +1,140 @@
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
+ */
+const InstallPanel = require('../lib/install-panel');
+const PackageManager = require('../lib/package-manager');
+const SettingsView = require('../lib/settings-view');
+
+describe('InstallPanel', function() {
+  beforeEach(function() {
+    const settingsView = new SettingsView();
+    this.packageManager = new PackageManager();
+    return this.panel = new InstallPanel(settingsView, this.packageManager);
+  });
+
+  describe("when the packages button is clicked", function() {
+    beforeEach(function() {
+      spyOn(this.panel, 'search');
+      return this.panel.refs.searchEditor.setText('something');
+    });
+
+    return it("performs a search for the contents of the input", function() {
+      this.panel.refs.searchPackagesButton.click();
+      expect(this.panel.searchType).toBe('packages');
+      expect(this.panel.search).toHaveBeenCalledWith('something');
+      expect(this.panel.search.callCount).toBe(1);
+
+      this.panel.refs.searchPackagesButton.click();
+      expect(this.panel.searchType).toBe('packages');
+      expect(this.panel.search).toHaveBeenCalledWith('something');
+      return expect(this.panel.search.callCount).toBe(2);
+    });
+  });
+
+  describe("when the themes button is clicked", function() {
+    beforeEach(function() {
+      spyOn(this.panel, 'search');
+      return this.panel.refs.searchEditor.setText('something');
+    });
+
+    return it("performs a search for the contents of the input", function() {
+      this.panel.refs.searchThemesButton.click();
+      expect(this.panel.searchType).toBe('themes');
+      expect(this.panel.search.callCount).toBe(1);
+      expect(this.panel.search).toHaveBeenCalledWith('something');
+
+      this.panel.refs.searchThemesButton.click();
+      expect(this.panel.searchType).toBe('themes');
+      return expect(this.panel.search.callCount).toBe(2);
+    });
+  });
+
+  describe("when the buttons are toggled", function() {
+    beforeEach(function() {
+      spyOn(this.panel, 'search');
+      return this.panel.refs.searchEditor.setText('something');
+    });
+
+    return it("performs a search for the contents of the input", function() {
+      this.panel.refs.searchThemesButton.click();
+      expect(this.panel.searchType).toBe('themes');
+      expect(this.panel.search.callCount).toBe(1);
+      expect(this.panel.search).toHaveBeenCalledWith('something');
+
+      this.panel.refs.searchPackagesButton.click();
+      expect(this.panel.searchType).toBe('packages');
+      expect(this.panel.search.callCount).toBe(2);
+
+      this.panel.refs.searchThemesButton.click();
+      expect(this.panel.searchType).toBe('themes');
+      return expect(this.panel.search.callCount).toBe(3);
+    });
+  });
+
+  describe("searching packages", () => it("displays the packages in the order returned", function() {
+    spyOn(this.panel.client, 'search').andCallFake(() => Promise.resolve([{name: 'not-first'}, {name: 'first'}]));
+    spyOn(this.panel, 'getPackageCardView').andCallThrough();
+
+    waitsForPromise(() => {
+      return this.panel.search('first');
+    });
+
+    return runs(function() {
+      expect(this.panel.getPackageCardView.argsForCall[0][0].name).toEqual('not-first');
+      return expect(this.panel.getPackageCardView.argsForCall[1][0].name).toEqual('first');
+    });
+  }));
+
+  return describe("searching git packages", function() {
+    beforeEach(function() {
+      return spyOn(this.panel, 'showGitInstallPackageCard').andCallThrough();
+    });
+
+    it("shows a git installation card with git specific info for ssh URLs", function() {
+      const query = 'git@github.com:user/repo.git';
+      this.panel.performSearchForQuery(query);
+      const args = this.panel.showGitInstallPackageCard.argsForCall[0][0];
+      expect(args.name).toEqual(query);
+      return expect(args.gitUrlInfo).toBeTruthy();
+    });
+
+    it("shows a git installation card with git specific info for https URLs", function() {
+      const query = 'https://github.com/user/repo.git';
+      this.panel.performSearchForQuery(query);
+      const args = this.panel.showGitInstallPackageCard.argsForCall[0][0];
+      expect(args.name).toEqual(query);
+      return expect(args.gitUrlInfo).toBeTruthy();
+    });
+
+    it("shows a git installation card with git specific info for shortcut URLs", function() {
+      const query = 'user/repo';
+      this.panel.performSearchForQuery(query);
+      const args = this.panel.showGitInstallPackageCard.argsForCall[0][0];
+      expect(args.name).toEqual(query);
+      return expect(args.gitUrlInfo).toBeTruthy();
+    });
+
+    it("doesn't show a git installation card for normal packages", function() {
+      const query = 'this-package-is-so-normal';
+      this.panel.performSearchForQuery(query);
+      return expect(this.panel.showGitInstallPackageCard).not.toHaveBeenCalled();
+    });
+
+    return describe("when a package with the same gitUrlInfo property is installed", function() {
+      beforeEach(function() {
+        this.gitUrlInfo = jasmine.createSpy('gitUrlInfo');
+        return this.panel.showGitInstallPackageCard({gitUrlInfo: this.gitUrlInfo});
+      });
+
+      return it("replaces the package card with the newly installed pack object", function() {
+        const newPack =
+          {gitUrlInfo: this.gitUrlInfo};
+        spyOn(this.panel, 'updateGitPackageCard');
+        this.packageManager.emitter.emit('package-installed', {pack: newPack});
+        return expect(this.panel.updateGitPackageCard).toHaveBeenCalledWith(newPack);
+      });
+    });
+  });
+});

packages/settings-view/spec/installed-packages-panel-spec.js

@@ -0,0 +1,233 @@
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
+ */
+const path = require('path');
+
+const fs = require('fs-plus');
+const InstalledPackagesPanel = require('../lib/installed-packages-panel');
+const PackageManager = require('../lib/package-manager');
+const PackageCard = require('../lib/package-card');
+const SettingsView = require('../lib/settings-view');
+
+describe('InstalledPackagesPanel', function() {
+  describe('when the packages are loading', () => it('filters packages by name once they have loaded', function() {
+    const settingsView = new SettingsView;
+    this.packageManager = new PackageManager;
+    this.installed = JSON.parse(fs.readFileSync(path.join(__dirname, 'fixtures', 'installed.json')));
+    spyOn(this.packageManager, 'getOutdated').andReturn(new Promise(function() {}));
+    spyOn(this.packageManager, 'loadCompatiblePackageVersion').andCallFake(function() {});
+    spyOn(this.packageManager, 'getInstalled').andReturn(Promise.resolve(this.installed));
+    this.panel = new InstalledPackagesPanel(settingsView, this.packageManager);
+    this.panel.refs.filterEditor.setText('user-');
+    window.advanceClock(this.panel.refs.filterEditor.getBuffer().stoppedChangingDelay);
+
+    waitsFor(function() {
+      return (this.packageManager.getInstalled.callCount === 1) && (this.panel.refs.communityCount.textContent.indexOf('…') < 0);
+    });
+
+    return runs(function() {
+      expect(this.panel.refs.communityCount.textContent.trim()).toBe('1/1');
+      expect(this.panel.refs.communityPackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(1);
+
+      expect(this.panel.refs.coreCount.textContent.trim()).toBe('0/1');
+      expect(this.panel.refs.corePackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(0);
+
+      expect(this.panel.refs.devCount.textContent.trim()).toBe('0/1');
+      return expect(this.panel.refs.devPackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(0);
+    });
+  }));
+
+  describe('when the packages have finished loading', function() {
+    beforeEach(function() {
+      const settingsView = new SettingsView;
+      this.packageManager = new PackageManager;
+      this.installed = JSON.parse(fs.readFileSync(path.join(__dirname, 'fixtures', 'installed.json')));
+      spyOn(this.packageManager, 'getOutdated').andReturn(new Promise(function() {}));
+      spyOn(this.packageManager, 'loadCompatiblePackageVersion').andCallFake(function() {});
+      spyOn(this.packageManager, 'getInstalled').andReturn(Promise.resolve(this.installed));
+      this.panel = new InstalledPackagesPanel(settingsView, this.packageManager);
+
+      return waitsFor(function() {
+        return (this.packageManager.getInstalled.callCount === 1) && (this.panel.refs.communityCount.textContent.indexOf('…') < 0);
+      });
+    });
+
+    it('shows packages', function() {
+      expect(this.panel.refs.communityCount.textContent.trim()).toBe('1');
+      expect(this.panel.refs.communityPackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(1);
+
+      expect(this.panel.refs.coreCount.textContent.trim()).toBe('1');
+      expect(this.panel.refs.corePackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(1);
+
+      expect(this.panel.refs.devCount.textContent.trim()).toBe('1');
+      return expect(this.panel.refs.devPackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(1);
+    });
+
+    it('filters packages by name', function() {
+      this.panel.refs.filterEditor.setText('user-');
+      window.advanceClock(this.panel.refs.filterEditor.getBuffer().stoppedChangingDelay);
+      expect(this.panel.refs.communityCount.textContent.trim()).toBe('1/1');
+      expect(this.panel.refs.communityPackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(1);
+
+      expect(this.panel.refs.coreCount.textContent.trim()).toBe('0/1');
+      expect(this.panel.refs.corePackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(0);
+
+      expect(this.panel.refs.devCount.textContent.trim()).toBe('0/1');
+      return expect(this.panel.refs.devPackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(0);
+    });
+
+    it('adds newly installed packages to the list', function() {
+      let [installCallback] = [];
+      spyOn(this.packageManager, 'runCommand').andCallFake(function(args, callback) {
+        installCallback = callback;
+        return {onWillThrowError() {}};
+      });
+      spyOn(atom.packages, 'activatePackage').andCallFake(name => {
+        return this.installed.user.push({name});
+    });
+
+      expect(this.panel.refs.communityCount.textContent.trim()).toBe('1');
+      expect(this.panel.refs.communityPackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(1);
+
+      this.packageManager.install({name: 'another-user-package'});
+      installCallback(0, '', '');
+
+      advanceClock(InstalledPackagesPanel.loadPackagesDelay());
+      waits(1);
+      return runs(function() {
+        expect(this.panel.refs.communityCount.textContent.trim()).toBe('2');
+        return expect(this.panel.refs.communityPackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(2);
+      });
+    });
+
+    return it('removes uninstalled packages from the list', function() {
+      let [uninstallCallback] = [];
+      spyOn(this.packageManager, 'runCommand').andCallFake(function(args, callback) {
+        uninstallCallback = callback;
+        return {onWillThrowError() {}};
+      });
+      spyOn(this.packageManager, 'unload').andCallFake(name => {
+        return this.installed.user = [];
+    });
+
+      expect(this.panel.refs.communityCount.textContent.trim()).toBe('1');
+      expect(this.panel.refs.communityPackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(1);
+
+      this.packageManager.uninstall({name: 'user-package'});
+      uninstallCallback(0, '', '');
+
+      advanceClock(InstalledPackagesPanel.loadPackagesDelay());
+      waits(1);
+      return runs(function() {
+        expect(this.panel.refs.communityCount.textContent.trim()).toBe('0');
+        return expect(this.panel.refs.communityPackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(0);
+      });
+    });
+  });
+
+  describe('expanding and collapsing sub-sections', function() {
+    beforeEach(function() {
+      const settingsView = new SettingsView;
+      this.packageManager = new PackageManager;
+      this.installed = JSON.parse(fs.readFileSync(path.join(__dirname, 'fixtures', 'installed.json')));
+      spyOn(this.packageManager, 'getOutdated').andReturn(new Promise(function() {}));
+      spyOn(this.packageManager, 'loadCompatiblePackageVersion').andCallFake(function() {});
+      spyOn(this.packageManager, 'getInstalled').andReturn(Promise.resolve(this.installed));
+      this.panel = new InstalledPackagesPanel(settingsView, this.packageManager);
+
+      return waitsFor(function() {
+        return (this.packageManager.getInstalled.callCount === 1) && (this.panel.refs.communityCount.textContent.indexOf('…') < 0);
+      });
+    });
+
+    it('collapses and expands a sub-section if its header is clicked', function() {
+      this.panel.element.querySelector('.sub-section.installed-packages .sub-section-heading').click();
+      expect(this.panel.element.querySelector('.sub-section.installed-packages')).toHaveClass('collapsed');
+
+      expect(this.panel.element.querySelector('.sub-section.core-packages')).not.toHaveClass('collapsed');
+      expect(this.panel.element.querySelector('.sub-section.dev-packages')).not.toHaveClass('collapsed');
+
+      this.panel.element.querySelector('.sub-section.installed-packages .sub-section-heading').click();
+      return expect(this.panel.element.querySelector('.sub-section.installed-packages')).not.toHaveClass('collapsed');
+    });
+
+    it('can collapse and expand any of the sub-sections', function() {
+      let element;
+      expect(this.panel.element.querySelectorAll('.sub-section-heading.has-items').length).toBe(3);
+
+      for (element of Array.from(this.panel.element.querySelectorAll('.sub-section-heading.has-items'))) {
+        element.click();
+      }
+
+      expect(this.panel.element.querySelector('.sub-section.installed-packages')).toHaveClass('collapsed');
+      expect(this.panel.element.querySelector('.sub-section.core-packages')).toHaveClass('collapsed');
+      expect(this.panel.element.querySelector('.sub-section.dev-packages')).toHaveClass('collapsed');
+
+      for (element of Array.from(this.panel.element.querySelectorAll('.sub-section-heading.has-items'))) {
+        element.click();
+      }
+
+      expect(this.panel.element.querySelector('.sub-section.installed-packages')).not.toHaveClass('collapsed');
+      expect(this.panel.element.querySelector('.sub-section.core-packages')).not.toHaveClass('collapsed');
+      return expect(this.panel.element.querySelector('.sub-section.dev-packages')).not.toHaveClass('collapsed');
+    });
+
+    return it('can collapse sub-sections when filtering', function() {
+      this.panel.refs.filterEditor.setText('user-');
+      window.advanceClock(this.panel.refs.filterEditor.getBuffer().stoppedChangingDelay);
+
+      const hasItems = this.panel.element.querySelectorAll('.sub-section-heading.has-items');
+      expect(hasItems.length).toBe(1);
+      return expect(hasItems[0].textContent).toMatch(/Community Packages/);
+    });
+  });
+
+  return describe('when there are no packages', function() {
+    beforeEach(function() {
+      const settingsView = new SettingsView;
+      this.packageManager = new PackageManager;
+      this.installed = {
+        dev: [],
+        user: [],
+        core: []
+      };
+      spyOn(this.packageManager, 'getOutdated').andReturn(new Promise(function() {}));
+      spyOn(this.packageManager, 'loadCompatiblePackageVersion').andCallFake(function() {});
+      spyOn(this.packageManager, 'getInstalled').andReturn(Promise.resolve(this.installed));
+      this.panel = new InstalledPackagesPanel(settingsView, this.packageManager);
+
+      return waitsFor(function() {
+        return (this.packageManager.getInstalled.callCount === 1) && (this.panel.refs.communityCount.textContent.indexOf('…') < 0);
+      });
+    });
+
+    it('has a count of zero in all headings', function() {
+      expect(this.panel.element.querySelector('.section-heading-count').textContent).toMatch(/^0+$/);
+      expect(this.panel.element.querySelectorAll('.sub-section .icon-package').length).toBe(4);
+      return expect(this.panel.element.querySelectorAll('.sub-section .icon-package.has-items').length).toBe(0);
+    });
+
+    it('can not collapse and expand any of the sub-sections', function() {
+      let element;
+      for (element of Array.from(this.panel.element.querySelectorAll('.sub-section .icon-package'))) {
+        element.click();
+      }
+
+      expect(this.panel.element.querySelector('.sub-section.installed-packages')).not.toHaveClass('collapsed');
+      expect(this.panel.element.querySelector('.sub-section.core-packages')).not.toHaveClass('collapsed');
+      return expect(this.panel.element.querySelector('.sub-section.dev-packages')).not.toHaveClass('collapsed');
+    });
+
+    return it('does not allow collapsing on any section when filtering', function() {
+      this.panel.refs.filterEditor.setText('user-');
+      window.advanceClock(this.panel.refs.filterEditor.getBuffer().stoppedChangingDelay);
+
+      expect(this.panel.element.querySelector('.section-heading-count').textContent).toMatch(/^(0\/0)+$/);
+      expect(this.panel.element.querySelectorAll('.sub-section .icon-package').length).toBe(4);
+      return expect(this.panel.element.querySelectorAll('.sub-section .icon-paintcan.has-items').length).toBe(0);
+    });
+  });
+});

packages/settings-view/spec/keybindings-panel-spec.js

@@ -0,0 +1,151 @@
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
+ */
+const path = require('path');
+const KeybindingsPanel = require('../lib/keybindings-panel');
+
+describe("KeybindingsPanel", function() {
+  let [keyBindings, panel] = [];
+
+  beforeEach(function() {
+    expect(atom.keymaps).toBeDefined();
+    const keySource = `${atom.getLoadSettings().resourcePath}${path.sep}keymaps`;
+    keyBindings = [
+      {
+        source: keySource,
+        keystrokes: 'ctrl-a',
+        command: 'core:select-all',
+        selector: '.editor, .platform-test'
+      },
+      {
+        source: keySource,
+        keystrokes: 'ctrl-u',
+        command: 'core:undo',
+        selector: ".platform-test"
+      },
+      {
+        source: keySource,
+        keystrokes: 'ctrl-u',
+        command: 'core:undo',
+        selector: ".platform-a, .platform-b"
+      },
+      {
+        source: keySource,
+        keystrokes: 'shift-\\ \\',
+        command: 'core:undo',
+        selector: '.editor'
+      },
+      {
+        source: keySource,
+        keystrokes: 'ctrl-z\'',
+        command: 'core:toggle',
+        selector: 'atom-text-editor[data-grammar~=\'css\']'
+      }
+    ];
+    spyOn(atom.keymaps, 'getKeyBindings').andReturn(keyBindings);
+    return panel = new KeybindingsPanel;
+  });
+
+  it("loads and displays core key bindings", function() {
+    expect(panel.refs.keybindingRows.children.length).toBe(3);
+
+    const row = panel.refs.keybindingRows.children[0];
+    expect(row.querySelector('.keystroke').textContent).toBe('ctrl-a');
+    expect(row.querySelector('.command').textContent).toBe('core:select-all');
+    expect(row.querySelector('.source').textContent).toBe('Core');
+    return expect(row.querySelector('.selector').textContent).toBe('.editor, .platform-test');
+  });
+
+  describe("when a keybinding is copied", function() {
+    describe("when the keybinding file ends in .cson", () => it("writes a CSON snippet to the clipboard", function() {
+      spyOn(atom.keymaps, 'getUserKeymapPath').andReturn('keymap.cson');
+      panel.element.querySelector('.copy-icon').click();
+      return expect(atom.clipboard.read()).toBe(`\
+'.editor, .platform-test':
+'ctrl-a': 'core:select-all'\
+`
+      );
+    }));
+
+    describe("when the keybinding file ends in .json", () => it("writes a JSON snippet to the clipboard", function() {
+      spyOn(atom.keymaps, 'getUserKeymapPath').andReturn('keymap.json');
+      panel.element.querySelector('.copy-icon').click();
+      return expect(atom.clipboard.read()).toBe(`\
+".editor, .platform-test": {
+"ctrl-a": "core:select-all"
+}\
+`
+      );
+    }));
+
+    return describe("when the keybinding contains special characters", function() {
+      it("escapes the backslashes before copying", function() {
+        spyOn(atom.keymaps, 'getUserKeymapPath').andReturn('keymap.cson');
+        panel.element.querySelectorAll('.copy-icon')[2].click();
+        return expect(atom.clipboard.read()).toBe(`\
+'.editor':
+  'shift-\\\\ \\\\': 'core:undo'\
+`
+        );
+      });
+
+      return it("escapes the single quotes before copying", function() {
+        spyOn(atom.keymaps, 'getUserKeymapPath').andReturn('keymap.cson');
+        panel.element.querySelectorAll('.copy-icon')[1].click();
+        return expect(atom.clipboard.read()).toBe(`\
+'atom-text-editor[data-grammar~=\\'css\\']':
+  'ctrl-z\\'': 'core:toggle'\
+`
+        );
+      });
+    });
+  });
+
+  describe("when the key bindings change", () => it("reloads the key bindings", function() {
+    keyBindings.push({
+      source: atom.keymaps.getUserKeymapPath(), keystrokes: 'ctrl-b', command: 'core:undo', selector: '.editor'});
+    atom.keymaps.emitter.emit('did-reload-keymap');
+
+    waitsFor("the new keybinding to show up in the keybinding panel", () => panel.refs.keybindingRows.children.length === 4);
+
+    return runs(function() {
+      const row = panel.refs.keybindingRows.children[1];
+      expect(row.querySelector('.keystroke').textContent).toBe('ctrl-b');
+      expect(row.querySelector('.command').textContent).toBe('core:undo');
+      expect(row.querySelector('.source').textContent).toBe('User');
+      return expect(row.querySelector('.selector').textContent).toBe('.editor');
+    });
+  }));
+
+  return describe("when searching key bindings", function() {
+    it("find case-insensitive results", function() {
+      keyBindings.push({
+        source: `${atom.getLoadSettings().resourcePath}${path.sep}keymaps`, keystrokes: 'F11', command: 'window:toggle-full-screen', selector: 'body'});
+      atom.keymaps.emitter.emit('did-reload-keymap');
+
+      panel.filterKeyBindings(keyBindings, 'f11');
+
+      expect(panel.refs.keybindingRows.children.length).toBe(1);
+
+      const row = panel.refs.keybindingRows.children[0];
+      expect(row.querySelector('.keystroke').textContent).toBe('F11');
+      expect(row.querySelector('.command').textContent).toBe('window:toggle-full-screen');
+      expect(row.querySelector('.source').textContent).toBe('Core');
+      return expect(row.querySelector('.selector').textContent).toBe('body');
+    });
+
+    return it("perform a fuzzy match for each keyword", function() {
+      panel.filterKeyBindings(keyBindings, 'core ctrl-a');
+
+      expect(panel.refs.keybindingRows.children.length).toBe(1);
+
+      const row = panel.refs.keybindingRows.children[0];
+      expect(row.querySelector('.keystroke').textContent).toBe('ctrl-a');
+      expect(row.querySelector('.command').textContent).toBe('core:select-all');
+      expect(row.querySelector('.source').textContent).toBe('Core');
+      return expect(row.querySelector('.selector').textContent).toBe('.editor, .platform-test');
+    });
+  });
+});

packages/settings-view/spec/list-spec.js

@@ -0,0 +1,41 @@
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
+ */
+const List = require('../lib/list');
+
+describe('List', function() {
+  let list = null;
+
+  beforeEach(() => list = new List('name'));
+
+  return it('emits add and remove events when setting items', function() {
+    const addHandler = jasmine.createSpy();
+    const removeHandler = jasmine.createSpy();
+    list.onDidAddItem(addHandler);
+    list.onDidRemoveItem(removeHandler);
+
+    let items = [{name: 'one', text: 'a'}, {name: 'two', text: 'b'}];
+    list.setItems(items);
+    expect(addHandler.callCount).toBe(2);
+    expect(removeHandler.callCount).toBe(0);
+
+    addHandler.reset();
+    removeHandler.reset();
+
+    items = [{name: 'three', text: 'c'}, {name: 'two', text: 'b'}];
+    list.setItems(items);
+    expect(addHandler.callCount).toBe(1);
+    expect(removeHandler.callCount).toBe(1);
+    expect(addHandler.mostRecentCall.args[0]).toEqual({name: 'three', text: 'c'});
+    expect(removeHandler.mostRecentCall.args[0]).toEqual({name: 'one', text: 'a'});
+    expect(list.getItems()).toEqual(items);
+
+    addHandler.reset();
+    removeHandler.reset();
+    items.push({name: 'four'});
+    list.setItems(items);
+    return expect(addHandler.callCount).toBe(1);
+  });
+});

packages/settings-view/spec/list-view-spec.js

@@ -0,0 +1,77 @@
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
+ */
+const List = require('../lib/list');
+const ListView = require('../lib/list-view');
+
+describe('ListView', function() {
+  let [list, view, container] = [];
+
+  beforeEach(function() {
+    list = new List('name');
+    container = document.createElement('div');
+    return view = new ListView(list, container, function(item) {
+      const element = document.createElement('div');
+      element.classList.add(item.name);
+      element.textContent = `${item.name}|${item.text}`;
+      return {element, destroy() { return element.remove(); }};
+  });});
+
+  it('updates the list when the items are changed', function() {
+    expect(container.children.length).toBe(0);
+
+    let items = [{name: 'one', text: 'a'}, {name: 'two', text: 'b'}];
+    list.setItems(items);
+    expect(container.children.length).toBe(2);
+    expect(container.querySelector('.one').textContent).toBe('one|a');
+    expect(container.querySelector('.two').textContent).toBe('two|b');
+
+    items = [{name: 'three', text: 'c'}, {name: 'two', text: 'b'}];
+    list.setItems(items);
+    expect(container.children.length).toBe(2);
+    expect(container.querySelector('.one')).not.toExist();
+    expect(container.querySelector('.two').textContent).toBe('two|b');
+    return expect(container.querySelector('.three').textContent).toBe('three|c');
+  });
+
+  it('filters views', function() {
+    const items = [
+      {name: 'one', text: '', filterText: 'x'},
+      {name: 'two', text: '', filterText: 'y'},
+      {name: 'three', text: '', filterText: 'x'},
+      {name: 'four', text: '', filterText: 'z'}
+    ];
+
+    list.setItems(items);
+    const views = view.filterViews(item => item.filterText === 'x');
+
+    expect(views).toHaveLength(2);
+    expect(views[0].element.textContent).toBe('one|');
+    return expect(views[1].element.textContent).toBe('three|');
+  });
+
+  return it('filters views after an update', function() {
+    let items = [
+      {name: 'one', text: '', filterText: 'x'},
+      {name: 'two', text: '', filterText: 'y'},
+      {name: 'three', text: '', filterText: 'x'},
+      {name: 'four', text: '', filterText: 'z'}
+    ];
+    list.setItems(items);
+
+    items = [
+      {name: 'one', text: '', filterText: 'x'},
+      {name: 'two', text: '', filterText: 'y'},
+      {name: 'three', text: '', filterText: 'x'},
+      {name: 'four', text: '', filterText: 'z'}
+    ];
+    list.setItems(items);
+    const views = view.filterViews(item => item.filterText === 'x');
+
+    expect(views).toHaveLength(2);
+    expect(views[0].element.textContent).toBe('one|');
+    return expect(views[1].element.textContent).toBe('three|');
+  });
+});

packages/settings-view/spec/package-card-spec.js

@@ -0,0 +1,427 @@
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
+ */
+const path = require('path');
+const PackageCard = require('../lib/package-card');
+const PackageManager = require('../lib/package-manager');
+const SettingsView = require('../lib/settings-view');
+
+describe("PackageCard", function() {
+  const setPackageStatusSpies = function(opts) {
+    spyOn(PackageCard.prototype, 'isInstalled').andReturn(opts.installed);
+    spyOn(PackageCard.prototype, 'isDisabled').andReturn(opts.disabled);
+    return spyOn(PackageCard.prototype, 'hasSettings').andReturn(opts.hasSettings);
+  };
+
+  let [card, packageManager] = [];
+
+  beforeEach(function() {
+    packageManager = new PackageManager();
+    return spyOn(packageManager, 'runCommand');
+  });
+
+  it("doesn't show the disable control for a theme", function() {
+    setPackageStatusSpies({installed: true, disabled: false});
+    card = new PackageCard({theme: 'syntax', name: 'test-theme'}, new SettingsView(), packageManager);
+    jasmine.attachToDOM(card.element);
+    return expect(card.refs.enablementButton).not.toBeVisible();
+  });
+
+  it("doesn't show the status indicator for a theme", function() {
+    setPackageStatusSpies({installed: true, disabled: false});
+    card = new PackageCard({theme: 'syntax', name: 'test-theme'}, new SettingsView(), packageManager);
+    jasmine.attachToDOM(card.element);
+    return expect(card.refs.statusIndicatorButton).not.toBeVisible();
+  });
+
+  it("doesn't show the settings button for a theme", function() {
+    setPackageStatusSpies({installed: true, disabled: false});
+    card = new PackageCard({theme: 'syntax', name: 'test-theme'}, new SettingsView(), packageManager);
+    jasmine.attachToDOM(card.element);
+    return expect(card.refs.settingsButton).not.toBeVisible();
+  });
+
+  it("doesn't show the settings button on the settings view", function() {
+    setPackageStatusSpies({installed: true, disabled: false, hasSettings: true});
+    card = new PackageCard({name: 'test-package'}, new SettingsView(), packageManager, {onSettingsView: true});
+    jasmine.attachToDOM(card.element);
+    return expect(card.refs.settingsButton).not.toBeVisible();
+  });
+
+  it("removes the settings button if a package has no settings", function() {
+    setPackageStatusSpies({installed: true, disabled: false, hasSettings: false});
+    card = new PackageCard({name: 'test-package'}, new SettingsView(), packageManager);
+    jasmine.attachToDOM(card.element);
+    return expect(card.refs.settingsButton).not.toBeVisible();
+  });
+
+  it("removes the uninstall button if a package has is a bundled package", function() {
+    setPackageStatusSpies({installed: true, disabled: false, hasSettings: true});
+    card = new PackageCard({name: 'find-and-replace'}, new SettingsView(), packageManager);
+    jasmine.attachToDOM(card.element);
+    return expect(card.refs.uninstallButton).not.toBeVisible();
+  });
+
+  it("displays the new version in the update button", function() {
+    setPackageStatusSpies({installed: true, disabled: false, hasSettings: true});
+    card = new PackageCard({name: 'find-and-replace', version: '1.0.0', latestVersion: '1.2.0'}, new SettingsView(), packageManager);
+    jasmine.attachToDOM(card.element);
+    expect(card.refs.updateButton).toBeVisible();
+    return expect(card.refs.updateButton.textContent).toContain('Update to 1.2.0');
+  });
+
+  it("displays the new version in the update button when the package is disabled", function() {
+    setPackageStatusSpies({installed: true, disabled: true, hasSettings: true});
+    card = new PackageCard({name: 'find-and-replace', version: '1.0.0', latestVersion: '1.2.0'}, new SettingsView(), packageManager);
+    jasmine.attachToDOM(card.element);
+    expect(card.refs.updateButton).toBeVisible();
+    return expect(card.refs.updateButton.textContent).toContain('Update to 1.2.0');
+  });
+
+  it("shows the author details", function() {
+    const authorName = "authorName";
+    const pack = {
+      name: 'some-package',
+      version: '0.1.0',
+      repository: `https://github.com/${authorName}/some-package`
+    };
+    card = new PackageCard(pack, new SettingsView(), packageManager);
+
+    jasmine.attachToDOM(card.element);
+
+    return expect(card.refs.loginLink.textContent).toBe(authorName);
+  });
+
+  describe("when the package is not installed", function() {
+    it("shows the settings, uninstall, and disable buttons", function() {
+      const pack = {
+        name: 'some-package',
+        version: '0.1.0',
+        repository: 'http://github.com/omgwow/some-package'
+      };
+      card = new PackageCard(pack, new SettingsView(), packageManager);
+
+      jasmine.attachToDOM(card.element);
+
+      expect(card.refs.installButtonGroup).toBeVisible();
+      expect(card.refs.updateButtonGroup).not.toBeVisible();
+      return expect(card.refs.packageActionButtonGroup).not.toBeVisible();
+    });
+
+    it("can be installed if currently not installed", function() {
+      setPackageStatusSpies({installed: false, disabled: false});
+      spyOn(packageManager, 'install');
+
+      card = new PackageCard({name: 'test-package'}, new SettingsView(), packageManager);
+      expect(card.refs.installButton.style.display).not.toBe('none');
+      expect(card.refs.uninstallButton.style.display).toBe('none');
+      card.refs.installButton.click();
+      return expect(packageManager.install).toHaveBeenCalled();
+    });
+
+    it("can be installed if currently not installed and package latest release engine match atom version", function() {
+      spyOn(packageManager, 'install');
+      spyOn(packageManager, 'loadCompatiblePackageVersion').andCallFake(function(packageName, callback) {
+        const pack = {
+          name: packageName,
+          version: '0.1.0',
+          engines: {
+            atom: '>0.50.0'
+          }
+        };
+
+        return callback(null, pack);
+      });
+
+      setPackageStatusSpies({installed: false, disabled: false});
+
+      card = new PackageCard({
+        name: 'test-package',
+        version: '0.1.0',
+        engines: {
+          atom: '>0.50.0'
+        }
+      }, new SettingsView(), packageManager);
+
+      // In that case there's no need to make a request to get all the versions
+      expect(packageManager.loadCompatiblePackageVersion).not.toHaveBeenCalled();
+
+      expect(card.refs.installButton.style.display).not.toBe('none');
+      expect(card.refs.uninstallButton.style.display).toBe('none');
+      card.refs.installButton.click();
+      expect(packageManager.install).toHaveBeenCalled();
+      return expect(packageManager.install.mostRecentCall.args[0]).toEqual({
+        name: 'test-package',
+        version: '0.1.0',
+        engines: {
+          atom: '>0.50.0'
+        }
+      });
+    });
+
+    it("can be installed with a previous version whose engine match the current atom version", function() {
+      spyOn(packageManager, 'install');
+      spyOn(packageManager, 'loadCompatiblePackageVersion').andCallFake(function(packageName, callback) {
+        const pack = {
+          name: packageName,
+          version: '0.0.1',
+          engines: {
+            atom: '>0.50.0'
+          }
+        };
+
+        return callback(null, pack);
+      });
+
+      setPackageStatusSpies({installed: false, disabled: false});
+
+      card = new PackageCard({
+        name: 'test-package',
+        version: '0.1.0',
+        engines: {
+          atom: '>99.0.0'
+        }
+      }, new SettingsView(), packageManager);
+
+      expect(card.refs.installButton.style.display).not.toBe('none');
+      expect(card.refs.uninstallButton.style.display).toBe('none');
+      expect(card.refs.versionValue.textContent).toBe('0.0.1');
+      expect(card.refs.versionValue).toHaveClass('text-warning');
+      expect(card.refs.packageMessage).toHaveClass('text-warning');
+      card.refs.installButton.click();
+      expect(packageManager.install).toHaveBeenCalled();
+      return expect(packageManager.install.mostRecentCall.args[0]).toEqual({
+        name: 'test-package',
+        version: '0.0.1',
+        engines: {
+          atom: '>0.50.0'
+        }
+      });
+    });
+
+    return it("can't be installed if there is no version compatible with the current atom version", function() {
+      spyOn(packageManager, 'loadCompatiblePackageVersion').andCallFake(function(packageName, callback) {
+        const pack =
+          {name: packageName};
+
+        return callback(null, pack);
+      });
+
+      setPackageStatusSpies({installed: false, disabled: false});
+
+      const pack = {
+        name: 'test-package',
+        engines: {
+          atom: '>=99.0.0'
+        }
+      };
+      card = new PackageCard(pack , new SettingsView(), packageManager);
+      jasmine.attachToDOM(card.element);
+
+      expect(card.refs.installButtonGroup).not.toBeVisible();
+      expect(card.refs.packageActionButtonGroup).not.toBeVisible();
+      expect(card.refs.versionValue).toHaveClass('text-error');
+      return expect(card.refs.packageMessage).toHaveClass('text-error');
+    });
+  });
+
+  return describe("when the package is installed", function() {
+    beforeEach(function() {
+      atom.packages.loadPackage(path.join(__dirname, 'fixtures', 'package-with-config'));
+      return waitsFor(() => atom.packages.isPackageLoaded('package-with-config') === true);
+    });
+
+    it("can be disabled if installed", function() {
+      setPackageStatusSpies({installed: true, disabled: false});
+      spyOn(atom.packages, 'disablePackage').andReturn(true);
+
+      card = new PackageCard({name: 'test-package'}, new SettingsView(), packageManager);
+      expect(card.refs.enablementButton.querySelector('.disable-text').textContent).toBe('Disable');
+      card.refs.enablementButton.click();
+      return expect(atom.packages.disablePackage).toHaveBeenCalled();
+    });
+
+    it("can be updated", function() {
+      const pack = atom.packages.getLoadedPackage('package-with-config');
+      pack.latestVersion = '1.1.0';
+      let packageUpdated = false;
+
+      packageManager.on('package-updated', () => packageUpdated = true);
+      packageManager.runCommand.andCallFake(function(args, callback) {
+        callback(0, '', '');
+        return {onWillThrowError() {}};
+      });
+
+      const originalLoadPackage = atom.packages.loadPackage;
+      spyOn(atom.packages, 'loadPackage').andCallFake(() => originalLoadPackage.call(atom.packages, path.join(__dirname, 'fixtures', 'package-with-config')));
+
+      card = new PackageCard(pack, new SettingsView(), packageManager);
+      jasmine.attachToDOM(card.element);
+      expect(card.refs.updateButton).toBeVisible();
+
+      card.update();
+
+      waitsFor(() => packageUpdated);
+
+      return runs(() => expect(card.refs.updateButton).not.toBeVisible());
+    });
+
+    it('keeps the update button visible if the update failed', function() {
+      const pack = atom.packages.getLoadedPackage('package-with-config');
+      pack.latestVersion = '1.1.0';
+      let updateFailed = false;
+
+      packageManager.on('package-update-failed', () => updateFailed = true);
+      packageManager.runCommand.andCallFake(function(args, callback) {
+        callback(1, '', '');
+        return {onWillThrowError() {}};
+      });
+
+      const originalLoadPackage = atom.packages.loadPackage;
+      spyOn(atom.packages, 'loadPackage').andCallFake(() => originalLoadPackage.call(atom.packages, path.join(__dirname, 'fixtures', 'package-with-config')));
+
+      card = new PackageCard(pack, new SettingsView(), packageManager);
+      jasmine.attachToDOM(card.element);
+      expect(card.refs.updateButton).toBeVisible();
+
+      card.update();
+
+      waitsFor(() => updateFailed);
+
+      return runs(() => expect(card.refs.updateButton).toBeVisible());
+    });
+
+    it('does not error when attempting to update without any update available', function() {
+      // While this cannot be done through the package card UI,
+      // updates can still be triggered through the Updates panel's Update All button
+      // https://github.com/atom/settings-view/issues/879
+
+      const pack = atom.packages.getLoadedPackage('package-with-config');
+
+      const originalLoadPackage = atom.packages.loadPackage;
+      spyOn(atom.packages, 'loadPackage').andCallFake(() => originalLoadPackage.call(atom.packages, path.join(__dirname, 'fixtures', 'package-with-config')));
+
+      card = new PackageCard(pack, new SettingsView(), packageManager);
+      jasmine.attachToDOM(card.element);
+      expect(card.refs.updateButton).not.toBeVisible();
+
+      waitsForPromise(() => card.update());
+
+      return runs(() => expect(card.refs.updateButton).not.toBeVisible());
+    });
+
+    it("will stay disabled after an update", function() {
+      const pack = atom.packages.getLoadedPackage('package-with-config');
+      pack.latestVersion = '1.1.0';
+      let packageUpdated = false;
+
+      packageManager.on('package-updated', () => packageUpdated = true);
+      packageManager.runCommand.andCallFake(function(args, callback) {
+        callback(0, '', '');
+        return {onWillThrowError() {}};
+      });
+
+      const originalLoadPackage = atom.packages.loadPackage;
+      spyOn(atom.packages, 'loadPackage').andCallFake(() => originalLoadPackage.call(atom.packages, path.join(__dirname, 'fixtures', 'package-with-config')));
+
+      pack.disable();
+      card = new PackageCard(pack, new SettingsView(), packageManager);
+      expect(atom.packages.isPackageDisabled('package-with-config')).toBe(true);
+      card.update();
+
+      waitsFor(() => packageUpdated);
+
+      return runs(() => expect(atom.packages.isPackageDisabled('package-with-config')).toBe(true));
+    });
+
+    it("is uninstalled when the uninstallButton is clicked", function() {
+      setPackageStatusSpies({installed: true, disabled: false});
+
+      let [uninstallCallback] = [];
+      packageManager.runCommand.andCallFake(function(args, callback) {
+        if (args[0] === 'uninstall') {
+          uninstallCallback = callback;
+        }
+        return {onWillThrowError() {}};
+      });
+
+      spyOn(packageManager, 'install').andCallThrough();
+      spyOn(packageManager, 'uninstall').andCallThrough();
+
+      const pack = atom.packages.getLoadedPackage('package-with-config');
+      card = new PackageCard(pack, new SettingsView(), packageManager);
+      jasmine.attachToDOM(card.element);
+
+      expect(card.refs.uninstallButton).toBeVisible();
+      expect(card.refs.enablementButton).toBeVisible();
+      card.refs.uninstallButton.click();
+
+      expect(card.refs.uninstallButton.disabled).toBe(true);
+      expect(card.refs.enablementButton.disabled).toBe(true);
+      expect(card.refs.uninstallButton).toHaveClass('is-uninstalling');
+
+      expect(packageManager.uninstall).toHaveBeenCalled();
+      expect(packageManager.uninstall.mostRecentCall.args[0].name).toEqual('package-with-config');
+
+      jasmine.unspy(PackageCard.prototype, 'isInstalled');
+      spyOn(PackageCard.prototype, 'isInstalled').andReturn(false);
+      uninstallCallback(0, '', '');
+
+      waits(1);
+      return runs(function() {
+        expect(card.refs.uninstallButton.disabled).toBe(false);
+        expect(card.refs.uninstallButton).not.toHaveClass('is-uninstalling');
+        expect(card.refs.installButtonGroup).toBeVisible();
+        expect(card.refs.updateButtonGroup).not.toBeVisible();
+        return expect(card.refs.packageActionButtonGroup).not.toBeVisible();
+      });
+    });
+
+    it("shows the settings, uninstall, and enable buttons when disabled", function() {
+      atom.config.set('package-with-config.setting', 'something');
+      const pack = atom.packages.getLoadedPackage('package-with-config');
+      spyOn(atom.packages, 'isPackageDisabled').andReturn(true);
+      card = new PackageCard(pack, new SettingsView(), packageManager);
+      jasmine.attachToDOM(card.element);
+
+      expect(card.refs.updateButtonGroup).not.toBeVisible();
+      expect(card.refs.installButtonGroup).not.toBeVisible();
+
+      expect(card.refs.settingsButton).toBeVisible();
+      expect(card.refs.uninstallButton).toBeVisible();
+      expect(card.refs.enablementButton).toBeVisible();
+      return expect(card.refs.enablementButton.textContent).toBe('Enable');
+    });
+
+    it("shows the settings, uninstall, and disable buttons", function() {
+      atom.config.set('package-with-config.setting', 'something');
+      const pack = atom.packages.getLoadedPackage('package-with-config');
+      card = new PackageCard(pack, new SettingsView(), packageManager);
+
+      jasmine.attachToDOM(card.element);
+
+      expect(card.refs.updateButtonGroup).not.toBeVisible();
+      expect(card.refs.installButtonGroup).not.toBeVisible();
+
+      expect(card.refs.settingsButton).toBeVisible();
+      expect(card.refs.uninstallButton).toBeVisible();
+      expect(card.refs.enablementButton).toBeVisible();
+      return expect(card.refs.enablementButton.textContent).toBe('Disable');
+    });
+
+    return it("does not show the settings button when there are no settings", function() {
+      const pack = atom.packages.getLoadedPackage('package-with-config');
+      spyOn(PackageCard.prototype, 'hasSettings').andReturn(false);
+      card = new PackageCard(pack, new SettingsView(), packageManager);
+
+      jasmine.attachToDOM(card.element);
+
+      expect(card.refs.settingsButton).not.toBeVisible();
+      expect(card.refs.uninstallButton).toBeVisible();
+      expect(card.refs.enablementButton).toBeVisible();
+      return expect(card.refs.enablementButton.textContent).toBe('Disable');
+    });
+  });
+});

packages/settings-view/spec/package-detail-view-spec.js

@@ -0,0 +1,181 @@
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
+ */
+const fs = require('fs');
+const path = require('path');
+const {shell} = require('electron');
+
+const PackageDetailView = require('../lib/package-detail-view');
+const PackageManager = require('../lib/package-manager');
+const SettingsView = require('../lib/settings-view');
+const AtomIoClient = require('../lib/atom-io-client');
+const SnippetsProvider =
+  {getSnippets() { return {}; }};
+
+describe("PackageDetailView", function() {
+  let packageManager = null;
+  let view = null;
+
+  const createClientSpy = () => jasmine.createSpyObj('client', ['package', 'avatar']);
+
+  beforeEach(function() {
+    packageManager = new PackageManager;
+    return view = null;
+  });
+
+  const loadPackageFromRemote = function(packageName, opts) {
+    if (opts == null) { opts = {}; }
+    packageManager.client = createClientSpy();
+    packageManager.client.package.andCallFake(function(name, cb) {
+      const packageData = require(path.join(__dirname, 'fixtures', packageName, 'package.json'));
+      packageData.readme = fs.readFileSync(path.join(__dirname, 'fixtures', packageName, 'README.md'), 'utf8');
+      return cb(null, packageData);
+    });
+    view = new PackageDetailView({name: packageName}, new SettingsView(), packageManager, SnippetsProvider);
+    return view.beforeShow(opts);
+  };
+
+  const loadCustomPackageFromRemote = function(packageName, opts) {
+    if (opts == null) { opts = {}; }
+    packageManager.client = createClientSpy();
+    packageManager.client.package.andCallFake(function(name, cb) {
+      const packageData = require(path.join(__dirname, 'fixtures', packageName, 'package.json'));
+      return cb(null, packageData);
+    });
+    view = new PackageDetailView({name: packageName}, new SettingsView(), packageManager, SnippetsProvider);
+    return view.beforeShow(opts);
+  };
+
+  it("renders a package when provided in `initialize`", function() {
+    atom.packages.loadPackage(path.join(__dirname, 'fixtures', 'package-with-config'));
+    const pack = atom.packages.getLoadedPackage('package-with-config');
+    view = new PackageDetailView(pack, new SettingsView(), packageManager, SnippetsProvider);
+
+    // Perhaps there are more things to assert here.
+    return expect(view.refs.title.textContent).toBe('Package With Config');
+  });
+
+  it("does not call the atom.io api for package metadata when present", function() {
+    packageManager.client = createClientSpy();
+    view = new PackageDetailView({name: 'package-with-config'}, new SettingsView(), packageManager, SnippetsProvider);
+
+    // PackageCard is a subview, and it calls AtomIoClient::package once to load
+    // metadata from the cache.
+    return expect(packageManager.client.package.callCount).toBe(1);
+  });
+
+  it("shows a loading message and calls out to atom.io when package metadata is missing", function() {
+    loadPackageFromRemote('package-with-readme');
+    expect(view.refs.loadingMessage).not.toBe(null);
+    expect(view.refs.loadingMessage.classList.contains('hidden')).not.toBe(true);
+    return expect(packageManager.client.package).toHaveBeenCalled();
+  });
+
+  it("shows an error when package metadata cannot be loaded via the API", function() {
+    packageManager.client = createClientSpy();
+    packageManager.client.package.andCallFake(function(name, cb) {
+      const error = new Error('API error');
+      return cb(error, null);
+    });
+
+    view = new PackageDetailView({name: 'nonexistent-package'}, new SettingsView(), packageManager, SnippetsProvider);
+
+    expect(view.refs.errorMessage.classList.contains('hidden')).not.toBe(true);
+    expect(view.refs.loadingMessage.classList.contains('hidden')).toBe(true);
+    return expect(view.element.querySelectorAll('.package-card').length).toBe(0);
+  });
+
+  it("shows an error when package metadata cannot be loaded from the cache and the network is unavailable", function() {
+    localStorage.removeItem('settings-view:packages/some-package');
+
+    spyOn(AtomIoClient.prototype, 'online').andReturn(false);
+    spyOn(AtomIoClient.prototype, 'request').andCallFake((path, callback) => callback(new Error('getaddrinfo ENOENT atom.io:443')));
+    spyOn(AtomIoClient.prototype, 'fetchFromCache').andCallThrough();
+
+    view = new PackageDetailView({name: 'some-package'}, new SettingsView(), packageManager, SnippetsProvider);
+
+    expect(AtomIoClient.prototype.fetchFromCache).toHaveBeenCalled();
+
+    expect(view.refs.errorMessage.classList.contains('hidden')).not.toBe(true);
+    expect(view.refs.loadingMessage.classList.contains('hidden')).toBe(true);
+    return expect(view.element.querySelectorAll('.package-card').length).toBe(0);
+  });
+
+  it("renders the README successfully after a call to the atom.io api", function() {
+    loadPackageFromRemote('package-with-readme');
+    expect(view.packageCard).toBeDefined();
+    expect(view.packageCard.refs.packageName.textContent).toBe('package-with-readme');
+    return expect(view.element.querySelectorAll('.package-readme').length).toBe(1);
+  });
+
+  it("renders the README successfully with sanitized html", function() {
+    loadPackageFromRemote('package-with-readme');
+    expect(view.element.querySelectorAll('.package-readme script').length).toBe(0);
+    expect(view.element.querySelectorAll('.package-readme iframe').length).toBe(0);
+    expect(view.element.querySelectorAll('.package-readme input[type="checkbox"][disabled]').length).toBe(2);
+    expect(view.element.querySelector('img[alt="AbsoluteImage"]').getAttribute('src')).toBe('https://example.com/static/image.jpg');
+    expect(view.element.querySelector('img[alt="RelativeImage"]').getAttribute('src')).toBe('https://github.com/example/package-with-readme/blob/master/static/image.jpg');
+    return expect(view.element.querySelector('img[alt="Base64Image"]').getAttribute('src')).toBe('data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
+  });
+
+  it("renders the README when the package path is undefined", function() {
+    atom.packages.loadPackage(path.join(__dirname, 'fixtures', 'package-with-readme'));
+    const pack = atom.packages.getLoadedPackage('package-with-readme');
+    delete pack.path;
+    view = new PackageDetailView(pack, new SettingsView(), packageManager, SnippetsProvider);
+
+    expect(view.packageCard).toBeDefined();
+    expect(view.packageCard.refs.packageName.textContent).toBe('package-with-readme');
+    return expect(view.element.querySelectorAll('.package-readme').length).toBe(1);
+  });
+
+  it("triggers a report issue button click and checks that the fallback repository issue tracker URL was opened", function() {
+    loadCustomPackageFromRemote('package-without-bugs-property');
+    spyOn(shell, 'openExternal');
+    view.refs.issueButton.click();
+    return expect(shell.openExternal).toHaveBeenCalledWith('https://github.com/example/package-without-bugs-property/issues/new');
+  });
+
+  it("triggers a report issue button click and checks that the bugs URL string was opened", function() {
+    loadCustomPackageFromRemote('package-with-bugs-property-url-string');
+    spyOn(shell, 'openExternal');
+    view.refs.issueButton.click();
+    return expect(shell.openExternal).toHaveBeenCalledWith('https://example.com/custom-issue-tracker/new');
+  });
+
+  it("triggers a report issue button click and checks that the bugs URL was opened", function() {
+    loadCustomPackageFromRemote('package-with-bugs-property-url');
+    spyOn(shell, 'openExternal');
+    view.refs.issueButton.click();
+    return expect(shell.openExternal).toHaveBeenCalledWith('https://example.com/custom-issue-tracker/new');
+  });
+
+  it("triggers a report issue button click and checks that the bugs email link was opened", function() {
+    loadCustomPackageFromRemote('package-with-bugs-property-email');
+    spyOn(shell, 'openExternal');
+    view.refs.issueButton.click();
+    return expect(shell.openExternal).toHaveBeenCalledWith('mailto:issues@example.com');
+  });
+
+  it("should show 'Install' as the first breadcrumb by default", function() {
+    loadPackageFromRemote('package-with-readme');
+    return expect(view.refs.breadcrumb.textContent).toBe('Install');
+  });
+
+  it("should open repository url", function() {
+    loadPackageFromRemote('package-with-readme');
+    spyOn(shell, 'openExternal');
+    view.refs.packageRepo.click();
+    return expect(shell.openExternal).toHaveBeenCalledWith('https://github.com/example/package-with-readme');
+  });
+
+  return it("should open internal package repository url", function() {
+    loadPackageFromRemote('package-internal');
+    spyOn(shell, 'openExternal');
+    view.refs.packageRepo.click();
+    return expect(shell.openExternal).toHaveBeenCalledWith('https://github.com/pulsar-edit/pulsar/tree/master/packages/package-internal');
+  });
+});

packages/settings-view/spec/package-manager-spec.js

@@ -0,0 +1,355 @@
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
+ */
+const path = require('path');
+const process = require('process');
+const PackageManager = require('../lib/package-manager');
+
+describe("PackageManager", function() {
+  let [packageManager] = [];
+
+  beforeEach(function() {
+    spyOn(atom.packages, 'getApmPath').andReturn('/an/invalid/apm/command/to/run');
+    atom.config.set('core.useProxySettingsWhenCallingApm', false);
+    return packageManager = new PackageManager();
+  });
+
+  it("handle errors spawning apm", function() {
+    const noSuchCommandError = process.platform === 'win32' ? ' cannot find the path ' : 'ENOENT';
+    waitsForPromise({shouldReject: true}, () => packageManager.getInstalled());
+    waitsForPromise({shouldReject: true}, () => packageManager.getOutdated());
+    waitsForPromise({shouldReject: true}, () => packageManager.getFeatured());
+    waitsForPromise({shouldReject: true}, () => packageManager.getPackage('foo'));
+
+    const installCallback = jasmine.createSpy('installCallback');
+    const uninstallCallback = jasmine.createSpy('uninstallCallback');
+    const updateCallback = jasmine.createSpy('updateCallback');
+
+    runs(() => packageManager.install({name: 'foo', version: '1.0.0'}, installCallback));
+
+    waitsFor(() => installCallback.callCount === 1);
+
+    runs(function() {
+      const installArg = installCallback.argsForCall[0][0];
+      expect(installArg.message).toBe("Installing \u201Cfoo@1.0.0\u201D failed.");
+      expect(installArg.packageInstallError).toBe(true);
+      expect(installArg.stderr).toContain(noSuchCommandError);
+
+      return packageManager.uninstall({name: 'foo'}, uninstallCallback);
+    });
+
+    waitsFor(() => uninstallCallback.callCount === 1);
+
+    runs(function() {
+      const uninstallArg = uninstallCallback.argsForCall[0][0];
+      expect(uninstallArg.message).toBe("Uninstalling \u201Cfoo\u201D failed.");
+      expect(uninstallArg.stderr).toContain(noSuchCommandError);
+
+      return packageManager.update({name: 'foo'}, '1.0.0', updateCallback);
+    });
+
+    waitsFor(() => updateCallback.callCount === 1);
+
+    return runs(function() {
+      const updateArg = updateCallback.argsForCall[0][0];
+      expect(updateArg.message).toBe("Updating to \u201Cfoo@1.0.0\u201D failed.");
+      expect(updateArg.packageInstallError).toBe(true);
+      return expect(updateArg.stderr).toContain(noSuchCommandError);
+    });
+  });
+
+  describe("::isPackageInstalled()", function() {
+    it("returns false a package is not installed", () => expect(packageManager.isPackageInstalled('some-package')).toBe(false));
+
+    it("returns true when a package is loaded", function() {
+      spyOn(atom.packages, 'isPackageLoaded').andReturn(true);
+      return expect(packageManager.isPackageInstalled('some-package')).toBe(true);
+    });
+
+    return it("returns true when a package is disabled", function() {
+      spyOn(atom.packages, 'getAvailablePackageNames').andReturn(['some-package']);
+      return expect(packageManager.isPackageInstalled('some-package')).toBe(true);
+    });
+  });
+
+  describe("::install()", function() {
+    let [runArgs, runCallback] = [];
+
+    beforeEach(() => spyOn(packageManager, 'runCommand').andCallFake(function(args, callback) {
+      runArgs = args;
+      runCallback = callback;
+      return {onWillThrowError() {}};
+    }));
+
+    it("installs the latest version when a package version is not specified", function() {
+      packageManager.install({name: 'something'}, function() {});
+      expect(packageManager.runCommand).toHaveBeenCalled();
+      return expect(runArgs).toEqual(['install', 'something', '--json']);
+  });
+
+    it("installs the package@version when a version is specified", function() {
+      packageManager.install({name: 'something', version: '0.2.3'}, function() {});
+      expect(packageManager.runCommand).toHaveBeenCalled();
+      return expect(runArgs).toEqual(['install', 'something@0.2.3', '--json']);
+  });
+
+    return describe("git url installation", function() {
+      it('installs https:// urls', function() {
+        const url = "https://github.com/user/repo.git";
+        packageManager.install({name: url});
+        expect(packageManager.runCommand).toHaveBeenCalled();
+        return expect(runArgs).toEqual(['install', 'https://github.com/user/repo.git', '--json']);
+    });
+
+      it('installs git@ urls', function() {
+        const url = "git@github.com:user/repo.git";
+        packageManager.install({name: url});
+        expect(packageManager.runCommand).toHaveBeenCalled();
+        return expect(runArgs).toEqual(['install', 'git@github.com:user/repo.git', '--json']);
+    });
+
+      it('installs user/repo url shortcuts', function() {
+        const url = "user/repo";
+        packageManager.install({name: url});
+        expect(packageManager.runCommand).toHaveBeenCalled();
+        return expect(runArgs).toEqual(['install', 'user/repo', '--json']);
+    });
+
+      it('installs and activates git pacakges with names different from the repo name', function() {
+        spyOn(atom.packages, 'activatePackage');
+        packageManager.install({name: 'git-repo-name'});
+        const json = {
+          metadata: {
+            name: 'real-package-name'
+          }
+        };
+        runCallback(0, JSON.stringify([json]), '');
+        return expect(atom.packages.activatePackage).toHaveBeenCalledWith(json.metadata.name);
+      });
+
+      return it('emits an installed event with a copy of the pack including the full package metadata', function() {
+        spyOn(packageManager, 'emitPackageEvent');
+        const originalPackObject = {name: 'git-repo-name', otherData: {will: 'beCopied'}};
+        packageManager.install(originalPackObject);
+        const json = {
+          metadata: {
+            name: 'real-package-name',
+            moreInfo: 'yep'
+          }
+        };
+        runCallback(0, JSON.stringify([json]), '');
+
+        let installEmittedCount = 0;
+        for (let call of Array.from(packageManager.emitPackageEvent.calls)) {
+          if (call.args[0] === "installed") {
+            expect(call.args[1]).not.toEqual(originalPackObject);
+            expect(call.args[1].moreInfo).toEqual("yep");
+            expect(call.args[1].otherData).toBe(originalPackObject.otherData);
+            installEmittedCount++;
+          }
+        }
+        return expect(installEmittedCount).toBe(1);
+      });
+    });
+  });
+
+  describe("::uninstall()", function() {
+    let [runCallback] = [];
+
+    beforeEach(function() {
+      spyOn(packageManager, 'unload');
+      return spyOn(packageManager, 'runCommand').andCallFake(function(args, callback) {
+        runCallback = callback;
+        return {onWillThrowError() {}};
+      });
+    });
+
+    return it("removes the package from the core.disabledPackages list", function() {
+      atom.config.set('core.disabledPackages', ['something']);
+
+      packageManager.uninstall({name: 'something'}, function() {});
+
+      expect(atom.config.get('core.disabledPackages')).toContain('something');
+      runCallback(0, '', '');
+      return expect(atom.config.get('core.disabledPackages')).not.toContain('something');
+    });
+  });
+
+  describe("::packageHasSettings", function() {
+    it("returns true when the pacakge has config", function() {
+      atom.packages.loadPackage(path.join(__dirname, 'fixtures', 'package-with-config'));
+      return expect(packageManager.packageHasSettings('package-with-config')).toBe(true);
+    });
+
+    it("returns false when the pacakge does not have config and doesn't define language grammars", () => expect(packageManager.packageHasSettings('random-package')).toBe(false));
+
+    return it("returns true when the pacakge does not have config, but does define language grammars", function() {
+      const packageName = 'language-test';
+
+      waitsForPromise(() => atom.packages.activatePackage(path.join(__dirname, 'fixtures', packageName)));
+
+      return runs(() => expect(packageManager.packageHasSettings(packageName)).toBe(true));
+    });
+  });
+
+  return describe("::loadOutdated", function() {
+    it("caches results", function() {
+      spyOn(packageManager, 'runCommand').andCallFake(function(args, callback) {
+        callback(0, '[{"name": "boop"}]', '');
+        return {onWillThrowError() {}};
+      });
+
+      packageManager.loadOutdated(false, function() {});
+      expect(packageManager.apmCache.loadOutdated.value).toMatch([{"name": "boop"}]);
+
+      packageManager.loadOutdated(false, function() {});
+      return expect(packageManager.runCommand.calls.length).toBe(1);
+    });
+
+    it("expires results after a timeout", function() {
+      spyOn(packageManager, 'runCommand').andCallFake(function(args, callback) {
+        callback(0, '[{"name": "boop"}]', '');
+        return {onWillThrowError() {}};
+      });
+
+      packageManager.loadOutdated(false, function() {});
+      const now = Date.now();
+      if (!Date.now.andReturn) { spyOn(Date, 'now'); }
+      Date.now.andReturn(((() => now + packageManager.CACHE_EXPIRY + 1))());
+      packageManager.loadOutdated(false, function() {});
+
+      return expect(packageManager.runCommand.calls.length).toBe(2);
+    });
+
+    it("expires results after a package updated/installed", function() {
+      packageManager.apmCache.loadOutdated = {
+        value: ['hi'],
+        expiry: Date.now() + 999999999
+      };
+
+      spyOn(packageManager, 'runCommand').andCallFake(function(args, callback) {
+        callback(0, '[{"name": "boop"}]', '');
+        return {onWillThrowError() {}};
+      });
+
+      // Just prevent this stuff from calling through, it doesn't matter for this test
+      spyOn(atom.packages, 'deactivatePackage').andReturn(true);
+      spyOn(atom.packages, 'activatePackage').andReturn(true);
+      spyOn(atom.packages, 'unloadPackage').andReturn(true);
+      spyOn(atom.packages, 'loadPackage').andReturn(true);
+
+      packageManager.loadOutdated(false, function() {});
+      expect(packageManager.runCommand.calls.length).toBe(0);
+
+      packageManager.update({}, {}, function() {}); // +1 runCommand call to update the package
+      packageManager.loadOutdated(false, function() {}); // +1 runCommand call to load outdated because the cache should be wiped
+      expect(packageManager.runCommand.calls.length).toBe(2);
+
+      packageManager.install({}, function() {}); // +1 runCommand call to install the package
+      packageManager.loadOutdated(false, function() {}); // +1 runCommand call to load outdated because the cache should be wiped
+      expect(packageManager.runCommand.calls.length).toBe(4);
+
+      packageManager.loadOutdated(false, function() {}); // +0 runCommand call, should be cached
+      return expect(packageManager.runCommand.calls.length).toBe(4);
+    });
+
+    it("expires results if it is called with clearCache set to true", function() {
+      packageManager.apmCache.loadOutdated = {
+        value: ['hi'],
+        expiry: Date.now() + 999999999
+      };
+
+      spyOn(packageManager, 'runCommand').andCallFake(function(args, callback) {
+        callback(0, '[{"name": "boop"}]', '');
+        return {onWillThrowError() {}};
+      });
+
+      packageManager.loadOutdated(true, function() {});
+      expect(packageManager.runCommand.calls.length).toBe(1);
+      return expect(packageManager.apmCache.loadOutdated.value).toEqual([{"name": "boop"}]);
+  });
+
+    return describe("when there is a version pinned package", function() {
+      beforeEach(() => atom.config.set('core.versionPinnedPackages', ['beep']));
+
+      it("caches results", function() {
+        spyOn(packageManager, 'runCommand').andCallFake(function(args, callback) {
+          callback(0, '[{"name": "boop"}, {"name": "beep"}]', '');
+          return {onWillThrowError() {}};
+        });
+
+        packageManager.loadOutdated(false, function() {});
+        expect(packageManager.apmCache.loadOutdated.value).toMatch([{"name": "boop"}]);
+
+        packageManager.loadOutdated(false, function() {});
+        return expect(packageManager.runCommand.calls.length).toBe(1);
+      });
+
+      it("expires results after a timeout", function() {
+        spyOn(packageManager, 'runCommand').andCallFake(function(args, callback) {
+          callback(0, '[{"name": "boop"}, {"name": "beep"}]', '');
+          return {onWillThrowError() {}};
+        });
+
+        packageManager.loadOutdated(false, function() {});
+        const now = Date.now();
+        if (!Date.now.andReturn) { spyOn(Date, 'now'); }
+        Date.now.andReturn(((() => now + packageManager.CACHE_EXPIRY + 1))());
+        packageManager.loadOutdated(false, function() {});
+
+        return expect(packageManager.runCommand.calls.length).toBe(2);
+      });
+
+      it("expires results after a package updated/installed", function() {
+        packageManager.apmCache.loadOutdated = {
+          value: ['hi'],
+          expiry: Date.now() + 999999999
+        };
+
+        spyOn(packageManager, 'runCommand').andCallFake(function(args, callback) {
+          callback(0, '[{"name": "boop"}, {"name": "beep"}]', '');
+          return {onWillThrowError() {}};
+        });
+
+        // Just prevent this stuff from calling through, it doesn't matter for this test
+        spyOn(atom.packages, 'deactivatePackage').andReturn(true);
+        spyOn(atom.packages, 'activatePackage').andReturn(true);
+        spyOn(atom.packages, 'unloadPackage').andReturn(true);
+        spyOn(atom.packages, 'loadPackage').andReturn(true);
+
+        packageManager.loadOutdated(false, function() {});
+        expect(packageManager.runCommand.calls.length).toBe(0);
+
+        packageManager.update({}, {}, function() {}); // +1 runCommand call to update the package
+        packageManager.loadOutdated(false, function() {}); // +1 runCommand call to load outdated because the cache should be wiped
+        expect(packageManager.runCommand.calls.length).toBe(2);
+
+        packageManager.install({}, function() {}); // +1 runCommand call to install the package
+        packageManager.loadOutdated(false, function() {}); // +1 runCommand call to load outdated because the cache should be wiped
+        expect(packageManager.runCommand.calls.length).toBe(4);
+
+        packageManager.loadOutdated(false, function() {}); // +0 runCommand call, should be cached
+        return expect(packageManager.runCommand.calls.length).toBe(4);
+      });
+
+      return it("expires results if it is called with clearCache set to true", function() {
+        packageManager.apmCache.loadOutdated = {
+          value: ['hi'],
+          expiry: Date.now() + 999999999
+        };
+
+        spyOn(packageManager, 'runCommand').andCallFake(function(args, callback) {
+          callback(0, '[{"name": "boop"}, {"name": "beep"}]', '');
+          return {onWillThrowError() {}};
+        });
+
+        packageManager.loadOutdated(true, function() {});
+        expect(packageManager.runCommand.calls.length).toBe(1);
+        return expect(packageManager.apmCache.loadOutdated.value).toEqual([{"name": "boop"}]);
+    });
+  });
+});
+});

packages/settings-view/spec/package-updates-status-view-spec.js

@@ -0,0 +1,157 @@
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
+ */
+const PackageManager = require('../lib/package-manager');
+const PackageUpdatesStatusView = require('../lib/package-updates-status-view');
+
+describe("PackageUpdatesStatusView", function() {
+  let [statusBar, statusView, packageManager] = [];
+
+  const outdatedPackage1 =
+    {name: 'out-dated-1'};
+  const outdatedPackage2 =
+    {name: 'out-dated-2'};
+  const installedPackage =
+    {name: 'user-package'};
+
+  beforeEach(function() {
+    spyOn(PackageManager.prototype, 'loadCompatiblePackageVersion').andCallFake(function() {});
+    spyOn(PackageManager.prototype, 'getInstalled').andCallFake(() => Promise.resolve([installedPackage]));
+    spyOn(PackageManager.prototype, 'getOutdated').andCallFake(() => Promise.resolve([outdatedPackage1, outdatedPackage2]));
+    spyOn(PackageUpdatesStatusView.prototype, 'initialize').andCallThrough();
+    jasmine.attachToDOM(atom.views.getView(atom.workspace));
+
+    waitsForPromise(() => atom.packages.activatePackage('status-bar'));
+
+    waitsForPromise(() => atom.packages.activatePackage('settings-view'));
+
+    return runs(function() {
+      atom.packages.emitter.emit('did-activate-all');
+      expect(document.querySelector('status-bar .package-updates-status-view')).toExist();
+
+      return packageManager = PackageUpdatesStatusView.prototype.initialize.mostRecentCall.args[1];});});
+
+  describe("when packages are outdated", () => it("adds a tile to the status bar", () => expect(document.querySelector('status-bar .package-updates-status-view').textContent).toBe('2 updates')));
+
+  describe("when the tile is clicked", function() {
+    it("opens the Available Updates panel", function() {
+      spyOn(atom.commands, 'dispatch').andCallFake(function() {});
+
+      document.querySelector('status-bar .package-updates-status-view').click();
+      return expect(atom.commands.dispatch).toHaveBeenCalledWith(atom.views.getView(atom.workspace), 'settings-view:check-for-package-updates');
+    });
+
+    return it("does not destroy the tile", function() {
+      document.querySelector('status-bar .package-updates-status-view').click();
+      return expect(document.querySelector('status-bar .package-updates-status-view')).toExist();
+    });
+  });
+
+  describe("when a package is updating", () => it("updates the tile", function() {
+    packageManager.emitPackageEvent('updating', outdatedPackage1);
+    return expect(document.querySelector('status-bar .package-updates-status-view').textContent).toBe('1/2 updating');
+  }));
+
+  describe("when a package finishes updating", () => it("updates the tile", function() {
+    packageManager.emitPackageEvent('updating', outdatedPackage1);
+    packageManager.emitPackageEvent('updated', outdatedPackage1);
+    return expect(document.querySelector('status-bar .package-updates-status-view').textContent).toBe('1 update');
+  }));
+
+  describe("when a package is updated without a prior updating event", () => it("updates the tile", function() {
+    packageManager.emitPackageEvent('updated', outdatedPackage1);
+    return expect(document.querySelector('status-bar .package-updates-status-view').textContent).toBe('1 update');
+  }));
+
+  describe("when multiple packages are updating and one finishes", () => it("updates the tile", function() {
+    packageManager.emitPackageEvent('updating', outdatedPackage1);
+    packageManager.emitPackageEvent('updating', outdatedPackage2);
+    packageManager.emitPackageEvent('updated', outdatedPackage1);
+    return expect(document.querySelector('status-bar .package-updates-status-view').textContent).toBe('1/1 updating');
+  }));
+
+  describe("when a package fails to update", () => it("updates the tile", function() {
+    packageManager.emitPackageEvent('updating', outdatedPackage1);
+    packageManager.emitPackageEvent('update-failed', outdatedPackage1);
+    return expect(document.querySelector('status-bar .package-updates-status-view').textContent).toBe('2 updates (1 failed)');
+  }));
+
+  describe("when a package that previously failed to update starts updating again", () => it("updates the tile", function() {
+    packageManager.emitPackageEvent('updating', outdatedPackage1);
+    packageManager.emitPackageEvent('update-failed', outdatedPackage1);
+    packageManager.emitPackageEvent('updating', outdatedPackage1);
+    expect(document.querySelector('status-bar .package-updates-status-view').textContent).toBe('1/2 updating');
+    packageManager.emitPackageEvent('update-failed', outdatedPackage1);
+    return expect(document.querySelector('status-bar .package-updates-status-view').textContent).toBe('2 updates (1 failed)');
+  }));
+
+  describe("when a package update that previously failed succeeds on a subsequent try", () => it("updates the tile", function() {
+    packageManager.emitPackageEvent('update-failed', outdatedPackage1);
+    packageManager.emitPackageEvent('updated', outdatedPackage1);
+    return expect(document.querySelector('status-bar .package-updates-status-view').textContent).toBe('1 update');
+  }));
+
+  describe("when multiple events are happening at the same time", () => it("updates the tile", function() {
+    packageManager.emitPackageEvent('update-available', installedPackage);
+    packageManager.emitPackageEvent('updating', outdatedPackage1);
+    packageManager.emitPackageEvent('update-failed', outdatedPackage2);
+    return expect(document.querySelector('status-bar .package-updates-status-view').textContent).toBe('1/3 updating (1 failed)');
+  }));
+
+  describe("when there are no more updates", () => it("destroys the tile", function() {
+    packageManager.emitPackageEvent('updated', outdatedPackage1);
+    packageManager.emitPackageEvent('updated', outdatedPackage2);
+    return expect(document.querySelector('status-bar .package-updates-status-view')).not.toExist();
+  }));
+
+  describe("when a new update becomes available and the tile is destroyed", () => it("recreates the tile", function() {
+    packageManager.emitPackageEvent('updated', outdatedPackage1);
+    packageManager.emitPackageEvent('updated', outdatedPackage2);
+    packageManager.emitPackageEvent('update-available', installedPackage);
+    expect(document.querySelector('status-bar .package-updates-status-view')).toExist();
+    return expect(document.querySelector('status-bar .package-updates-status-view').textContent).toBe('1 update');
+  }));
+
+  describe("when an update becomes available for a package", () => it("updates the tile", function() {
+    packageManager.emitPackageEvent('update-available', installedPackage);
+    return expect(document.querySelector('status-bar .package-updates-status-view').textContent).toBe('3 updates');
+  }));
+
+  describe("when updates are checked for multiple times and no new updates are available", () => it("does not keep updating the tile", function() {
+    packageManager.emitPackageEvent('update-available', outdatedPackage1);
+    packageManager.emitPackageEvent('update-available', outdatedPackage1);
+    packageManager.emitPackageEvent('update-available', outdatedPackage1);
+    expect(document.querySelector('status-bar .package-updates-status-view').textContent).toBe('2 updates');
+
+    // There are more fields in an actual package object,
+    // so make sure only name is tested and not object equality
+    packageManager.emitPackageEvent('update-available', {name: 'out-dated-1', date: Date.now()});
+    return expect(document.querySelector('status-bar .package-updates-status-view').textContent).toBe('2 updates');
+  }));
+
+  describe("when the same update fails multiple times", () => it("does not keep updating the tile", function() {
+    packageManager.emitPackageEvent('update-failed', outdatedPackage1);
+    packageManager.emitPackageEvent('update-failed', outdatedPackage1);
+    packageManager.emitPackageEvent('update-failed', outdatedPackage1);
+    return expect(document.querySelector('status-bar .package-updates-status-view').textContent).toBe('2 updates (1 failed)');
+  }));
+
+  describe("when a package that can be updated is uninstalled", () => it("updates the tile", function() {
+    packageManager.emitPackageEvent('uninstalled', outdatedPackage1);
+    return expect(document.querySelector('status-bar .package-updates-status-view').textContent).toBe('1 update');
+  }));
+
+  describe("when a package that is updating is uninstalled", () => it("updates the tile", function() {
+    packageManager.emitPackageEvent('updating', outdatedPackage1);
+    packageManager.emitPackageEvent('uninstalled', outdatedPackage1);
+    return expect(document.querySelector('status-bar .package-updates-status-view').textContent).toBe('1 update');
+  }));
+
+  return describe("when a package that failed to update is uninstalled", () => it("updates the tile", function() {
+    packageManager.emitPackageEvent('update-failed', outdatedPackage1);
+    packageManager.emitPackageEvent('uninstalled', outdatedPackage1);
+    return expect(document.querySelector('status-bar .package-updates-status-view').textContent).toBe('1 update');
+  }));
+});

packages/settings-view/spec/rich-description-spec.js

@@ -0,0 +1,170 @@
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
+ */
+const {getSettingDescription} = require('../lib/rich-description');
+
+describe("Rich descriptions", function() {
+  beforeEach(function() {
+    const config = {
+      type: 'object',
+      properties: {
+        plainText: {
+          description: 'Plain text description',
+          type: 'string',
+          default: ''
+        },
+        italics: {
+          description: 'Description *with* italics',
+          type: 'string',
+          default: ''
+        },
+        bold: {
+          description: 'Description **with** bold',
+          type: 'string',
+          default: ''
+        },
+        link: {
+          description: 'Description [with](http://www.example.com) link',
+          type: 'string',
+          default: ''
+        },
+        inlineCode: {
+          description: 'Description `with` inline code',
+          type: 'string',
+          default: ''
+        },
+        lineBreak: {
+          description: 'Description with<br/> line break',
+          type: 'string',
+          default: ''
+        },
+        strikethrough: {
+          description: 'Description ~~with~~ strikethrough',
+          type: 'string',
+          default: ''
+        },
+        image: {
+          description: 'Description without ![alt text](https://github.com/adam-p/markdown-here/raw/master/src/common/images/icon48.png "Logo Title Text 1") image',
+          type: 'string',
+          default: ''
+        },
+        fencedBlockCode: {
+          description: `Description without fenced block code
+\`\`\`
+Test
+\`\`\`\
+`,
+          type: 'string',
+          default: ''
+        },
+        indentedBlockCode: {
+          description: `\
+Description without indented block code
+
+    Test\
+`,
+          type: 'string',
+          default: ''
+        },
+        blockquote: {
+          description: `\
+Description without blockquote
+
+> Test\
+`,
+          type: 'string',
+          default: ''
+        },
+        html: {
+          description: `\
+Description without html
+
+<html>Test</html>\
+`,
+          type: 'string',
+          default: ''
+        },
+        heading: {
+          description: `\
+Description without heading
+
+## Test\
+`,
+          type: 'string',
+          default: ''
+        },
+        orderedList: {
+          description: `\
+Description without ordered list
+
+1. Test
+2. Test
+3. Test\
+`,
+          type: 'string',
+          default: ''
+        },
+        unorderedList: {
+          description: `\
+Description without unordered list
+
+* Test
+* Test
+* Test\
+`,
+          type: 'string',
+          default: ''
+        },
+        table: {
+          description: `\
+Description without table
+
+<table><tr><td>Test</td></tr></table>\
+`,
+          type: 'string',
+          default: ''
+        }
+      }
+    };
+
+    return atom.config.setSchema("foo", config);
+  });
+
+  describe('supported Markdown', function() {
+    it('handles plain text', () => expect(getSettingDescription('foo.plainText')).toEqual('Plain text description'));
+
+    it('handles italics', () => expect(getSettingDescription('foo.italics')).toEqual('Description <em>with</em> italics'));
+
+    it('handles bold', () => expect(getSettingDescription('foo.bold')).toEqual('Description <strong>with</strong> bold'));
+
+    it('handles links', () => expect(getSettingDescription('foo.link')).toEqual('Description <a href="http://www.example.com">with</a> link'));
+
+    it('handles inline code', () => expect(getSettingDescription('foo.inlineCode')).toEqual('Description <code>with</code> inline code'));
+
+    it('handles line breaks', () => expect(getSettingDescription('foo.lineBreak')).toEqual('Description with<br/> line break'));
+
+    return it('handles strikethrough', () => expect(getSettingDescription('foo.strikethrough')).toEqual('Description <del>with</del> strikethrough'));
+  });
+
+  return describe('unsupported Markdown', function() {
+    it('strips images', () => expect(getSettingDescription('foo.image')).toEqual('Description without  image'));
+
+    it('strips fenced code blocks', () => expect(getSettingDescription('foo.fencedBlockCode')).toEqual('Description without fenced block code'));
+
+    it('strips indented code blocks', () => expect(getSettingDescription('foo.indentedBlockCode')).toEqual('Description without indented block code'));
+
+    it('strips blockquotes', () => expect(getSettingDescription('foo.blockquote')).toEqual('Description without blockquote'));
+
+    it('strips html elements', () => expect(getSettingDescription('foo.html')).toEqual('Description without html'));
+
+    it('strips headings', () => expect(getSettingDescription('foo.heading')).toEqual('Description without heading'));
+
+    it('strips ordered lists', () => expect(getSettingDescription('foo.orderedList')).toEqual('Description without ordered list'));
+
+    it('strips unordered lists', () => expect(getSettingDescription('foo.unorderedList')).toEqual('Description without unordered list'));
+
+    return it('strips tables', () => expect(getSettingDescription('foo.table')).toEqual('Description without table'));
+  });
+});

packages/settings-view/spec/settings-panel-spec.js

@@ -0,0 +1,474 @@
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS205: Consider reworking code to avoid use of IIFEs
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
+ */
+const SettingsPanel = require('../lib/settings-panel');
+const _ = require('underscore-plus');
+
+describe("SettingsPanel", function() {
+  let settingsPanel = null;
+
+  describe("sorted settings", function() {
+    beforeEach(function() {
+      const config = {
+        type: 'object',
+        properties: {
+          bar: {
+            title: 'Bar',
+            description: 'The bar setting',
+            type: 'boolean',
+            default: true
+          },
+          haz: {
+            title: 'Haz',
+            description: 'The haz setting',
+            type: 'string',
+            default: 'haz'
+          },
+          zing: {
+            title: 'Zing',
+            description: 'The zing setting',
+            type: 'string',
+            default: 'zing',
+            order: 1
+          },
+          zang: {
+            title: 'Zang',
+            description: 'The baz setting',
+            type: 'string',
+            default: 'zang',
+            order: 100
+          },
+          enum: {
+            title: 'An enum',
+            type: 'string',
+            default: 'one',
+            enum: [
+              {value: 'one', description: 'One'},
+              'Two'
+            ]
+          },
+          radio: {
+            title: 'An enum with radio buttons',
+            radio: true,
+            type: 'string',
+            default: 'Two',
+            enum: [
+              {value: 'one', description: 'One'},
+              'Two'
+            ]
+          }
+        }
+      };
+      atom.config.setSchema("foo", config);
+      atom.config.setDefaults("foo", {gong: 'gong'});
+      expect(_.size(atom.config.get('foo'))).toBe(7);
+      return settingsPanel = new SettingsPanel({namespace: "foo", includeTitle: false});
+    });
+
+    it("sorts settings by order and then alphabetically by the key", function() {
+      const settings = atom.config.get('foo');
+      expect(_.size(settings)).toBe(7);
+      const sortedSettings = settingsPanel.sortSettings("foo", settings);
+      expect(sortedSettings[0]).toBe('zing');
+      expect(sortedSettings[1]).toBe('zang');
+      expect(sortedSettings[2]).toBe('bar');
+      expect(sortedSettings[3]).toBe('enum');
+      expect(sortedSettings[4]).toBe('gong');
+      expect(sortedSettings[5]).toBe('haz');
+      return expect(sortedSettings[6]).toBe('radio');
+    });
+
+    it("gracefully deals with a null settings object", function() {
+      const sortedSettings = settingsPanel.sortSettings("foo", null);
+      expect(sortedSettings).not.toBeNull;
+      return expect(_.size(sortedSettings)).toBe(0);
+    });
+
+    it("presents enum options with their descriptions", function() {
+      const select = settingsPanel.element.querySelector('#foo\\.enum');
+      const pairs = (Array.from(select.children).map((opt) => [opt.value, opt.innerText]));
+      return expect(pairs).toEqual([['one', 'One'], ['Two', 'Two']]);
+    });
+
+    return it("presents radio options with their descriptions", function() {
+      const radio = settingsPanel.element.querySelector('#foo\\.radio');
+      const options = (() => {
+        const result = [];
+        for (let label of Array.from(radio.querySelectorAll('label'))) {
+          const button = label.querySelector('input[type=radio][name="foo.radio"]');
+          result.push([button.id, button.value, label.innerText]);
+        }
+        return result;
+      })();
+      return expect(options).toEqual([['foo.radio[one]', 'one', 'One'], ['foo.radio[Two]', 'Two', 'Two']]);
+    });
+  });
+
+  describe('default settings', function() {
+    beforeEach(function() {
+      const config = {
+        type: 'object',
+        properties: {
+          haz: {
+            name: 'haz',
+            title: 'Haz',
+            description: 'The haz setting',
+            type: 'string',
+            default: 'haz'
+          },
+          qux: {
+            name: 'qux',
+            title: 'Qux',
+            description: 'The qux setting',
+            type: 'string',
+            default: 'a',
+            enum: [
+              {value: 'a', description: 'Alice'},
+              {value: 'b', description: 'Bob'}
+            ]
+          },
+          testZero: {
+            name: 'testZero',
+            title: 'Test Zero',
+            description: 'Setting for testing zero as a default',
+            type: 'integer',
+            default: 0
+          },
+          radio: {
+            title: 'An enum with radio buttons',
+            radio: true,
+            type: 'string',
+            default: 'Two',
+            enum: [
+              {value: 'one', description: 'One'},
+              'Two',
+              'Three'
+            ]
+          }
+        }
+      };
+      atom.config.setSchema("foo", config);
+      atom.config.setDefaults("foo", {gong: 'gong'});
+      expect(_.size(atom.config.get('foo'))).toBe(5);
+      return settingsPanel = new SettingsPanel({namespace: "foo", includeTitle: false});
+    });
+
+    it('ensures default stays default', function() {
+      expect(settingsPanel.getDefault('foo.haz')).toBe('haz');
+      expect(settingsPanel.isDefault('foo.haz')).toBe(true);
+      settingsPanel.set('foo.haz', 'haz');
+      return expect(settingsPanel.isDefault('foo.haz')).toBe(true);
+    });
+
+    it('can be overwritten', function() {
+      expect(settingsPanel.getDefault('foo.haz')).toBe('haz');
+      expect(settingsPanel.isDefault('foo.haz')).toBe(true);
+      settingsPanel.set('foo.haz', 'newhaz');
+      expect(settingsPanel.isDefault('foo.haz')).toBe(false);
+      return expect(atom.config.get('foo.haz')).toBe('newhaz');
+    });
+
+    it("ignores project-specific overrides", function() {
+      atom.project.replace({
+        originPath: 'TEST',
+        config: {
+          foo: {
+            haz: 'newhaz'
+          }
+        }
+      });
+      expect(settingsPanel.isDefault('foo.haz')).toBe(true);
+      return expect(atom.config.get('foo.haz')).toBe('newhaz');
+    });
+
+    it('has a tooltip showing the default value', function() {
+      const hazEditor = settingsPanel.element.querySelector('[id="foo.haz"]');
+      const tooltips = atom.tooltips.findTooltips(hazEditor);
+      expect(tooltips).toHaveLength(1);
+      const {
+        title
+      } = tooltips[0].options;
+      return expect(title).toBe("Default: haz");
+    });
+
+    it('has a tooltip showing the description of the default value', function() {
+      const quxEditor = settingsPanel.element.querySelector('[id="foo.qux"]');
+      const tooltips = atom.tooltips.findTooltips(quxEditor);
+      expect(tooltips).toHaveLength(1);
+      const {
+        title
+      } = tooltips[0].options;
+      return expect(title).toBe("Default: Alice");
+    });
+
+    // Regression test for #783
+    it('allows 0 to be a default', function() {
+      const zeroEditor = settingsPanel.element.querySelector('[id="foo.testZero"]');
+      expect(zeroEditor.getModel().getText()).toBe('');
+      expect(zeroEditor.getModel().getPlaceholderText()).toBe('Default: 0');
+
+      expect(settingsPanel.getDefault('foo.testZero')).toBe(0);
+      expect(settingsPanel.isDefault('foo.testZero')).toBe(true);
+
+      settingsPanel.set('foo.testZero', 15);
+      expect(settingsPanel.isDefault('foo.testZero')).toBe(false);
+
+      settingsPanel.set('foo.testZero', 0);
+      return expect(settingsPanel.isDefault('foo.testZero')).toBe(true);
+    });
+
+    it("selects the default choice for radio options", function() {
+      expect(settingsPanel.getDefault('foo.radio')).toBe('Two');
+      settingsPanel.set('foo.radio', 'Two');
+      return expect(settingsPanel.element.querySelector('#foo\\.radio\\[Two\\]')).toBeChecked();
+    });
+
+    return describe('scoped settings', function() {
+      beforeEach(function() {
+        const schema = {
+          scopes: {
+            '.source.python': {
+              default: 4
+            }
+          }
+        };
+
+        atom.config.setScopedDefaultsFromSchema('editor.tabLength', schema);
+        return expect(atom.config.get('editor.tabLength')).toBe(2);
+      });
+
+      it('displays the scoped default', function() {
+        settingsPanel = new SettingsPanel({namespace: "editor", includeTitle: false, scopeName: '.source.python'});
+        const tabLengthEditor = settingsPanel.element.querySelector('[id="editor.tabLength"]');
+        expect(tabLengthEditor.getModel().getText()).toBe('');
+        return expect(tabLengthEditor.getModel().getPlaceholderText()).toBe('Default: 4');
+      });
+
+      it('allows the scoped setting to be changed to its normal default if the unscoped value is different', function() {
+        atom.config.set('editor.tabLength', 8);
+
+        settingsPanel = new SettingsPanel({namespace: "editor", includeTitle: false, scopeName: '.source.js'});
+        const tabLengthEditor = settingsPanel.element.querySelector('[id="editor.tabLength"]');
+        expect(tabLengthEditor.getModel().getText()).toBe('');
+        expect(tabLengthEditor.getModel().getPlaceholderText()).toBe('Default: 8');
+
+        // This is the unscoped default, but it differs from the current unscoped value
+        settingsPanel.set('editor.tabLength', 2);
+        expect(tabLengthEditor.getModel().getText()).toBe('2');
+        return expect(atom.config.get('editor.tabLength', {scope: ['source.js']})).toBe(2);
+      });
+
+      return it('allows the scoped setting to be changed to the unscoped default if it is different', function() {
+        settingsPanel = new SettingsPanel({namespace: "editor", includeTitle: false, scopeName: '.source.python'});
+        const tabLengthEditor = settingsPanel.element.querySelector('[id="editor.tabLength"]');
+        expect(tabLengthEditor.getModel().getText()).toBe('');
+        expect(tabLengthEditor.getModel().getPlaceholderText()).toBe('Default: 4');
+
+        // This is the unscoped default, but it differs from the scoped default
+        settingsPanel.set('editor.tabLength', 2);
+        expect(tabLengthEditor.getModel().getText()).toBe('2');
+        return expect(atom.config.get('editor.tabLength', {scope: ['source.python']})).toBe(2);
+      });
+    });
+  });
+
+  describe('grouped settings', function() {
+    beforeEach(function() {
+      const config = {
+        type: 'object',
+        properties: {
+          barGroup: {
+            type: 'object',
+            title: 'Bar group',
+            description: 'description of bar group',
+            properties: {
+              bar: {
+                title: 'Bar',
+                description: 'The bar setting',
+                type: 'boolean',
+                default: false
+              }
+            }
+          },
+          bazGroup: {
+            type: 'object',
+            collapsed: true,
+            properties: {
+              baz: {
+                title: 'Baz',
+                description: 'The baz setting',
+                type: 'boolean',
+                default: false
+              }
+            }
+          },
+          zing: {
+            type: 'string',
+            default: ''
+          }
+        }
+      };
+      atom.config.setSchema('foo', config);
+      expect(_.size(atom.config.get('foo'))).toBe(3);
+      return settingsPanel = new SettingsPanel({namespace: 'foo', includeTitle: false});
+    });
+
+    it('ensures that only grouped settings have a group title', function() {
+      expect(settingsPanel.element.querySelectorAll('.section-container > .section-body')).toHaveLength(1);
+      const controlGroups = settingsPanel.element.querySelectorAll('.section-body > .control-group');
+      expect(controlGroups).toHaveLength(3);
+      expect(controlGroups[0].querySelectorAll('.sub-section .sub-section-heading')).toHaveLength(1);
+      expect(controlGroups[0].querySelector('.sub-section .sub-section-heading').textContent).toBe('Bar group');
+      expect(controlGroups[0].querySelectorAll('.sub-section .sub-section-body')).toHaveLength(1);
+      let subsectionBody = controlGroups[0].querySelector('.sub-section .sub-section-body');
+      expect(subsectionBody.querySelectorAll('.control-group')).toHaveLength(1);
+      expect(controlGroups[1].querySelectorAll('.sub-section .sub-section-heading')).toHaveLength(1);
+      expect(controlGroups[1].querySelector('.sub-section .sub-section-heading').textContent).toBe('Baz Group');
+      expect(controlGroups[1].querySelectorAll('.sub-section .sub-section-body')).toHaveLength(1);
+      subsectionBody = controlGroups[1].querySelector('.sub-section .sub-section-body');
+      expect(subsectionBody.querySelectorAll('.control-group')).toHaveLength(1);
+      expect(controlGroups[2].querySelectorAll('.sub-section')).toHaveLength(0);
+      return expect(controlGroups[2].querySelectorAll('.sub-section-heading')).toHaveLength(0);
+    });
+
+    it('ensures grouped settings are collapsable', function() {
+      expect(settingsPanel.element.querySelectorAll('.section-container > .section-body')).toHaveLength(1);
+      const controlGroups = settingsPanel.element.querySelectorAll('.section-body > .control-group');
+      expect(controlGroups).toHaveLength(3);
+      // Bar group
+      expect(controlGroups[0].querySelectorAll('.sub-section .sub-section-heading')).toHaveLength(1);
+      expect(controlGroups[0].querySelector('.sub-section .sub-section-heading').classList.contains('has-items')).toBe(true);
+      // Baz Group
+      expect(controlGroups[1].querySelectorAll('.sub-section .sub-section-heading')).toHaveLength(1);
+      expect(controlGroups[1].querySelector('.sub-section .sub-section-heading').classList.contains('has-items')).toBe(true);
+      // Should be already collapsed
+      return expect(controlGroups[1].querySelector('.sub-section .sub-section-heading').parentElement.classList.contains('collapsed')).toBe(true);
+    });
+
+    return it('ensures grouped settings can have a description', function() {
+      expect(settingsPanel.element.querySelectorAll('.section-container > .section-body')).toHaveLength(1);
+      const controlGroups = settingsPanel.element.querySelectorAll('.section-body > .control-group');
+      expect(controlGroups).toHaveLength(3);
+      expect(controlGroups[0].querySelectorAll('.sub-section > .setting-description')).toHaveLength(1);
+      return expect(controlGroups[0].querySelector('.sub-section > .setting-description').textContent).toBe('description of bar group');
+    });
+  });
+
+  return describe('settings validation', function() {
+    beforeEach(function() {
+      const config = {
+        type: 'object',
+        properties: {
+          minMax: {
+            name: 'minMax',
+            title: 'Min max',
+            description: 'The minMax setting',
+            type: 'integer',
+            default: 10,
+            minimum: 1,
+            maximum: 100
+          },
+          commaValueArray: {
+            name: 'commaValueArray',
+            title: 'Comma value in array',
+            description: 'An array with a comma value',
+            type: 'array',
+            default: []
+          }
+        }
+      };
+
+      atom.config.setSchema('foo', config);
+      return settingsPanel = new SettingsPanel({namespace: 'foo', includeTitle: false});
+    });
+
+    it('prevents setting a value below the minimum', function() {
+      const minMaxEditor = settingsPanel.element.querySelector('[id="foo.minMax"]');
+      minMaxEditor.getModel().setText('0');
+      advanceClock(minMaxEditor.getModel().getBuffer().getStoppedChangingDelay());
+      expect(minMaxEditor.getModel().getText()).toBe('1');
+
+      minMaxEditor.getModel().setText('-5');
+      advanceClock(minMaxEditor.getModel().getBuffer().getStoppedChangingDelay());
+      return expect(minMaxEditor.getModel().getText()).toBe('1');
+    });
+
+    it('prevents setting a value above the maximum', function() {
+      const minMaxEditor = settingsPanel.element.querySelector('[id="foo.minMax"]');
+      minMaxEditor.getModel().setText('1000');
+      advanceClock(minMaxEditor.getModel().getBuffer().getStoppedChangingDelay());
+      expect(minMaxEditor.getModel().getText()).toBe('100');
+
+      minMaxEditor.getModel().setText('10000');
+      advanceClock(minMaxEditor.getModel().getBuffer().getStoppedChangingDelay());
+      return expect(minMaxEditor.getModel().getText()).toBe('100');
+    });
+
+    it('prevents setting a value that cannot be coerced to the correct type', function() {
+      const minMaxEditor = settingsPanel.element.querySelector('[id="foo.minMax"]');
+      minMaxEditor.getModel().setText('"abcde"');
+      advanceClock(minMaxEditor.getModel().getBuffer().getStoppedChangingDelay());
+      expect(minMaxEditor.getModel().getText()).toBe(''); // aka default
+
+      minMaxEditor.getModel().setText('15');
+      advanceClock(minMaxEditor.getModel().getBuffer().getStoppedChangingDelay());
+      expect(minMaxEditor.getModel().getText()).toBe('15');
+
+      minMaxEditor.getModel().setText('"abcde"');
+      advanceClock(minMaxEditor.getModel().getBuffer().getStoppedChangingDelay());
+      return expect(minMaxEditor.getModel().getText()).toBe('15');
+    });
+
+    it('allows setting a valid scoped value', function() {
+      settingsPanel = new SettingsPanel({namespace: 'foo', includeTitle: false, scopeName: 'source.js'});
+      const minMaxEditor = settingsPanel.element.querySelector('atom-text-editor');
+      minMaxEditor.getModel().setText('15');
+      advanceClock(minMaxEditor.getModel().getBuffer().getStoppedChangingDelay());
+      return expect(minMaxEditor.getModel().getText()).toBe('15');
+    });
+
+    return describe('commaValueArray', function() {
+      it('comma in value is escaped', function() {
+        const commaValueArrayEditor = settingsPanel.element.querySelector('[id="foo.commaValueArray"]');
+        commaValueArrayEditor.getModel().setText('1, \\,, 2');
+        advanceClock(commaValueArrayEditor.getModel().getBuffer().getStoppedChangingDelay());
+        expect(atom.config.get("foo.commaValueArray")).toEqual(['1', ',', '2']);
+
+        commaValueArrayEditor.getModel().setText('1\\, 2');
+        advanceClock(commaValueArrayEditor.getModel().getBuffer().getStoppedChangingDelay());
+        expect(atom.config.get('foo.commaValueArray')).toEqual(['1, 2']);
+
+        commaValueArrayEditor.getModel().setText('1\\,');
+        advanceClock(commaValueArrayEditor.getModel().getBuffer().getStoppedChangingDelay());
+        expect(atom.config.get('foo.commaValueArray')).toEqual(['1,']);
+
+        commaValueArrayEditor.getModel().setText('\\, 2');
+        advanceClock(commaValueArrayEditor.getModel().getBuffer().getStoppedChangingDelay());
+        return expect(atom.config.get('foo.commaValueArray')).toEqual([', 2']);
+    });
+
+      return it('renders an escaped comma', function() {
+        const commaValueArrayEditor = settingsPanel.element.querySelector('[id="foo.commaValueArray"]');
+        atom.config.set('foo.commaValueArray', ['3', ',', '4']);
+        advanceClock(1000);
+        expect(commaValueArrayEditor.getModel().getText()).toBe('3, \\,, 4');
+
+        atom.config.set('foo.commaValueArray', ['3, 4']);
+        advanceClock(1000);
+        expect(commaValueArrayEditor.getModel().getText()).toBe('3\\, 4');
+
+        atom.config.set('foo.commaValueArray', ['3,']);
+        advanceClock(1000);
+        expect(commaValueArrayEditor.getModel().getText()).toBe('3\\,');
+
+        atom.config.set('foo.commaValueArray', [', 4']);
+        advanceClock(1000);
+        return expect(commaValueArrayEditor.getModel().getText()).toBe('\\, 4');
+      });
+    });
+  });
+});

packages/settings-view/spec/settings-view-spec.js

@@ -0,0 +1,536 @@
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * DS207: Consider shorter variations of null checks
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
+ */
+const path = require('path');
+const main = require('../lib/main');
+const PackageManager = require('../lib/package-manager');
+const SettingsView = require('../lib/settings-view');
+const SnippetsProvider =
+  {getSnippets() { return {}; }};
+
+describe("SettingsView", function() {
+  let settingsView = null;
+  const packageManager = new PackageManager();
+
+  beforeEach(function() {
+    settingsView = main.createSettingsView({packageManager, snippetsProvider: SnippetsProvider});
+    spyOn(settingsView, "initializePanels").andCallThrough();
+    window.advanceClock(10000);
+    return waitsFor(() => settingsView.initializePanels.callCount > 0);
+  });
+
+  describe("serialization", function() {
+    it("remembers which panel was visible", function() {
+      settingsView.showPanel('Themes');
+      const newSettingsView = main.createSettingsView(settingsView.serialize());
+      settingsView.destroy();
+      jasmine.attachToDOM(newSettingsView.element);
+      newSettingsView.initializePanels();
+      return expect(newSettingsView.activePanel).toEqual({name: 'Themes', options: {}});
+  });
+
+    it("shows the previously active panel if it is added after deserialization", function() {
+      settingsView.addCorePanel('Panel 1', 'panel-1', function() {
+        const div = document.createElement('div');
+        div.id = 'panel-1';
+        return {
+          element: div,
+          show() { return div.style.display = ''; },
+          focus() { return div.focus(); },
+          destroy() { return div.remove(); }
+        };
+      });
+      settingsView.showPanel('Panel 1');
+      const newSettingsView = main.createSettingsView(settingsView.serialize());
+      newSettingsView.addPanel('Panel 1', function() {
+        const div = document.createElement('div');
+        div.id = 'panel-1';
+        return {
+          element: div,
+          show() { return div.style.display = ''; },
+          focus() { return div.focus(); },
+          destroy() { return div.remove(); }
+        };
+      });
+      newSettingsView.initializePanels();
+      jasmine.attachToDOM(newSettingsView.element);
+      return expect(newSettingsView.activePanel).toEqual({name: 'Panel 1', options: {}});
+  });
+
+    it("shows the Settings panel if the last saved active panel name no longer exists", function() {
+      settingsView.addCorePanel('Panel 1', 'panel1', function() {
+        const div = document.createElement('div');
+        div.id = 'panel-1';
+        return {
+          element: div,
+          show() { return div.style.display = ''; },
+          focus() { return div.focus(); },
+          destroy() { return div.remove(); }
+        };
+      });
+      settingsView.showPanel('Panel 1');
+      const newSettingsView = main.createSettingsView(settingsView.serialize());
+      settingsView.destroy();
+      jasmine.attachToDOM(newSettingsView.element);
+      newSettingsView.initializePanels();
+      return expect(newSettingsView.activePanel).toEqual({name: 'Core', options: {}});
+  });
+
+    return it("serializes the active panel name even when the panels were never initialized", function() {
+      settingsView.showPanel('Themes');
+      const settingsView2 = main.createSettingsView(settingsView.serialize());
+      const settingsView3 = main.createSettingsView(settingsView2.serialize());
+      jasmine.attachToDOM(settingsView3.element);
+      settingsView3.initializePanels();
+      return expect(settingsView3.activePanel).toEqual({name: 'Themes', options: {}});
+  });
+});
+
+  describe(".addCorePanel(name, iconName, view)", () => it("adds a menu entry to the left and a panel that can be activated by clicking it", function() {
+    settingsView.addCorePanel('Panel 1', 'panel1', function() {
+      const div = document.createElement('div');
+      div.id = 'panel-1';
+      return {
+        element: div,
+        show() { return div.style.display = ''; },
+        focus() { return div.focus(); },
+        destroy() { return div.remove(); }
+      };
+    });
+    settingsView.addCorePanel('Panel 2', 'panel2', function() {
+      const div = document.createElement('div');
+      div.id = 'panel-2';
+      return {
+        element: div,
+        show() { return div.style.display = ''; },
+        focus() { return div.focus(); },
+        destroy() { return div.remove(); }
+      };
+    });
+
+    expect(settingsView.refs.panelMenu.querySelector('li[name="Panel 1"]')).toExist();
+    expect(settingsView.refs.panelMenu.querySelector('li[name="Panel 2"]')).toExist();
+    //expect(settingsView.refs.panelMenu.children[1]).toHaveClass 'active' # TODO FIX
+
+    jasmine.attachToDOM(settingsView.element);
+    settingsView.refs.panelMenu.querySelector('li[name="Panel 1"] a').click();
+    expect(settingsView.refs.panelMenu.querySelectorAll('.active').length).toBe(1);
+    expect(settingsView.refs.panelMenu.querySelector('li[name="Panel 1"]')).toHaveClass('active');
+    expect(settingsView.refs.panels.querySelector('#panel-1')).toBeVisible();
+    expect(settingsView.refs.panels.querySelector('#panel-2')).not.toExist();
+    settingsView.refs.panelMenu.querySelector('li[name="Panel 2"] a').click();
+    expect(settingsView.refs.panelMenu.querySelectorAll('.active').length).toBe(1);
+    expect(settingsView.refs.panelMenu.querySelector('li[name="Panel 2"]')).toHaveClass('active');
+    expect(settingsView.refs.panels.querySelector('#panel-1')).toBeHidden();
+    return expect(settingsView.refs.panels.querySelector('#panel-2')).toBeVisible();
+  }));
+
+  describe("when the package is activated", function() {
+    const openWithCommand = command => waitsFor(function(done) {
+      var openSubscription = atom.workspace.onDidOpen(function() {
+        openSubscription.dispose();
+        return done();
+      });
+      return atom.commands.dispatch(atom.views.getView(atom.workspace), command);
+    });
+
+    beforeEach(function() {
+      jasmine.attachToDOM(atom.views.getView(atom.workspace));
+      return waitsForPromise(() => atom.packages.activatePackage('settings-view'));
+    });
+
+    describe("when the settings view is opened with a settings-view:* command", function() {
+      beforeEach(() => settingsView = null);
+
+      describe("settings-view:open", function() {
+        it("opens the settings view", function() {
+          openWithCommand('settings-view:open');
+          return runs(() => expect(atom.workspace.getActivePaneItem().activePanel)
+            .toEqual({name: 'Core', options: {}}));
+      });
+
+        return it("always open existing item in workspace", function() {
+          const center = atom.workspace.getCenter();
+          let [pane1, pane2] = [];
+
+          waitsForPromise(() => atom.workspace.open(null, {split: 'right'}));
+          runs(function() {
+            expect(center.getPanes()).toHaveLength(2);
+            [pane1, pane2] = center.getPanes();
+            return expect(atom.workspace.getActivePane()).toBe(pane2);
+          });
+
+          openWithCommand('settings-view:open');
+
+          runs(function() {
+            expect(atom.workspace.getActivePaneItem().activePanel).toEqual({name: 'Core', options: {}});
+            return expect(atom.workspace.getActivePane()).toBe(pane2);
+          });
+
+          runs(() => pane1.activate());
+
+          openWithCommand('settings-view:open');
+
+          return runs(function() {
+            expect(atom.workspace.getActivePaneItem().activePanel).toEqual({name: 'Core', options: {}});
+            return expect(atom.workspace.getActivePane()).toBe(pane2);
+          });
+        });
+      });
+
+      describe("settings-view:core", () => it("opens the core settings view", function() {
+        openWithCommand('settings-view:editor');
+        runs(() => openWithCommand('settings-view:core'));
+        return runs(() => expect(atom.workspace.getActivePaneItem().activePanel)
+          .toEqual({name: 'Core', options: {uri: 'atom://config/core'}}));
+      }));
+
+      describe("settings-view:editor", () => it("opens the editor settings view", function() {
+        openWithCommand('settings-view:editor');
+        return runs(() => expect(atom.workspace.getActivePaneItem().activePanel)
+          .toEqual({name: 'Editor', options: {uri: 'atom://config/editor'}}));
+      }));
+
+      describe("settings-view:show-keybindings", () => it("opens the settings view to the keybindings page", function() {
+        openWithCommand('settings-view:show-keybindings');
+        return runs(() => expect(atom.workspace.getActivePaneItem().activePanel)
+          .toEqual({name: 'Keybindings', options: {uri: 'atom://config/keybindings'}}));
+      }));
+
+      describe("settings-view:change-themes", () => it("opens the settings view to the themes page", function() {
+        openWithCommand('settings-view:change-themes');
+        return runs(() => expect(atom.workspace.getActivePaneItem().activePanel)
+          .toEqual({name: 'Themes', options: {uri: 'atom://config/themes'}}));
+      }));
+
+      describe("settings-view:uninstall-themes", () => it("opens the settings view to the themes page", function() {
+        openWithCommand('settings-view:uninstall-themes');
+        return runs(() => expect(atom.workspace.getActivePaneItem().activePanel)
+          .toEqual({name: 'Themes', options: {uri: 'atom://config/themes'}}));
+      }));
+
+      describe("settings-view:uninstall-packages", () => it("opens the settings view to the install page", function() {
+        openWithCommand('settings-view:uninstall-packages');
+        return runs(() => expect(atom.workspace.getActivePaneItem().activePanel)
+          .toEqual({name: 'Packages', options: {uri: 'atom://config/packages'}}));
+      }));
+
+      describe("settings-view:install-packages-and-themes", () => it("opens the settings view to the install page", function() {
+        openWithCommand('settings-view:install-packages-and-themes');
+        return runs(() => expect(atom.workspace.getActivePaneItem().activePanel)
+          .toEqual({name: 'Install', options: {uri: 'atom://config/install'}}));
+      }));
+
+      return describe("settings-view:check-for-package-updates", () => it("opens the settings view to the install page", function() {
+        openWithCommand('settings-view:check-for-package-updates');
+        return runs(() => expect(atom.workspace.getActivePaneItem().activePanel)
+          .toEqual({name: 'Updates', options: {uri: 'atom://config/updates'}}));
+      }));
+    });
+
+    describe("when atom.workspace.open() is used with a config URI", function() {
+      const focusIsWithinActivePanel = function() {
+        const activePanel = settingsView.panelsByName[settingsView.activePanel.name];
+        return (activePanel.element === document.activeElement) || activePanel.element.contains(document.activeElement);
+      };
+
+      const expectActivePanelToBeKeyboardScrollable = function() {
+        const activePanel = settingsView.panelsByName[settingsView.activePanel.name];
+        spyOn(activePanel, 'pageDown');
+        atom.commands.dispatch(activePanel.element, 'core:page-down');
+        expect(activePanel.pageDown).toHaveBeenCalled();
+        spyOn(activePanel, 'pageUp');
+        atom.commands.dispatch(activePanel.element, 'core:page-up');
+        return expect(activePanel.pageUp).toHaveBeenCalled();
+      };
+
+      beforeEach(() => settingsView = null);
+
+      it("opens the settings to the correct panel with atom://config/<panel-name> and that panel is keyboard-scrollable", function() {
+        waitsForPromise(() => atom.workspace.open('atom://config').then(s => settingsView = s));
+
+        waitsFor(done => process.nextTick(done));
+        runs(function() {
+          expect(settingsView.activePanel)
+            .toEqual({name: 'Core', options: {}});
+          expect(focusIsWithinActivePanel()).toBe(true);
+          return expectActivePanelToBeKeyboardScrollable();
+        });
+
+        waitsForPromise(() => atom.workspace.open('atom://config/editor').then(s => settingsView = s));
+
+        waits(1);
+        runs(function() {
+          expect(settingsView.activePanel)
+            .toEqual({name: 'Editor', options: {uri: 'atom://config/editor'}});
+          expect(focusIsWithinActivePanel()).toBe(true);
+          return expectActivePanelToBeKeyboardScrollable();
+        });
+
+        waitsForPromise(() => atom.workspace.open('atom://config/keybindings').then(s => settingsView = s));
+
+        waits(1);
+        runs(function() {
+          expect(settingsView.activePanel)
+            .toEqual({name: 'Keybindings', options: {uri: 'atom://config/keybindings'}});
+          expect(focusIsWithinActivePanel()).toBe(true);
+          return expectActivePanelToBeKeyboardScrollable();
+        });
+
+        waitsForPromise(() => atom.workspace.open('atom://config/packages').then(s => settingsView = s));
+
+        waits(1);
+        runs(function() {
+          expect(settingsView.activePanel)
+            .toEqual({name: 'Packages', options: {uri: 'atom://config/packages'}});
+          expect(focusIsWithinActivePanel()).toBe(true);
+          return expectActivePanelToBeKeyboardScrollable();
+        });
+
+        waitsForPromise(() => atom.workspace.open('atom://config/themes').then(s => settingsView = s));
+
+        waits(1);
+        runs(function() {
+          expect(settingsView.activePanel)
+            .toEqual({name: 'Themes', options: {uri: 'atom://config/themes'}});
+          expect(focusIsWithinActivePanel()).toBe(true);
+          return expectActivePanelToBeKeyboardScrollable();
+        });
+
+        waitsForPromise(() => atom.workspace.open('atom://config/updates').then(s => settingsView = s));
+
+        waits(1);
+        runs(function() {
+          expect(settingsView.activePanel)
+            .toEqual({name: 'Updates', options: {uri: 'atom://config/updates'}});
+          expect(focusIsWithinActivePanel()).toBe(true);
+          return expectActivePanelToBeKeyboardScrollable();
+        });
+
+        waitsForPromise(() => atom.workspace.open('atom://config/install').then(s => settingsView = s));
+
+        let hasSystemPanel = false;
+        waits(1);
+        runs(function() {
+          expect(settingsView.activePanel)
+            .toEqual({name: 'Install', options: {uri: 'atom://config/install'}});
+          expect(focusIsWithinActivePanel()).toBe(true);
+          expectActivePanelToBeKeyboardScrollable();
+          return hasSystemPanel = (settingsView.panelsByName['System'] != null);
+        });
+
+        if (hasSystemPanel) {
+          waitsForPromise(() => atom.workspace.open('atom://config/system').then(s => settingsView = s));
+
+          waits(1);
+          return runs(function() {
+            expect(settingsView.activePanel)
+              .toEqual({name: 'System', options: {uri: 'atom://config/system'}});
+            expect(focusIsWithinActivePanel()).toBe(true);
+            return expectActivePanelToBeKeyboardScrollable();
+          });
+        }
+      });
+
+      it("opens the package settings view with atom://config/packages/<package-name>", function() {
+        waitsForPromise(() => atom.packages.activatePackage(path.join(__dirname, 'fixtures', 'package-with-readme')));
+
+        waitsForPromise(() => atom.workspace.open('atom://config/packages/package-with-readme').then(s => settingsView = s));
+
+        waitsFor(done => process.nextTick(done));
+        return runs(() => expect(settingsView.activePanel)
+          .toEqual({name: 'package-with-readme', options: {
+            uri: 'atom://config/packages/package-with-readme',
+            pack: {
+              name: 'package-with-readme',
+              metadata: {
+                name: 'package-with-readme'
+              }
+            },
+            back: 'Packages'
+          }}));
+    });
+
+      it("doesn't use cached package detail when package re-activated and opnes the package view with atom://config/packages/<package-name>", function() {
+        let [detailInitial, detailAfterReactivate] = [];
+
+        waitsForPromise(function() {
+          atom.packages.activate();
+          return new Promise(resolve => atom.packages.onDidActivateInitialPackages(resolve));
+        });
+
+        waitsForPromise(() => atom.packages.activatePackage(path.join(__dirname, 'fixtures', 'package-with-readme')));
+
+        waitsForPromise(() => atom.workspace.open('atom://config/packages/package-with-readme').then(s => settingsView = s));
+
+        waitsFor(done => process.nextTick(done));
+
+        runs(function() {
+          detailInitial = settingsView.getOrCreatePanel('package-with-readme');
+          return expect(settingsView.getOrCreatePanel('package-with-readme')).toBe(detailInitial);
+        });
+
+        waitsForPromise(() => atom.packages.deactivatePackage('package-with-readme'));
+
+        waitsForPromise(() => atom.packages.activatePackage(path.join(__dirname, 'fixtures', 'package-with-readme')));
+
+        waitsForPromise(() => atom.workspace.open('atom://config/packages/package-with-readme'));
+
+        return runs(function() {
+          detailAfterReactivate = settingsView.getOrCreatePanel('package-with-readme');
+          expect(settingsView.getOrCreatePanel('package-with-readme')).toBe(detailAfterReactivate);
+          expect(detailInitial).toBeTruthy();
+          expect(detailAfterReactivate).toBeTruthy();
+          return expect(detailInitial).not.toBe(detailAfterReactivate);
+        });
+      });
+
+      it("passes the URI to a pane's beforeShow() method on settings view initialization", function() {
+        const InstallPanel = require('../lib/install-panel');
+        spyOn(InstallPanel.prototype, 'beforeShow');
+
+        waitsForPromise(() => atom.workspace.open('atom://config/install/package:something').then(s => settingsView = s));
+
+        waitsFor(() => settingsView.activePanel != null
+        , 'The activePanel should be set', 5000);
+
+        return runs(function() {
+          expect(settingsView.activePanel)
+            .toEqual({name: 'Install', options: {uri: 'atom://config/install/package:something'}});
+          return expect(InstallPanel.prototype.beforeShow).toHaveBeenCalledWith({uri: 'atom://config/install/package:something'});});
+    });
+
+      return it("passes the URI to a pane's beforeShow() method after initialization", function() {
+        const InstallPanel = require('../lib/install-panel');
+        spyOn(InstallPanel.prototype, 'beforeShow');
+
+        waitsForPromise(() => atom.workspace.open('atom://config').then(s => settingsView = s));
+
+        waitsFor(done => process.nextTick(done));
+
+        runs(() => expect(settingsView.activePanel).toEqual({name: 'Core', options: {}}));
+
+        waitsForPromise(() => atom.workspace.open('atom://config/install/package:something').then(s => settingsView = s));
+
+        waits(1);
+        return runs(function() {
+          expect(settingsView.activePanel)
+            .toEqual({name: 'Install', options: {uri: 'atom://config/install/package:something'}});
+          return expect(InstallPanel.prototype.beforeShow).toHaveBeenCalledWith({uri: 'atom://config/install/package:something'});});
+    });
+  });
+
+    return describe("when the package is then deactivated", function() {
+      beforeEach(() => settingsView = null);
+
+      return it("calls the dispose method on all panels", function() {
+        openWithCommand('settings-view:open');
+
+        waitsFor(done => process.nextTick(done));
+
+        return runs(function() {
+          let panel;
+          settingsView = atom.workspace.getActivePaneItem();
+          const panels = [
+            settingsView.getOrCreatePanel('Core'),
+            settingsView.getOrCreatePanel('Editor'),
+            settingsView.getOrCreatePanel('Keybindings'),
+            settingsView.getOrCreatePanel('Packages'),
+            settingsView.getOrCreatePanel('Themes'),
+            settingsView.getOrCreatePanel('Updates'),
+            settingsView.getOrCreatePanel('Install')
+          ];
+          const systemPanel = settingsView.getOrCreatePanel('System');
+          if (systemPanel != null) {
+            panels.push(systemPanel);
+          }
+          for (panel of Array.from(panels)) {
+            if (panel.dispose) {
+              spyOn(panel, 'dispose');
+            } else {
+              spyOn(panel, 'destroy');
+            }
+          }
+
+          waitsForPromise(() => Promise.resolve(atom.packages.deactivatePackage('settings-view'))); // Ensure works on promise and non-promise versions
+
+          return runs(function() {
+            for (panel of Array.from(panels)) {
+              if (panel.dispose) {
+                expect(panel.dispose).toHaveBeenCalled();
+              } else {
+                expect(panel.destroy).toHaveBeenCalled();
+              }
+            }
+
+          });
+        });
+      });
+    });
+  });
+
+  describe("when an installed package is clicked from the Install panel", () => it("displays the package details", function() {
+    waitsFor(() => atom.packages.activatePackage('settings-view'));
+
+    runs(function() {
+      settingsView.packageManager.getClient();
+      spyOn(settingsView.packageManager.client, 'featuredPackages').andCallFake(callback => callback(null, [{name: 'settings-view'}]));
+      return settingsView.showPanel('Install');
+    });
+
+    waitsFor(() => settingsView.element.querySelectorAll('.package-card:not(.hidden)').length > 0);
+
+    return runs(function() {
+      settingsView.element.querySelectorAll('.package-card:not(.hidden)')[0].click();
+
+      const packageDetail = settingsView.element.querySelector('.package-detail .active');
+      return expect(packageDetail.textContent).toBe('Settings View');
+    });
+  }));
+
+  return describe("when the active theme has settings", function() {
+    let panel = null;
+
+    beforeEach(function() {
+      atom.packages.packageDirPaths.push(path.join(__dirname, 'fixtures'));
+      atom.packages.loadPackage('ui-theme-with-config');
+      atom.packages.loadPackage('syntax-theme-with-config');
+      atom.config.set('core.themes', ['ui-theme-with-config', 'syntax-theme-with-config']);
+
+      const reloadedHandler = jasmine.createSpy('reloadedHandler');
+      atom.themes.onDidChangeActiveThemes(reloadedHandler);
+      atom.themes.activatePackages();
+
+      waitsFor("themes to be reloaded", () => reloadedHandler.callCount === 1);
+
+      return runs(function() {
+        settingsView.showPanel('Themes');
+        return panel = settingsView.element.querySelector('.themes-panel');
+      });
+    });
+
+    afterEach(() => atom.themes.unwatchUserStylesheet());
+
+    describe("when the UI theme's settings button is clicked", () => it("navigates to that theme's detail view", function() {
+      jasmine.attachToDOM(settingsView.element);
+      expect(panel.querySelector('.active-theme-settings')).toBeVisible();
+
+      panel.querySelector('.active-theme-settings').click();
+      const packageDetail = settingsView.element.querySelector('.package-detail li.active');
+      return expect(packageDetail.textContent).toBe('Ui Theme With Config');
+    }));
+
+    return describe("when the syntax theme's settings button is clicked", () => it("navigates to that theme's detail view", function() {
+      jasmine.attachToDOM(settingsView.element);
+      expect(panel.querySelector('.active-syntax-settings')).toBeVisible();
+
+      panel.querySelector('.active-syntax-settings').click();
+      const packageDetail = settingsView.element.querySelector('.package-detail li.active');
+      return expect(packageDetail.textContent).toBe('Syntax Theme With Config');
+    }));
+  });
+});

packages/settings-view/spec/themes-panel-spec.js

@@ -0,0 +1,231 @@
+/*
+ * decaffeinate suggestions:
+ * DS101: Remove unnecessary use of Array.from
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
+ */
+const path = require('path');
+const fs = require('fs');
+
+const CSON = require('season');
+
+const PackageManager = require('../lib/package-manager');
+const ThemesPanel = require('../lib/themes-panel');
+
+describe("ThemesPanel", function() {
+  let [panel, packageManager, reloadedHandler] = [];
+  const settingsView = null;
+
+  beforeEach(function() {
+    atom.packages.loadPackage('atom-light-ui');
+    atom.packages.loadPackage('atom-dark-ui');
+    atom.packages.loadPackage('atom-light-syntax');
+    atom.packages.loadPackage('atom-dark-syntax');
+    atom.packages.packageDirPaths.push(path.join(__dirname, 'fixtures'));
+    atom.config.set('core.themes', ['atom-dark-ui', 'atom-dark-syntax']);
+    reloadedHandler = jasmine.createSpy('reloadedHandler');
+    atom.themes.onDidChangeActiveThemes(reloadedHandler);
+    atom.themes.activatePackages();
+
+    waitsFor("themes to be reloaded", () => reloadedHandler.callCount === 1);
+
+    return runs(function() {
+      packageManager = new PackageManager;
+      const themeMetadata = CSON.readFileSync(path.join(__dirname, 'fixtures', 'a-theme', 'package.json'));
+      spyOn(packageManager, 'getFeatured').andCallFake(callback => Promise.resolve([themeMetadata]));
+      panel = new ThemesPanel(settingsView, packageManager);
+
+      // Make updates synchronous
+      return spyOn(panel, 'scheduleUpdateThemeConfig').andCallFake(function() { return this.updateThemeConfig(); });
+    });
+  });
+
+  afterEach(function() {
+    if (atom.packages.isPackageLoaded('a-theme')) { atom.packages.unloadPackage('a-theme'); }
+    return waitsForPromise(() => Promise.resolve(atom.themes.deactivateThemes()));
+  }); // Ensure works on promise and non-promise versions
+
+  it("selects the active syntax and UI themes", function() {
+    expect(panel.refs.uiMenu.value).toBe('atom-dark-ui');
+    return expect(panel.refs.syntaxMenu.value).toBe('atom-dark-syntax');
+  });
+
+  describe("when a UI theme is selected", () => it("updates the 'core.themes' config key with the selected UI theme", function() {
+    for (let child of Array.from(panel.refs.uiMenu.children)) {
+      child.selected = child.value === 'atom-light-ui';
+      child.dispatchEvent(new Event('change', {bubbles: true}));
+    }
+    waitsFor(() => reloadedHandler.callCount === 2);
+    return runs(() => expect(atom.config.get('core.themes')).toEqual(['atom-light-ui', 'atom-dark-syntax']));
+}));
+
+  describe("when a syntax theme is selected", () => it("updates the 'core.themes' config key with the selected syntax theme", function() {
+    for (let child of Array.from(panel.refs.syntaxMenu.children)) {
+      child.selected = child.value === 'atom-light-syntax';
+      child.dispatchEvent(new Event('change', {bubbles: true}));
+    }
+    waitsFor(() => reloadedHandler.callCount === 2);
+    return runs(() => expect(atom.config.get('core.themes')).toEqual(['atom-dark-ui', 'atom-light-syntax']));
+}));
+
+  describe("when the 'core.config' key changes", () => it("refreshes the theme menus", function() {
+    reloadedHandler.reset();
+    atom.config.set('core.themes', ['atom-light-ui', 'atom-light-syntax']);
+
+    waitsFor(() => reloadedHandler.callCount === 1);
+
+    return runs(function() {
+      expect(panel.refs.uiMenu.value).toBe('atom-light-ui');
+      return expect(panel.refs.syntaxMenu.value).toBe('atom-light-syntax');
+    });
+  }));
+
+  xdescribe("when the themes panel is navigated to", () => xit("focuses the search filter", function() {
+    settingsView.showPanel('Themes');
+    return expect(panel.refs.filterEditor.element).toHaveFocus();
+  }));
+
+  describe("theme lists", function() {
+    let [installed] = [];
+    beforeEach(function() {
+      installed = JSON.parse(fs.readFileSync(path.join(__dirname, 'fixtures', 'installed.json')));
+      spyOn(packageManager, 'loadCompatiblePackageVersion').andCallFake(function() {});
+      spyOn(packageManager, 'getInstalled').andReturn(Promise.resolve(installed));
+      panel = new ThemesPanel(settingsView, packageManager);
+
+      return waitsFor(() => (packageManager.getInstalled.callCount === 1) && (panel.refs.communityCount.textContent.indexOf('…') < 0));
+    });
+
+    it('shows the themes', function() {
+      expect(panel.refs.communityCount.textContent.trim()).toBe('1');
+      expect(panel.refs.communityPackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(1);
+
+      expect(panel.refs.coreCount.textContent.trim()).toBe('1');
+      expect(panel.refs.corePackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(1);
+
+      expect(panel.refs.devCount.textContent.trim()).toBe('1');
+      return expect(panel.refs.devPackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(1);
+    });
+
+    it('filters themes by name', function() {
+      panel.refs.filterEditor.setText('user-');
+      window.advanceClock(panel.refs.filterEditor.getBuffer().stoppedChangingDelay);
+      expect(panel.refs.communityCount.textContent.trim()).toBe('1/1');
+      expect(panel.refs.communityPackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(1);
+
+      expect(panel.refs.coreCount.textContent.trim()).toBe('0/1');
+      expect(panel.refs.corePackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(0);
+
+      expect(panel.refs.devCount.textContent.trim()).toBe('0/1');
+      return expect(panel.refs.devPackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(0);
+    });
+
+    it('adds newly installed themes to the list', function() {
+      let [installCallback] = [];
+      spyOn(packageManager, 'runCommand').andCallFake(function(args, callback) {
+        installCallback = callback;
+        return {onWillThrowError() {}};
+      });
+      spyOn(atom.packages, 'loadPackage').andCallFake(name => installed.user.push({name, theme: 'ui'}));
+
+      expect(panel.refs.communityCount.textContent.trim()).toBe('1');
+      expect(panel.refs.communityPackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(1);
+
+      packageManager.install({name: 'another-user-theme', theme: 'ui'});
+      installCallback(0, '', '');
+
+      advanceClock(ThemesPanel.loadPackagesDelay());
+      waits(1);
+      return runs(function() {
+        expect(panel.refs.communityCount.textContent.trim()).toBe('2');
+        return expect(panel.refs.communityPackages.querySelectorAll('.package-card:not(.hidden)').length).toBe(2);
+      });
+    });
+
+    it('collapses/expands a sub-section if its header is clicked', function() {
+      expect(panel.element.querySelectorAll('.sub-section-heading.has-items').length).toBe(3);
+      panel.element.querySelector('.sub-section.installed-packages .sub-section-heading.has-items').click();
+      expect(panel.element.querySelector('.sub-section.installed-packages')).toHaveClass('collapsed');
+
+      expect(panel.element.querySelector('.sub-section.core-packages')).not.toHaveClass('collapsed');
+      expect(panel.element.querySelector('.sub-section.dev-packages')).not.toHaveClass('collapsed');
+
+      panel.element.querySelector('.sub-section.installed-packages .sub-section-heading.has-items').click();
+      return expect(panel.element.querySelector('.sub-section.installed-packages')).not.toHaveClass('collapsed');
+    });
+
+    it('can collapse and expand any of the sub-sections', function() {
+      let heading;
+      expect(panel.element.querySelectorAll('.sub-section-heading.has-items').length).toBe(3);
+
+      for (heading of Array.from(panel.element.querySelectorAll('.sub-section-heading.has-items'))) {
+        heading.click();
+      }
+      expect(panel.element.querySelector('.sub-section.installed-packages')).toHaveClass('collapsed');
+      expect(panel.element.querySelector('.sub-section.core-packages')).toHaveClass('collapsed');
+      expect(panel.element.querySelector('.sub-section.dev-packages')).toHaveClass('collapsed');
+
+      for (heading of Array.from(panel.element.querySelectorAll('.sub-section-heading.has-items'))) {
+        heading.click();
+      }
+      expect(panel.element.querySelector('.sub-section.installed-packages')).not.toHaveClass('collapsed');
+      expect(panel.element.querySelector('.sub-section.core-packages')).not.toHaveClass('collapsed');
+      return expect(panel.element.querySelector('.sub-section.dev-packages')).not.toHaveClass('collapsed');
+    });
+
+    return it('can collapse sub-sections when filtering', function() {
+      panel.refs.filterEditor.setText('user-');
+      window.advanceClock(panel.refs.filterEditor.getBuffer().stoppedChangingDelay);
+
+      const hasItems = panel.element.querySelectorAll('.sub-section-heading.has-items');
+      expect(hasItems.length).toBe(1);
+      return expect(hasItems[0].textContent).toMatch(/^Community Themes/);
+    });
+  });
+
+  return describe('when there are no themes', function() {
+    beforeEach(function() {
+      const installed = {
+        dev: [],
+        user: [],
+        core: []
+      };
+
+      spyOn(packageManager, 'loadCompatiblePackageVersion').andCallFake(function() {});
+      spyOn(packageManager, 'getInstalled').andReturn(Promise.resolve(installed));
+      panel = new ThemesPanel(settingsView, packageManager);
+
+      return waitsFor(() => (packageManager.getInstalled.callCount === 1) && (panel.refs.communityCount.textContent.indexOf('…') < 0));
+    });
+
+    afterEach(() => waitsForPromise(() => Promise.resolve(atom.themes.deactivateThemes()))); // Ensure works on promise and non-promise versions
+
+    it('has a count of zero in all headings', function() {
+      for (let heading of Array.from(panel.element.querySelector('.section-heading-count'))) {
+        expect(heading.textContent).toMatch(/^0+$/);
+      }
+      expect(panel.element.querySelectorAll('.sub-section .icon-paintcan').length).toBe(4);
+      return expect(panel.element.querySelectorAll('.sub-section .icon-paintcan.has-items').length).toBe(0);
+    });
+
+    it('can collapse and expand any of the sub-sections', function() {
+      for (let heading of Array.from(panel.element.querySelectorAll('.sub-section-heading'))) {
+        heading.click();
+      }
+      expect(panel.element.querySelector('.sub-section.installed-packages')).not.toHaveClass('collapsed');
+      expect(panel.element.querySelector('.sub-section.core-packages')).not.toHaveClass('collapsed');
+      return expect(panel.element.querySelector('.sub-section.dev-packages')).not.toHaveClass('collapsed');
+    });
+
+    return it('does not allow collapsing on any section when filtering', function() {
+      panel.refs.filterEditor.setText('user-');
+      window.advanceClock(panel.refs.filterEditor.getBuffer().stoppedChangingDelay);
+
+      for (let heading of Array.from(panel.element.querySelector('.section-heading-count'))) {
+        expect(heading.textContent).toMatch(/^(0\/0)+$/);
+      }
+      expect(panel.element.querySelectorAll('.sub-section .icon-paintcan').length).toBe(4);
+      return expect(panel.element.querySelectorAll('.sub-section .icon-paintcan.has-items').length).toBe(0);
+    });
+  });
+});

packages/settings-view/spec/updates-panel-spec.js

@@ -0,0 +1,251 @@
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
+ */
+const UpdatesPanel = require('../lib/updates-panel');
+const PackageManager = require('../lib/package-manager');
+const SettingsView = require('../lib/settings-view');
+
+describe('UpdatesPanel', function() {
+  let panel = null;
+  let settingsView = null;
+  let packageManager = null;
+  let [resolveOutdated, rejectOutdated] = [];
+
+  beforeEach(function() {
+    settingsView = new SettingsView;
+    packageManager = new PackageManager;
+    // This spy is only needed for the Check for Updates specs,
+    // but we have to instantiate it here because we need to pass the spy to the UpdatesPanel
+    spyOn(packageManager, 'getOutdated').andReturn(new Promise((resolve, reject) => [resolveOutdated, rejectOutdated] = [resolve, reject]));
+    panel = new UpdatesPanel(settingsView, packageManager);
+    return jasmine.attachToDOM(panel.element);
+  });
+
+  it("shows updates when updates are available", function() {
+    const pack = {
+      name: 'test-package',
+      description: 'some description',
+      latestVersion: '99.0.0',
+      version: '1.0.0'
+    };
+
+    // skip packman stubbing
+    panel.beforeShow({updates: [pack]});
+    return expect(panel.refs.updatesContainer.children.length).toBe(1);
+  });
+
+  it("shows a message when updates are not available", function() {
+    panel.beforeShow({updates: []});
+    expect(panel.refs.updatesContainer.children.length).toBe(0);
+    return expect(panel.refs.noUpdatesMessage.style.display).not.toBe('none');
+  });
+
+  describe("version pinned packages message", function() {
+    it('shows a message when there are pinned version packages', function() {
+      spyOn(packageManager, 'getVersionPinnedPackages').andReturn(['foo', 'bar', 'baz']);
+      panel.beforeShow({updates: []});
+      return expect(panel.refs.versionPinnedPackagesMessage.style.display).not.toBe('none');
+    });
+
+    return it('does not show a message when there are no version pinned packages', function() {
+      spyOn(packageManager, 'getVersionPinnedPackages').andReturn([]);
+      panel.beforeShow({updates: []});
+      return expect(panel.refs.versionPinnedPackagesMessage.style.display).toBe('none');
+    });
+  });
+
+  describe("the Update All button", function() {
+    const packA = {
+      name: 'test-package-a',
+      description: 'some description',
+      latestVersion: '99.0.0',
+      version: '1.0.0'
+    };
+    const packB = {
+      name: 'test-package-b',
+      description: 'some description',
+      latestVersion: '99.0.0',
+      version: '1.0.0'
+    };
+    const packC = {
+      name: 'test-package-c',
+      description: 'some description',
+      latestVersion: '99.0.0',
+      version: '1.0.0'
+    };
+
+    let [cardA, cardB, cardC] = [];
+    let [resolveA, resolveB, resolveC, rejectA, rejectB, rejectC] = [];
+
+    beforeEach(function() {
+      // skip packman stubbing
+      panel.beforeShow({updates: [packA, packB, packC]});
+
+      [cardA, cardB, cardC] = panel.packageCards;
+
+      // fake a git url package
+      cardC.pack.apmInstallSource = {type: 'git', sha: 'cf23df2207d99a74fbe169e3eba035e633b65d94'};
+      cardC.pack.latestSha = 'a296114f3d0deec519a41f4c62e7fc56075b7f01';
+
+      spyOn(cardA, 'update').andReturn(new Promise((resolve, reject) => [resolveA, rejectA] = [resolve, reject]));
+      spyOn(cardB, 'update').andReturn(new Promise((resolve, reject) => [resolveB, rejectB] = [resolve, reject]));
+      spyOn(cardC, 'update').andReturn(new Promise((resolve, reject) => [resolveC, rejectC] = [resolve, reject]));
+
+      return atom.config.set("settings-view.packageUpdateConcurrency", -1);
+    });
+
+    it('attempts to update all packages and prompts to restart if at least one package updates successfully', function() {
+      expect(atom.notifications.getNotifications().length).toBe(0);
+      expect(panel.refs.updateAllButton).toBeVisible();
+
+      panel.updateAll();
+
+      resolveA();
+      rejectB('Error updating package');
+
+      waits(0);
+      runs(function() {
+        expect(atom.notifications.getNotifications().length).toBe(0);
+
+        return resolveC();
+      });
+
+      waitsFor(() => atom.notifications.getNotifications().length === 1);
+
+      return runs(function() {
+        const notifications = atom.notifications.getNotifications();
+        expect(notifications.length).toBe(1);
+        const notif = notifications[0];
+
+        expect(notif.options.detail).toBe('test-package-a@1.0.0 -> 99.0.0\ntest-package-b@1.0.0 -> 99.0.0\ntest-package-c@cf23df22 -> a296114f');
+
+        expect(notif.options.buttons.length).toBe(2);
+
+        spyOn(atom, 'restartApplication');
+        notif.options.buttons[0].onDidClick();
+        expect(atom.restartApplication).toHaveBeenCalled();
+
+        spyOn(notif, 'dismiss');
+        notif.options.buttons[1].onDidClick();
+        return expect(notif.dismiss).toHaveBeenCalled();
+      });
+    });
+
+    it('works with queue enabled', function() {
+      expect(panel.refs.updateAllButton).not.toBeDisabled();
+      atom.config.set("settings-view.packageUpdateConcurrency", 2);
+
+      panel.updateAll();
+
+      resolveA();
+      resolveB();
+      resolveC();
+
+      return waitsFor(() => panel.refs.updateAllButton.style.display === 'none');
+    });
+
+    it('becomes hidden if all updates succeed', function() {
+      expect(panel.refs.updateAllButton).not.toBeDisabled();
+
+      panel.updateAll();
+
+      expect(panel.refs.updateAllButton).toBeDisabled();
+
+      resolveA();
+      resolveB();
+      resolveC();
+
+      return waitsFor(() => panel.refs.updateAllButton.style.display === 'none');
+    });
+
+    it('remains enabled and visible if not all updates succeed', function() {
+      expect(panel.refs.updateAllButton).not.toBeDisabled();
+
+      panel.updateAll();
+
+      expect(panel.refs.updateAllButton).toBeDisabled();
+
+      resolveA();
+      rejectB('Error updating package');
+      resolveC();
+
+      waitsFor(() => panel.refs.updateAllButton.disabled === false);
+
+      return runs(() => expect(panel.refs.updateAllButton).toBeVisible());
+    });
+
+    return it('does not attempt to update packages that are already updating', function() {
+      cardA.update();
+      packageManager.emitPackageEvent('updating', packA);
+      panel.updateAll();
+
+      return expect(cardA.update.calls.length).toBe(1);
+    });
+  });
+
+  return describe('the Check for Updates button', function() {
+    const pack = {
+      name: 'test-package',
+      description: 'some description',
+      latestVersion: '99.0.0',
+      version: '1.0.0'
+    };
+
+    beforeEach(() => // skip packman stubbing - without this, getOutdated() is called another time
+    // this is not an issue in actual usage as getOutdated() isn't blocked on a spy
+    panel.beforeShow({updates: [pack]}));
+
+    it('disables itself when clicked until the list of outdated packages is returned', function() {
+      // Updates panel checks for updates on initialization so resolve the promise
+      resolveOutdated();
+
+      waits(0);
+      runs(function() {
+        expect(panel.refs.checkButton.disabled).toBe(false);
+
+        panel.checkForUpdates();
+        expect(panel.refs.checkButton.disabled).toBe(true);
+
+        return resolveOutdated();
+      });
+
+      waits(0);
+      return runs(() => expect(panel.refs.checkButton.disabled).toBe(false));
+    });
+
+    it('clears the outdated cache when checking for updates', function() {
+      // This spec just tests that we're passing the clearCache bool through, not the actual implementation
+      // For that, look at the PackageManager specs
+      resolveOutdated();
+      waits(0);
+      return runs(function() {
+        panel.refs.checkButton.click();
+        return expect(packageManager.getOutdated).toHaveBeenCalledWith(true);
+      });
+    });
+
+    return it('is disabled when packages are updating', function() {
+      // Updates panel checks for updates on initialization so resolve the promise
+      resolveOutdated();
+
+      waits(0);
+      return runs(function() {
+        expect(panel.refs.checkButton.disabled).toBe(false);
+
+        packageManager.emitPackageEvent('updating', {name: 'packA'});
+        expect(panel.refs.checkButton.disabled).toBe(true);
+
+        packageManager.emitPackageEvent('updating', {name: 'packB'});
+        expect(panel.refs.checkButton.disabled).toBe(true);
+
+        packageManager.emitPackageEvent('updated', {name: 'packB'});
+        expect(panel.refs.checkButton.disabled).toBe(true);
+
+        packageManager.emitPackageEvent('update-failed', {name: 'packA'});
+        return expect(panel.refs.checkButton.disabled).toBe(false);
+      });
+    });
+  });
+});

packages/settings-view/spec/utils-spec.js

@@ -0,0 +1,18 @@
+/*
+ * decaffeinate suggestions:
+ * DS102: Remove unnecessary code created because of implicit returns
+ * Full docs: https://github.com/decaffeinate/decaffeinate/blob/main/docs/suggestions.md
+ */
+const {ownerFromRepository} = require('../lib/utils');
+
+describe("Utils", () => describe("ownerFromRepository", function() {
+  it("handles a long github url", function() {
+    const owner = ownerFromRepository("http://github.com/omgwow/some-package");
+    return expect(owner).toBe("omgwow");
+  });
+
+  return it("handles a short github url", function() {
+    const owner = ownerFromRepository("omgwow/some-package");
+    return expect(owner).toBe("omgwow");
+  });
+}));