Skip to content

/ ghostery-extension

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

GH-862: Unit tests for the Panel #31

Merged
merged 3 commits into from Apr 12, 2018
+940 −789
Merged

GH-862: Unit tests for the Panel #31

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
75c2c86
GH-862 Add unit tests for the Panel: Pause Button Snapshot, Summary A…
IAmThePan Apr 9, 2018
7a6b984
Update reducers to test for immutable state
IAmThePan Apr 10, 2018
3b4d25c
Merge branch 'develop' into unit-tests
christophertino Apr 12, 2018
File filter
Filter file types
Jump to
Jump to file
Failed to load files.

Always

Just for now

2 app/panel/actions/SummaryActions.js
View file
Open in desktop
@@ -61,7 +61,7 @@ export function updateGhosteryPaused(data) {
const pauseValue = (data.time || data.ghosteryPaused);

return function (dispatch) {
sendMessageInPromise('setPanelData', { paused_blocking: pauseValue }).then(() => {
return sendMessageInPromise('setPanelData', { paused_blocking: pauseValue }).then(() => {
dispatch({
type: UPDATE_GHOSTERY_PAUSED,
data
102 app/panel/actions/__tests__/SummaryActions.js
View file
Open in desktop
@@ -0,0 +1,102 @@
/**
* Test file for Summary Actions
*
* Ghostery Browser Extension
* https://www.ghostery.com/
*
* Copyright 2018 Ghostery, Inc. All rights reserved.
*
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0
*/

import configureStore from 'redux-mock-store';
import thunk from 'redux-thunk';
import * as msg from '../../utils/msg';
import * as summaryActions from '../SummaryActions';
import {
GET_SUMMARY_DATA,
UPDATE_TRACKER_COUNTS,
UPDATE_GHOSTERY_PAUSED,
UPDATE_SITE_POLICY,
FILTER_TRACKERS
} from '../../constants/constants';

const middlewares = [thunk];
const mockStore = configureStore(middlewares);

const testData = { test: true };
msg.sendMessageInPromise = jest.fn(messageType => new Promise((resolve, reject) => {
switch (messageType) {
case 'getPanelData':
resolve(testData);
break;
default:
resolve();
}
}));

describe('app/panel/actions/SummaryActions.js', () => {
test('getSummaryData action should return correctly', () => {
const initialState = {};
const store = mockStore(initialState);

const data = testData;
const expectedPayload = { data, type: GET_SUMMARY_DATA };

return store.dispatch(summaryActions.getSummaryData()).then(() => {
const actions = store.getActions();
expect(actions).toEqual([expectedPayload]);
});
});

test('updateTrackerCounts action should return correctly', () => {
const initialState = {};
const store = mockStore(initialState);

const data = { test: true };
const expectedPayload = { data, type: UPDATE_TRACKER_COUNTS };
store.dispatch(summaryActions.updateTrackerCounts(data));

const actions = store.getActions();
expect(actions).toEqual([expectedPayload]);
});

test('updateGhosteryPaused action should return correctly', () => {
const initialState = {};
const store = mockStore(initialState);

const data = { time: null, ghosteryPaused: true };
const expectedPayload = { data, type: UPDATE_GHOSTERY_PAUSED };

return store.dispatch(summaryActions.updateGhosteryPaused(data)).then(() => {
const actions = store.getActions();
expect(actions).toEqual([expectedPayload]);
});
});

test('updateSitePolicy action should return correctly', () => {
const initialState = {};
const store = mockStore(initialState);

const data = { test: true };
const expectedPayload = { data, type: UPDATE_SITE_POLICY };
store.dispatch(summaryActions.updateSitePolicy(data));

const actions = store.getActions();
expect(actions).toEqual([expectedPayload]);
});

test('filterTrackers action should return correctly', () => {
const initialState = {};
const store = mockStore(initialState);

const data = { test: true };
const expectedPayload = { data, type: FILTER_TRACKERS };
store.dispatch(summaryActions.filterTrackers(data));

const actions = store.getActions();
expect(actions).toEqual([expectedPayload]);
});
});
259 app/panel/components/__tests__/PauseButton.jsx
View file
Open in desktop
@@ -16,7 +16,6 @@ import renderer from 'react-test-renderer';
import { shallow } from 'enzyme';
import PauseButton from '../BuildingBlocks/PauseButton';


// Fake the translation function to only return the translation key
global.t = function (str) {
return str;
@@ -25,136 +24,140 @@ global.t = function (str) {
// Fake the Tooltip implementation
jest.mock('../Tooltip');

// Snapshot Tests
it('renders unpaused state in simple view', () => {
const initialState = {
isAbPause: false,
isPaused: false,
isPausedTimeout: null,
clickPause: () => {},
dropdownItems: [
{ name: t('pause_30_min'), name_condensed: t('pause_30_min_condensed'), val: 30 },
{ name: t('pause_1_hour'), name_condensed: t('pause_1_hour_condensed'), val: 60 },
{ name: t('pause_24_hours'), name_condensed: t('pause_24_hours_condensed'), val: 1440 },
],
isCentered: true,
isCondensed: false,
};
const component = renderer.create(<PauseButton {...initialState} />).toJSON();
expect(component).toMatchSnapshot();
});
describe('app/panel/components/BuildingBlocks/PauseButton.jsx', () => {
describe('Snapshot tests with react-test-renderer', () => {
test('unpaused state in simple view', () => {
const initialState = {
isAbPause: false,
isPaused: false,
isPausedTimeout: null,
clickPause: () => {},
dropdownItems: [
{ name: t('pause_30_min'), name_condensed: t('pause_30_min_condensed'), val: 30 },
{ name: t('pause_1_hour'), name_condensed: t('pause_1_hour_condensed'), val: 60 },
{ name: t('pause_24_hours'), name_condensed: t('pause_24_hours_condensed'), val: 1440 },
],
isCentered: true,
isCondensed: false,
};
const component = renderer.create(<PauseButton {...initialState} />).toJSON();
expect(component).toMatchSnapshot();
});

it('renders paused state in detailed view', () => {
const initialState = {
isAbPause: false,
isPaused: true,
isPausedTimeout: null,
clickPause: () => {},
dropdownItems: [
{ name: t('pause_30_min'), name_condensed: t('pause_30_min_condensed'), val: 30 },
{ name: t('pause_1_hour'), name_condensed: t('pause_1_hour_condensed'), val: 60 },
{ name: t('pause_24_hours'), name_condensed: t('pause_24_hours_condensed'), val: 1440 },
],
isCentered: false,
isCondensed: false,
};
const component = renderer.create(<PauseButton {...initialState} />).toJSON();
expect(component).toMatchSnapshot();
});
test('paused state in detailed view', () => {
const initialState = {
isAbPause: false,
isPaused: true,
isPausedTimeout: null,
clickPause: () => {},
dropdownItems: [
{ name: t('pause_30_min'), name_condensed: t('pause_30_min_condensed'), val: 30 },
{ name: t('pause_1_hour'), name_condensed: t('pause_1_hour_condensed'), val: 60 },
{ name: t('pause_24_hours'), name_condensed: t('pause_24_hours_condensed'), val: 1440 },
],
isCentered: false,
isCondensed: false,
};
const component = renderer.create(<PauseButton {...initialState} />).toJSON();
expect(component).toMatchSnapshot();
});

it('renders paused state in detailed condensed view', () => {
const initialState = {
isAbPause: true,
isPaused: true,
isPausedTimeout: null,
clickPause: () => {},
dropdownItems: [
{ name: t('pause_30_min'), name_condensed: t('pause_30_min_condensed'), val: 30 },
{ name: t('pause_1_hour'), name_condensed: t('pause_1_hour_condensed'), val: 60 },
{ name: t('pause_24_hours'), name_condensed: t('pause_24_hours_condensed'), val: 1440 },
],
isCentered: false,
isCondensed: true,
};
const component = renderer.create(<PauseButton {...initialState} />).toJSON();
expect(component).toMatchSnapshot();
});
test('paused state in detailed condensed view', () => {
const initialState = {
isAbPause: true,
isPaused: true,
isPausedTimeout: null,
clickPause: () => {},
dropdownItems: [
{ name: t('pause_30_min'), name_condensed: t('pause_30_min_condensed'), val: 30 },
{ name: t('pause_1_hour'), name_condensed: t('pause_1_hour_condensed'), val: 60 },
{ name: t('pause_24_hours'), name_condensed: t('pause_24_hours_condensed'), val: 1440 },
],
isCentered: false,
isCondensed: true,
};
const component = renderer.create(<PauseButton {...initialState} />).toJSON();
expect(component).toMatchSnapshot();
});
});

// Shallow Snapshot rendered with Enzyme
it('renders the state of the pause button correctly when Ghostery is not paused', () => {
const initialState = {
isPaused: false,
isPausedTimeout: null,
clickPause: () => {},
dropdownItems: [
{ name: t('pause_30_min'), name_condensed: t('pause_30_min_condensed'), val: 30 },
{ name: t('pause_1_hour'), name_condensed: t('pause_1_hour_condensed'), val: 60 },
{ name: t('pause_24_hours'), name_condensed: t('pause_24_hours_condensed'), val: 1440 },
],
isCentered: false,
isCondensed: false,
};
const component = shallow(<PauseButton {...initialState} />);
expect(component.find('.button').length).toBe(2);
expect(component.find('.button.button-pause').length).toBe(1);
expect(component.find('.button.button-pause.active').length).toBe(0);
expect(component.find('.button.button-pause.smaller').length).toBe(1);
expect(component.find('.button.button-pause.smallest').length).toBe(0);
expect(component.find('.dropdown-container').length).toBe(1);
expect(component.find('.dropdown-container .dropdown-item').length).toBe(0);
expect(component.find('.button-caret').length).toBe(1);
expect(component.find('.button-caret.active').length).toBe(0);
component.setState({ showDropdown: true });
expect(component.find('.dropdown-container .dropdown-item').length).toBe(3);
expect(component.find('.dropdown-container .dropdown-item.selected').length).toBe(0);
expect(component.find('.button-caret.active').length).toBe(1);
});
describe('Shallow snapshot tests rendered with Enzyme', () => {
test('the state of the pause button correctly when Ghostery is not paused', () => {
const initialState = {
isPaused: false,
isPausedTimeout: null,
clickPause: () => {},
dropdownItems: [
{ name: t('pause_30_min'), name_condensed: t('pause_30_min_condensed'), val: 30 },
{ name: t('pause_1_hour'), name_condensed: t('pause_1_hour_condensed'), val: 60 },
{ name: t('pause_24_hours'), name_condensed: t('pause_24_hours_condensed'), val: 1440 },
],
isCentered: false,
isCondensed: false,
};
const component = shallow(<PauseButton {...initialState} />);
expect(component.find('.button').length).toBe(2);
expect(component.find('.button.button-pause').length).toBe(1);
expect(component.find('.button.button-pause.active').length).toBe(0);
expect(component.find('.button.button-pause.smaller').length).toBe(1);
expect(component.find('.button.button-pause.smallest').length).toBe(0);
expect(component.find('.dropdown-container').length).toBe(1);
expect(component.find('.dropdown-container .dropdown-item').length).toBe(0);
expect(component.find('.button-caret').length).toBe(1);
expect(component.find('.button-caret.active').length).toBe(0);
component.setState({ showDropdown: true });
expect(component.find('.dropdown-container .dropdown-item').length).toBe(3);
expect(component.find('.dropdown-container .dropdown-item.selected').length).toBe(0);
expect(component.find('.button-caret.active').length).toBe(1);
});

it('renders the state of the pause button correctly when Ghostery is paused', () => {
const initialState = {
isPaused: true,
isPausedTimeout: 1800000,
clickPause: () => {},
dropdownItems: [
{ name: t('pause_30_min'), name_condensed: t('pause_30_min_condensed'), val: 30 },
{ name: t('pause_1_hour'), name_condensed: t('pause_1_hour_condensed'), val: 60 },
{ name: t('pause_24_hours'), name_condensed: t('pause_24_hours_condensed'), val: 1440 },
],
isCentered: true,
isCondensed: false,
};
const component = shallow(<PauseButton {...initialState} />);
expect(component.find('.button').length).toBe(2);
expect(component.find('.button.button-pause').length).toBe(1);
expect(component.find('.button.button-pause.active').length).toBe(1);
expect(component.find('.button.button-pause.smaller').length).toBe(0);
expect(component.find('.button.button-pause.smallest').length).toBe(0);
expect(component.find('.dropdown-container').length).toBe(1);
expect(component.find('.dropdown-container .dropdown-item').length).toBe(0);
expect(component.find('.button-caret').length).toBe(1);
expect(component.find('.button-caret.active').length).toBe(0);
component.setState({ showDropdown: true });
expect(component.find('.dropdown-container .dropdown-item').length).toBe(3);
expect(component.find('.dropdown-container .dropdown-item.selected').length).toBe(1);
expect(component.find('.button-caret.active').length).toBe(1);
});
test('the state of the pause button correctly when Ghostery is paused', () => {
const initialState = {
isPaused: true,
isPausedTimeout: 1800000,
clickPause: () => {},
dropdownItems: [
{ name: t('pause_30_min'), name_condensed: t('pause_30_min_condensed'), val: 30 },
{ name: t('pause_1_hour'), name_condensed: t('pause_1_hour_condensed'), val: 60 },
{ name: t('pause_24_hours'), name_condensed: t('pause_24_hours_condensed'), val: 1440 },
],
isCentered: true,
isCondensed: false,
};
const component = shallow(<PauseButton {...initialState} />);
expect(component.find('.button').length).toBe(2);
expect(component.find('.button.button-pause').length).toBe(1);
expect(component.find('.button.button-pause.active').length).toBe(1);
expect(component.find('.button.button-pause.smaller').length).toBe(0);
expect(component.find('.button.button-pause.smallest').length).toBe(0);
expect(component.find('.dropdown-container').length).toBe(1);
expect(component.find('.dropdown-container .dropdown-item').length).toBe(0);
expect(component.find('.button-caret').length).toBe(1);
expect(component.find('.button-caret.active').length).toBe(0);
component.setState({ showDropdown: true });
expect(component.find('.dropdown-container .dropdown-item').length).toBe(3);
expect(component.find('.dropdown-container .dropdown-item.selected').length).toBe(1);
expect(component.find('.button-caret.active').length).toBe(1);
});

it('renders the pause button correctly it is centered and condensed', () => {
const initialState = {
isPaused: false,
isPausedTimeout: null,
clickPause: () => {},
dropdownItems: [
{ name: t('pause_30_min'), name_condensed: t('pause_30_min_condensed'), val: 30 },
{ name: t('pause_1_hour'), name_condensed: t('pause_1_hour_condensed'), val: 60 },
{ name: t('pause_24_hours'), name_condensed: t('pause_24_hours_condensed'), val: 1440 },
],
isCentered: true,
isCondensed: true,
};
const component = shallow(<PauseButton {...initialState} />);
expect(component.find('.button').length).toBe(2);
expect(component.find('.button.button-pause').length).toBe(1);
expect(component.find('.button.button-pause.smaller').length).toBe(0);
expect(component.find('.button.button-pause.smallest').length).toBe(1);
test('the pause button correctly it is centered and condensed', () => {
const initialState = {
isPaused: false,
isPausedTimeout: null,
clickPause: () => {},
dropdownItems: [
{ name: t('pause_30_min'), name_condensed: t('pause_30_min_condensed'), val: 30 },
{ name: t('pause_1_hour'), name_condensed: t('pause_1_hour_condensed'), val: 60 },
{ name: t('pause_24_hours'), name_condensed: t('pause_24_hours_condensed'), val: 1440 },
],
isCentered: true,
isCondensed: true,
};
const component = shallow(<PauseButton {...initialState} />);
expect(component.find('.button').length).toBe(2);
expect(component.find('.button.button-pause').length).toBe(1);
expect(component.find('.button.button-pause.smaller').length).toBe(0);
expect(component.find('.button.button-pause.smallest').length).toBe(1);
});
});
});
ProTip! Use n and p to navigate between commits in a pull request.