FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Fix up tests to work with Jest · devhttps/frontend@febea76 · GitHub

/ frontend Public
forked from guardian/frontend

Commit febea76

Browse files
Philip Wills
committed
Fix up tests to work with Jest
1 parent 2de1f37 commit febea76

6 files changed

Lines changed: 54 additions & 34 deletions

File tree

‎__mocks__/fileMock.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎__mocks__/svgMock.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = { markup: '<svg></svg>'};

‎package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -152,8 +152,7 @@
152152
"EventEmitter": "wolfy87-eventemitter",
153153
"videojs": "video.js",
154154
"stripe": "stripe/stripe.min",
155-
"^svgs\/(.*)$": "<rootDir>/__mocks__/fileMock.js",
156-
"\\.(html)$": "<rootDir>/__mocks__/fileMock.js",
155+
"^svgs\/(.*)$": "<rootDir>/__mocks__/svgMock.js",
157156
"ophan/ng": "ophan-tracker-js",
158157
"ophan/embed": "ophan-tracker-js/build/ophan.embed"
159158
},

‎static/src/javascripts/lib/__mocks__/fastdom.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// @flow
2+
/* eslint-disable */
3+
export default {
4+
read: (fn: Function, ctx: ?Object): number => fn(),
5+
write: (fn: Function, ctx: ?Object): number => fn(),
6+
defer: (frame: number, fn: Function, ctx: ?Object): number => fn(),
7+
clear: (id: number): void => {},
8+
};

‎static/src/javascripts/projects/facia/modules/ui/container-toggle.js‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,7 @@ import fastdom from 'fastdom';
44
import $ from 'lib/$';
55
import mediator from 'lib/mediator';
66
import userPrefs from 'common/modules/user-prefs';
7-
import template from 'lodash/utilities/template';
87
import { inlineSvg } from 'common/views/svgs';
9-
import btnTmpl from 'raw-loader!facia/views/button-toggle.html';
108

119
type ToggleState = 'hidden' | 'displayed';
1210

@@ -16,30 +14,40 @@ const toggleText = {
1614
displayed: 'Hide',
1715
};
1816

17+
const btnTmpl = ({ text, dataLink, icon }) => `
18+
<button class="fc-container__toggle" data-link-name="${dataLink}">
19+
${icon}
20+
<span class="fc-container__toggle__text">${text}</span>
21+
</button>
22+
`;
23+
1924
export class ContainerToggle {
2025
$container: bonzo;
2126
state: ToggleState;
2227
$button: bonzo;
2328
constructor(container: Element) {
2429
this.$container = bonzo(container);
25-
this.addToggle();
26-
bonzo.create(
27-
template(btnTmpl, {
28-
text: 'Hide',
29-
dataLink: 'Show',
30-
icon: inlineSvg('arrowicon'),
31-
})
30+
this.$button = bonzo(
31+
bonzo.create(
32+
btnTmpl({
33+
text: 'Hide',
34+
dataLink: 'Show',
35+
icon: inlineSvg('arrowicon'),
36+
})
37+
)
3238
);
39+
this.state = 'displayed';
3340
}
3441

35-
buttonText() {
36-
$('.fc-container__toggle__text', this.$button[0]);
42+
buttonText(): bonzo {
43+
return $('.fc-container__toggle__text', this.$button);
3744
}
3845

3946
updatePref(id: string): void {
4047
// update user prefs
4148
let prefs = userPrefs.get(prefName);
4249
const prefValue = id;
50+
4351
if (this.state === 'displayed') {
4452
delete prefs[prefValue];
4553
} else {
@@ -64,7 +72,7 @@ export class ContainerToggle {
6472
'data-link-name',
6573
toggleText[this.state === 'displayed' ? 'hidden' : 'displayed']
6674
);
67-
this.buttonText.text(toggleText[this.state]);
75+
this.buttonText().text(toggleText[this.state]);
6876
});
6977
}
7078

‎static/src/javascripts/projects/facia/modules/ui/container-toggle.spec.js‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@
22
import $ from 'lib/$';
33
import bonzo from 'bonzo';
44
import fastdom from 'fastdom';
5+
import mediator from 'lib/mediator';
56
import userPrefs from 'common/modules/user-prefs';
67
import { ContainerToggle } from 'facia/modules/ui/container-toggle';
78

9+
jest.mock('lib/storage');
10+
811
describe('Container Toggle', () => {
912
let container;
1013
let $container;
11-
let mediator;
1214
const containerId = 'uk/culture/regular-stories';
1315
const storageId = 'container-states';
1416
// helper assertion method
@@ -24,27 +26,26 @@ describe('Container Toggle', () => {
2426
);
2527
};
2628

27-
function simulateClick() {
29+
const simulateClick = () => {
2830
mediator.emit('module:clickstream:click', {
2931
target: $('button', container)[0],
3032
});
31-
}
33+
};
3234

33-
beforeEach(done => {
35+
beforeEach(() => {
3436
container = bonzo.create(
3537
`<section class="fc-container js-container--toggle" data-id="${containerId}">` +
3638
`<div class="fc-container__header js-container__header">` +
3739
`<h2>A container</h2>` +
3840
`</div>` +
3941
`</section>`
40-
)[0];
41-
$container = bonzo(container);
42-
43-
done();
42+
);
43+
$container = bonzo(container[0]);
4444
});
4545

4646
afterEach(() => {
4747
$container.remove();
48+
userPrefs.remove('container-states');
4849
});
4950

5051
it('should be able to initialise', () => {
@@ -53,19 +54,18 @@ describe('Container Toggle', () => {
5354
});
5455

5556
it('should remove "js-container--toggle" class from container', done => {
56-
new ContainerToggle(container).addToggle();
57+
const toggle = new ContainerToggle(container);
58+
toggle.addToggle();
5759

58-
console.log($container.hasClass('js-container--toggle'));
5960
fastdom.defer(1, () => {
60-
console.log('foo');
61-
console.log(`bar: ${$container.hasClass('js-container--toggle')}`);
6261
expect($container.hasClass('js-container--toggle')).toBeFalsy();
6362
done();
6463
});
6564
});
6665

6766
it('should add "container--has-toggle" class to container', done => {
68-
new ContainerToggle(container).addToggle();
67+
const toggle = new ContainerToggle(container);
68+
toggle.addToggle();
6969

7070
fastdom.defer(1, () => {
7171
expect(
@@ -76,7 +76,8 @@ describe('Container Toggle', () => {
7676
});
7777

7878
it("should add button to the container's header", done => {
79-
new ContainerToggle(container).addToggle();
79+
const toggle = new ContainerToggle(container);
80+
toggle.addToggle();
8081

8182
fastdom.defer(1, () => {
8283
expect(
@@ -88,7 +89,8 @@ describe('Container Toggle', () => {
8889
});
8990

9091
it('initial state should be open', done => {
91-
new ContainerToggle(container).addToggle();
92+
const toggle = new ContainerToggle(container);
93+
toggle.addToggle();
9294

9395
fastdom.defer(1, () => {
9496
assertState($container, 'open');
@@ -97,7 +99,8 @@ describe('Container Toggle', () => {
9799
});
98100

99101
it('should be able to close container', done => {
100-
new ContainerToggle(container).addToggle();
102+
const toggle = new ContainerToggle(container);
103+
toggle.addToggle();
101104

102105
fastdom.defer(1, () => {
103106
simulateClick();
@@ -110,9 +113,10 @@ describe('Container Toggle', () => {
110113
});
111114

112115
it('should store state as user preference', done => {
113-
new ContainerToggle(container).addToggle();
114-
// click button
116+
const toggle = new ContainerToggle(container);
117+
toggle.addToggle();
115118

119+
// click button
116120
fastdom.defer(1, () => {
117121
simulateClick();
118122

@@ -138,7 +142,8 @@ describe('Container Toggle', () => {
138142
const prefs = {};
139143
prefs[containerId] = 'closed';
140144
userPrefs.set(storageId, prefs);
141-
new ContainerToggle(container).addToggle();
145+
const toggle = new ContainerToggle(container);
146+
toggle.addToggle();
142147

143148
fastdom.defer(1, () => {
144149
assertState($container, 'closed');

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL