Skip to content
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.

Sign up for GitHub

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

Profiles SASS Rewrite Follow-Up #372

Merged
merged 6 commits into from
Mar 4, 2019
Merged

Profiles SASS Rewrite Follow-Up #372

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5b47a23
initial profiles sass rewrite follow up
walmat Feb 27, 2019
daedd89
split loadProfile testing into new file
walmat Feb 27, 2019
92c1898
fixed lint
walmat Feb 27, 2019
692e6c6
pr changes
walmat Feb 28, 2019
733cb16
pr changes
walmat Feb 28, 2019
71714ea
pr changes
walmat Feb 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 157 additions & 0 deletions packages/frontend/src/__tests__/profiles/loadProfile.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
/* global describe it expect beforeEach jest test */
import React from 'react';
import { shallow } from 'enzyme';

import { LoadProfilePrimitive, mapDispatchToProps } from '../../profiles/loadProfile';
import { profileActions } from '../../state/actions';
import { initialProfileStates } from '../../utils/definitions/profileDefinitions';
import { initialState } from '../../state/reducers';

describe('<LoadProfile />', () => {
let defaultProps;

const renderShallowWithProps = customProps => {
const renderProps = {
...defaultProps,
...customProps,
};
return shallow(
<LoadProfilePrimitive
theme={renderProps.theme}
profiles={renderProps.profiles}
selectedProfile={renderProps.selectedProfile}
onLoadProfile={renderProps.onLoadProfile}
onSelectProfile={renderProps.onSelectProfile}
onDestroyProfile={renderProps.onDestroyProfile}
/>,
);
};

beforeEach(() => {
defaultProps = {
theme: initialState.theme,
profiles: initialProfileStates.list,
selectedProfile: initialProfileStates.profile,
onLoadProfile: () => {},
onSelectProfile: () => {},
onDestroyProfile: () => {},
};
});

it('should render with required props', () => {
const wrapper = renderShallowWithProps();
expect(wrapper).toBeDefined();
expect(wrapper.find('.profiles-load__input-group--select')).toHaveLength(1);
expect(wrapper.find('.profiles-load__input-group--load')).toHaveLength(1);
expect(wrapper.find('.profiles-load__input-group--delete')).toHaveLength(1);
});

it('test profile selection list', () => {
const customProps = {
profiles: [1, 2, 3].map(id => ({
...initialProfileStates.profile,
id,
profileName: `profile${id}`,
})),
selectedProfile: {
...initialProfileStates,
id: 1,
profileName: 'profile1',
},
};
const expectedOptions = customProps.profiles.map(p => ({
value: p.id,
label: p.profileName,
}));
const expectedSelectedOption = { value: 1, label: 'profile1' };
const wrapper = renderShallowWithProps(customProps);
const profileSelector = wrapper.find('.profiles-load__input-group--select');
expect(profileSelector.prop('value')).toEqual(expectedSelectedOption);
expect(profileSelector.prop('options')).toEqual(expectedOptions);
});

describe('should call correct event handler when', () => {
test('selecting a different profile', () => {
const customProps = {
profiles: [1, 2, 3].map(id => ({
...initialProfileStates.profile,
id,
profileName: `profile${id}`,
})),
selectedProfile: {
...initialProfileStates,
id: 1,
profileName: 'profile1',
},
onSelectProfile: jest.fn(),
};
const wrapper = renderShallowWithProps(customProps);
const profileSelector = wrapper.find('.profiles-load__input-group--select');
profileSelector.simulate('change', { value: 2 });
expect(customProps.onSelectProfile).toHaveBeenCalledWith(customProps.profiles[1]);
});

test('loading the selected profile', () => {
const customProps = {
profiles: [1, 2, 3].map(id => ({
...initialProfileStates.profile,
id,
profileName: `profile${id}`,
})),
selectedProfile: {
...initialProfileStates,
id: 1,
profileName: 'profile1',
},
onLoadProfile: jest.fn(),
};
const wrapper = renderShallowWithProps(customProps);
const profileLoader = wrapper.find('.profiles-load__input-group--load');
profileLoader.simulate('click');
expect(customProps.onLoadProfile).toHaveBeenCalledWith(customProps.selectedProfile);
});

test('deleting a profile', () => {
const customProps = {
selectedProfile: {
...initialProfileStates,
id: 1,
profileName: 'profile1',
},
onDestroyProfile: jest.fn(),
};
const wrapper = renderShallowWithProps(customProps);
const profileDeleter = wrapper.find('.profiles-load__input-group--delete');
const event = { preventDefault: jest.fn() };
profileDeleter.simulate('click', event);
expect(event.preventDefault).toHaveBeenCalled();
expect(customProps.onDestroyProfile).toHaveBeenCalledWith(customProps.selectedProfile);
});
});

test('map dispatch to props returns correct structure', () => {
const dispatch = jest.fn();
const tempProfile = {
...initialProfileStates.profile,
id: 1,
editId: 1,
};
const expectedActions = [
profileActions.load(tempProfile),
profileActions.remove(1),
profileActions.select(tempProfile),
];
const actual = mapDispatchToProps(dispatch);
actual.onLoadProfile(tempProfile);
actual.onDestroyProfile(tempProfile);
actual.onSelectProfile(tempProfile);

expect(dispatch).toHaveBeenCalledTimes(3);
expectedActions.forEach((action, n) => {
expect(dispatch).toHaveBeenNthCalledWith(
n + 1,
typeof action !== 'function' ? action : expect.any(Function),
);
});
});
});
105 changes: 1 addition & 104 deletions packages/frontend/src/__tests__/profiles/profiles.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,9 @@ describe('<Profiles />', () => {
<ProfilesPrimitive
profiles={renderProps.profiles}
currentProfile={renderProps.currentProfile}
selectedProfile={renderProps.selectedProfile}
onClickBillingMatchesShipping={renderProps.onClickBillingMatchesShipping}
onProfileNameChange={renderProps.onProfileNameChange}
onAddNewProfile={renderProps.onAddNewProfile}
onLoadProfile={renderProps.onLoadProfile}
onDestroyProfile={renderProps.onDestroyProfile}
onSelectProfile={renderProps.onSelectProfile}
onUpdateProfile={renderProps.onUpdateProfile}
onKeyPress={renderProps.onKeyPress}
/>,
Expand All @@ -37,13 +33,9 @@ describe('<Profiles />', () => {
defaultProps = {
profiles: initialProfileStates.list,
currentProfile: initialProfileStates.profile,
selectedProfile: initialProfileStates.profile,
onClickBillingMatchesShipping: () => {},
onProfileNameChange: () => {},
onAddNewProfile: () => {},
onLoadProfile: () => {},
onDestroyProfile: () => {},
onSelectProfile: () => {},
onUpdateProfile: () => {},
};
});
Expand All @@ -52,45 +44,13 @@ describe('<Profiles />', () => {
const wrapper = renderShallowWithProps();
expect(wrapper).toBeDefined();
expect(wrapper.find('.container')).toHaveLength(1);
expect(wrapper.find('.profiles-load__input-group--select')).toHaveLength(1);
expect(wrapper.find('.profiles-load__input-group--load')).toHaveLength(1);
// expect(wrapper.find('#billing-match-shipping')).toHaveLength(1);
expect(wrapper.find(LocationFields)).toHaveLength(2);
expect(wrapper.find(PaymentFields)).toHaveLength(1);
expect(wrapper.find('.profiles__fields--name')).toHaveLength(1);
expect(wrapper.find('.profiles__fields--save')).toHaveLength(1);
expect(wrapper.find('.profiles-load__input-group--delete')).toHaveLength(1);
// wrapper
// .find('#billing-match-shipping')
// .parent()
// .simulate('keyPress');
});

describe('should render correct values for', () => {
test('profile selection list', () => {
const customProps = {
profiles: [1, 2, 3].map(id => ({
...initialProfileStates.profile,
id,
profileName: `profile${id}`,
})),
selectedProfile: {
...initialProfileStates,
id: 1,
profileName: 'profile1',
},
};
const expectedOptions = customProps.profiles.map(p => ({
value: p.id,
label: p.profileName,
}));
const expectedSelectedOption = { value: 1, label: 'profile1' };
const wrapper = renderShallowWithProps(customProps);
const profileSelector = wrapper.find('.profiles-load__input-group--select');
expect(profileSelector.prop('value')).toEqual(expectedSelectedOption);
expect(profileSelector.prop('options')).toEqual(expectedOptions);
});

test('shipping location fields', () => {
const customProps = {
currentProfile: {
Expand Down Expand Up @@ -190,46 +150,6 @@ describe('<Profiles />', () => {
});

describe('should call correct event handler when', () => {
test('selecting a different profile', () => {
const customProps = {
profiles: [1, 2, 3].map(id => ({
...initialProfileStates.profile,
id,
profileName: `profile${id}`,
})),
selectedProfile: {
...initialProfileStates,
id: 1,
profileName: 'profile1',
},
onSelectProfile: jest.fn(),
};
const wrapper = renderShallowWithProps(customProps);
const profileSelector = wrapper.find('.profiles-load__input-group--select');
profileSelector.simulate('change', { value: 2 });
expect(customProps.onSelectProfile).toHaveBeenCalledWith(customProps.profiles[1]);
});

test('loading the selected profile', () => {
const customProps = {
profiles: [1, 2, 3].map(id => ({
...initialProfileStates.profile,
id,
profileName: `profile${id}`,
})),
selectedProfile: {
...initialProfileStates,
id: 1,
profileName: 'profile1',
},
onLoadProfile: jest.fn(),
};
const wrapper = renderShallowWithProps(customProps);
const profileLoader = wrapper.find('.profiles-load__input-group--load');
profileLoader.simulate('click');
expect(customProps.onLoadProfile).toHaveBeenCalledWith(customProps.selectedProfile);
});

test.skip('clicking the billing matches shipping box', () => {
const customProps = {
currentProfile: {
Expand Down Expand Up @@ -338,23 +258,6 @@ describe('<Profiles />', () => {
expect(event.preventDefault).toHaveBeenCalled();
expect(customProps.onUpdateProfile).toHaveBeenCalledWith(customProps.currentProfile);
});

test('deleting a profile', () => {
const customProps = {
selectedProfile: {
...initialProfileStates,
id: 1,
profileName: 'profile1',
},
onDestroyProfile: jest.fn(),
};
const wrapper = renderShallowWithProps(customProps);
const profileDeleter = wrapper.find('.profiles-load__input-group--delete');
const event = { preventDefault: jest.fn() };
profileDeleter.simulate('click', event);
expect(event.preventDefault).toHaveBeenCalled();
expect(customProps.onDestroyProfile).toHaveBeenCalledWith(customProps.selectedProfile);
});
});

test.skip('responds to a key press event', () => {
Expand Down Expand Up @@ -406,21 +309,15 @@ describe('<Profiles />', () => {
profileActions.edit(null, PROFILE_FIELDS.TOGGLE_BILLING_MATCHES_SHIPPING, ''),
profileActions.edit(null, PROFILE_FIELDS.EDIT_NAME, 'test'),
profileActions.add(tempProfile),
profileActions.load(tempProfile),
profileActions.remove(1),
profileActions.select(tempProfile),
profileActions.update(1, tempProfile),
];
const actual = mapDispatchToProps(dispatch);
actual.onClickBillingMatchesShipping();
actual.onProfileNameChange({ target: { value: 'test' } });
actual.onAddNewProfile(tempProfile);
actual.onLoadProfile(tempProfile);
actual.onDestroyProfile(tempProfile);
actual.onSelectProfile(tempProfile);
actual.onUpdateProfile(tempProfile);

expect(dispatch).toHaveBeenCalledTimes(7);
expect(dispatch).toHaveBeenCalledTimes(4);
expectedActions.forEach((action, n) => {
expect(dispatch).toHaveBeenNthCalledWith(
n + 1,
Expand Down
2 changes: 1 addition & 1 deletion packages/frontend/src/profiles/_load.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
padding-bottom: 2px;

&--select {
width: 254px;
width: 252px;
height: 29px;
}

Expand Down
Loading