From 9849c60651596d78cf62f77389ff68d92256bce3 Mon Sep 17 00:00:00 2001 From: Joan Sanchez Date: Wed, 26 Feb 2020 07:02:03 +0100 Subject: [PATCH 1/6] Added popover --- front/core/components/calendar/index.html | 4 +- front/core/components/calendar/index.js | 6 ++- front/core/components/popover/index.js | 17 +++++++- front/core/mocks/popover.js | 25 +++++++++++ modules/zone/front/calendar/index.html | 2 +- modules/zone/front/calendar/index.js | 3 +- modules/zone/front/card/index.spec.js | 2 +- modules/zone/front/create/index.spec.js | 2 +- modules/zone/front/delivery-days/index.html | 11 ++++- modules/zone/front/delivery-days/index.js | 21 ++++++++++ .../zone/front/delivery-days/index.spec.js | 41 +++++++++++++++++++ modules/zone/front/delivery-days/style.scss | 24 +++++++++++ modules/zone/front/index/index.html | 2 +- modules/zone/front/index/index.spec.js | 2 +- 14 files changed, 150 insertions(+), 12 deletions(-) create mode 100644 front/core/mocks/popover.js create mode 100644 modules/zone/front/delivery-days/index.spec.js diff --git a/front/core/components/calendar/index.html b/front/core/components/calendar/index.html index 0efff2492..eb6d196ba 100644 --- a/front/core/components/calendar/index.html +++ b/front/core/components/calendar/index.html @@ -23,7 +23,7 @@
+ ng-click="$ctrl.selectWeekDay($event, day.index)"> {{::day.localeChar}}
@@ -38,7 +38,7 @@ on-last="$ctrl.repeatLast()">
+ ng-click="$ctrl.select($event, day)"> {{::day | date: 'd'}}
diff --git a/front/core/components/calendar/index.js b/front/core/components/calendar/index.js index 4afec0a9a..96bc435db 100644 --- a/front/core/components/calendar/index.js +++ b/front/core/components/calendar/index.js @@ -127,10 +127,11 @@ export default class Calendar extends FormInput { /* * Day selection event */ - select(day) { + select($event, day) { if (!this.editable) return; this.change(day); this.emit('selection', { + $event: $event, $days: [day], $type: 'day' }); @@ -140,7 +141,7 @@ export default class Calendar extends FormInput { /* * WeekDay selection event */ - selectWeekDay(weekday) { + selectWeekDay($event, weekday) { if (!this.editable) return; let days = []; for (let day of this.days) { @@ -149,6 +150,7 @@ export default class Calendar extends FormInput { } this.field = days[0]; this.emit('selection', { + $event: $event, $days: days, $type: 'weekday', $weekday: weekday diff --git a/front/core/components/popover/index.js b/front/core/components/popover/index.js index 413f4d85f..e209034a3 100644 --- a/front/core/components/popover/index.js +++ b/front/core/components/popover/index.js @@ -37,6 +37,21 @@ export default class Popover extends Popup { super.hide(); } + get parent() { + return this.__parent; + } + + set parent(value) { + this.__parent = value; + + if (!value) return; + + const parentRect = value.getBoundingClientRect(); + this.parentRect = {}; + for (let prop in parentRect) + this.parentRect[prop] = parentRect[prop]; + } + /** * Repositions the popover to a correct location relative to the parent. */ @@ -55,7 +70,7 @@ export default class Popover extends Popup { arrowStyle.top = ''; arrowStyle.bottom = ''; - let parentRect = this.parent.getBoundingClientRect(); + let parentRect = this.parentRect; let popoverRect = this.windowEl.getBoundingClientRect(); let arrowRect = arrow.getBoundingClientRect(); let clamp = (value, min, max) => Math.min(Math.max(value, min), max); diff --git a/front/core/mocks/popover.js b/front/core/mocks/popover.js new file mode 100644 index 000000000..037e0963a --- /dev/null +++ b/front/core/mocks/popover.js @@ -0,0 +1,25 @@ +const popover = { + show: () => { + return { + then: callback => { + callback(); + } + }; + }, + hide: () => { + return { + then: callback => { + callback(); + } + }; + }, + relocate: () => { + return { + then: callback => { + callback(); + } + }; + } +}; + +module.exports = popover; diff --git a/modules/zone/front/calendar/index.html b/modules/zone/front/calendar/index.html index b1277cbe5..cfcebf359 100644 --- a/modules/zone/front/calendar/index.html +++ b/modules/zone/front/calendar/index.html @@ -25,7 +25,7 @@ hide-contiguous="true" has-events="$ctrl.hasEvents($day)" get-class="$ctrl.getClass($day)" - on-selection="$ctrl.onSelection($days, $type, $weekday)" + on-selection="$ctrl.onSelection($event, $days, $type, $weekday)" class="vn-pa-md" style="min-width: 250px; flex: 1;"> diff --git a/modules/zone/front/calendar/index.js b/modules/zone/front/calendar/index.js index 88f16d334..702a0a0d9 100644 --- a/modules/zone/front/calendar/index.js +++ b/modules/zone/front/calendar/index.js @@ -130,7 +130,7 @@ class Controller extends Component { } } - onSelection($days, $type, $weekday) { + onSelection($event, $days, $type, $weekday) { let $events = []; let $exclusions = []; @@ -141,6 +141,7 @@ class Controller extends Component { } this.emit('selection', { + $event, $days, $type, $weekday, diff --git a/modules/zone/front/card/index.spec.js b/modules/zone/front/card/index.spec.js index 48970ce6b..9d0911de2 100644 --- a/modules/zone/front/card/index.spec.js +++ b/modules/zone/front/card/index.spec.js @@ -1,6 +1,6 @@ import './index.js'; -describe('Agency Component vnZoneCard', () => { +describe('Zone Component vnZoneCard', () => { let controller; let $httpBackend; let data = {id: 1, name: 'fooName'}; diff --git a/modules/zone/front/create/index.spec.js b/modules/zone/front/create/index.spec.js index 5041e5095..b97c9c3cf 100644 --- a/modules/zone/front/create/index.spec.js +++ b/modules/zone/front/create/index.spec.js @@ -1,7 +1,7 @@ import './index'; import watcher from 'core/mocks/watcher'; -describe('Agency Component vnZoneCreate', () => { +describe('Zone Component vnZoneCreate', () => { let $scope; let $state; let controller; diff --git a/modules/zone/front/delivery-days/index.html b/modules/zone/front/delivery-days/index.html index 2b8a0e423..589208caf 100644 --- a/modules/zone/front/delivery-days/index.html +++ b/modules/zone/front/delivery-days/index.html @@ -1,6 +1,7 @@
+ data="data" + on-selection="$ctrl.onSelection($event, $events)">
@@ -31,3 +32,11 @@ + + + +
+
Zones
+ +
+ \ No newline at end of file diff --git a/modules/zone/front/delivery-days/index.js b/modules/zone/front/delivery-days/index.js index 0d7baeb60..006252a69 100644 --- a/modules/zone/front/delivery-days/index.js +++ b/modules/zone/front/delivery-days/index.js @@ -17,6 +17,27 @@ class Controller extends Section { this.vnApp.showMessage(this.$t('No service for the specified zone')); }); } + + onSelection($event, $events) { + if (!$events.length) return; + + const zones = []; + for (let event of $events) + zones.push(event.zoneFk); + + this.$.zoneEvents.show($event.target); + const zoneIndex = this.$.zoneIndex; + const zoneModel = zoneIndex.$scope.model; + zoneModel.applyFilter({ + include: { + relation: 'agencyMode', + scope: {fields: ['name']} + }, + where: { + id: {inq: zones} + } + }); + } } ngModule.component('vnZoneDeliveryDays', { diff --git a/modules/zone/front/delivery-days/index.spec.js b/modules/zone/front/delivery-days/index.spec.js new file mode 100644 index 000000000..e6019b025 --- /dev/null +++ b/modules/zone/front/delivery-days/index.spec.js @@ -0,0 +1,41 @@ +import './index.js'; +import popover from 'core/mocks/popover'; +import crudModel from 'core/mocks/crud-model'; + +fdescribe('Zone Component vnZoneDeliveryDays', () => { + let $componentController; + let controller; + let $element; + + beforeEach(ngModule('zone')); + + beforeEach(angular.mock.inject(_$componentController_ => { + $componentController = _$componentController_; + $element = angular.element(' { + it('should return', () => { + jest.spyOn(controller.$.zoneEvents, 'show'); + + const $event = new Event('click'); + const target = angular.element('
My target
'); // crear con DOM? + target.dispatchEvent($event); + const $events = [ + {zoneFk: 1}, + {zoneFk: 2}, + {zoneFk: 8} + ]; + controller.onSelection($event, $events); + + expect(controller.$.zoneEvents.show).toHaveBeenCalledWith(); + }); + }); +}); diff --git a/modules/zone/front/delivery-days/style.scss b/modules/zone/front/delivery-days/style.scss index 79f95a3dc..531b51795 100644 --- a/modules/zone/front/delivery-days/style.scss +++ b/modules/zone/front/delivery-days/style.scss @@ -1,3 +1,4 @@ +@import "variables"; vn-zone-delivery-days { vn-zone-calendar { @@ -13,4 +14,27 @@ vn-zone-delivery-days { display: flex; flex-direction: column; } +} + +.zoneEvents { + width: 700px; + max-height: 450px; + + vn-float-button { + display: none + } + + vn-data-viewer { + margin-bottom: 0; + vn-pagination { + padding: 0 + } + } + + & > .header { + background-color: $color-main; + color: white; + font-weight: bold; + text-align: center + } } \ No newline at end of file diff --git a/modules/zone/front/index/index.html b/modules/zone/front/index/index.html index cb820b66a..b05789615 100644 --- a/modules/zone/front/index/index.html +++ b/modules/zone/front/index/index.html @@ -4,7 +4,7 @@ filter="::$ctrl.filter" limit="20" data="zones" - auto-load="true"> + auto-load="false"> { +describe('Zone Component vnZoneIndex', () => { let $componentController; let controller; From 442c3ba87c22f369bd9028193dc46a4e5fe8168e Mon Sep 17 00:00:00 2001 From: Joan Sanchez Date: Wed, 26 Feb 2020 11:05:29 +0100 Subject: [PATCH 2/6] unit tests --- front/core/components/calendar/index.spec.js | 8 ++- .../zone/front/delivery-days/index.spec.js | 61 +++++++++++++++++-- 2 files changed, 63 insertions(+), 6 deletions(-) diff --git a/front/core/components/calendar/index.spec.js b/front/core/components/calendar/index.spec.js index 6945c35ea..74abb921c 100644 --- a/front/core/components/calendar/index.spec.js +++ b/front/core/components/calendar/index.spec.js @@ -50,9 +50,15 @@ describe('Component vnCalendar', () => { const day = new Date(); day.setHours(0, 0, 0, 0); - controller.select(day); + + const clickEvent = new Event('click'); + const target = document.createElement('div'); + target.dispatchEvent(clickEvent); + + controller.select(clickEvent, day); let res = { + $event: clickEvent, $days: [day], $type: 'day' }; diff --git a/modules/zone/front/delivery-days/index.spec.js b/modules/zone/front/delivery-days/index.spec.js index e6019b025..17bf9caff 100644 --- a/modules/zone/front/delivery-days/index.spec.js +++ b/modules/zone/front/delivery-days/index.spec.js @@ -2,15 +2,17 @@ import './index.js'; import popover from 'core/mocks/popover'; import crudModel from 'core/mocks/crud-model'; -fdescribe('Zone Component vnZoneDeliveryDays', () => { +describe('Zone Component vnZoneDeliveryDays', () => { let $componentController; + let $httpBackend; let controller; let $element; beforeEach(ngModule('zone')); - beforeEach(angular.mock.inject(_$componentController_ => { + beforeEach(angular.mock.inject((_$componentController_, _$httpBackend_) => { $componentController = _$componentController_; + $httpBackend = _$httpBackend_; $element = angular.element(' { }; })); + describe('onSubmit()', () => { + it('should make an HTTP GET query and then call the showMessage() method', () => { + jest.spyOn(controller.vnApp, 'showMessage'); + + const expectedData = {events: []}; + $httpBackend.when('GET', 'Zones/getEvents').respond({events: []}); + controller.onSubmit(); + $httpBackend.flush(); + + expect(controller.$.data).toBeDefined(); + expect(controller.$.data).toEqual(expectedData); + expect(controller.vnApp.showMessage).toHaveBeenCalledWith('No service for the specified zone'); + }); + + it('should make an HTTP GET query and then set the data property', () => { + const expectedData = {events: [{zoneFk: 1}]}; + $httpBackend.when('GET', 'Zones/getEvents').respond({events: [{zoneFk: 1}]}); + controller.onSubmit(); + $httpBackend.flush(); + + expect(controller.$.data).toBeDefined(); + expect(controller.$.data).toEqual(expectedData); + }); + }); + describe('onSelection()', () => { - it('should return', () => { + it('should not call the show popover method', () => { jest.spyOn(controller.$.zoneEvents, 'show'); const $event = new Event('click'); - const target = angular.element('
My target
'); // crear con DOM? + const target = document.createElement('div'); + target.dispatchEvent($event); + const $events = []; + controller.onSelection($event, $events); + + expect(controller.$.zoneEvents.show).not.toHaveBeenCalled(); + }); + + it('should return', () => { + const zoneModel = controller.$.zoneIndex.$scope.model; + jest.spyOn(controller.$.zoneEvents, 'show'); + jest.spyOn(zoneModel, 'applyFilter'); + + const $event = new Event('click'); + const target = document.createElement('div'); target.dispatchEvent($event); const $events = [ {zoneFk: 1}, @@ -34,8 +75,18 @@ fdescribe('Zone Component vnZoneDeliveryDays', () => { {zoneFk: 8} ]; controller.onSelection($event, $events); + const expectedFilter = { + include: { + relation: 'agencyMode', + scope: {fields: ['name']} + }, + where: { + id: {inq: [1, 2, 8]} + } + }; - expect(controller.$.zoneEvents.show).toHaveBeenCalledWith(); + expect(controller.$.zoneEvents.show).toHaveBeenCalledWith(target); + expect(zoneModel.applyFilter).toHaveBeenCalledWith(expectedFilter); }); }); }); From 54bb2c4a0ac1be4b0e47d64c28a8b55a64b0f22e Mon Sep 17 00:00:00 2001 From: Joan Sanchez Date: Wed, 26 Feb 2020 11:37:58 +0100 Subject: [PATCH 3/6] Updated with bug-task description --- front/core/components/popover/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/front/core/components/popover/index.js b/front/core/components/popover/index.js index e209034a3..7c54ce494 100644 --- a/front/core/components/popover/index.js +++ b/front/core/components/popover/index.js @@ -41,6 +41,7 @@ export default class Popover extends Popup { return this.__parent; } + // Bug #2147 Popover loses parent location set parent(value) { this.__parent = value; From e09325b3fa2a71da245a5f3fa9290d819d589c3b Mon Sep 17 00:00:00 2001 From: Joan Sanchez Date: Wed, 26 Feb 2020 11:43:41 +0100 Subject: [PATCH 4/6] Changed test description --- modules/zone/front/delivery-days/index.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/zone/front/delivery-days/index.spec.js b/modules/zone/front/delivery-days/index.spec.js index 17bf9caff..273d5822e 100644 --- a/modules/zone/front/delivery-days/index.spec.js +++ b/modules/zone/front/delivery-days/index.spec.js @@ -61,7 +61,7 @@ describe('Zone Component vnZoneDeliveryDays', () => { expect(controller.$.zoneEvents.show).not.toHaveBeenCalled(); }); - it('should return', () => { + it('should call the show() method and then call the applyFilter() method with the spected ids', () => { const zoneModel = controller.$.zoneIndex.$scope.model; jest.spyOn(controller.$.zoneEvents, 'show'); jest.spyOn(zoneModel, 'applyFilter'); From ce84d26fae242c8fa50def18ef7efaf6d834dcd7 Mon Sep 17 00:00:00 2001 From: Joan Sanchez Date: Wed, 26 Feb 2020 12:24:48 +0100 Subject: [PATCH 5/6] Some changes --- modules/zone/front/delivery-days/index.spec.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/modules/zone/front/delivery-days/index.spec.js b/modules/zone/front/delivery-days/index.spec.js index 273d5822e..0524f3590 100644 --- a/modules/zone/front/delivery-days/index.spec.js +++ b/modules/zone/front/delivery-days/index.spec.js @@ -49,32 +49,32 @@ describe('Zone Component vnZoneDeliveryDays', () => { }); describe('onSelection()', () => { - it('should not call the show popover method', () => { + it('should not call the show popover method if events array is empty', () => { jest.spyOn(controller.$.zoneEvents, 'show'); - const $event = new Event('click'); + const event = new Event('click'); const target = document.createElement('div'); - target.dispatchEvent($event); - const $events = []; - controller.onSelection($event, $events); + target.dispatchEvent(event); + const events = []; + controller.onSelection(event, events); expect(controller.$.zoneEvents.show).not.toHaveBeenCalled(); }); - it('should call the show() method and then call the applyFilter() method with the spected ids', () => { + it('should call the show() method and then call the applyFilter() method with the expected ids', () => { const zoneModel = controller.$.zoneIndex.$scope.model; jest.spyOn(controller.$.zoneEvents, 'show'); jest.spyOn(zoneModel, 'applyFilter'); - const $event = new Event('click'); + const event = new Event('click'); const target = document.createElement('div'); target.dispatchEvent($event); - const $events = [ + const events = [ {zoneFk: 1}, {zoneFk: 2}, {zoneFk: 8} ]; - controller.onSelection($event, $events); + controller.onSelection(event, events); const expectedFilter = { include: { relation: 'agencyMode', From d401fa8d13a6dc183adc0c06431f03def9608f6f Mon Sep 17 00:00:00 2001 From: Joan Sanchez Date: Wed, 26 Feb 2020 13:06:35 +0100 Subject: [PATCH 6/6] Changed variable name --- modules/zone/front/delivery-days/index.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/modules/zone/front/delivery-days/index.spec.js b/modules/zone/front/delivery-days/index.spec.js index 0524f3590..35171ab94 100644 --- a/modules/zone/front/delivery-days/index.spec.js +++ b/modules/zone/front/delivery-days/index.spec.js @@ -68,7 +68,7 @@ describe('Zone Component vnZoneDeliveryDays', () => { const event = new Event('click'); const target = document.createElement('div'); - target.dispatchEvent($event); + target.dispatchEvent(event); const events = [ {zoneFk: 1}, {zoneFk: 2},