diff --git a/packages/welcome/lib/consent-view.js b/packages/welcome/lib/consent-view.js index cc01d386009..04e2184933b 100644 --- a/packages/welcome/lib/consent-view.js +++ b/packages/welcome/lib/consent-view.js @@ -1,92 +1,150 @@ -'use babel' +'use babel'; /** @jsx etch.dom */ -import etch from 'etch' +import etch from 'etch'; export default class ConsentView { - constructor () { - etch.initialize(this) + constructor() { + etch.initialize(this); } - render () { + render() { return ( -
-
-
- -
+
+ -
-

Help improve Atom by sending your anonymous usage data to the Atom team. The resulting data plays a key role in deciding what we focus on next.

+
+

+ Help improve Atom by sending your anonymous{' '} + usage data to the Atom team. The resulting data + plays a key role in deciding what we focus on next. +

-
+
- -

Including exception and crash reports. See the atom/metrics package for more details.

+ +

+ Including exception and crash reports. See the{' '} + + atom/metrics package + {' '} + for more details. +

- -

Note: We only register anonymously that you opted-out.

+ +

+ Note: We only register anonymously that you opted-out. +

-
- ) + ); } - update () { - return etch.update(this) + update() { + return etch.update(this); } - consent () { - atom.config.set('core.telemetryConsent', 'limited') - atom.workspace.closeActivePaneItemOrEmptyPaneOrWindow() + consent() { + atom.config.set('core.telemetryConsent', 'limited'); + atom.workspace.closeActivePaneItemOrEmptyPaneOrWindow(); } - decline () { - atom.config.set('core.telemetryConsent', 'no') - atom.workspace.closeActivePaneItemOrEmptyPaneOrWindow() + decline() { + atom.config.set('core.telemetryConsent', 'no'); + atom.workspace.closeActivePaneItemOrEmptyPaneOrWindow(); } - openMetricsPackage () { - atom.workspace.open('atom://config/packages/metrics') + openMetricsPackage() { + atom.workspace.open('atom://config/packages/metrics'); } - getTitle () { - return 'Telemetry Consent' + getTitle() { + return 'Telemetry Consent'; } - async destroy () { - await etch.destroy(this) + async destroy() { + await etch.destroy(this); } } diff --git a/packages/welcome/lib/guide-view.js b/packages/welcome/lib/guide-view.js index ce876f93f10..99e6baa69ee 100644 --- a/packages/welcome/lib/guide-view.js +++ b/packages/welcome/lib/guide-view.js @@ -1,42 +1,48 @@ /** @babel */ /** @jsx etch.dom **/ -import etch from 'etch' +import etch from 'etch'; export default class GuideView { - constructor (props) { - this.props = props - this.didClickProjectButton = this.didClickProjectButton.bind(this) - this.didClickGitButton = this.didClickGitButton.bind(this) - this.didClickGitHubButton = this.didClickGitHubButton.bind(this) - this.didClickTeletypeButton = this.didClickTeletypeButton.bind(this) - this.didClickPackagesButton = this.didClickPackagesButton.bind(this) - this.didClickThemesButton = this.didClickThemesButton.bind(this) - this.didClickStylingButton = this.didClickStylingButton.bind(this) - this.didClickInitScriptButton = this.didClickInitScriptButton.bind(this) - this.didClickSnippetsButton = this.didClickSnippetsButton.bind(this) - this.didExpandOrCollapseSection = this.didExpandOrCollapseSection.bind(this) - etch.initialize(this) + constructor(props) { + this.props = props; + this.didClickProjectButton = this.didClickProjectButton.bind(this); + this.didClickGitButton = this.didClickGitButton.bind(this); + this.didClickGitHubButton = this.didClickGitHubButton.bind(this); + this.didClickTeletypeButton = this.didClickTeletypeButton.bind(this); + this.didClickPackagesButton = this.didClickPackagesButton.bind(this); + this.didClickThemesButton = this.didClickThemesButton.bind(this); + this.didClickStylingButton = this.didClickStylingButton.bind(this); + this.didClickInitScriptButton = this.didClickInitScriptButton.bind(this); + this.didClickSnippetsButton = this.didClickSnippetsButton.bind(this); + this.didExpandOrCollapseSection = this.didExpandOrCollapseSection.bind( + this + ); + etch.initialize(this); } - update () {} + update() {} - render () { + render() { return ( -
-
-
-

- Get to know Atom! -

+
+
+
+

Get to know Atom!

-
- - Open a Project +
+ + Open a Project -
+

- +

In Atom you can open individual files or a whole folder as a @@ -44,11 +50,15 @@ export default class GuideView { where you can browse all the files.

-

-

+

Next time: You can also open projects from the menu, keyboard shortcut or by dragging a folder onto the Atom dock icon. @@ -56,59 +66,88 @@ export default class GuideView {

-
- - Version control with Git and GitHub +
+ + Version control with{' '} + Git and GitHub -
+

- +

- Track changes to your code as you work. Branch, commit, push, and pull without leaving - the comfort of your editor. Collaborate with other developers on GitHub. + Track changes to your code as you work. Branch, commit, push, + and pull without leaving the comfort of your editor. + Collaborate with other developers on GitHub.

- -

-

- Next time: You can toggle the Git tab by clicking on the - button in your status bar. +

+ Next time: You can toggle the Git tab by + clicking on the + button in your status bar.

-
- - Collaborate in real time with Teletype +
+ + Collaborate in real time with{' '} + Teletype -
+

- +

- Share your workspace with team members and collaborate on code in real time. + Share your workspace with team members and collaborate on code + in real time.

-

-
- - Install a Package +
+ + Install a Package -
+

- +

One of the best things about Atom is the package ecosystem. @@ -116,29 +155,42 @@ export default class GuideView { can use to make the editor suit your needs. Let's install one.

-

-

- Next time: You can install new packages from the settings. +

+ Next time: You can install new packages from + the settings.

-
- - Choose a Theme +
+ + Choose a Theme -
+

- +

+

Atom comes with preinstalled themes. Let's try a few.

- Atom comes with preinstalled themes. Let's try a few. -

-

-

@@ -147,44 +199,60 @@ export default class GuideView { install new themes, click on "+ Install" and switch the toggle to "themes".

-

- Next time: You can switch themes from the settings. +

+ Next time: You can switch themes from the + settings.

-
- - Customize the Styling +
+ + Customize the Styling -
+

- +

You can customize almost anything by adding your own CSS/LESS.

-

-

- Now uncomment some of the examples or try your own -

-

- Next time: You can open your stylesheet from Menu {this.getApplicationMenuName()}. +

Now uncomment some of the examples or try your own

+

+ Next time: You can open your stylesheet from + Menu {this.getApplicationMenuName()}.

-
- - Hack on the Init Script +
+ + Hack on the Init Script -
+

- +

The init script is a bit of JavaScript or CoffeeScript run at @@ -192,26 +260,35 @@ export default class GuideView { Atom.

-

-

- Uncomment some of the examples or try out your own. -

-

- Next time: You can open your init script from Menu > {this.getApplicationMenuName()}. +

Uncomment some of the examples or try out your own.

+

+ Next time: You can open your init script from + Menu > {this.getApplicationMenuName()}.

-
- - Add a Snippet +
+ + Add a Snippet -
+

- +

Atom snippets allow you to enter a simple prefix in the editor @@ -219,148 +296,182 @@ export default class GuideView { templated values.

-

- In your snippets file, type snip then hit tab. - The snip snippet will expand - to create a snippet! + In your snippets file, type snip then hit{' '} + tab. The snip snippet will expand to + create a snippet!

-

- Next time: You can open your snippets in Menu > {this.getApplicationMenuName()}. +

+ Next time: You can open your snippets in Menu + > {this.getApplicationMenuName()}.

-
- - Learn Keyboard Shortcuts +
+ + Learn Keyboard Shortcuts -
+

- +

- If you only remember one keyboard shortcut make - it {this.getCommandPaletteKeyBinding()}. - This keystroke toggles the command palette, which lists every - Atom command. It's a good way to learn more shortcuts. Yes, - you can try it now! + If you only remember one keyboard shortcut make it{' '} + + {this.getCommandPaletteKeyBinding()} + + . This keystroke toggles the command palette, which lists + every Atom command. It's a good way to learn more shortcuts. + Yes, you can try it now!

- If you want to use these guides again use the command - palette {this.getCommandPaletteKeyBinding()} and - search for Welcome. + If you want to use these guides again use the command palette{' '} + + {this.getCommandPaletteKeyBinding()} + {' '} + and search for Welcome + .

- ) + ); } - getSectionProps (sectionName) { - const props = {dataset: {section: sectionName}, onclick: this.didExpandOrCollapseSection} - if (this.props.openSections && this.props.openSections.indexOf(sectionName) !== -1) { - props.open = true + getSectionProps(sectionName) { + const props = { + dataset: { section: sectionName }, + onclick: this.didExpandOrCollapseSection + }; + if ( + this.props.openSections && + this.props.openSections.indexOf(sectionName) !== -1 + ) { + props.open = true; } - return props + return props; } - getCommandPaletteKeyBinding () { + getCommandPaletteKeyBinding() { if (process.platform === 'darwin') { - return 'cmd-shift-p' + return 'cmd-shift-p'; } else { - return 'ctrl-shift-p' + return 'ctrl-shift-p'; } } - getApplicationMenuName () { + getApplicationMenuName() { if (process.platform === 'darwin') { - return 'Atom' + return 'Atom'; } else if (process.platform === 'linux') { - return 'Edit' + return 'Edit'; } else { - return 'File' + return 'File'; } } - serialize () { + serialize() { return { deserializer: this.constructor.name, openSections: this.getOpenSections(), uri: this.getURI() - } + }; } - getURI () { - return this.props.uri + getURI() { + return this.props.uri; } - getTitle () { - return 'Welcome Guide' + getTitle() { + return 'Welcome Guide'; } - isEqual (other) { - return other instanceof GuideView + isEqual(other) { + return other instanceof GuideView; } - getOpenSections () { - return Array.from(this.element.querySelectorAll('details[open]')) - .map((sectionElement) => sectionElement.dataset.section) + getOpenSections() { + return Array.from(this.element.querySelectorAll('details[open]')).map( + sectionElement => sectionElement.dataset.section + ); } - didClickProjectButton () { - this.props.reporterProxy.sendEvent('clicked-project-cta') - atom.commands.dispatch(atom.views.getView(atom.workspace), 'application:open') + didClickProjectButton() { + this.props.reporterProxy.sendEvent('clicked-project-cta'); + atom.commands.dispatch( + atom.views.getView(atom.workspace), + 'application:open' + ); } - didClickGitButton () { - this.props.reporterProxy.sendEvent('clicked-git-cta') - atom.commands.dispatch(atom.views.getView(atom.workspace), 'github:toggle-git-tab') + didClickGitButton() { + this.props.reporterProxy.sendEvent('clicked-git-cta'); + atom.commands.dispatch( + atom.views.getView(atom.workspace), + 'github:toggle-git-tab' + ); } - didClickGitHubButton () { - this.props.reporterProxy.sendEvent('clicked-github-cta') - atom.commands.dispatch(atom.views.getView(atom.workspace), 'github:toggle-github-tab') + didClickGitHubButton() { + this.props.reporterProxy.sendEvent('clicked-github-cta'); + atom.commands.dispatch( + atom.views.getView(atom.workspace), + 'github:toggle-github-tab' + ); } - didClickPackagesButton () { - this.props.reporterProxy.sendEvent('clicked-packages-cta') - atom.workspace.open('atom://config/install', {split: 'left'}) + didClickPackagesButton() { + this.props.reporterProxy.sendEvent('clicked-packages-cta'); + atom.workspace.open('atom://config/install', { split: 'left' }); } - didClickThemesButton () { - this.props.reporterProxy.sendEvent('clicked-themes-cta') - atom.workspace.open('atom://config/themes', {split: 'left'}) + didClickThemesButton() { + this.props.reporterProxy.sendEvent('clicked-themes-cta'); + atom.workspace.open('atom://config/themes', { split: 'left' }); } - didClickStylingButton () { - this.props.reporterProxy.sendEvent('clicked-styling-cta') - atom.workspace.open('atom://.atom/stylesheet', {split: 'left'}) + didClickStylingButton() { + this.props.reporterProxy.sendEvent('clicked-styling-cta'); + atom.workspace.open('atom://.atom/stylesheet', { split: 'left' }); } - didClickInitScriptButton () { - this.props.reporterProxy.sendEvent('clicked-init-script-cta') - atom.workspace.open('atom://.atom/init-script', {split: 'left'}) + didClickInitScriptButton() { + this.props.reporterProxy.sendEvent('clicked-init-script-cta'); + atom.workspace.open('atom://.atom/init-script', { split: 'left' }); } - didClickSnippetsButton () { - this.props.reporterProxy.sendEvent('clicked-snippets-cta') - atom.workspace.open('atom://.atom/snippets', {split: 'left'}) + didClickSnippetsButton() { + this.props.reporterProxy.sendEvent('clicked-snippets-cta'); + atom.workspace.open('atom://.atom/snippets', { split: 'left' }); } - didClickTeletypeButton () { - this.props.reporterProxy.sendEvent('clicked-teletype-cta') - atom.workspace.open('atom://config/packages/teletype', {split: 'left'}) + didClickTeletypeButton() { + this.props.reporterProxy.sendEvent('clicked-teletype-cta'); + atom.workspace.open('atom://config/packages/teletype', { split: 'left' }); } - didExpandOrCollapseSection (event) { - const sectionName = event.currentTarget.closest('details').dataset.section - const action = event.currentTarget.hasAttribute('open') ? 'collapse' : 'expand' - this.props.reporterProxy.sendEvent(`${action}-${sectionName}-section`) + didExpandOrCollapseSection(event) { + const sectionName = event.currentTarget.closest('details').dataset.section; + const action = event.currentTarget.hasAttribute('open') + ? 'collapse' + : 'expand'; + this.props.reporterProxy.sendEvent(`${action}-${sectionName}-section`); } } diff --git a/packages/welcome/lib/main.js b/packages/welcome/lib/main.js index 897383b13d1..6778d5e8357 100644 --- a/packages/welcome/lib/main.js +++ b/packages/welcome/lib/main.js @@ -1,5 +1,5 @@ /** @babel */ -import WelcomePackage from './welcome-package' +import WelcomePackage from './welcome-package'; -export default new WelcomePackage() +export default new WelcomePackage(); diff --git a/packages/welcome/lib/reporter-proxy.js b/packages/welcome/lib/reporter-proxy.js index a7ccf3da931..1611c7276b2 100644 --- a/packages/welcome/lib/reporter-proxy.js +++ b/packages/welcome/lib/reporter-proxy.js @@ -1,27 +1,27 @@ /** @babel */ export default class ReporterProxy { - constructor () { - this.reporter = null - this.queue = [] - this.eventType = 'welcome-v1' + constructor() { + this.reporter = null; + this.queue = []; + this.eventType = 'welcome-v1'; } - setReporter (reporter) { - this.reporter = reporter - let customEvent + setReporter(reporter) { + this.reporter = reporter; + let customEvent; while ((customEvent = this.queue.shift())) { - this.reporter.addCustomEvent(this.eventType, customEvent) + this.reporter.addCustomEvent(this.eventType, customEvent); } } - sendEvent (action, label, value) { - const event = { ea: action, el: label, ev: value } + sendEvent(action, label, value) { + const event = { ea: action, el: label, ev: value }; if (this.reporter) { - this.reporter.addCustomEvent(this.eventType, event) + this.reporter.addCustomEvent(this.eventType, event); } else { - this.queue.push(event) + this.queue.push(event); } } } diff --git a/packages/welcome/lib/welcome-package.js b/packages/welcome/lib/welcome-package.js index 7448848a288..ad65577d255 100644 --- a/packages/welcome/lib/welcome-package.js +++ b/packages/welcome/lib/welcome-package.js @@ -1,81 +1,87 @@ /** @babel */ -import {CompositeDisposable} from 'atom' -import ReporterProxy from './reporter-proxy' +import { CompositeDisposable } from 'atom'; +import ReporterProxy from './reporter-proxy'; -let WelcomeView, GuideView, ConsentView +let WelcomeView, GuideView, ConsentView; -const WELCOME_URI = 'atom://welcome/welcome' -const GUIDE_URI = 'atom://welcome/guide' -const CONSENT_URI = 'atom://welcome/consent' +const WELCOME_URI = 'atom://welcome/welcome'; +const GUIDE_URI = 'atom://welcome/guide'; +const CONSENT_URI = 'atom://welcome/consent'; export default class WelcomePackage { - constructor () { - this.reporterProxy = new ReporterProxy() + constructor() { + this.reporterProxy = new ReporterProxy(); } - async activate () { - this.subscriptions = new CompositeDisposable() + async activate() { + this.subscriptions = new CompositeDisposable(); - this.subscriptions.add(atom.workspace.addOpener((filePath) => { - if (filePath === WELCOME_URI) { - return this.createWelcomeView({uri: WELCOME_URI}) - } - })) + this.subscriptions.add( + atom.workspace.addOpener(filePath => { + if (filePath === WELCOME_URI) { + return this.createWelcomeView({ uri: WELCOME_URI }); + } + }) + ); - this.subscriptions.add(atom.workspace.addOpener((filePath) => { - if (filePath === GUIDE_URI) { - return this.createGuideView({uri: GUIDE_URI}) - } - })) + this.subscriptions.add( + atom.workspace.addOpener(filePath => { + if (filePath === GUIDE_URI) { + return this.createGuideView({ uri: GUIDE_URI }); + } + }) + ); - this.subscriptions.add(atom.workspace.addOpener((filePath) => { - if (filePath === CONSENT_URI) { - return this.createConsentView({uri: CONSENT_URI}) - } - })) + this.subscriptions.add( + atom.workspace.addOpener(filePath => { + if (filePath === CONSENT_URI) { + return this.createConsentView({ uri: CONSENT_URI }); + } + }) + ); this.subscriptions.add( atom.commands.add('atom-workspace', 'welcome:show', () => this.show()) - ) + ); if (atom.config.get('core.telemetryConsent') === 'undecided') { - await atom.workspace.open(CONSENT_URI) + await atom.workspace.open(CONSENT_URI); } if (atom.config.get('welcome.showOnStartup')) { - await this.show() - this.reporterProxy.sendEvent('show-on-initial-load') + await this.show(); + this.reporterProxy.sendEvent('show-on-initial-load'); } } - show () { + show() { return Promise.all([ - atom.workspace.open(WELCOME_URI, {split: 'left'}), - atom.workspace.open(GUIDE_URI, {split: 'right'}) - ]) + atom.workspace.open(WELCOME_URI, { split: 'left' }), + atom.workspace.open(GUIDE_URI, { split: 'right' }) + ]); } - consumeReporter (reporter) { - return this.reporterProxy.setReporter(reporter) + consumeReporter(reporter) { + return this.reporterProxy.setReporter(reporter); } - deactivate () { - this.subscriptions.dispose() + deactivate() { + this.subscriptions.dispose(); } - createWelcomeView (state) { - if (WelcomeView == null) WelcomeView = require('./welcome-view') - return new WelcomeView({reporterProxy: this.reporterProxy, ...state}) + createWelcomeView(state) { + if (WelcomeView == null) WelcomeView = require('./welcome-view'); + return new WelcomeView({ reporterProxy: this.reporterProxy, ...state }); } - createGuideView (state) { - if (GuideView == null) GuideView = require('./guide-view') - return new GuideView({reporterProxy: this.reporterProxy, ...state}) + createGuideView(state) { + if (GuideView == null) GuideView = require('./guide-view'); + return new GuideView({ reporterProxy: this.reporterProxy, ...state }); } - createConsentView (state) { - if (ConsentView == null) ConsentView = require('./consent-view') - return new ConsentView({reporterProxy: this.reporterProxy, ...state}) + createConsentView(state) { + if (ConsentView == null) ConsentView = require('./consent-view'); + return new ConsentView({ reporterProxy: this.reporterProxy, ...state }); } } diff --git a/packages/welcome/lib/welcome-view.js b/packages/welcome/lib/welcome-view.js index 30d35030228..059622a8cfd 100644 --- a/packages/welcome/lib/welcome-view.js +++ b/packages/welcome/lib/welcome-view.js @@ -1,97 +1,167 @@ /** @babel */ /** @jsx etch.dom **/ -import etch from 'etch' +import etch from 'etch'; export default class WelcomeView { - constructor (props) { - this.props = props - etch.initialize(this) + constructor(props) { + this.props = props; + etch.initialize(this); - this.element.addEventListener('click', (event) => { - const link = event.target.closest('a') + this.element.addEventListener('click', event => { + const link = event.target.closest('a'); if (link && link.dataset.event) { - this.props.reporterProxy.sendEvent(`clicked-welcome-${link.dataset.event}-link`) + this.props.reporterProxy.sendEvent( + `clicked-welcome-${link.dataset.event}-link` + ); } - }) + }); } - didChangeShowOnStartup () { - atom.config.set('welcome.showOnStartup', this.checked) + didChangeShowOnStartup() { + atom.config.set('welcome.showOnStartup', this.checked); } - update () {} + update() {} - serialize () { + serialize() { return { deserializer: 'WelcomeView', uri: this.props.uri - } + }; } - render () { + render() { return ( -
-
-
- - - - - - - - - +
+
+
+ + + + + + + + + - - - - + + + + -

+

A hackable text editor for the 21st Century

-
+

For help, please visit

-
+
-
- ) + ); } - getURI () { - return this.props.uri + getURI() { + return this.props.uri; } - getTitle () { - return 'Welcome' + getTitle() { + return 'Welcome'; } - isEqual (other) { - other instanceof WelcomeView + isEqual(other) { + return other instanceof WelcomeView; } } diff --git a/packages/welcome/test/helpers.js b/packages/welcome/test/helpers.js index d7c23522c14..c1f14020331 100644 --- a/packages/welcome/test/helpers.js +++ b/packages/welcome/test/helpers.js @@ -1,9 +1,9 @@ /** @babel */ -export function conditionPromise (predicate) { - return new Promise((resolve) => { +export function conditionPromise(predicate) { + return new Promise(resolve => { setInterval(() => { - if (predicate()) resolve() - }, 100) - }) + if (predicate()) resolve(); + }, 100); + }); } diff --git a/packages/welcome/test/welcome.test.js b/packages/welcome/test/welcome.test.js index 7e796868b90..526d4513cbc 100644 --- a/packages/welcome/test/welcome.test.js +++ b/packages/welcome/test/welcome.test.js @@ -1,154 +1,184 @@ /** @babel */ /* global beforeEach, afterEach, describe, it */ -import WelcomePackage from '../lib/welcome-package' -import assert from 'assert' -import {conditionPromise} from './helpers' +import WelcomePackage from '../lib/welcome-package'; +import assert from 'assert'; +import { conditionPromise } from './helpers'; describe('Welcome', () => { - let welcomePackage + let welcomePackage; beforeEach(() => { - welcomePackage = new WelcomePackage() - atom.config.set('welcome.showOnStartup', true) - }) + welcomePackage = new WelcomePackage(); + atom.config.set('welcome.showOnStartup', true); + }); afterEach(() => { - atom.reset() - }) + atom.reset(); + }); describe("when `core.telemetryConsent` is 'undecided'", () => { beforeEach(async () => { - atom.config.set('core.telemetryConsent', 'undecided') - await welcomePackage.activate() - }) + atom.config.set('core.telemetryConsent', 'undecided'); + await welcomePackage.activate(); + }); it('opens the telemetry consent pane and the welcome panes', () => { - const panes = atom.workspace.getCenter().getPanes() - assert.equal(panes.length, 2) - assert.equal(panes[0].getItems()[0].getTitle(), 'Telemetry Consent') - assert.equal(panes[0].getItems()[1].getTitle(), 'Welcome') - assert.equal(panes[1].getItems()[0].getTitle(), 'Welcome Guide') - }) - }) + const panes = atom.workspace.getCenter().getPanes(); + assert.equal(panes.length, 2); + assert.equal(panes[0].getItems()[0].getTitle(), 'Telemetry Consent'); + assert.equal(panes[0].getItems()[1].getTitle(), 'Welcome'); + assert.equal(panes[1].getItems()[0].getTitle(), 'Welcome Guide'); + }); + }); describe('when `core.telemetryConsent` is not `undecided`', () => { beforeEach(async () => { - atom.config.set('core.telemetryConsent', 'no') - await welcomePackage.activate() - }) + atom.config.set('core.telemetryConsent', 'no'); + await welcomePackage.activate(); + }); describe('when activated for the first time', () => it('shows the welcome panes', () => { - const panes = atom.workspace.getCenter().getPanes() - assert.equal(panes.length, 2) - assert.equal(panes[0].getItems()[0].getTitle(), 'Welcome') - assert.equal(panes[1].getItems()[0].getTitle(), 'Welcome Guide') - }) - ) + const panes = atom.workspace.getCenter().getPanes(); + assert.equal(panes.length, 2); + assert.equal(panes[0].getItems()[0].getTitle(), 'Welcome'); + assert.equal(panes[1].getItems()[0].getTitle(), 'Welcome Guide'); + })); describe('the welcome:show command', () => { it('shows the welcome buffer', async () => { - atom.workspace.getCenter().getPanes().map(pane => pane.destroy()) - assert(!atom.workspace.getActivePaneItem()) + atom.workspace + .getCenter() + .getPanes() + .map(pane => pane.destroy()); + assert(!atom.workspace.getActivePaneItem()); - const workspaceElement = atom.views.getView(atom.workspace) - atom.commands.dispatch(workspaceElement, 'welcome:show') + const workspaceElement = atom.views.getView(atom.workspace); + atom.commands.dispatch(workspaceElement, 'welcome:show'); - await conditionPromise(() => atom.workspace.getActivePaneItem()) + await conditionPromise(() => atom.workspace.getActivePaneItem()); - const panes = atom.workspace.getCenter().getPanes() - assert.equal(panes.length, 2) - assert.equal(panes[0].getItems()[0].getTitle(), 'Welcome') - }) - }) + const panes = atom.workspace.getCenter().getPanes(); + assert.equal(panes.length, 2); + assert.equal(panes[0].getItems()[0].getTitle(), 'Welcome'); + }); + }); describe('deserializing the pane items', () => { describe('when GuideView is deserialized', () => { it('remembers open sections', () => { - const panes = atom.workspace.getCenter().getPanes() - const guideView = panes[1].getItems()[0] - - guideView.element.querySelector('details[data-section="snippets"]').setAttribute('open', 'open') - guideView.element.querySelector('details[data-section="init-script"]').setAttribute('open', 'open') - - const state = guideView.serialize() - - assert.deepEqual(state.openSections, ['init-script', 'snippets']) - - const newGuideView = welcomePackage.createGuideView(state) - assert(!newGuideView.element.querySelector('details[data-section="packages"]').hasAttribute('open')) - assert(newGuideView.element.querySelector('details[data-section="snippets"]').hasAttribute('open')) - assert(newGuideView.element.querySelector('details[data-section="init-script"]').hasAttribute('open')) - }) - }) - }) + const panes = atom.workspace.getCenter().getPanes(); + const guideView = panes[1].getItems()[0]; + + guideView.element + .querySelector('details[data-section="snippets"]') + .setAttribute('open', 'open'); + guideView.element + .querySelector('details[data-section="init-script"]') + .setAttribute('open', 'open'); + + const state = guideView.serialize(); + + assert.deepEqual(state.openSections, ['init-script', 'snippets']); + + const newGuideView = welcomePackage.createGuideView(state); + assert( + !newGuideView.element + .querySelector('details[data-section="packages"]') + .hasAttribute('open') + ); + assert( + newGuideView.element + .querySelector('details[data-section="snippets"]') + .hasAttribute('open') + ); + assert( + newGuideView.element + .querySelector('details[data-section="init-script"]') + .hasAttribute('open') + ); + }); + }); + }); describe('reporting events', () => { - let panes, guideView, reportedEvents + let panes, guideView, reportedEvents; beforeEach(() => { - panes = atom.workspace.getCenter().getPanes() - guideView = panes[1].getItems()[0] - reportedEvents = [] + panes = atom.workspace.getCenter().getPanes(); + guideView = panes[1].getItems()[0]; + reportedEvents = []; - welcomePackage.reporterProxy.sendEvent = (...event) => { reportedEvents.push(event) } - }) + welcomePackage.reporterProxy.sendEvent = (...event) => { + reportedEvents.push(event); + }; + }); describe('GuideView events', () => { it('captures expand and collapse events', () => { - guideView.element.querySelector('details[data-section="packages"] summary').click() - assert.deepEqual(reportedEvents, [['expand-packages-section']]) - - guideView.element.querySelector('details[data-section="packages"]').setAttribute('open', 'open') - guideView.element.querySelector('details[data-section="packages"] summary').click() - assert.deepEqual(reportedEvents, [['expand-packages-section'], ['collapse-packages-section']]) - }) + guideView.element + .querySelector('details[data-section="packages"] summary') + .click(); + assert.deepEqual(reportedEvents, [['expand-packages-section']]); + + guideView.element + .querySelector('details[data-section="packages"]') + .setAttribute('open', 'open'); + guideView.element + .querySelector('details[data-section="packages"] summary') + .click(); + assert.deepEqual(reportedEvents, [ + ['expand-packages-section'], + ['collapse-packages-section'] + ]); + }); it('captures button events', () => { - for (const detailElement of Array.from(guideView.element.querySelector('details'))) { - reportedEvents.length = 0 - - const sectionName = detailElement.dataset.section - const eventName = `clicked-${sectionName}-cta` - const primaryButton = detailElement.querySelector('.btn-primary') + for (const detailElement of Array.from( + guideView.element.querySelector('details') + )) { + reportedEvents.length = 0; + + const sectionName = detailElement.dataset.section; + const eventName = `clicked-${sectionName}-cta`; + const primaryButton = detailElement.querySelector('.btn-primary'); if (primaryButton) { - primaryButton.click() - assert.deepEqual(reportedEvents, [[eventName]]) + primaryButton.click(); + assert.deepEqual(reportedEvents, [[eventName]]); } } - }) - }) - }) + }); + }); + }); describe('when the reporter changes', () => it('sends all queued events', () => { - welcomePackage.reporterProxy.queue.length = 0 + welcomePackage.reporterProxy.queue.length = 0; const reporter1 = { - addCustomEvent (category, event) { - this.reportedEvents.push({ category, ...event }) + addCustomEvent(category, event) { + this.reportedEvents.push({ category, ...event }); }, reportedEvents: [] - } + }; const reporter2 = { - addCustomEvent (category, event) { - this.reportedEvents.push({ category, ...event }) + addCustomEvent(category, event) { + this.reportedEvents.push({ category, ...event }); }, reportedEvents: [] - } + }; - welcomePackage.reporterProxy.sendEvent('foo', 'bar', 10) - welcomePackage.reporterProxy.sendEvent('foo2', 'bar2', 60) - welcomePackage.reporterProxy.setReporter(reporter1) + welcomePackage.reporterProxy.sendEvent('foo', 'bar', 10); + welcomePackage.reporterProxy.sendEvent('foo2', 'bar2', 60); + welcomePackage.reporterProxy.setReporter(reporter1); assert.deepEqual(reporter1.reportedEvents, [ - {category: 'welcome-v1', ea: 'foo', el: 'bar', ev: 10}, - {category: 'welcome-v1', ea: 'foo2', el: 'bar2', ev: 60} - ]) - - welcomePackage.consumeReporter(reporter2) - assert.deepEqual(reporter2.reportedEvents, []) - }) - ) - }) -}) + { category: 'welcome-v1', ea: 'foo', el: 'bar', ev: 10 }, + { category: 'welcome-v1', ea: 'foo2', el: 'bar2', ev: 60 } + ]); + + welcomePackage.consumeReporter(reporter2); + assert.deepEqual(reporter2.reportedEvents, []); + })); + }); +});