Skip to content
This repository has been archived by the owner on Apr 6, 2021. It is now read-only.

Commit

Permalink
Add some more tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@willdurand
willdurand committed Jul 9, 2017
1 parent e78c498 commit 9c3c366
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 28 deletions.
3 changes: 3 additions & 0 deletions src/scripts/GalaxyTour.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,9 @@ class GalaxyTour {

fromYAML(content: string) {
const data = yaml.load(content);
if (!data) {
return;
}

['id', 'name', 'description', 'title_default', 'steps'].forEach(prop => {
// cf. https://github.com/facebook/flow/issues/103
Expand Down
28 changes: 12 additions & 16 deletions src/scripts/contentscript.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,8 @@ export const updateStatus = (message: string, $panel: HTMLElement) => {
$status.innerHTML = message;
};

const clearStatus = ($panel: HTMLElement) => updateStatus('', $panel);

const runTour = (tour: GalaxyTour) => {
const script = document.createElement('script');
const jsonSteps = JSON.stringify(tour.getStepsForInjection(), (k, v) => {
Expand Down Expand Up @@ -116,7 +118,7 @@ const runTour = (tour: GalaxyTour) => {
script.remove();
};

const onClick: EventListener = (event: Event) => {
export const onClick: EventListener = (event: Event) => {
const $panel = html.getPanel();
if (!$panel) {
return;
Expand All @@ -130,30 +132,26 @@ const onClick: EventListener = (event: Event) => {
if (event.target.id === html.BTN_NEW) {
return newTour($panel)
.then(newTour => {
updateStatus('', $panel);
clearStatus($panel);
currentTour = newTour;
})
.catch(e => updateStatus(`Error: ${e.message || e}`, $panel));
}

if (event.target.id === html.BTN_SAVE) {
const $btn = $panel.querySelector('#tour-save');

const $btn = $panel.querySelector(html.BTN_SAVE);
toggleAttribute($btn, 'disabled');

return saveTour(currentTour, $panel)
.then(() => {
updateStatus('', $panel);
})
.then(() => clearStatus($panel))
.catch(e => updateStatus(`Error: ${e.message || e}`, $panel))
.then(() => {
toggleAttribute($btn, 'disabled');
});
.then(() => toggleAttribute($btn, 'disabled'));
}

if (event.target.id === html.BTN_RECORD) {
toggleClass($panel, 'recording');
['run', 'export', 'new'].forEach(action => {
toggleAttribute($panel.querySelector(`#tour-${action}`), 'disabled');
[html.BTN_PLAY, html.BTN_EXPORT, html.BTN_NEW].forEach(button => {
toggleAttribute($panel.querySelector(`#${button}`), 'disabled');
});
recording = !recording;
return;
Expand Down Expand Up @@ -191,10 +189,8 @@ const onClick: EventListener = (event: Event) => {
}

return addStepToTour(currentTour, path, placement, $panel)
.then(updatedTour => {
updateStatus('', $panel);
currentTour = updatedTour;
})
.then(updatedTour => (currentTour = updatedTour))
.then(() => clearStatus($panel))
.catch(e => updateStatus(`Error: ${e.message || e}`, $panel));
};

Expand Down
116 changes: 104 additions & 12 deletions src/scripts/contentscript.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as cs from './contentscript';
import GalaxyTour from './GalaxyTour';
import { getEditor, getStatus } from './utils/html';
import * as html from './utils/html';

jest.mock('./utils/ext', () => {
return {
Expand All @@ -26,11 +26,11 @@ describe('syncEditorWithTour()', () => {
const tour = new GalaxyTour();
const $el = document.querySelector('#galaxy-tourbuilder');

expect(getEditor($el).value).toEqual('');
expect(html.getEditor($el).value).toEqual('');

return cs.syncEditorWithTour(tour, $el).then(t => {
expect(t).toBe(tour);
expect(getEditor($el).value).toEqual(tour.toYAML());
expect(html.getEditor($el).value).toEqual(tour.toYAML());
});
});

Expand All @@ -40,7 +40,7 @@ describe('syncEditorWithTour()', () => {

const tour = new GalaxyTour();
const $el = document.querySelector('#galaxy-tourbuilder');
expect(getEditor($el).value).toEqual('');
expect(html.getEditor($el).value).toEqual('');

// force-throw an error
tour.toYAML = () => {
Expand All @@ -59,11 +59,11 @@ describe('newTour()', () => {
'<div id="galaxy-tourbuilder"><textarea>id: foo</textarea></div>';

const $el = document.querySelector('#galaxy-tourbuilder');
expect(getEditor($el).value).toEqual('id: foo');
expect(html.getEditor($el).value).toEqual('id: foo');

return cs.newTour($el).then(t => {
expect(t).toMatchObject(new GalaxyTour());
expect(getEditor($el).value).toEqual(t.toYAML());
expect(html.getEditor($el).value).toEqual(t.toYAML());
});
});
});
Expand All @@ -74,11 +74,11 @@ describe('saveTour()', () => {
'<div id="galaxy-tourbuilder"><textarea>id: foo</textarea></div>';

const $el = document.querySelector('#galaxy-tourbuilder');
expect(getEditor($el).value).toEqual('id: foo');
expect(html.getEditor($el).value).toEqual('id: foo');

return cs.saveTour(new GalaxyTour(), $el).then(t => {
expect(t.id).toBe('foo');
expect(getEditor($el).value).toEqual(t.toYAML());
expect(html.getEditor($el).value).toEqual(t.toYAML());
});
});

Expand Down Expand Up @@ -108,13 +108,13 @@ describe('addStepToTour()', () => {

const tour = new GalaxyTour();
const $el = document.querySelector('#galaxy-tourbuilder');
expect(getEditor($el).value).toEqual('');
expect(html.getEditor($el).value).toEqual('');

expect(tour.steps.length).toBe(0);

return cs.addStepToTour(tour, 'path', 'placement', $el).then(t => {
expect(tour.steps.length).toBe(1);
expect(getEditor($el).value).toEqual(t.toYAML());
expect(html.getEditor($el).value).toEqual(t.toYAML());
});
});
});
Expand All @@ -128,9 +128,101 @@ describe('updateStatus()', () => {
'</div>';

const $el = document.querySelector('#galaxy-tourbuilder');
expect(getStatus($el).innerHTML).toEqual('');
expect(html.getStatus($el).innerHTML).toEqual('');

cs.updateStatus('hello, world', $el);
expect(getStatus($el).innerHTML).toEqual('hello, world');
expect(html.getStatus($el).innerHTML).toEqual('hello, world');
});
});

describe('onClick()', () => {
it('can toggle the editor', () => {
document.body.innerHTML = '<div id="galaxy-tourbuilder"></div>';

const $el = document.querySelector('#galaxy-tourbuilder');
expect($el.className).toBe('');

cs.onClick({ target: { id: html.BTN_TOGGLE } });
expect($el.className).toBe('hidden');

cs.onClick({ target: { id: html.BTN_TOGGLE } });
expect($el.className).toBe('');
});

it('can create a new tour', () => {
document.body.innerHTML =
'<div id="galaxy-tourbuilder"><textarea>id: foo</textarea></div>';

const $el = document.querySelector('#galaxy-tourbuilder');
expect(html.getEditor($el).value).toEqual('id: foo');

cs.onClick({ target: { id: html.BTN_NEW } });
expect(html.getEditor($el).value).not.toEqual('id: foo');
expect(html.getEditor($el).value).toContain('id: new-tour');
});

it('can start/stop recording', () => {
document.body.innerHTML = html.createPanel().outerHTML;

const $el = document.querySelector('#galaxy-tourbuilder');
expect($el.className).toBe('');
expect($el.querySelector(`#${html.BTN_NEW}`).disabled).toBe(false);
expect($el.querySelector(`#${html.BTN_PLAY}`).disabled).toBe(false);
expect($el.querySelector(`#${html.BTN_EXPORT}`).disabled).toBe(false);

cs.onClick({ target: { id: html.BTN_RECORD } });

expect($el.className).toBe('recording');
expect($el.querySelector(`#${html.BTN_NEW}`).disabled).toBe(true);
expect($el.querySelector(`#${html.BTN_PLAY}`).disabled).toBe(true);
expect($el.querySelector(`#${html.BTN_EXPORT}`).disabled).toBe(true);

cs.onClick({ target: { id: html.BTN_RECORD } });

expect($el.className).toBe('');
expect($el.querySelector(`#${html.BTN_NEW}`).disabled).toBe(false);
expect($el.querySelector(`#${html.BTN_PLAY}`).disabled).toBe(false);
expect($el.querySelector(`#${html.BTN_EXPORT}`).disabled).toBe(false);
});

it('can save the content of a tour', () => {
document.body.innerHTML =
'<div id="galaxy-tourbuilder"><textarea>id: foo</textarea></div>';

const $el = document.querySelector('#galaxy-tourbuilder');
expect(html.getEditor($el).value).toEqual('id: foo');

// This is possible because we return the promise of `saveTour()` in the
// code. Also, saving a tour adds missing information to the YAML.
return cs.onClick({ target: { id: html.BTN_SAVE } }).then(() => {
expect(html.getEditor($el).value).toEqual(
[
'id: foo',
"name: ''",
"description: ''",
"title_default: ''",
'steps: []\n',
].join('\n')
);
});
});

it('can handle error on save', () => {
document.body.innerHTML = html.createPanel().outerHTML;

const $el = document.querySelector('#galaxy-tourbuilder');
// here the steps attribute has an opening bracket, but not the closing
// one, resulting in an error.
html.getEditor($el).innerHTML = 'id: foo\nsteps: [';

expect(html.getStatus($el).innerHTML).toEqual('');

// This is possible because we return the promise of `saveTour()` in the
// code.
return cs.onClick({ target: { id: html.BTN_SAVE } }).then(() => {
expect(html.getStatus($el).innerHTML).toContain(
'Error: unexpected end of the stream within a flow collection at line 3, column 1'
);
});
});
});

0 comments on commit 9c3c366

Please sign in to comment.