Fixed error filter on itemBotanical when item hasn't specie and genus data + front test

modules/item/front/botanical/index.html

@@ -1,20 +1,15 @@
 <vn-watcher
     vn-id="watcher"
-    url="ItemBotanicals" 
     data="$ctrl.botanical"
-    id-field="itemFk"
-    id-value="$ctrl.$params.id"
-    include="[{relation: 'genus'}, {relation: 'specie'}]"
-    auto-fill="true"
     form="form">
 </vn-watcher>
-<form name="form" ng-submit="watcher.submit()" ng-cloak class="vn-w-md">
+<form name="form" ng-submit="$ctrl.onSubmit()" ng-cloak class="vn-w-md">
     <vn-card class="vn-pa-lg">
         <vn-horizontal>
             <vn-autocomplete
                 label="Genus"
                 ng-model="$ctrl.botanical.genusFk"
-                initial-data="$ctrl.botanical.genus"
+                initial-data="$ctrl.getBotanicalData"
                 url="Genera"
                 show-field="name"
                 value-field="id">
@@ -30,7 +25,6 @@
             <vn-autocomplete
                 label="Species"
                 ng-model="$ctrl.botanical.specieFk"
-                initial-data="$ctrl.botanical.specie"
                 url="Species"
                 show-field="name"
                 value-field="id">
@@ -73,7 +67,7 @@
     <tpl-body>
         <vn-horizontal>
             <vn-textfield vn-one vn-focus
-                label="Latin genus"
+                label="Latin genus name"
                 ng-model="$ctrl.data.name"
                 required="true">
             </vn-textfield>
@@ -92,7 +86,7 @@
     <tpl-body>
         <vn-horizontal>
             <vn-textfield vn-one vn-focus
-                label="Latin Species Name"
+                label="Latin species name"
                 ng-model="$ctrl.data.name"
                 required="true">
             </vn-textfield>

modules/item/front/botanical/index.js

@@ -1,6 +1,16 @@
 import ngModule from '../module';
 import Section from 'salix/components/section';
 class Controller extends Section {
+    get item() {
+        return this._item;
+    }
+
+    set item(value) {
+        this._item = value;
+        if (value)
+            this.getBotanicalData();
+    }
+
     showGenus(event) {
         if (event.defaultPrevented) return;
         event.preventDefault();
@@ -19,9 +29,9 @@ class Controller extends Section {
         try {
             if (!this.data.name)
                 throw new Error(`The name of the genus can't be empty`);
-            console.log(this.data);
+
             this.$http.post(`genera`, this.data).then(res => {
-                this.vnApp.showMessage(this.$t('The genus has been created. You can save the data now'));
+                this.vnApp.showMessage(this.$t('The genus has been created'));
                 this.emit('response', {$response: res.data});
             });
         } catch (e) {
@@ -35,9 +45,9 @@ class Controller extends Section {
         try {
             if (!this.data.name)
                 throw new Error(`The name of the specie can't be empty`);
-            console.log(this.data);
+
             this.$http.post(`species`, this.data).then(res => {
-                this.vnApp.showMessage(this.$t('The specie has been created.'));
+                this.vnApp.showMessage(this.$t('The specie has been created'));
                 this.emit('response', {$response: res.data});
             });
         } catch (e) {
@@ -46,9 +56,34 @@ class Controller extends Section {
         }
         return true;
     }
+
+    getBotanicalData() {
+        const filter = {
+            where: {itemFk: this.item.id}
+        };
+        const filterParams = encodeURIComponent(JSON.stringify(filter));
+        this.$http.get(`ItemBotanicals?filter=${filterParams}`).then(res => {
+            if (res.data[0])
+                this.botanical = res.data[0];
+
+            else
+                this.botanical = {itemFk: this.item.id};
+        });
+    }
+
+    onSubmit() {
+        this.$.watcher.check();
+        this.$http.patch(`ItemBotanicals`, this.botanical).then(() => {
+            this.$.watcher.notifySaved();
+            this.$.watcher.updateOriginalData();
+        });
+    }
 }
 
 ngModule.vnComponent('vnItemBotanical', {
     template: require('./index.html'),
+    bindings: {
+        item: '<'
+    },
     controller: Controller
 });

modules/item/front/botanical/index.spec.js

@@ -0,0 +1,179 @@
+import './index.js';
+
+describe('vnItemBotanical', () => {
+    describe('Component vnItemBotanical', () => {
+        let $httpBackend;
+        let $scope;
+        let controller;
+        let vnApp;
+        beforeEach(ngModule('item'));
+
+        beforeEach(inject(($componentController, $rootScope, _$httpBackend_, _vnApp_) => {
+            $httpBackend = _$httpBackend_;
+            vnApp = _vnApp_;
+            jest.spyOn(vnApp, 'showError');
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-item-botanical></vn-item-botanical>');
+            controller = $componentController('vnItemBotanical', {$element, $scope});
+            controller.item = {id: 5};
+            controller.$params = {itemFk: 5};
+            controller.$ = {
+                watcher: {
+                    check: () => {},
+                    notifySaved: () => {},
+                    updateOriginalData: () => {}},
+                genus: {
+                    show: () => {}
+                },
+                species: {
+                    show: () => {}
+                }};
+        }));
+
+        describe('showGenus()', () => {
+            it('should do nothing in genus field if it default is prevented', () => {
+                const event = {
+                    defaultPrevented: true,
+                    preventDefault: () => {}
+                };
+                jest.spyOn(event, 'preventDefault');
+                jest.spyOn(controller.$.genus, 'show');
+
+                controller.showGenus(event);
+
+                expect(event.preventDefault).not.toHaveBeenCalledWith();
+                expect(controller.$.genus.show).not.toHaveBeenCalledWith();
+            });
+
+            it('should call preventDefault() and open() in genus field when the default is not prevented', () => {
+                const event = {
+                    defaultPrevented: false,
+                    preventDefault: () => {}
+                };
+
+                jest.spyOn(event, 'preventDefault');
+                jest.spyOn(controller.$.genus, 'show');
+
+                controller.showGenus(event);
+
+                expect(event.preventDefault).toHaveBeenCalledWith();
+                expect(controller.$.genus.show).toHaveBeenCalledWith();
+            });
+        });
+
+        describe('showSpecies()', () => {
+            it('should do nothing in species field if it default is prevented', () => {
+                const event = {
+                    defaultPrevented: true,
+                    preventDefault: () => {}
+                };
+                jest.spyOn(event, 'preventDefault');
+                jest.spyOn(controller.$.species, 'show');
+
+                controller.showSpecies(event);
+
+                expect(event.preventDefault).not.toHaveBeenCalledWith();
+                expect(controller.$.species.show).not.toHaveBeenCalledWith();
+            });
+
+            it('should call preventDefault() and open() in species field when the default is not prevented', () => {
+                const event = {
+                    defaultPrevented: false,
+                    preventDefault: () => {}
+                };
+
+                jest.spyOn(event, 'preventDefault');
+                jest.spyOn(controller.$.species, 'show');
+
+                controller.showSpecies(event);
+
+                expect(event.preventDefault).toHaveBeenCalledWith();
+                expect(controller.$.species.show).toHaveBeenCalledWith();
+            });
+        });
+
+        describe('onGenusAccept()', () => {
+            it('should throw an error if there is no name in the genus name field', () => {
+                jest.spyOn(controller.vnApp, 'showMessage');
+
+                controller.data = {};
+
+                controller.onGenusAccept();
+
+                expect(controller.vnApp.showError).toHaveBeenCalledWith(`The name of the genus can't be empty`);
+            });
+
+            it('should do add the new genus', () => {
+                $httpBackend.whenRoute('GET', 'ItemBotanicals').respond({});
+                $httpBackend.resetExpectations();
+
+                controller.data = {
+                    name: 'Anilius'
+                };
+
+                $httpBackend.expectPOST('genera', controller.data).respond(200, controller.data);
+
+                controller.onGenusAccept();
+                $httpBackend.flush();
+            });
+        });
+
+        describe('onSpeciesAccept()', () => {
+            it('should throw an error if there is no name in the specie name field', () => {
+                jest.spyOn(controller.vnApp, 'showMessage');
+
+                controller.data = {};
+
+                controller.onSpeciesAccept();
+
+                expect(controller.vnApp.showError).toHaveBeenCalledWith(`The name of the specie can't be empty`);
+            });
+
+            it('should do add the new specie', () => {
+                $httpBackend.whenRoute('GET', 'ItemBotanicals').respond({});
+                $httpBackend.resetExpectations();
+
+                controller.data = {
+                    name: 'Spasiva'
+                };
+
+                $httpBackend.expectPOST('species', controller.data).respond(200, controller.data);
+
+                controller.onSpeciesAccept();
+                $httpBackend.flush();
+            });
+        });
+
+        describe('onSubmit()', () => {
+            it('should make an HTTP POST request to save the genus and species data', () => {
+                $httpBackend.whenRoute('GET', 'ItemBotanicals').respond({});
+                $httpBackend.resetExpectations();
+
+                jest.spyOn(controller.$.watcher, 'updateOriginalData');
+                jest.spyOn(controller.$.watcher, 'check');
+                jest.spyOn(controller.$.watcher, 'notifySaved');
+
+                controller.botanical = [{itemFk: 5, genusFk: 3, specieFk: 2}];
+                $httpBackend.expectPATCH('ItemBotanicals', controller.botanical).respond({});
+                controller.onSubmit();
+                $httpBackend.flush();
+
+                expect(controller.$.watcher.updateOriginalData).toHaveBeenCalledWith();
+                expect(controller.$.watcher.check).toHaveBeenCalledWith();
+                expect(controller.$.watcher.notifySaved).toHaveBeenCalledWith();
+            });
+        });
+
+        describe('getBotanicalData()', () => {
+            it('should get the item data from itemBotanical', () => {
+                const response = ['MyResult'];
+                $httpBackend.whenRoute('GET', `ItemBotanicals`).respond(response);
+                controller.getBotanicalData();
+                $httpBackend.flush();
+
+                expect(controller.botanical).toEqual(response[0]);
+            });
+        });
+    });
+});
+