Skip to content

Commit 0580327

Browse files
steryereosteryereo
authored
Store last selected diff type in layeredStorage (#477)
Whenever a user selects a specific diff type from the dropdown, save that selection in session and local storage so it sticks around for future page views, rather than resetting every time a user views a new page. Resolves #234.
1 parent ba2b8c1 commit 0580327

File tree

2 files changed

+370
-35
lines changed

2 files changed

+370
-35
lines changed

‎src/components/__tests__/change-view.test.jsx‎

Lines changed: 332 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,332 @@
1+
/* eslint-env jest */
2+
3+
import React from 'react';
4+
import {shallow} from 'enzyme';
5+
import ChangeView, {defaultDiffType, diffTypeStorage} from '../change-view/change-view';
6+
import layeredStorage from '../../scripts/layered-storage';
7+
import simplePage from '../../__mocks__/simple-page.json';
8+
import WebMonitoringDb from '../../services/web-monitoring-db';
9+
import {diffTypesFor} from '../../constants/diff-types';
10+
11+
jest.mock('../../scripts/layered-storage', () => ({
12+
__esModule: true,
13+
default: {
14+
getItem (key) { return this._data[key]; },
15+
setItem (key, value) { return this._data[key] = value; },
16+
removeItem (key) { return delete this._data[key]; },
17+
clear () { this._data = {}; },
18+
_data: {}
19+
}
20+
}));
21+
22+
const mockChange = {
23+
uuid: 'adc70e01-0723-4a28-a8e4-ca4b551ed2ae..0772dc83-7966-4881-8901-eceb051b9536',
24+
uuid_from: 'adc70e01-0723-4a28-a8e4-ca4b551ed2ae',
25+
uuid_to: '0772dc83-7966-4881-8901-eceb051b9536',
26+
priority: null,
27+
current_annotation: {},
28+
created_at: null,
29+
updated_at: null,
30+
significance: null
31+
};
32+
33+
// Note for testing relevant diffTypes:
34+
// the defaultDiffType (SIDE_BY_SIDE_RENDERED) is only relevant for the "text/html" media type
35+
// the relevant types for "text/*" are a subset of the relevant types for "text/html"
36+
// the relevant types for 'text/html' and "*/*" are mutually exclusive
37+
38+
describe('change-view', () => {
39+
const mockApi = Object.assign(
40+
Object.create(WebMonitoringDb.prototype),
41+
{getChange: () => Promise.resolve(mockChange)}
42+
);
43+
44+
afterEach(() => {
45+
layeredStorage.clear();
46+
});
47+
48+
describe('initial diffType', () => {
49+
describe('when a diffType has been stored in layeredStorage and is relevant to the pages being compared', () => {
50+
it('sets state.diffType to the stored value', () => {
51+
const storedDiffType = 'CHANGES_ONLY_TEXT';
52+
layeredStorage.setItem(diffTypeStorage, storedDiffType);
53+
54+
const changeView = shallow(
55+
<ChangeView
56+
page={simplePage}
57+
from={{content_type: 'text/html'}}
58+
to={{content_type: 'text/html'}}
59+
user={{email: 'me'}}
60+
/>,
61+
{context: {api: mockApi}}
62+
);
63+
64+
expect(changeView.state().diffType).toBe(storedDiffType);
65+
});
66+
67+
describe('when a diffType has been stored in layeredStorage and is is NOT relevant to the pages being compared', () => {
68+
it('sets state.diffType to defaultDiffType if that is relevant to the pages being compared', () => {
69+
const storedDiffType = 'IRRELEVANT_DIFF_TYPE';
70+
layeredStorage.setItem(diffTypeStorage, storedDiffType);
71+
72+
const changeView = shallow(
73+
<ChangeView
74+
page={simplePage}
75+
from={{content_type: 'text/html'}}
76+
to={{content_type: 'text/html'}}
77+
user={{email: 'me'}}
78+
/>,
79+
{context: {api: mockApi}}
80+
);
81+
82+
expect(changeView.state().diffType).toBe(defaultDiffType);
83+
});
84+
85+
it('sets state.diffType to the first relevant diff type if defaultDiffType is NOT relevant to the pages being compared', () => {
86+
const storedDiffType = 'IRRELEVANT_DIFF_TYPE';
87+
layeredStorage.setItem(diffTypeStorage, storedDiffType);
88+
89+
const mediaType = 'text/xml';
90+
const relevantTypes = diffTypesFor(mediaType);
91+
92+
const changeView = shallow(
93+
<ChangeView
94+
page={simplePage}
95+
from={{content_type: mediaType}}
96+
to={{content_type: mediaType}}
97+
user={{email: 'me'}}
98+
/>,
99+
{context: {api: mockApi}}
100+
);
101+
102+
expect(changeView.state().diffType).toBe(relevantTypes[0].value);
103+
});
104+
});
105+
});
106+
107+
describe('when a diffType has NOT been stored in layeredStorage', () => {
108+
it('sets state.diffType to defaultDiffType if that is relevant to the pages being compared', () => {
109+
const changeView = shallow(
110+
<ChangeView
111+
page={simplePage}
112+
from={{content_type: 'text/html'}}
113+
to={{content_type: 'text/html'}}
114+
user={{email: 'me'}}
115+
/>,
116+
{context: {api: mockApi}}
117+
);
118+
119+
expect(changeView.state().diffType).toBe(defaultDiffType);
120+
});
121+
122+
it('sets state.diffType to the first relevant diff type if defautDiffType is NOT relevant to the pages being compared', () => {
123+
const mediaType = 'text/xml';
124+
const relevantTypes = diffTypesFor(mediaType);
125+
126+
const changeView = shallow(
127+
<ChangeView
128+
page={simplePage}
129+
from={{content_type: mediaType}}
130+
to={{content_type: mediaType}}
131+
user={{email: 'me'}}
132+
/>,
133+
{context: {api: mockApi}}
134+
);
135+
136+
expect(changeView.state().diffType).toBe(relevantTypes[0].value);
137+
});
138+
});
139+
});
140+
141+
describe('when the page versions change via props', () => {
142+
it('leaves state.diffType at its current value when it is relevant to the new pages being compared', () => {
143+
const oldMediaType = 'text/xml';
144+
const newMediaType = 'text/html';
145+
146+
const diffType = diffTypesFor(oldMediaType)[0].value;
147+
148+
const changeView = shallow(
149+
<ChangeView
150+
page={simplePage}
151+
from={{content_type: oldMediaType}}
152+
to={{content_type: oldMediaType}}
153+
user={{email: 'me'}}
154+
/>,
155+
{context: {api: mockApi}}
156+
);
157+
158+
changeView.setProps({
159+
from: {content_type: newMediaType},
160+
to: {content_type: newMediaType},
161+
});
162+
163+
expect(changeView.state().diffType).toBe(diffType);
164+
});
165+
166+
describe('when state.diffType is NOT relevant to the new pages being compared', () => {
167+
describe('when a diffType has been stored in layeredStorage', () => {
168+
it('sets state.diffType to the stored value in layeredStorage if that diffType is relevant to the pages being compared', () => {
169+
const oldMediaType = 'text/html';
170+
const newMediaType = 'image/jpeg';
171+
172+
const storedDiffType = diffTypesFor(newMediaType)[1].value;
173+
174+
layeredStorage.setItem(diffTypeStorage, storedDiffType);
175+
176+
const changeView = shallow(
177+
<ChangeView
178+
page={simplePage}
179+
from={{content_type: oldMediaType}}
180+
to={{content_type: oldMediaType}}
181+
user={{email: 'me'}}
182+
/>,
183+
{context: {api: mockApi}}
184+
);
185+
186+
changeView.setProps({
187+
from: {content_type: newMediaType},
188+
to: {content_type: newMediaType},
189+
});
190+
191+
expect(changeView.state().diffType).toBe(storedDiffType);
192+
});
193+
194+
it('sets state.diffType to defaultDiffType if the stored diffType is NOT relevant to the pages being compared but defaultDiffType is', () => {
195+
const oldMediaType = 'image/jpeg';
196+
const newMediaType = 'text/html';
197+
198+
const storedDiffType = 'IRRELEVANT_DIFF_TYPE';
199+
layeredStorage.setItem(diffTypeStorage, storedDiffType);
200+
201+
const changeView = shallow(
202+
<ChangeView
203+
page={simplePage}
204+
from={{content_type: oldMediaType}}
205+
to={{content_type: oldMediaType}}
206+
user={{email: 'me'}}
207+
/>,
208+
{context: {api: mockApi}}
209+
);
210+
211+
changeView.setProps({
212+
from: {content_type: newMediaType},
213+
to: {content_type: newMediaType},
214+
});
215+
216+
expect(changeView.state().diffType).toBe(defaultDiffType);
217+
});
218+
219+
it('sets state.diffType to the first relevant diff type if neither the stored diffType nor defaultDiffType are relevant to the pages being compared', () => {
220+
const oldMediaType = 'text/html';
221+
const newMediaType = 'image/jpeg';
222+
223+
const storedDiffType = 'IRRELEVANT_DIFF_TYPE';
224+
layeredStorage.setItem(diffTypeStorage, storedDiffType);
225+
226+
const changeView = shallow(
227+
<ChangeView
228+
page={simplePage}
229+
from={{content_type: oldMediaType}}
230+
to={{content_type: oldMediaType}}
231+
user={{email: 'me'}}
232+
/>,
233+
{context: {api: mockApi}}
234+
);
235+
236+
changeView.setProps({
237+
from: {content_type: newMediaType},
238+
to: {content_type: newMediaType},
239+
});
240+
241+
expect(changeView.state().diffType).toBe(diffTypesFor(newMediaType)[0].value);
242+
});
243+
});
244+
});
245+
246+
it('sets state.diffType to defaultDiffType if it is relevant to the pages being compared', () => {
247+
const oldMediaType = 'image/jpeg';
248+
const newMediaType = 'text/html';
249+
250+
const changeView = shallow(
251+
<ChangeView
252+
page={simplePage}
253+
from={{content_type: oldMediaType}}
254+
to={{content_type: oldMediaType}}
255+
user={{email: 'me'}}
256+
/>,
257+
{context: {api: mockApi}}
258+
);
259+
260+
changeView.setProps({
261+
from: {content_type: newMediaType},
262+
to: {content_type: newMediaType},
263+
});
264+
265+
expect(changeView.state().diffType).toBe(defaultDiffType);
266+
});
267+
268+
it('sets state.diffType to the first relevant diff type if defaultDiffType is NOT relevant to the pages being compared', () => {
269+
const oldMediaType = 'text/html';
270+
const newMediaType = 'image/jpeg';
271+
272+
const changeView = shallow(
273+
<ChangeView
274+
page={simplePage}
275+
from={{content_type: oldMediaType}}
276+
to={{content_type: oldMediaType}}
277+
user={{email: 'me'}}
278+
/>,
279+
{context: {api: mockApi}}
280+
);
281+
282+
changeView.setProps({
283+
from: {content_type: newMediaType},
284+
to: {content_type: newMediaType},
285+
});
286+
287+
expect(changeView.state().diffType).toBe(diffTypesFor(newMediaType)[0].value);
288+
});
289+
});
290+
291+
describe('when the user chooses a new diffType', () => {
292+
it('sets state.diffType to the new diffType', () => {
293+
const changeView = shallow(
294+
<ChangeView
295+
page={simplePage}
296+
from={{content_type: 'text/html'}}
297+
to={{content_type: 'text/html'}}
298+
user={{email: 'me'}}
299+
/>,
300+
{context: {api: mockApi}}
301+
);
302+
303+
expect(changeView.state().diffType).toBe(defaultDiffType);
304+
305+
const newType = diffTypesFor('text/html')[0].value;
306+
307+
// sanity check
308+
expect(newType).not.toEqual(defaultDiffType);
309+
310+
changeView.find('SelectDiffType').props().onChange(newType);
311+
312+
expect(changeView.state().diffType).toBe(newType);
313+
});
314+
315+
it('stores the new diffType in layeredStorage', () => {
316+
const changeView = shallow(
317+
<ChangeView
318+
page={simplePage}
319+
from={{content_type: 'text/html'}}
320+
to={{content_type: 'text/html'}}
321+
user={{email: 'me'}}
322+
/>,
323+
{context: {api: mockApi}}
324+
);
325+
326+
const newType = diffTypesFor('text/html')[0].value;
327+
changeView.find('SelectDiffType').props().onChange(newType);
328+
329+
expect(layeredStorage.getItem(diffTypeStorage)).toBe(newType);
330+
});
331+
});
332+
});

0 commit comments

Comments
 (0)