e2e item tags #121, plus item tags and item descriptor refactor #117

This commit is contained in:
Carlos Jimenez 2018-03-02 10:51:01 +01:00
parent 4a473f5c0f
commit f354a420bc
11 changed files with 205 additions and 78 deletions

View File

@ -44,7 +44,7 @@
"state": "item.card.tags",
"component": "vn-item-tags",
"params": {
"item": "$ctrl.item"
"item-tags": "$ctrl.itemTags"
},
"menu": {
"description": "Tags",

View File

@ -1,7 +1,7 @@
<vn-main-block>
<vn-horizontal>
<vn-auto class="left-block">
<vn-item-descriptor item="$ctrl.item"></vn-item-descriptor>
<vn-item-descriptor item="$ctrl.item" item-tags="$ctrl.itemTags" tags="$ctrl.tags"></vn-item-descriptor>
<vn-left-menu></vn-left-menu>
</vn-auto>
<vn-one>

View File

@ -7,9 +7,29 @@ class ItemCard {
this.$timeout = $timeout;
this.item = null;
this.tags = {};
this.itemTags = null;
}
_getItemTags() {
let filter = {
where: {itemFk: this.$state.params.id},
order: "priority ASC",
include: {relation: "tag"}
};
this.$http.get(`/item/api/ItemTags?filter=${JSON.stringify(filter)}`).then(response => {
this.itemTags = response.data;
});
}
$onInit() {
_getTags() {
this.$http.get(`/item/api/Tags`).then(response => {
response.data.forEach(tag => {
this.tags[tag.id] = Object.assign({}, tag);
});
});
}
_getItem() {
let filter = {
include: [
{relation: "itemType"},
@ -17,21 +37,25 @@ class ItemCard {
{relation: "ink"},
{relation: "producer"},
{relation: "intrastat"},
{relation: "expence"},
{relation: "itemTag", scope: {order: "priority ASC", include: {relation: "tag"}}}
{relation: "expence"}
]
};
this.$http.get(`/item/api/Items/${this.$state.params.id}?filter=${JSON.stringify(filter)}`)
.then(
res => {
if (res.data && res.data.id) {
this.$timeout(() => {
this.item = res.data;
});
}
.then(res => {
if (res.data && res.data.id) {
this.$timeout(() => {
this.item = res.data;
});
}
}
);
}
$onInit() {
this._getItem();
this._getTags();
this._getItemTags();
}
}
ItemCard.$inject = ['$http', '$state', '$timeout'];

View File

@ -22,11 +22,20 @@ describe('Item', () => {
controller = $componentController('vnItemCard', {$state: $state});
}));
describe('$onInit()', () => {
it('should request to patch the propagation of tax status', () => {
$httpBackend.whenGET('/item/api/Items/123?filter={"include":[{"relation":"itemType"},{"relation":"origin"},{"relation":"ink"},{"relation":"producer"},{"relation":"intrastat"},{"relation":"expence"},{"relation":"itemTag","scope":{"order":"priority ASC","include":{"relation":"tag"}}}]}').respond({data: 'item'});
$httpBackend.expectGET('/item/api/Items/123?filter={"include":[{"relation":"itemType"},{"relation":"origin"},{"relation":"ink"},{"relation":"producer"},{"relation":"intrastat"},{"relation":"expence"},{"relation":"itemTag","scope":{"order":"priority ASC","include":{"relation":"tag"}}}]}');
controller.$onInit();
describe('_getItem()', () => {
it('should request to get the item', () => {
$httpBackend.whenGET('/item/api/Items/123?filter={"include":[{"relation":"itemType"},{"relation":"origin"},{"relation":"ink"},{"relation":"producer"},{"relation":"intrastat"},{"relation":"expence"}]}').respond({data: 'item'});
$httpBackend.expectGET('/item/api/Items/123?filter={"include":[{"relation":"itemType"},{"relation":"origin"},{"relation":"ink"},{"relation":"producer"},{"relation":"intrastat"},{"relation":"expence"}]}');
controller._getItem();
$httpBackend.flush();
});
});
describe('_getItemTags()', () => {
it('should request to get the ItemTags', () => {
$httpBackend.whenGET('/item/api/ItemTags?filter={"where":{"itemFk":123},"order":"priority ASC","include":{"relation":"tag"}}').respond({data: 'item'});
$httpBackend.expectGET('/item/api/ItemTags?filter={"where":{"itemFk":123},"order":"priority ASC","include":{"relation":"tag"}}');
controller._getItemTags();
$httpBackend.flush();
});
});

View File

@ -21,8 +21,8 @@
<vn-auto pad-medium>
<h6>{{$ctrl.item.name}}</h6>
<div><vn-label translate>Id</vn-label> {{$ctrl.item.id}}</div>
<div ng-repeat="itemTag in $ctrl.item.itemTag | limitTo:4">
<div><vn-label translate>{{itemTag.tag.name}}</vn-label> {{itemTag.value}}</div>
<div ng-repeat="itemTag in $ctrl.itemTags | limitTo:4">
<div><span translate>{{$ctrl.tags[itemTag.tagFk].name}}</span>: <b>{{itemTag.value}}</b></div>
</div>
</vn-auto>
</vn-vertical>

View File

@ -3,6 +3,8 @@ import ngModule from '../module';
ngModule.component('vnItemDescriptor', {
template: require('./item-descriptor.html'),
bindings: {
item: '<'
item: '<',
itemTags: '<',
tags: '<'
}
});

View File

@ -6,9 +6,9 @@
<form name="form" ng-submit="$ctrl.submit()">
<vn-card pad-large>
<vn-title>Item tags</vn-title>
<vn-horizontal ng-repeat="itemTag in $ctrl.itemTags track by $index">
<vn-horizontal ng-repeat="itemTag in $ctrl.instancedItemTags track by $index">
<vn-autocomplete
vn-three
vn-one
initial-data="itemTag.tag"
field="itemTag.tagFk"
data="tags.model"
@ -24,7 +24,15 @@
rule="itemTag.value"
vn-acl="buyer">
</vn-textfield>
<vn-one pad-medium-top>
<vn-textfield
vn-one
type="number"
label="Relevancy"
model="itemTag.priority"
rule="itemTag.priority"
vn-acl="buyer">
</vn-textfield>
<vn-one pad-medium-top></vn-one>
<vn-icon
pointer
medium-grey
@ -37,7 +45,7 @@
margin-medium-left
orange
icon="add_circle"
ng-if="itemTag.showAddIcon && tags.model.length > $ctrl.itemTags.length"
ng-if="itemTag.showAddIcon && tags.model.length > $ctrl.instancedItemTags.length"
ng-click="$ctrl.addItemTag()"
vn-acl="buyer">
</vn-icon>

View File

@ -9,18 +9,17 @@ class ItemTags {
this.vnApp = vnApp;
this.itemTagTypes = [];
this.itemTags = [];
this.removedItemTags = [];
this.oldItemTags = {};
}
_setIconAdd() {
if (this.itemTags.length) {
this.itemTags.map(element => {
if (this.instancedItemTags && this.instancedItemTags.length) {
this.instancedItemTags.map(element => {
element.showAddIcon = false;
return true;
});
this.itemTags[this.itemTags.length - 1].showAddIcon = true;
this.instancedItemTags[this.instancedItemTags.length - 1].showAddIcon = true;
} else {
this.addItemTag();
}
@ -37,14 +36,16 @@ class ItemTags {
}
addItemTag() {
this.itemTags.push({value: null, itemFk: this.params.id, showAddIcon: true});
this._setIconAdd();
if (this.instancedItemTags) {
this.instancedItemTags.push({value: null, itemFk: this.params.id, tagFk: null, priority: null, showAddIcon: true});
this._setIconAdd();
}
}
removeItemTag(index) {
let item = this.itemTags[index];
let item = this.instancedItemTags[index];
if (item) {
this.itemTags.splice(index, 1);
this.instancedItemTags.splice(index, 1);
this._setIconAdd();
if (item.id) {
this.removedItemTags.push(item.id);
@ -54,12 +55,12 @@ class ItemTags {
}
_equalItemTags(oldTag, newTag) {
return oldTag.id === newTag.id && oldTag.value === newTag.value && oldTag.tagFk === newTag.tagFk;
return oldTag.tagFk === newTag.tagFk && oldTag.value === newTag.value && oldTag.priority === newTag.priority;
}
_setOlTags(response) {
_setOlTags(instancedItemTags) {
this._setIconAdd();
response.data.forEach(tag => {
instancedItemTags.forEach(tag => {
this.oldItemTags[tag.id] = Object.assign({}, tag);
});
}
@ -71,8 +72,9 @@ class ItemTags {
include: {relation: "tag"}
};
this.$http.get(`/item/api/ItemTags?filter=${JSON.stringify(filter)}`).then(response => {
this.itemTags = response.data;
this._setOlTags(response);
this.instancedItemTags = response.data;
this.itemTags = JSON.parse(JSON.stringify(this.instancedItemTags));
this._setOlTags(response.data);
});
}
@ -85,7 +87,7 @@ class ItemTags {
create: [],
update: []
};
this.itemTags.forEach(tag => {
this.instancedItemTags.forEach(tag => {
let isNewTag = !tag.id;
if (itemTagsDefined.indexOf(tag.tagFk) !== -1) {
@ -118,6 +120,7 @@ class ItemTags {
if (canSubmit) {
return this.$http.post(`/item/api/ItemTags/crudItemTags`, tagsObj).then(() => {
// this.itemTags = JSON.parse(JSON.stringify(this.instancedItemTags));
this._getItemTags();
this._unsetDirtyForm();
});
@ -133,5 +136,8 @@ ItemTags.$inject = ['$stateParams', '$scope', '$http', '$translate', 'vnApp'];
ngModule.component('vnItemTags', {
template: require('./item-tags.html'),
controller: ItemTags
controller: ItemTags,
bindings: {
itemTags: '='
}
});

View File

@ -186,21 +186,26 @@ export default {
tagsButton: `${components.vnMenuItem}[ui-sref="item.card.tags"]`,
firstTagSelect: `vn-item-tags vn-horizontal:nth-child(2) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > ${components.vnTextfield}`,
firstTagSelectOptionOne: `vn-item-tags vn-horizontal:nth-child(2) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(1)`,
firstValueInput: `vn-item-tags vn-horizontal:nth-child(2) > ${components.vnTextfield}`,
firstValueInput: `vn-item-tags vn-horizontal:nth-child(2) > vn-textfield[label="Value"] > div > input`,
firstRelevancyInput: `vn-horizontal:nth-child(2) > vn-textfield[label="Relevancy"] > div > input`,
secondTagSelect: `vn-item-tags vn-horizontal:nth-child(3) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > ${components.vnTextfield}`,
secondTagSelectOptionOne: `vn-item-tags vn-horizontal:nth-child(3) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(1)`,
secondValueInput: `vn-item-tags vn-horizontal:nth-child(3) > ${components.vnTextfield}`,
secondValueInput: `vn-item-tags vn-horizontal:nth-child(3) > vn-textfield[label="Value"] > div > input`,
secondRelevancyInput: `vn-horizontal:nth-child(3) > vn-textfield[label="Relevancy"] > div > input`,
thirdTagSelect: `vn-item-tags vn-horizontal:nth-child(4) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > ${components.vnTextfield}`,
thirdTagSelectOptionOne: `vn-item-tags vn-horizontal:nth-child(4) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(1)`,
thirdValueInput: `vn-item-tags vn-horizontal:nth-child(4) > ${components.vnTextfield}`,
thirdValueInput: `vn-item-tags vn-horizontal:nth-child(4) > vn-textfield[label="Value"] > div > input`,
thirdRelevancyInput: `vn-horizontal:nth-child(4) > vn-textfield[label="Relevancy"] > div > input`,
fourthTagSelect: `vn-item-tags vn-horizontal:nth-child(5) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > ${components.vnTextfield}`,
fourthTagSelectOptionOne: `vn-item-tags vn-horizontal:nth-child(5) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(1)`,
fourthValueInput: `vn-item-tags vn-horizontal:nth-child(5) > ${components.vnTextfield}`,
fifthRemoveTagButton: `vn-item-tags vn-horizontal:nth-child(6) > vn-one > ${components.vnIcon}[icon="remove_circle_outline"]`,
addItemTagButton: `${components.vnIcon}[icon="add_circle"]`,
fourthValueInput: `vn-item-tags vn-horizontal:nth-child(5) > vn-textfield[label="Value"] > div > input`,
fourthRelevancyInput: `vn-horizontal:nth-child(5) > vn-textfield[label="Relevancy"] > div > input`,
fifthRemoveTagButton: `vn-item-tags vn-horizontal:nth-child(6) > ${components.vnIcon}[icon="remove_circle_outline"]`,
fifthTagSelect: `vn-item-tags vn-horizontal:nth-child(6) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > ${components.vnTextfield}`,
fifthTagSelectOptionFive: `vn-item-tags vn-horizontal:nth-child(6) > ${components.vnAutocomplete}[field="itemTag.tagFk"] > vn-vertical > vn-drop-down > vn-vertical:not(.ng-hide) > vn-auto:nth-child(2) > ul > li:nth-child(5)`,
fifthValueInput: `vn-item-tags vn-horizontal:nth-child(6) > ${components.vnTextfield}`,
fifthValueInput: `vn-item-tags vn-horizontal:nth-child(6) > vn-textfield[label="Value"] > div > input`,
fifthRelevancyInput: `vn-horizontal:nth-child(6) > vn-textfield[label="Relevancy"] > div > input`,
addItemTagButton: `${components.vnIcon}[icon="add_circle"]`,
submitItemTagsButton: `${components.vnSubmit}`
},
itemTax: {

View File

@ -44,11 +44,16 @@ describe('create item tags path', () => {
.waitToClick(selectors.itemTags.firstTagSelectOptionOne)
.clearInput(selectors.itemTags.firstValueInput)
.type(selectors.itemTags.firstValueInput, 'Dark Blue')
.clearInput(selectors.itemTags.firstRelevancyInput)
.type(selectors.itemTags.firstRelevancyInput, '2')
.waitToClick(selectors.itemTags.fifthRemoveTagButton)
.waitToClick(selectors.itemTags.addItemTagButton)
.waitToClick(selectors.itemTags.fifthTagSelect)
.waitToClick(selectors.itemTags.fifthTagSelectOptionFive)
.type(selectors.itemTags.fifthValueInput, 'Thanos')
.type(selectors.itemTags.fifthRelevancyInput, '1')
.clearInput(selectors.itemTags.secondRelevancyInput)
.type(selectors.itemTags.secondRelevancyInput, '5')
.click(selectors.itemTags.submitItemTagsButton)
.waitForSnackbar()
.then(result => {
@ -56,7 +61,7 @@ describe('create item tags path', () => {
});
});
it(`should confirm the remaining tags are the expected ones`, () => {
it(`should confirm the first select is the expected one`, () => {
return nightmare
.click(selectors.itemBasicData.basicDataButton)
.wait(selectors.itemBasicData.nameInput)
@ -65,51 +70,118 @@ describe('create item tags path', () => {
.getInputValue(selectors.itemTags.firstTagSelect)
.then(result => {
expect(result).toEqual('Owner');
return nightmare
.getInputValue(selectors.itemTags.firstValueInput);
})
});
});
it(`should confirm the first value is the expected one`, () => {
return nightmare
.getInputValue(selectors.itemTags.firstValueInput)
.then(result => {
expect(result).toEqual('Thanos');
return nightmare
.getInputValue(selectors.itemTags.secondTagSelect);
})
});
});
it(`should confirm the first relevancy is the expected one`, () => {
return nightmare
.getInputValue(selectors.itemTags.firstRelevancyInput)
.then(result => {
expect(result).toEqual('1');
});
});
it(`should confirm the second select is the expected one`, () => {
return nightmare
.getInputValue(selectors.itemTags.secondTagSelect)
.then(result => {
expect(result).toEqual('Color');
return nightmare
.getInputValue(selectors.itemTags.secondValueInput);
})
});
});
it(`should confirm the second value is the expected one`, () => {
return nightmare
.getInputValue(selectors.itemTags.secondValueInput)
.then(result => {
expect(result).toEqual('Dark Blue');
return nightmare
.getInputValue(selectors.itemTags.thirdTagSelect);
})
});
});
it(`should confirm the second relevancy is the expected one`, () => {
return nightmare
.getInputValue(selectors.itemTags.secondRelevancyInput)
.then(result => {
expect(result).toEqual('Location');
return nightmare
.getInputValue(selectors.itemTags.thirdValueInput);
})
.then(result => {
expect(result).toEqual('Gamoras hideout');
return nightmare
.getInputValue(selectors.itemTags.fourthTagSelect);
})
expect(result).toEqual('2');
});
});
it(`should confirm the third select is the expected one`, () => {
return nightmare
.getInputValue(selectors.itemTags.thirdTagSelect)
.then(result => {
expect(result).toEqual('Shape');
return nightmare
.getInputValue(selectors.itemTags.fourthValueInput);
})
});
});
it(`should confirm the third value is the expected one`, () => {
return nightmare
.getInputValue(selectors.itemTags.thirdValueInput)
.then(result => {
expect(result).toEqual('round');
return nightmare
.getInputValue(selectors.itemTags.fifthTagSelect);
})
});
});
it(`should confirm the third relevancy is the expected one`, () => {
return nightmare
.getInputValue(selectors.itemTags.thirdRelevancyInput)
.then(result => {
expect(result).toEqual('3');
});
});
it(`should confirm the fourth select is the expected one`, () => {
return nightmare
.getInputValue(selectors.itemTags.fourthTagSelect)
.then(result => {
expect(result).toEqual('Power');
return nightmare
.getInputValue(selectors.itemTags.fifthValueInput);
})
});
});
it(`should confirm the fourth value is the expected one`, () => {
return nightmare
.getInputValue(selectors.itemTags.fourthValueInput)
.then(result => {
expect(result).toEqual('Manipulates time');
});
});
it(`should confirm the fourth relevancy is the expected one`, () => {
return nightmare
.getInputValue(selectors.itemTags.fourthRelevancyInput)
.then(result => {
expect(result).toEqual('4');
});
});
it(`should confirm the fifth select is the expected one`, () => {
return nightmare
.getInputValue(selectors.itemTags.fifthTagSelect)
.then(result => {
expect(result).toEqual('Location');
});
});
it(`should confirm the fifth value is the expected one`, () => {
return nightmare
.getInputValue(selectors.itemTags.fifthValueInput)
.then(result => {
expect(result).toEqual('Gamoras hideout');
});
});
it(`should confirm the fifth relevancy is the expected one`, () => {
return nightmare
.getInputValue(selectors.itemTags.fifthRelevancyInput)
.then(result => {
expect(result).toEqual('5');
});
});
});

View File

@ -18,7 +18,8 @@
"required": true
},
"priority": {
"type": "Number"
"type": "Number",
"required": true
}
},
"relations": {