Skip to content

Commit

Permalink
edit perspectives (#236)
Browse files Browse the repository at this point in the history 
* implement edit perspective

* wont go into another page

* removed field checking

* remove old functions

* fix minor bug

* update style to fix messed up indentation
  • Loading branch information
@annyhe @pallavi2209
annyhe authored and pallavi2209 committed Feb 10, 2017
1 parent 9a8a8c2 commit 05779c0
Show file tree
Hide file tree
Showing 11 changed files with 649 additions and 315 deletions.
8 changes: 0 additions & 8 deletions public/css/perspective.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,10 +87,6 @@ body {
margin: -5px 0 0 0;
}

.slds-lookup__item-action.slds-media.highlighted {
background: #e0e5ee;
}

/* radio button width */

.slds-modal .slds-grid {
Expand Down Expand Up @@ -127,10 +123,6 @@ body {
padding-top: 100;
}

.slds-dropdown__item {
overflow: scroll;
}

.slds-dropdown {
overflow: scroll;
margin-left: 5px;
Expand Down
241 changes: 178 additions & 63 deletions tests/view/components/createPerspective.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,30 @@
import { expect } from 'chai';
import React from 'react';
import sinon from 'sinon';
import CreatePerspective from '../../../view/perspective/CreatePerspective.js';
import { getSubjects } from './utils';
import CreatePerspective from '../../../view/perspective/CreatePerspective';
import { mount } from 'enzyme';

describe('Perspective view ', () => {
const ZERO = 0;
const ONE = 1;
const TWO = 2;
const EMPTY_STR = '';
const DUMMY_STRING = 'COOL';
const DUMMY_ID = '743bcf42-cd79-46d0-8c0f-d43adbb63866';
const DUMMY_FUNCTION = () => {};
const ONE_SUBJECT = {
absolutePath: DUMMY_STRING,
isPublished: true,
};
const DUMMY_ARRAY = 'qwertyui'.split('');
const { getDropdownStyle } = CreatePerspective;
const LENS = {
id: DUMMY_ID,
name: DUMMY_STRING,
isPublished: true,
};
const PERS_NAME = DUMMY_STRING;

/**
* Sets up the component with dummy prop values.
Expand All @@ -37,90 +46,172 @@ describe('Perspective view ', () => {
* overrides to the default props
* @returns {Object} The rendered component
*/
function setup(valuesAddons, stateAddons) {
function setup(valuesAddons, otherPropsObj) {
// simulate loading config
const defaultProps = {
name: PERS_NAME,
params: {},
cancelCreate: DUMMY_FUNCTION,
sendResource: DUMMY_FUNCTION,
isEditing: false,
sendResource: spy,
// options or all possible values
values: {
aspectFilter: [],
aspectTags: [],
lenses: [],
name: DUMMY_STRING,
perspectives: [],
statusFilter: [],
aspectTagFilter: [],
subjectTagFilter: [],
subjects: [],
lenses: [LENS],
// actual values
perspectives: [{
name: PERS_NAME,
lens: LENS,
rootSubject: DUMMY_STRING,
aspectFilterType: "EXCLUDE",
aspectFilter: [ ],
aspectTagFilterType: "EXCLUDE",
aspectTagFilter: [ ],
subjectTagFilterType: "EXCLUDE",
subjectTagFilter: [ ], // empty for testing
statusFilterType: "EXCLUDE",
statusFilter: DUMMY_ARRAY, // not empty for testing
}],
},
stateObject: {
perspectives: [],
subjects: [],
lenses: [],
statusFilterType: '',
statusFilter: [],
subjectTagFilter: [],
subjectTagFilterType: '',
aspectTagFilter: [],
aspectTagFilterType: '',
aspectFilter: [],
aspectFilterType: '',
}
};
// update defaultProps as needed
if (valuesAddons) {
Object.assign(defaultProps.values, valuesAddons);
}
if (stateAddons) {
Object.assign(defaultProps.stateAddons, stateAddons);
if (otherPropsObj) {
Object.assign(defaultProps, otherPropsObj)
}

// use monut to test all lifecycle methods, and children
const enzymeWrapper = mount(<CreatePerspective {...defaultProps} />);
return enzymeWrapper;
}

let stub;
let spy;
beforeEach(() => {
stub = sinon.stub(CreatePerspective, 'findCommonAncestor');
spy = sinon.spy();
});
afterEach(() => {
CreatePerspective.findCommonAncestor.restore();
});

it('given the proper url parameter and resource, ' +
' create modal is shown with proper resource name', () => {
const enzymeWrapper = setup();
expect(enzymeWrapper.find('.slds-modal__container')).to.have.length(ONE);
expect(enzymeWrapper.find('.slds-text-heading--medium').text())
.to.equal('New Perspective');
describe('after setting props isEditing to true', () => {
it('sendResource first argument is PUT', () => {
const enzymeWrapper = setup(null, { isEditing: true });
const instance = enzymeWrapper.instance();
instance.doCreate();
expect(spy.calledOnce).to.be.true;
// expect method to be PUT
expect(spy.args[0][0]).to.equal('PUT');
});

it('sendResource form object argument has field url defined, ' +
'does not end with perspectives', () => {
const enzymeWrapper = setup(null, { isEditing: true });
const instance = enzymeWrapper.instance();
instance.doCreate();
expect(spy.calledOnce).to.be.true;
const formObj = spy.args[0][1];
expect(formObj).to.to.be.an('object');
expect(formObj.url).to.be.defined;
// expect url to end with perspective name
expect(formObj.url.split('/').pop()).to.equal(DUMMY_STRING);
});
});

it('options are loaded from props', () => {
const enzymeWrapper = setup({
subjects: [ONE_SUBJECT], //
describe('on create', () => {
it('on create, state is set to params values', () => {
const params = {
'subjects': 'NorthAmerica',
'lenses': 'MultiTable',
'statusFilterType': 'INCLUDE',
'statusFilter': ['OK'],
'subjectTagFilterType': 'EXCLUDE',
'subjectTagFilter': [],
'aspectTagFilterType': 'INCLUDE',
'aspectTagFilter': ['OK'],
'aspectFilterType': 'EXCLUDE',
'aspectFilter': []
}
const enzymeWrapper = setup({}, { params });
const instance = enzymeWrapper.instance();
for (let key in params) {
expect(instance.state[key]).to.equal(params[key]);
}
});

it('dropdown options still contains all the lenses,' +
' even though state lens is empty', () => {
// be default, not editing
const enzymeWrapper = setup({});
const instance = enzymeWrapper.instance();
expect(instance.state.lenses).to.equal(EMPTY_STR);
// the lens dropdown is not empty
expect(instance.state.dropdownConfig.lenses.options.length).to.equal(ONE);
});

it('empty lens means state lens is also empty', () => {
// add onto default
const values = {
// actual values
lenses: [],
};
const enzymeWrapper = setup(values);
const instance = enzymeWrapper.instance();
// the current lens is empty
expect(instance.state.lenses).to.equal(EMPTY_STR);
});

it('empty array means state array is also empty', () => {
const values = {
aspectTagFilter: [],
};
const enzymeWrapper = setup(values);
const instance = enzymeWrapper.instance();
expect(instance.state.aspectTagFilter).to.deep.equal([]);
});
const instance = enzymeWrapper.instance();
instance.updateDropdownConfig();
const config = instance.state.dropdownConfig;
expect(Object.keys(config)).to.contain('subjects');
expect(config.subjects.options.length).to.equal(ONE);
});

it('on filter, options array is alphabetical', () => {
const enzymeWrapper = setup({
statusFilter: DUMMY_ARRAY,
describe('on initial render', () => {
it('on Create, output name is empty', () => {
const enzymeWrapper = setup();
const instance = enzymeWrapper.instance();
const INPUT = enzymeWrapper.find('input[name="name"]');
expect(INPUT.getNode().value).to.equal(EMPTY_STR);
});

it('on edit, perspective name is not empty');

it('props maps to state', () => {
const enzymeWrapper = setup({}, { isEditing: true });
const instance = enzymeWrapper.instance();
expect(instance.state.statusFilter).to.deep.equal(DUMMY_ARRAY);
});

it('initial props isEditing is false', () => {
const enzymeWrapper = setup();
const instance = enzymeWrapper.instance();
expect(instance.props.isEditing).to.be.false;
});

it('on edit, subject options are not empty', () => {
const enzymeWrapper = setup({}, { isEditing: true });
const instance = enzymeWrapper.instance();
expect(instance.state.subjects).to.equal(DUMMY_STRING);
// one value, no leftover options
expect(instance.state.dropdownConfig.subjects.options.length).to.equal(ZERO);
});
const instance = enzymeWrapper.instance();
instance.updateDropdownConfig();
const config = instance.state.dropdownConfig;
expect(Object.keys(config)).to.contain('statusFilter');
expect(config.statusFilter.options.length).to.equal(DUMMY_ARRAY.length);
});

it('state includes default perspective name', () => {
it('given the proper url parameter and resource, ' +
' create modal is shown with proper resource name', () => {
const enzymeWrapper = setup();
const instance = enzymeWrapper.instance();
expect(Object.keys(instance.state)).to.contain('perspectiveName');
expect(instance.state.perspectiveName).to.equal('');
expect(enzymeWrapper.find('.slds-modal__container')).to.have.length(ONE);
expect(enzymeWrapper.find('.slds-text-heading--medium').text())
.to.equal('New Perspective');
});

it('on state change, perspective name is perserved', () => {
Expand Down Expand Up @@ -156,7 +247,9 @@ describe('Perspective view ', () => {
for (let key in config) {
const styleObj = getDropdownStyle(instance.state, key);
expect(styleObj.hasOwnProperty('marginTop')).to.be.true;
expect(styleObj.marginTop).to.equal(ZERO);
if (!config[key].isArray) {
expect(styleObj.marginTop).to.equal(ZERO);
}
}
});

Expand Down Expand Up @@ -223,6 +316,28 @@ describe('Perspective view ', () => {
.to.contain(DUMMY_STRING);
});

it('on remove pill, state is updated for single pill input', () => {
const enzymeWrapper = setup();
const RESOURCE_NAME = 'subjects';
const instance = enzymeWrapper.instance();
instance.setState({ subjects: [ONE_SUBJECT] });
const OBJ = {
textContent: DUMMY_STRING,
};
// for pillElem
stub.withArgs(OBJ, 'slds-pill').returns({
getElementsByClassName: () => 'subjects'
});
// for fieldElem
stub.withArgs(OBJ, 'slds-form-element__control')
.returns({ title: 'subjects' });

instance.deletePill({
target: OBJ,
});
expect(instance.state[RESOURCE_NAME]).to.equal('');
});

it('on remove pill, dropdown style does not change', () => {
const enzymeWrapper = setup();
const RESOURCE_NAME = 'subjects';
Expand All @@ -249,7 +364,7 @@ describe('Perspective view ', () => {

describe('for array inputs', () => {
it('onclck remove pill, margin top is re-adjusted', () => {
const RESOURCE_NAME = 'aspectFilter';
const RESOURCE_NAME = 'aspectTagFilter';
const enzymeWrapper = setup({
RESOURCE_NAME
});
Expand Down Expand Up @@ -279,7 +394,7 @@ describe('Perspective view ', () => {

it('onclck remove pill, the removed option is added ' +
'back into the dropdown', () => {
const RESOURCE_NAME = 'aspectFilter';
const RESOURCE_NAME = 'aspectTagFilter';
const enzymeWrapper = setup();
const instance = enzymeWrapper.instance();
const OBJ = {
Expand Down Expand Up @@ -307,15 +422,15 @@ describe('Perspective view ', () => {
const enzymeWrapper = setup();
const instance = enzymeWrapper.instance();
const config = instance.state.dropdownConfig;
for (let key in config) {
const styleObj = getDropdownStyle(instance.state, key);
expect(styleObj.hasOwnProperty('marginTop')).to.be.true;
expect(styleObj.marginTop).to.equal(ZERO);
}
const key = 'subjectTagFilter';
const styleObj = getDropdownStyle(instance.state, key);
expect(styleObj.hasOwnProperty('marginTop')).to.be.true;
// check margin top of empty values
expect(styleObj.marginTop).to.equal(ZERO);
});

it('on pill removal, margin top moves up', () => {
const RESOURCE_NAME = 'aspectFilter';
const RESOURCE_NAME = 'aspectTagFilter';
const setupObj = {};
const enzymeWrapper = setup(setupObj[RESOURCE_NAME]: DUMMY_ARRAY);
const instance = enzymeWrapper.instance();
Expand All @@ -339,10 +454,10 @@ describe('Perspective view ', () => {

it('isArray property is true', () => {
const enzymeWrapper = setup({
aspectFilter: 'qwewretrytuyi'.split(''),
aspectTagFilter: 'qwewretrytuyi'.split(''),
});
const instance = enzymeWrapper.instance();
expect(instance.state.dropdownConfig.aspectFilter.isArray).to.be.true;
expect(instance.state.dropdownConfig.aspectTagFilter.isArray).to.be.true;
});

it('appending pills updates state to array of length one', () => {
Expand Down Expand Up @@ -392,7 +507,7 @@ describe('Perspective view ', () => {
},
});
expect(getDropdownStyle(instance.state, RESOURCE_NAME).marginTop)
.to.equal(instance.props.BLOCK_SIZE);
.to.be.above(ZERO);
});

it('on add two pills, dropdown style moves down to accomodate pill', () => {
Expand Down

0 comments on commit 05779c0

Please sign in to comment.