Merge branch 'dev' of https://gitea.verdnatura.es/verdnatura/salix into zone-deliveryDays-quita

db/changes/10162-fallas/00-acl.sql

@@ -0,0 +1 @@
+INSERT INTO `salix`.`ACL` (`model`, `property`, `accessType`, `permission`, `principalType`, `principalId`) VALUES ('WorkerLog', '*', 'READ', 'ALLOW', 'ROLE', 'hr');

db/changes/10162-fallas/00-workerLog.sql

@@ -0,0 +1,6 @@
+ALTER TABLE `vn`.`workerLog` 
+    ADD COLUMN `changedModel` VARCHAR(45) NULL DEFAULT NULL AFTER `description`,
+    ADD COLUMN `oldInstance` text CHARACTER SET utf8 COLLATE utf8_unicode_ci,
+    ADD COLUMN  `newInstance` text CHARACTER SET utf8 COLLATE utf8_unicode_ci,
+    ADD COLUMN `changedModelId` int(11) DEFAULT NULL,
+    ADD COLUMN `changedModelValue` varchar(45) CHARACTER SET utf8 COLLATE utf8_unicode_ci DEFAULT NULL;

db/dump/fixtures.sql

@@ -471,19 +471,19 @@ INSERT INTO `vn`.`invoiceOutSerial` (`code`, `description`, `isTaxed`, `taxAreaF
 
 INSERT INTO `vn`.`zone` (`id`, `name`, `hour`, `agencyModeFk`, `travelingDays`, `price`, `bonus`, `m3Max`)
     VALUES 
-        (1,  'Zone pickup A',       CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 1,  0, 0,    0, 30.50),
+        (1,  'Zone pickup A',       CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 1,  0, 0,    0, 30.50),
-        (2,  'Zone pickup B',       CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 1,  0, 0,    0, 30.50),
+        (2,  'Zone pickup B',       CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 1,  0, 0,    0, 30.50),
-        (3,  'Zone 247 A',          CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 7,  1, 2,    0, 40.50),
+        (3,  'Zone 247 A',          CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 7,  1, 2,    0, 40.50),
-        (4,  'Zone 247 B',          CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 7,  1, 2,    0, 40.50),
+        (4,  'Zone 247 B',          CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 7,  1, 2,    0, 40.50),
-        (5,  'Zone expensive A',    CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 8,  1, 1000, 0, 50.50),
+        (5,  'Zone expensive A',    CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 8,  1, 1000, 0, 50.50),
-        (6,  'Zone expensive B',    CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 8,  1, 1000, 0, 50.50),
+        (6,  'Zone expensive B',    CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 8,  1, 1000, 0, 50.50),
-        (7,  'Zone refund',         CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 23, 0, 0,    0, 60.50),
+        (7,  'Zone refund',         CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 23, 0, 0,    0, 60.50),
-        (8,  'Zone others',         CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 10, 0, 0,    0, 60.50),
+        (8,  'Zone others',         CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 10, 0, 0,    0, 60.50),
-        (9,  'Zone superMan',       CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 2,  0, 0,    0, NULL),
+        (9,  'Zone superMan',       CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 2,  0, 0,    0, NULL),
-        (10, 'Zone teleportation',  CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 3,  0, 0,    0, NULL),
+        (10, 'Zone teleportation',  CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 3,  0, 0,    0, NULL),
-        (11, 'Zone pickup C',       CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 1,  0, 0,    0, NULL),
+        (11, 'Zone pickup C',       CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 1,  0, 0,    0, NULL),
-        (12, 'Zone entanglement',   CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 4,  0, 0,    0, NULL),
+        (12, 'Zone entanglement',   CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 4,  0, 0,    0, NULL),
-        (13, 'Zone quantum break',  CONCAT(CURRENT_DATE(), ' ', TIME('22:00')), 5,  0, 0,    0, NULL);
+        (13, 'Zone quantum break',  CONCAT(CURRENT_DATE(), ' ', TIME('23:59')), 5,  0, 0,    0, NULL);
 
 INSERT INTO `vn`.`zoneWarehouse` (`id`, `zoneFk`, `warehouseFk`)
     VALUES 
@@ -1890,14 +1890,10 @@ INSERT INTO `vn`.`zoneEvent`(`zoneFk`, `type`, `dated`)
         (7, 'day', DATE_ADD(CURDATE(), INTERVAL +3 DAY)),
         (7, 'day', DATE_ADD(CURDATE(), INTERVAL +4 DAY)),
         (7, 'day', DATE_ADD(CURDATE(), INTERVAL +5 DAY)),
-        (7, 'day', DATE_ADD(CURDATE(), INTERVAL +6 DAY)),
+        (7, 'day', DATE_ADD(CURDATE(), INTERVAL +6 DAY));
-        (8, 'day', CURDATE()),
+
-        (8, 'day', DATE_ADD(CURDATE(), INTERVAL +1 DAY)),
+INSERT INTO `vn`.`zoneEvent`(`zoneFk`, `type`, `weekDays`)
-        (8, 'day', DATE_ADD(CURDATE(), INTERVAL +2 DAY)),
+    VALUES (8, 'indefinitely', 'mon,tue,wed,thu,fri,sat,sun');
-        (8, 'day', DATE_ADD(CURDATE(), INTERVAL +3 DAY)),
-        (8, 'day', DATE_ADD(CURDATE(), INTERVAL +4 DAY)),
-        (8, 'day', DATE_ADD(CURDATE(), INTERVAL +5 DAY)),
-        (8, 'day', DATE_ADD(CURDATE(), INTERVAL +6 DAY));
 
 INSERT INTO `vn`.`workerTimeControl`(`userFk`, `timed`, `manual`, `direction`)
     VALUES

e2e/helpers/extensions.js

@@ -1,4 +1,3 @@
-import {url as defaultURL} from './config';
 
 function checkVisibility(selector) {
     let selectorMatches = document.querySelectorAll(selector);
@@ -59,18 +58,12 @@ let actions = {
                 return document.location.hash.includes(expectedHash);
             }, {}, expectedHash);
         } catch (error) {
-            throw new Error(`failed to reach URL containing: ${expectedHash}`);
+            throw new Error(`Failed to reach URL containing: ${expectedHash}`);
         }
-        await this.waitForContentLoaded();
+        await this.waitForSpinnerLoad();
         return true;
     },
 
-    waitUntilNotPresent: async function(selector) {
-        await this.wait(selector => {
-            return document.querySelector(selector) == null;
-        }, selector);
-    },
-
     doLogin: async function(userName, password = 'nightmare') {
         await this.waitForSelector(`vn-login vn-textfield[ng-model="$ctrl.user"]`, {visible: true});
         await this.clearInput(`vn-login vn-textfield[ng-model="$ctrl.user"]`);
@@ -81,27 +74,31 @@ let actions = {
     },
 
     login: async function(userName) {
-        await this.goto(`${defaultURL}/#!/login`);
+        let state = await this.getState();
-        let dialog = await this.evaluate(() => {
+
-            return document.querySelector('button[response="accept"]');
+        if (state != 'login') {
-        });
+            try {
+                await this.gotoState('login');
+            } catch (err) {
+                let dialog = await this.evaluate(
+                    () => document.querySelector('button[response="accept"]'));
+
                 if (dialog)
                     await this.waitToClick('button[response="accept"]');
+                else
+                    throw err;
+            }
+        }
 
+        await this.waitForState('login');
         await this.doLogin(userName);
-        await this.waitForFunction(() => {
+        await this.waitForState('home');
-            return document.location.hash === '#!/';
-        }, {});
     },
 
     selectModule: async function(moduleName) {
-        let snakeName = moduleName.replace(/[\w]([A-Z])/g, m => {
+        let state = `${moduleName}.index`;
-            return m[0] + '-' + m[1];
+        await this.waitToClick(`vn-home a[ui-sref="${state}"]`);
-        }).toLowerCase();
+        await this.waitForState(state);
-
-        let selector = `vn-home a[ui-sref="${moduleName}.index"]`;
-        await this.waitToClick(selector);
-        await this.expectURL(snakeName);
     },
 
     loginAndModule: async function(userName, moduleName) {
@@ -109,56 +106,73 @@ let actions = {
         await this.selectModule(moduleName);
     },
 
-    datePicker: async function(selector, changeMonth, day) {
+    getState: async function() {
-        let date = new Date();
+        return await this.evaluate(() => {
-        if (changeMonth) date.setMonth(date.getMonth() + changeMonth);
+            let $state = angular.element(document.body).injector().get('$state');
-        date.setDate(day ? day : 16);
+            return $state.current.name;
-        date = date.toISOString().substr(0, 10);
+        });
-
-        await this.wait(selector);
-        await this.evaluate((selector, date) => {
-            let input = document.querySelector(selector).$ctrl.input;
-            input.value = date;
-            input.dispatchEvent(new Event('change'));
-        }, selector, date);
     },
 
-    pickTime: async function(selector, time) {
+    gotoState: async function(state, params) {
-        await this.wait(selector);
+        return await this.evaluate((state, params) => {
-        await this.evaluate((selector, time) => {
+            let $state = angular.element(document.body).injector().get('$state');
-            let input = document.querySelector(selector).$ctrl.input;
+            return $state.go(state, params);
-            input.value = time;
+        }, state, params);
-            input.dispatchEvent(new Event('change'));
-        }, selector, time);
     },
 
-    clearTextarea: async function(selector) {
+    waitForState: async function(state) {
-        await this.waitForSelector(selector, {visible: true});
+        await this.waitFor(state => {
-        await this.evaluate(inputSelector => {
+            let $state = angular.element(document.body).injector().get('$state');
-            return document.querySelector(`${inputSelector} textarea`).value = '';
+            return !$state.transition && $state.is(state);
-        }, selector);
+        }, {}, state);
+        await this.waitForSpinnerLoad(state);
     },
 
-    clearInput: async function(selector) {
+    waitForTransition: async function() {
-        await this.waitForSelector(selector);
+        await this.waitFor(() => {
+            const $state = angular.element(document.body).injector().get('$state');
+            return !$state.transition;
+        });
+    },
 
-        let field = await this.evaluate(selector => {
+    accessToSection: async function(state) {
-            return document.querySelector(`${selector} input`).closest('.vn-field').$ctrl.field;
+        await this.waitForSelector('vn-left-menu');
-        }, selector);
+        let nested = await this.evaluate(state => {
+            return document.querySelector(`vn-left-menu li li > a[ui-sref="${state}"]`) != null;
+        }, state);
 
-        if ((field != null && field != '') || field == '0') {
+        if (nested) {
-            let coords = await this.evaluate(selector => {
+            await this.waitToClick('vn-left-menu vn-item-section > vn-icon[icon=keyboard_arrow_down]');
-                let rect = document.querySelector(selector).getBoundingClientRect();
+            await this.wait('vn-left-menu .expanded');
-                return {x: rect.x + (rect.width / 2), y: rect.y + (rect.height / 2), width: rect.width};
-            }, selector);
-            await this.mouse.move(coords.x, coords.y);
-            await this.waitForSelector(`${selector} [icon="clear"]`, {visible: true});
-            await this.waitToClick(`${selector} [icon="clear"]`);
         }
 
-        await this.evaluate(selector => {
+        await this.evaluate(state => {
-            return document.querySelector(`${selector} input`).closest('.vn-field').$ctrl.field == '';
+            let navButton = document.querySelector(`vn-left-menu li > a[ui-sref="${state}"]`);
-        }, selector);
+            navButton.scrollIntoViewIfNeeded();
+            return navButton.click();
+        }, state);
+
+        await this.waitForState(state);
+    },
+
+    reloadSection: async function(state) {
+        await this.click('vn-icon[icon="desktop_windows"]');
+        await this.accessToSection(state);
+    },
+
+    forceReloadSection: async function(sectionRoute) {
+        await this.waitToClick('vn-icon[icon="desktop_windows"]');
+        await this.waitToClick('button[response="accept"]');
+        await this.wait('vn-card.summary');
+        await this.waitToClick(`vn-left-menu li > a[ui-sref="${sectionRoute}"]`);
+    },
+
+    accessToSearchResult: async function(searchValue) {
+        await this.clearInput('vn-searchbar');
+        await this.write('vn-searchbar', searchValue);
+        await this.waitToClick('vn-searchbar vn-icon[icon="search"]');
+        await this.waitForTransition();
+        await this.waitFor('.vn-descriptor');
     },
 
     getProperty: async function(selector, property) {
@@ -320,12 +334,16 @@ let actions = {
     },
 
     hideSnackbar: async function() {
-        await this.waitFor(750); // holds up for the snackbar to be visible for a small period of time.
+        // Holds up for the snackbar to be visible for a small period of time.
+        if (process.env.DEBUG)
+            await this.waitFor(300);
+
         await this.evaluate(() => {
             let hideButton = document.querySelector('#shapes .shown button');
             if (hideButton)
                 return document.querySelector('#shapes .shown button').click();
         });
+        await this.waitFor('#shapes > .shape', {hidden: true});
     },
 
     waitForLastSnackbar: async function() {
@@ -341,45 +359,64 @@ let actions = {
         return snackBarText;
     },
 
-    accessToSearchResult: async function(searchValue) {
+    pickDate: async function(selector, date) {
-        await this.clearInput('vn-searchbar');
+        date = date || new Date();
-        await this.write('vn-searchbar', searchValue);
+
-        await this.waitToClick('vn-searchbar vn-icon[icon="search"]');
+        const tzoffset = date.getTimezoneOffset() * 60000;
-        await this.waitForContentLoaded();
+        const localIso = (new Date(date.getTime() - tzoffset))
+            .toISOString();
+
+        await this.wait(selector);
+        await this.evaluate((selector, localIso) => {
+            let input = document.querySelector(selector).$ctrl.input;
+            input.value = localIso.substr(0, 10);
+            input.dispatchEvent(new Event('change'));
+        }, selector, localIso);
     },
 
-    accessToSection: async function(sectionRoute) {
+    pickTime: async function(selector, time) {
-        await this.waitForSelector('vn-left-menu');
+        await this.wait(selector);
-        let nested = await this.evaluate(sectionRoute => {
+        await this.evaluate((selector, time) => {
-            return document.querySelector(`vn-left-menu li li > a[ui-sref="${sectionRoute}"]`) != null;
+            let input = document.querySelector(selector).$ctrl.input;
-        }, sectionRoute);
+            input.value = time;
+            input.dispatchEvent(new Event('change'));
+        }, selector, time);
+    },
 
-        if (nested) {
+    clearTextarea: async function(selector) {
-            await this.waitToClick('vn-left-menu vn-item-section > vn-icon[icon=keyboard_arrow_down]');
+        await this.waitForSelector(selector, {visible: true});
-            await this.wait('vn-left-menu .expanded');
+        await this.evaluate(inputSelector => {
+            return document.querySelector(`${inputSelector} textarea`).value = '';
+        }, selector);
+    },
+
+    clearInput: async function(selector) {
+        await this.waitForSelector(selector);
+
+        let field = await this.evaluate(selector => {
+            return document.querySelector(`${selector} input`).closest('.vn-field').$ctrl.field;
+        }, selector);
+
+        if ((field != null && field != '') || field == '0') {
+            let coords = await this.evaluate(selector => {
+                let rect = document.querySelector(selector).getBoundingClientRect();
+                return {x: rect.x + (rect.width / 2), y: rect.y + (rect.height / 2), width: rect.width};
+            }, selector);
+            await this.mouse.move(coords.x, coords.y);
+            await this.waitForSelector(`${selector} [icon="clear"]`, {visible: true});
+            await this.waitToClick(`${selector} [icon="clear"]`);
         }
 
-        await this.evaluate(sectionRoute => {
+        await this.evaluate(selector => {
-            let navButton = document.querySelector(`vn-left-menu li > a[ui-sref="${sectionRoute}"]`);
+            return document.querySelector(`${selector} input`).closest('.vn-field').$ctrl.field == '';
-            navButton.scrollIntoViewIfNeeded();
+        }, selector);
-            return navButton.click();
-        }, sectionRoute);
-        await this.waitForNavigation({waitUntil: ['networkidle0']});
-        await this.waitForContentLoaded();
     },
 
     autocompleteSearch: async function(selector, searchValue) {
         let builtSelector = await this.selectorFormater(selector);
 
-        await this.waitForContentLoaded();
         await this.waitToClick(selector);
-        await this.waitForSelector(selector => {
+        await this.write('.vn-drop-down.shown vn-textfield', searchValue);
-            document
-                .querySelector(`${selector} vn-drop-down`).$ctrl.content
-                .querySelectorAll('li');
-        }, selector);
-
-        await this.write('.vn-drop-down.vn-popover.vn-popup.shown vn-textfield', searchValue);
 
         try {
             await this.waitForFunction((selector, searchValue) => {
@@ -391,7 +428,7 @@ let actions = {
             }, {}, selector, searchValue);
         } catch (error) {
             let inputValue = await this.evaluate(() => {
-                return document.querySelector('.vn-drop-down.vn-popover.vn-popup.shown vn-textfield input').value;
+                return document.querySelector('.vn-drop-down.shown vn-textfield input').value;
             });
             throw new Error(`${builtSelector} value is ${inputValue}! ${error}`);
         }
@@ -402,28 +439,7 @@ let actions = {
         }, {}, builtSelector, searchValue);
 
         await this.waitForMutation('.vn-drop-down', 'childList');
-        await this.waitForContentLoaded();
+        await this.waitFor('.vn-drop-down', {hidden: true});
-    },
-
-    reloadSection: async function(sectionRoute) {
-        await this.waitForContentLoaded();
-        await Promise.all([
-            this.waitForNavigation({waitUntil: 'networkidle0'}),
-            this.click('vn-icon[icon="desktop_windows"]', {}),
-        ]);
-
-        await Promise.all([
-            this.waitForNavigation({waitUntil: 'networkidle0'}),
-            this.click(`vn-left-menu li > a[ui-sref="${sectionRoute}"]`, {}),
-        ]);
-        await this.waitForContentLoaded();
-    },
-
-    forceReloadSection: async function(sectionRoute) {
-        await this.waitToClick('vn-icon[icon="desktop_windows"]');
-        await this.waitToClick('button[response="accept"]');
-        await this.wait('vn-card.summary');
-        await this.waitToClick(`vn-left-menu li > a[ui-sref="${sectionRoute}"]`);
     },
 
     checkboxState: async function(selector) {
@@ -457,7 +473,7 @@ let actions = {
     },
 
     waitForSpinnerLoad: async function() {
-        await this.waitUntilNotPresent('vn-topbar vn-spinner');
+        await this.waitFor('vn-topbar vn-spinner', {hidden: true});
     },
 
     waitForWatcherData: async function(selector) {
@@ -509,35 +525,42 @@ let actions = {
     closePopup: async function(selector) {
         await Promise.all([
             this.keyboard.press('Escape'),
-            this.waitForSelector('.vn-popup', {hidden: true}),
+            this.waitFor('.vn-popup', {hidden: true}),
         ]);
     },
 
-    waitForContentLoaded: async function() {
-        await this.waitFor(1000);
-    },
-
     respondToDialog: async function(response) {
-        await this.waitForSelector('.vn-dialog.vn-popup.shown');
+        await this.waitForSelector('.vn-dialog.shown');
         const firstCount = await this.evaluate(text => {
-            const dialogs = document.querySelectorAll('.vn-dialog.vn-popup');
+            const dialogs = document.querySelectorAll('.vn-dialog');
             const dialogOnTop = dialogs[dialogs.length - 1];
             const button = dialogOnTop.querySelector(`div.buttons [response="${text}"]`);
             button.click();
             return dialogs.length;
         }, response);
 
-        this.waitForFunction(firstCount => {
+        await this.waitForFunction(firstCount => {
-            const dialogs = document.querySelectorAll('.vn-dialog.vn-popup');
+            const dialogs = document.querySelectorAll('.vn-dialog');
             return dialogs.length < firstCount;
         }, {}, firstCount);
+    },
+
+    waitForContentLoaded: async function() {
+        // await this.waitFor(250);
     }
 };
 
 export function extendPage(page) {
     for (let name in actions) {
         page[name] = async(...args) => {
-            return await actions[name].call(page, ...args);
+            try {
+                return await actions[name].apply(page, args);
+            } catch (err) {
+                let stringArgs = args
+                    .map(i => typeof i == 'function' ? 'Function' : i)
+                    .join(', ');
+                throw new Error(`.${name}(${stringArgs}): ${err.message}`);
+            }
         };
     }
 

e2e/helpers/puppeteer.js

@@ -4,16 +4,22 @@ import {extendPage} from './extensions';
 import {url as defaultURL} from './config';
 
 export async function getBrowser() {
-    let headless = !process.env.E2E_SHOW;
+    const args = [
-    const browser = await Puppeteer.launch({
+        `--no-sandbox`,
-        args: [
-            '--no-sandbox',
         `--window-size=${ 1920 },${ 1080 }`
-        ],
+    ];
+
+    if (process.env.DEBUG)
+        args.push('--auto-open-devtools-for-tabs');
+
+    const headless = !(process.env.E2E_SHOW || process.env.DEBUG);
+    const browser = await Puppeteer.launch({
+        args,
         defaultViewport: null,
         headless: headless,
         slowMo: 0, // slow down by ms
     });
+
     let page = (await browser.pages())[0];
     await page.evaluateOnNewDocument(() => {
         Object.defineProperty(navigator, 'language', {
@@ -28,8 +34,8 @@ export async function getBrowser() {
         });
     });
     page = extendPage(page);
-    page.setDefaultTimeout(10000);
+    page.setDefaultTimeout(4000);
-    await page.goto(defaultURL, {waitUntil: 'networkidle0'});
+    await page.goto(defaultURL, {waitUntil: 'load'});
     return {page, close: browser.close.bind(browser)};
 }
 

e2e/helpers/selectors.js

@@ -208,7 +208,7 @@ export default {
         createItemButton: `vn-float-button`,
         firstSearchResult: 'vn-item-index a:nth-child(1)',
         searchResult: 'vn-item-index a.vn-tr',
-        searchResultPreviewButton: 'vn-item-index .buttons > [icon="desktop_windows"]',
+        firstResultPreviewButton: 'vn-item-index vn-tbody > :nth-child(1) .buttons > [icon="desktop_windows"]',
         searchResultCloneButton: 'vn-item-index .buttons > [icon="icon-clone"]',
         acceptClonationAlertButton: '.vn-confirm.shown [response="accept"]',
         topbarSearch: 'vn-topbar',
@@ -260,7 +260,6 @@ export default {
         secondRequestDecline: 'vn-item-request vn-tbody > vn-tr:nth-child(1) vn-icon-button[icon="thumb_down"]',
         declineReason: 'vn-textarea[ng-model="$ctrl.denyObservation"]',
         acceptDeclineReason: 'button[response="accept"]',
-
     },
     itemBasicData: {
         basicDataButton: 'vn-left-menu a[ui-sref="item.card.basicData"]',
@@ -369,7 +368,7 @@ export default {
         newTicketButton: 'vn-ticket-index a',
         searchResult: 'vn-ticket-index vn-card > vn-table > div > vn-tbody > a.vn-tr',
         searchWeeklyResult: 'vn-ticket-weekly-index vn-table vn-tbody > vn-tr',
-        searchResultDate: 'vn-ticket-index vn-table vn-tbody > a:nth-child(1) > vn-td:nth-child(5)',
+        searchResultDate: 'vn-ticket-summary [label=Landed] span',
         topbarSearch: 'vn-searchbar',
         advancedSearchButton: 'vn-ticket-search-panel button[type=submit]',
         searchButton: 'vn-searchbar vn-icon[icon="search"]',

e2e/paths/01-login/01_login.spec.js

@@ -12,32 +12,42 @@ describe('Login path', async() => {
         await browser.close();
     });
 
+    describe('Bad login', async() => {
         it('should receive an error when the username is incorrect', async() => {
             await page.doLogin('badUser', '');
             const result = await page.waitForLastSnackbar();
+            const state = await page.getState();
 
             expect(result.length).toBeGreaterThan(0);
+            expect(state).toBe('login');
         });
 
         it('should receive an error when the username is blank', async() => {
             await page.doLogin('', '');
             const result = await page.waitForLastSnackbar();
+            const state = await page.getState();
 
             expect(result.length).toBeGreaterThan(0);
+            expect(state).toBe('login');
         });
 
         it('should receive an error when the password is incorrect', async() => {
             await page.doLogin('employee', 'badPassword');
             const result = await page.waitForLastSnackbar();
+            const state = await page.getState();
 
             expect(result.length).toBeGreaterThan(0);
+            expect(state).toBe('login');
+        });
     });
 
+    describe('Successful login', async() => {
         it('should log in', async() => {
             await page.doLogin('employee', 'nightmare');
             await page.waitForNavigation();
-        let url = await page.expectURL('#!/');
+            const state = await page.getState();
 
-        expect(url).toBe(true);
+            expect(state).toBe('home');
+        });
     });
 });

e2e/paths/02-client/01_create_client.spec.js

@@ -25,10 +25,7 @@ describe('Client create path', async() => {
 
     it('should now access to the create client view by clicking the create-client floating button', async() => {
         await page.waitToClick(selectors.clientsIndex.createClientButton);
-        await page.wait(selectors.createClientView.createButton);
+        await page.waitForState('client.create');
-        let url = await page.expectURL('#!/client/create');
-
-        expect(url).toBe(true);
     });
 
     it('should receive an error when clicking the create button having all the form fields empty', async() => {
@@ -105,15 +102,11 @@ describe('Client create path', async() => {
         await page.wait(selectors.globalItems.applicationsMenuVisible);
         await page.waitToClick(selectors.globalItems.clientsButton);
         await page.wait(selectors.clientsIndex.createClientButton);
-        let url = await page.expectURL('#!/client/index');
+        await page.waitForState('client.index');
-
-        expect(url).toBe(true);
     });
 
     it(`should search for the user Carol Danvers to confirm it exists`, async() => {
         await page.accessToSearchResult('Carol Danvers');
-        let url = await page.expectURL('#!/client/114/summary');
+        await page.waitForState('client.card.summary');
-
-        expect(url).toBe(true);
     });
 });

e2e/paths/02-client/03_edit_fiscal_data.spec.js

@@ -36,9 +36,7 @@ describe('Client Edit fiscalData path', () => {
 
         it(`should click on the fiscal data button`, async() => {
             await page.waitToClick(selectors.clientFiscalData.fiscalDataButton);
-            let url = await page.expectURL('fiscal-data');
+            await page.waitForState('client.card.fiscalData');
-
-            expect(url).toBe(true);
         });
 
         it('should not be able to edit the verified data checkbox', async() => {
@@ -124,9 +122,7 @@ describe('Client Edit fiscalData path', () => {
         // confirm all addresses have now EQtax checked step 1
         it(`should click on the addresses button to access to the client's addresses`, async() => {
             await page.waitToClick(selectors.clientAddresses.addressesButton);
-            let url = await page.expectURL('/address/index');
+            await page.waitForState('client.card.address.index');
-
-            expect(url).toBe(true);
         });
 
         // confirm all addresses have now EQtax checked step 2
@@ -261,9 +257,7 @@ describe('Client Edit fiscalData path', () => {
         // confirm invoice by address checkbox gets checked if the EQtax differs between addresses step 1
         it(`should click on the addresses button to access to the client's addresses`, async() => {
             await page.waitToClick(selectors.clientAddresses.addressesButton);
-            let url = await page.expectURL('/address/index');
+            await page.waitForState('client.card.address.index');
-
-            expect(url).toBe(true);
         });
 
         // confirm invoice by address checkbox gets checked if the EQtax differs between addresses step 2

e2e/paths/02-client/05_add_address.spec.js

@@ -18,9 +18,7 @@ describe('Client Add address path', () => {
 
     it(`should click on the add new address button to access to the new address form`, async() => {
         await page.waitToClick(selectors.clientAddresses.createAddress);
-        let url = await page.expectURL('address/create');
+        await page.waitForState('client.card.address.create');
-
-        expect(url).toBe(true);
     });
 
     it('should receive an error after clicking save button as consignee, street and town fields are empty', async() => {
@@ -72,9 +70,7 @@ describe('Client Add address path', () => {
     });
 
     it(`should navigate back to the addresses index`, async() => {
-        let url = await page.expectURL('/address/index');
+        await page.waitForState('client.card.address.index');
-
-        expect(url).toBe(true);
     });
 
     it(`should confirm the new address exists and it's the default one`, async() => {
@@ -101,9 +97,7 @@ describe('Client Add address path', () => {
     it(`should click on the edit icon of the default address`, async() => {
         await page.waitForTextInElement(selectors.clientAddresses.defaultAddress, 'Somewhere in Thailand');
         await page.waitToClick(selectors.clientAddresses.firstEditAddress);
-        let url = await page.expectURL('/edit');
+        await page.waitForState('client.card.address.edit');
-
-        expect(url).toBe(true);
     });
 
     it(`should click on the active checkbox and receive an error to save it because it is the default address`, async() => {
@@ -119,8 +113,6 @@ describe('Client Add address path', () => {
         await page.waitForSelector('#shapes .shown', {hidden: true});
         await page.waitToClick(selectors.clientAddresses.cancelEditAddressButton);
         await page.waitToClick('.vn-confirm.shown button[response="accept"]');
-        let url = await page.expectURL('address/index');
+        await page.waitForState('client.card.address.index');
-
-        expect(url).toBe(true);
     });
 });

e2e/paths/02-client/06_add_address_notes.spec.js

@@ -19,9 +19,7 @@ describe('Client add address notes path', () => {
     it(`should click on the edit icon of the default address`, async() => {
         await page.waitForTextInElement(selectors.clientAddresses.defaultAddress, '20 Ingram Street');
         await page.waitToClick(selectors.clientAddresses.firstEditAddress);
-        let url = await page.expectURL('/edit');
+        await page.waitForState('client.card.address.edit');
-
-        expect(url).toBe(true);
     });
 
     it('should not save a description without observation type', async() => {

e2e/paths/02-client/08_add_notes.spec.js

@@ -17,16 +17,12 @@ describe('Client Add notes path', () => {
     });
 
     it(`should reach the notes index`, async() => {
-        let url = await page.expectURL('/note');
+        await page.waitForState('client.card.note.index');
-
-        expect(url).toBe(true);
     });
 
     it(`should click on the add note button`, async() => {
         await page.waitToClick(selectors.clientNotes.addNoteFloatButton);
-        let url = await page.expectURL('/note/create');
+        await page.waitForState('client.card.note.create');
-
-        expect(url).toBe(true);
     });
 
     it(`should create a note`, async() => {

e2e/paths/02-client/09_add_credit.spec.js

@@ -18,9 +18,7 @@ describe('Client Add credit path', () => {
 
     it(`should click on the add credit button`, async() => {
         await page.waitToClick(selectors.clientCredit.addCreditFloatButton);
-        let url = await page.expectURL('/credit/create');
+        await page.waitForState('client.card.credit.create');
-
-        expect(url).toBe(true);
     });
 
     it(`should edit the credit`, async() => {

e2e/paths/02-client/10_add_greuge.spec.js

@@ -18,9 +18,7 @@ describe('Client Add greuge path', () => {
 
     it(`should click on the add greuge button`, async() => {
         await page.waitToClick(selectors.clientGreuge.addGreugeFloatButton);
-        let url = await page.expectURL('greuge/create');
+        await page.waitForState('client.card.greuge.create');
-
-        expect(url).toBe(true);
     });
 
     it(`should receive an error if all fields are empty but date and type on submit`, async() => {

e2e/paths/02-client/12_lock_of_verified_data.spec.js

@@ -109,7 +109,7 @@ describe('Client lock verified data path', () => {
             await page.waitToClick(selectors.clientFiscalData.saveButton);
             const result = await page.waitForLastSnackbar();
 
-            expect(result).toEqual(jasmine.arrayContaining([`You can't make changes on a client with verified data`]));
+            expect(result).toEqual(`You can't make changes on a client with verified data`);
         });
     });
 

e2e/paths/02-client/13_log.spec.js

@@ -27,9 +27,7 @@ describe('Client log path', () => {
 
     it('should navigate to the log section', async() => {
         await page.waitToClick(selectors.clientLog.logButton);
-        let url = await page.expectURL('log');
+        await page.waitForState('client.card.log');
-
-        expect(url).toBe(true);
     });
 
     it('should check the previous value of the last logged change', async() => {
@@ -46,7 +44,6 @@ describe('Client log path', () => {
         let lastModificationCurrentValue = await page.
             waitToGetProperty(selectors.clientLog.lastModificationCurrentValue, 'innerText');
 
-
         expect(lastModificationPreviousValue).toEqual('name: DavidCharlesHaller');
         expect(lastModificationCurrentValue).toEqual('name: this is a test');
     });

e2e/paths/02-client/14_balance.spec.js

@@ -41,9 +41,7 @@ describe('Client balance path', () => {
     it('should click the new payment button', async() => {
         await page.closePopup();
         await page.reloadSection('client.card.balance.index');
-        let url = await page.expectURL('/balance');
+        await page.waitForState('client.card.balance.index');
-
-        expect(url).toBe(true);
     });
 
     it('should create a new payment that clears the debt', async() => {
@@ -110,17 +108,13 @@ describe('Client balance path', () => {
         await page.wait(selectors.globalItems.applicationsMenuVisible);
         await page.waitToClick(selectors.globalItems.clientsButton);
         await page.wait(selectors.clientsIndex.createClientButton);
-        let url = await page.expectURL('#!/client/index');
+        await page.waitForState('client.index');
-
-        expect(url).toBe(true);
     });
 
     it('should now search for the user Petter Parker', async() => {
         await page.accessToSearchResult('Petter Parker');
         await page.waitToClick(selectors.clientBalance.balanceButton);
-        let url = await page.expectURL('/balance');
+        await page.waitForState('client.card.balance.index');
-
-        expect(url).toBe(true);
     });
 
     it('should not be able to click the new payment button as it isnt present', async() => {

e2e/paths/02-client/19_summary.spec.js

@@ -17,9 +17,7 @@ describe('Client summary path', () => {
     });
 
     it('should reach the first route summary section', async() => {
-        let url = await page.expectURL('#!/client/102/summary');
+        await page.waitForState('client.card.summary');
-
-        expect(url).toBe(true);
     });
 
     it('should display details from the client on the header', async() => {

e2e/paths/03-worker/01_summary.spec.js

@@ -16,9 +16,7 @@ describe('Worker summary path', () => {
     });
 
     it('should reach the employee summary section', async() => {
-        const url = await page.expectURL('#!/worker/3/summary');
+        await page.waitForState('worker.card.summary');
-
-        expect(url).toBe(true);
     });
 
     it('should check the summary contains the name and userName on the header', async() => {

e2e/paths/03-worker/04_time_control.spec.js

@@ -316,16 +316,12 @@ describe('Worker time control path', () => {
 
             it('should search for a worker and access to its summary', async() => {
                 await page.accessToSearchResult('HankPym');
-                let url = await page.expectURL('/summary');
+                await page.waitForState('worker.card.summary');
-
-                expect(url).toBe(true);
             });
 
             it('should access to the time control section', async() => {
                 await page.accessToSection('worker.card.timeControl');
-                let url = await page.expectURL('/time-control');
+                await page.waitForState('worker.card.timeControl');
-
-                expect(url).toBe(true);
             });
 
             it('should lovingly scan in Hank Pym', async() => {

e2e/paths/04-item/01_summary.spec.js

@@ -19,8 +19,8 @@ describe('Item summary path', () => {
         await page.write(selectors.itemsIndex.topbarSearch, 'Ranged weapon');
         await page.waitToClick(selectors.itemsIndex.searchButton);
         await page.waitForNumberOfElements(selectors.itemsIndex.searchResult, 3);
-        await page.waitForTextInElement(selectors.itemsIndex.searchResult, 'Ranged weapon longbow 2m');
+        await page.waitForTextInElement(selectors.itemsIndex.searchResult, 'Ranged weapon');
-        await page.waitToClick(selectors.itemsIndex.searchResultPreviewButton);
+        await page.waitToClick(selectors.itemsIndex.firstResultPreviewButton);
         const isVisible = await page.isVisible(selectors.itemSummary.basicData);
 
         expect(isVisible).toBeTruthy();
@@ -68,11 +68,10 @@ describe('Item summary path', () => {
 
     it('should search for other item', async() => {
         await page.clearInput('vn-searchbar');
-        await page.waitToClick(selectors.itemsIndex.searchButton);
         await page.write(selectors.itemsIndex.topbarSearch, 'Melee Reinforced');
-        await page.waitToClick(selectors.itemsIndex.searchButton);
+        await page.keyboard.press('Enter');
         await page.waitForNumberOfElements(selectors.itemsIndex.searchResult, 2);
-        await page.waitToClick(selectors.itemsIndex.searchResultPreviewButton);
+        await page.waitToClick(selectors.itemsIndex.firstResultPreviewButton);
         await page.waitForSelector(selectors.itemSummary.basicData, {visible: true});
     });
 
@@ -104,9 +103,7 @@ describe('Item summary path', () => {
 
     it(`should navigate to the one of the items detailed section`, async() => {
         await page.accessToSearchResult('Melee weapon combat fist 15cm');
-        let url = await page.expectURL('summary');
+        await page.waitForState('item.card.summary');
-
-        expect(url).toBe(true);
     });
 
     it(`should check the descritor edit button is not visible for employee`, async() => {

e2e/paths/04-item/08_create_and_clone.spec.js

@@ -27,23 +27,17 @@ describe('Item Create/Clone path', () => {
 
         it('should access to the create item view by clicking the create floating button', async() => {
             await page.waitToClick(selectors.itemsIndex.createItemButton);
-            let url = await page.expectURL('#!/item/create');
+            await page.waitForState('item.create');
-
-            expect(url).toBe(true);
         });
 
         it('should return to the item index by clickig the cancel button', async() => {
             await page.waitToClick(selectors.itemCreateView.cancelButton);
-            let url = await page.expectURL('#!/item/index');
+            await page.waitForState('item.index');
-
-            expect(url).toBe(true);
         });
 
         it('should now access to the create item view by clicking the create floating button', async() => {
             await page.waitToClick(selectors.itemsIndex.createItemButton);
-            let url = await page.expectURL('#!/item/create');
+            await page.waitForState('item.create');
-
-            expect(url).toBe(true);
         });
 
         it('should create the Infinity Gauntlet item', async() => {
@@ -87,9 +81,7 @@ describe('Item Create/Clone path', () => {
         it('should return to the items index by clicking the return to items button', async() => {
             await page.waitToClick(selectors.itemBasicData.goToItemIndexButton);
             await page.wait(selectors.itemsIndex.createItemButton);
-            let url = await page.expectURL('#!/item/index');
+            await page.waitForState('item.index');
-
-            expect(url).toBe(true);
         });
 
         it(`should search for the item Infinity Gauntlet`, async() => {
@@ -106,9 +98,7 @@ describe('Item Create/Clone path', () => {
             await page.waitForTextInElement(selectors.itemsIndex.searchResult, 'Infinity Gauntlet');
             await page.waitToClick(selectors.itemsIndex.searchResultCloneButton);
             await page.waitToClick(selectors.itemsIndex.acceptClonationAlertButton);
-            let url = await page.expectURL('tags');
+            await page.waitForState('item.tags');
-
-            expect(url).toBe(true);
         });
 
         it('should search for the item Infinity Gauntlet and find two', async() => {

e2e/paths/04-item/09_regularize.spec.js

@@ -34,9 +34,7 @@ describe('Item regularize path', () => {
 
     it('should search for an specific item', async() => {
         await page.accessToSearchResult('Ranged weapon pistol 9mm');
-        let url = await page.expectURL('/summary');
+        await page.waitForState('item.card.summary');
-
-        expect(url).toBe(true);
     });
 
     it('should open the regularize dialog and check the warehouse matches the local user settings', async() => {
@@ -63,9 +61,7 @@ describe('Item regularize path', () => {
             page.waitForNavigation({waitUntil: ['load', 'networkidle0', 'domcontentloaded']}),
             page.waitToClick(selectors.globalItems.ticketsButton)
         ]);
-        let url = await page.expectURL('#!/ticket/index');
+        await page.waitForState('ticket.index');
-
-        expect(url).toBe(true);
     });
 
     it('should clear the user local settings now', async() => {
@@ -78,12 +74,9 @@ describe('Item regularize path', () => {
     });
 
     it('should search for the ticket with alias missing', async() => {
-        await page.accessToSearchResult('Carol Danvers');
         await page.keyboard.press('Escape');
         await page.accessToSearchResult('missing');
-        let url = await page.expectURL('/summary');
+        await page.waitForState('ticket.card.summary');
-
-        expect(url).toBe(true);
     });
 
     it(`should check the ticket sale quantity is showing a negative value`, async() => {
@@ -105,16 +98,12 @@ describe('Item regularize path', () => {
         await page.waitToClick(selectors.globalItems.applicationsMenuButton);
         await page.wait(selectors.globalItems.applicationsMenuVisible);
         await page.waitToClick(selectors.globalItems.itemsButton);
-        let url = await page.expectURL('#!/item/index');
+        await page.waitForState('item.index');
-
-        expect(url).toBe(true);
     });
 
     it('should search for the item once again', async() => {
         await page.accessToSearchResult('Ranged weapon pistol 9mm');
-        let url = await page.expectURL('/summary');
+        await page.waitForState('item.card.summary');
-
-        expect(url).toBe(true);
     });
 
     it('should regularize the item once more', async() => {
@@ -136,16 +125,12 @@ describe('Item regularize path', () => {
             page.waitToClick(selectors.globalItems.ticketsButton)
         ]);
         await page.waitForTransitionEnd('vn-searchbar');
-        let url = await page.expectURL('#!/ticket/index');
+        await page.waitForState('ticket.index');
-
-        expect(url).toBe(true);
     });
 
     it('should search for the ticket with id 25 once again', async() => {
         await page.accessToSearchResult('25');
-        let url = await page.expectURL('/summary');
+        await page.waitForState('ticket.card.summary');
-
-        expect(url).toBe(true);
     });
 
     it(`should check the ticket contains now two sales`, async() => {

e2e/paths/04-item/11_item_log.spec.js

@@ -25,9 +25,7 @@ describe('Item log path', () => {
 
     it('should access to the create item view by clicking the create floating button', async() => {
         await page.waitToClick(selectors.itemsIndex.createItemButton);
-        let url = await page.expectURL('#!/item/create');
+        await page.waitForState('item.create');
-
-        expect(url).toBe(true);
     });
 
     it('should create the Knowledge artifact item', async() => {
@@ -44,17 +42,13 @@ describe('Item log path', () => {
     it('should return to the items index by clicking the return to items button', async() => {
         await page.waitToClick(selectors.itemBasicData.goToItemIndexButton);
         await page.wait(selectors.itemsIndex.createItemButton);
-        let url = await page.expectURL('#!/item/index');
+        await page.waitForState('item.index');
-
-        expect(url).toBe(true);
     });
 
     it(`should search for the created item and navigate to it's log section`, async() => {
         await page.accessToSearchResult('Knowledge artifact');
         await page.accessToSection('item.card.log');
-        let url = await page.expectURL('/log');
+        await page.waitForState('item.card.log');
-
-        expect(url).toBe(true);
     });
 
     it(`should confirm the log is showing 5 entries`, async() => {

e2e/paths/04-item/13_request.spec.js

@@ -16,9 +16,7 @@ describe('Item request path', () => {
     });
 
     it('should reach the item request section', async() => {
-        const result = await page.expectURL('/item/request');
+        await page.waitForState('item.request');
-
-        expect(result).toBe(true);
     });
 
     it('should fill the id and quantity then check the concept was updated', async() => {
@@ -38,9 +36,8 @@ describe('Item request path', () => {
 
     it('should now click on the second declain request icon then type the reason', async() => {
         await page.waitToClick(selectors.itemRequest.secondRequestDecline);
-        await page.write(selectors.itemRequest.declineReason, 'not quite as expected');
+        await page.write(selectors.itemRequest.declineReason, 'Not quite as expected');
-        await page.waitToClick(selectors.itemRequest.acceptDeclineReason);
+        await page.respondToDialog('accept');
-        await page.waitForContentLoaded();
         let status = await page.waitToGetProperty(selectors.itemRequest.firstRequestStatus, 'innerText');
 
         expect(status).toContain('Denegada');

e2e/paths/05-ticket/02_expeditions_and_log.spec.js

@@ -19,8 +19,9 @@ describe('Ticket expeditions and log path', () => {
 
     it(`should delete a former expedition and confirm the remaining expedition are the expected ones`, async() => {
         await page.waitToClick(selectors.ticketExpedition.secondExpeditionRemoveButton);
-        await page.waitToClick(selectors.ticketExpedition.acceptDeleteRowButton),
+        await page.waitToClick(selectors.ticketExpedition.acceptDeleteRowButton);
         await page.reloadSection('ticket.card.expedition');
+
         await page.waitForSelector(selectors.ticketExpedition.expeditionRow, {});
         const result = await page
             .countElement(selectors.ticketExpedition.expeditionRow);

e2e/paths/05-ticket/05_tracking_state.spec.js

@@ -21,9 +21,7 @@ describe('Ticket Create new tracking state path', () => {
         it('should access to the create state view by clicking the create floating button', async() => {
             await page.waitToClick(selectors.ticketTracking.createStateButton);
             await page.waitForSelector(selectors.createStateView.state, {visible: true});
-            let url = await page.expectURL('tracking/edit');
+            await page.waitForState('ticket.card.tracking.edit');
-
-            expect(url).toBe(true);
         });
 
         it(`should attempt create a new state but receive an error if state is empty`, async() => {
@@ -51,9 +49,7 @@ describe('Ticket Create new tracking state path', () => {
 
         it('should now access to the create state view by clicking the create floating button', async() => {
             await page.waitToClick(selectors.ticketTracking.createStateButton);
-            let url = await page.expectURL('tracking/edit');
+            await page.waitForState('ticket.card.tracking.edit');
-
-            expect(url).toBe(true);
         });
 
         it(`should attemp to create an state for which salesPerson doesn't have permissions`, async() => {

e2e/paths/05-ticket/06_basic_data_steps.spec.js

@@ -68,9 +68,7 @@ describe('Ticket Edit basic data path', () => {
 
     it(`should click next`, async() => {
         await page.waitToClick(selectors.ticketBasicData.nextStepButton);
-        let url = await page.expectURL('data/step-two');
+        await page.waitForState('ticket.card.basicData.stepTwo');
-
-        expect(url).toBe(true);
     });
 
     it(`should have a price diference`, async() => {
@@ -83,8 +81,6 @@ describe('Ticket Edit basic data path', () => {
     it(`should select a new reason for the changes made then click on finalize`, async() => {
         await page.waitToClick(selectors.ticketBasicData.chargesReason);
         await page.waitToClick(selectors.ticketBasicData.finalizeButton);
-        let url = await page.expectURL('summary');
+        await page.waitForState('ticket.card.summary');
-
-        expect(url).toBe(true);
     });
 });

e2e/paths/05-ticket/09_weekly.spec.js

@@ -41,9 +41,7 @@ describe('Ticket descriptor path', () => {
         await page.waitToClick(selectors.globalItems.applicationsMenuButton);
         await page.wait(selectors.globalItems.applicationsMenuVisible);
         await page.waitToClick(selectors.globalItems.ticketsButton);
-        let url = await page.expectURL('#!/ticket/index');
+        await page.waitForState('ticket.index');
-
-        expect(url).toBe(true);
     });
 
     it('should confirm the ticket 11 was added to thursday', async() => {
@@ -57,25 +55,12 @@ describe('Ticket descriptor path', () => {
         await page.waitToClick(selectors.globalItems.applicationsMenuButton);
         await page.wait(selectors.globalItems.applicationsMenuVisible);
         await page.waitToClick(selectors.globalItems.ticketsButton);
-        let url = await page.expectURL('#!/ticket/index');
+        await page.waitForState('ticket.index');
-
-        expect(url).toBe(true);
     });
 
     it('should now search for the ticket 11', async() => {
-        await page.write(selectors.ticketsIndex.topbarSearch, '11');
+        await page.accessToSearchResult('11');
-        await page.waitToClick(selectors.ticketsIndex.searchButton);
+        await page.waitForState('ticket.card.summary');
-        await page.waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1);
-        const result = await page.countElement(selectors.ticketsIndex.searchResult);
-
-        expect(result).toEqual(1);
-    });
-
-    it(`should click on the search result to access to the ticket`, async() => {
-        await page.waitToClick(selectors.ticketsIndex.searchResult);
-        let url = await page.expectURL('/summary');
-
-        expect(url).toBe(true);
     });
 
     it('should add the ticket to saturday turn using the descriptor more menu', async() => {
@@ -91,9 +76,7 @@ describe('Ticket descriptor path', () => {
         await page.waitToClick(selectors.globalItems.applicationsMenuButton);
         await page.wait(selectors.globalItems.applicationsMenuVisible);
         await page.waitToClick(selectors.globalItems.ticketsButton);
-        let url = await page.expectURL('#!/ticket/index');
+        await page.waitForState('ticket.index');
-
-        expect(url).toBe(true);
     });
 
     it('should confirm the ticket 11 was added on saturday', async() => {

e2e/paths/05-ticket/10_request.spec.js

@@ -30,13 +30,10 @@ describe('Ticket purchase request path', () => {
     });
 
     it('should have been redirected to the request index', async() => {
-        let url = await page.expectURL('/request');
+        await page.waitForState('ticket.card.request.index');
-
-        expect(url).toBe(true);
     });
 
     it(`should edit the third request quantity as it's state is still new`, async() => {
-        await page.waitFor(2000); // looks like it needs more than a single second some times to load
         await page.write(selectors.ticketRequests.thirdRequestQuantity, '9');
         await page.keyboard.press('Enter');
         const result = await page.waitForLastSnackbar();

e2e/paths/05-ticket/11_diary.spec.js

@@ -28,7 +28,7 @@ xdescribe('Ticket diary path', () => {
     it(`should click on the search result to access to the ticket summary`, async() => {
         await page.waitForTextInElement(selectors.ticketsIndex.searchResult, 'Bat cave');
         await page.waitToClick(selectors.ticketsIndex.searchResult);
-        let url = await page.expectURL('/summary');
+        let url = await page.expectURL('/summary'); // use waitForState instead
 
         expect(url).toBe(true);
     });
@@ -37,7 +37,7 @@ xdescribe('Ticket diary path', () => {
         await page.waitToClick(selectors.ticketSummary.firstSaleItemId);
         await page.waitForTransitionEnd('.vn-popover');
         await page.waitToClick(selectors.ticketSummary.popoverDiaryButton);
-        let url = await page.expectURL('/diary');
+        let url = await page.expectURL('/diary'); // use waitForState instead
 
         expect(url).toBe(true);
     });

e2e/paths/05-ticket/12_descriptor.spec.js

@@ -18,9 +18,7 @@ describe('Ticket descriptor path', () => {
     describe('Delete ticket', () => {
         it('should search for an specific ticket', async() => {
             await page.accessToSearchResult('18');
-            let url = await page.expectURL('/summary');
+            await page.waitForState('ticket.card.summary');
-
-            expect(url).toBe(true);
         });
 
         it(`should update the shipped hour using the descriptor menu`, async() => {
@@ -50,16 +48,13 @@ describe('Ticket descriptor path', () => {
         });
 
         it('should have been relocated to the ticket index', async() => {
-            let url = await page.expectURL('#!/ticket/index');
+            await page.waitForState('ticket.index');
-
-            expect(url).toBe(true);
         });
 
         it(`should search for the deleted ticket and check it's date`, async() => {
             await page.write(selectors.ticketsIndex.topbarSearch, '18');
             await page.waitToClick(selectors.ticketsIndex.searchButton);
-            await page.waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1);
+            await page.waitForState('ticket.card.summary');
-            await page.wait(selectors.ticketsIndex.searchResultDate);
             const result = await page.waitToGetProperty(selectors.ticketsIndex.searchResultDate, 'innerText');
 
             expect(result).toContain(2000);
@@ -69,9 +64,7 @@ describe('Ticket descriptor path', () => {
     describe('add stowaway', () => {
         it('should search for a ticket', async() => {
             await page.accessToSearchResult('16');
-            let url = await page.expectURL('/summary');
+            await page.waitForState('ticket.card.summary');
-
-            expect(url).toBe(true);
         });
 
         it('should open the add stowaway dialog', async() => {
@@ -102,9 +95,7 @@ describe('Ticket descriptor path', () => {
 
         it(`should navigate back to the added ticket using the descriptors ship button`, async() => {
             await page.waitToClick(selectors.ticketDescriptor.shipButton);
-            let url = await page.expectURL('#!/ticket/17/summary');
+            await page.waitForState('ticket.card.summary');
-
-            expect(url).toBe(true);
         });
 
         it('should delete the stowaway', async() => {
@@ -128,9 +119,7 @@ describe('Ticket descriptor path', () => {
 
             await page.loginAndModule('adminBoss', 'ticket');
             await page.accessToSearchResult(invoiceableTicketId);
-            let url = await page.expectURL(`ticket/${invoiceableTicketId}/summary`);
+            await page.waitForState('ticket.card.summary');
-
-            expect(url).toBe(true);
         });
 
         it(`should make sure the ticket doesn't have an invoiceOutFk yet`, async() => {

e2e/paths/05-ticket/13_services.spec.js

@@ -44,9 +44,6 @@ describe('Ticket services path', () => {
             await page.loginAndModule('administrative', 'ticket');
             await page.accessToSearchResult(editableTicketId);
             await page.accessToSection('ticket.card.service');
-            let url = await page.expectURL('/service');
-
-            expect(url).toBe(true);
         });
 
         it('should click on the add button to prepare the form to create a new service', async() => {

e2e/paths/05-ticket/14_create_ticket.spec.js

@@ -17,15 +17,16 @@ describe('Ticket create path', () => {
 
     it('should open the new ticket form', async() => {
         await page.waitToClick(selectors.ticketsIndex.newTicketButton);
-        let url = await page.expectURL('#!/ticket/create');
+        await page.waitForState('ticket.create');
-
-        expect(url).toBe(true);
     });
 
     it('should succeed to create a ticket', async() => {
+        const nextMonth = new Date();
+        nextMonth.setMonth(nextMonth.getMonth() + 1);
+
         await page.autocompleteSearch(selectors.createTicketView.client, 'Tony Stark');
         await page.autocompleteSearch(selectors.createTicketView.address, 'Tony Stark');
-        await page.datePicker(selectors.createTicketView.deliveryDate, 1, null);
+        await page.pickDate(selectors.createTicketView.deliveryDate, nextMonth);
         await page.autocompleteSearch(selectors.createTicketView.warehouse, 'Warehouse One');
         await page.autocompleteSearch(selectors.createTicketView.agency, 'Silla247');
         await page.waitToClick(selectors.createTicketView.createButton);
@@ -35,8 +36,6 @@ describe('Ticket create path', () => {
     });
 
     it('should check the url is now the summary of the ticket', async() => {
-        let url = await page.expectURL('/summary');
+        await page.waitForState('ticket.card.summary');
-
-        expect(url).toBe(true);
     });
 });

e2e/paths/05-ticket/15_create_ticket_from_client.spec.js

@@ -19,9 +19,7 @@ describe('Ticket create from client path', () => {
     it('should click the create simple ticket on the descriptor menu', async() => {
         await page.waitToClick(selectors.clientDescriptor.moreMenu);
         await page.waitToClick(selectors.clientDescriptor.simpleTicketButton);
-        let url = await page.expectURL('clientFk=102');
+        await page.waitForState('ticket.create');
-
-        expect(url).toBe(true);
     });
 
     it('should check if the client details are the expected ones', async() => {
@@ -31,7 +29,6 @@ describe('Ticket create from client path', () => {
         const address = await page
             .waitToGetProperty(selectors.createTicketView.address, 'value');
 
-
         expect(client).toContain('Petter Parker');
         expect(address).toContain('20 Ingram Street');
     });

e2e/paths/05-ticket/16_summary.spec.js

@@ -18,9 +18,7 @@ describe('Ticket Summary path', () => {
     it('should navigate to the target ticket summary section', async() => {
         await page.loginAndModule('employee', 'ticket');
         await page.accessToSearchResult(ticketId);
-        let url = await page.expectURL('/summary');
+        await page.waitForState('ticket.card.summary');
-
-        expect(url).toBe(true);
     });
 
     it(`should display details from the ticket and it's client on the top of the header`, async() => {
@@ -75,9 +73,7 @@ describe('Ticket Summary path', () => {
     it('should log in as production then navigate to the summary of the same ticket', async() => {
         await page.loginAndModule('production', 'ticket');
         await page.accessToSearchResult(ticketId);
-        let url = await page.expectURL('/summary');
+        await page.waitForState('ticket.card.summary');
-
-        expect(url).toBe(true);
     });
 
     it('should click on the SET OK button', async() => {

e2e/paths/05-ticket/17_log.spec.js

@@ -19,9 +19,7 @@ describe('Ticket log path', () => {
         await page.loginAndModule('employee', 'ticket');
         await page.accessToSearchResult(ticketId);
         await page.accessToSection('ticket.card.observation');
-        let url = await page.expectURL('/observation');
+        await page.waitForState('ticket.card.observation');
-
-        expect(url).toBe(true);
     });
 
     it('should create a new note for the test', async() => {
@@ -36,9 +34,7 @@ describe('Ticket log path', () => {
 
     it('should navigate to the log section', async() => {
         await page.accessToSection('ticket.card.log');
-        let url = await page.expectURL('/log');
+        await page.waitForState('ticket.card.log');
-
-        expect(url).toBe(true);
     });
 
     it('should set the viewport width to 1920 to see the table full width', async() => {

e2e/paths/06-claim/01_basic_data.spec.js

@@ -27,13 +27,11 @@ describe('Claim edit basic data path', () => {
         await page.waitToClick(selectors.claimBasicData.saveButton);
         const result = await page.waitForLastSnackbar();
 
-        expect(result).toEqual(jasmine.arrayContaining(['Data saved!']));
+        expect(result).toEqual('Data saved!');
     });
 
     it(`should have been redirected to the next section of claims as the role is salesAssistant`, async() => {
-        let url = await page.expectURL('/detail');
+        await page.waitForState('claim.card.detail');
-
-        expect(url).toBe(true);
     });
 
     it('should confirm the claim state was edited', async() => {
@@ -58,6 +56,6 @@ describe('Claim edit basic data path', () => {
         await page.waitToClick(selectors.claimBasicData.saveButton);
         const result = await page.waitForLastSnackbar();
 
-        expect(result).toEqual(jasmine.arrayContaining(['Data saved!']));
+        expect(result).toEqual('Data saved!');
     });
 });

e2e/paths/06-claim/02_development.spec.js

@@ -32,9 +32,7 @@ describe('Claim development', () => {
     });
 
     it(`should redirect to the next section of claims as the role is salesAssistant`, async() => {
-        let url = await page.expectURL('/action');
+        await page.waitForState('claim.card.action');
-
-        expect(url).toBe(true);
     });
 
     it('should edit a development', async() => {

e2e/paths/06-claim/03_detail.spec.js

@@ -56,7 +56,7 @@ xdescribe('Claim detail', () => {
         await page.loginAndModule('salesAssistant', 'claim');
         await page.accessToSearchResult('1');
         await page.accessToSection('claim.card.detail');
-        let url = await page.expectURL('/detail');
+        let url = await page.expectURL('/detail'); // replace with waitForState
 
         expect(url).toBe(true);
     });
@@ -99,7 +99,7 @@ xdescribe('Claim detail', () => {
     });
 
     it(`should have been redirected to the next section in claims`, async() => {
-        let url = await page.expectURL('development');
+        let url = await page.expectURL('development'); // replace with waitForState
 
         expect(url).toBe(true);
     });

e2e/paths/06-claim/04_claim_action.spec.js

@@ -67,7 +67,7 @@ describe('Claim action path', () => {
         await page.waitToClick(selectors.claimAction.isPaidWithManaCheckbox);
         const result = await page.waitForLastSnackbar();
 
-        expect(result).toEqual(jasmine.arrayContaining(['Data saved!']));
+        expect(result).toEqual('Data saved!');
     });
 
     it('should confirm the "is paid with mana" checkbox is checked', async() => {

e2e/paths/06-claim/05_summary.spec.js

@@ -18,9 +18,7 @@ describe('claim Summary path', () => {
     it('should navigate to the target claim summary section', async() => {
         await page.loginAndModule('employee', 'claim');
         await page.accessToSearchResult(claimId);
-        let url = await page.expectURL('/summary');
+        await page.waitForState('claim.card.summary');
-
-        expect(url).toBe(true);
     });
 
     it(`should display details from the claim and it's client on the top of the header`, async() => {

e2e/paths/06-claim/06_descriptor.spec.js

@@ -18,9 +18,7 @@ describe('claim Descriptor path', () => {
     it('should now navigate to the target claim summary section', async() => {
         await page.loginAndModule('employee', 'claim');
         await page.accessToSearchResult(claimId);
-        let url = await page.expectURL('/summary');
+        await page.waitForState('claim.card.summary');
-
-        expect(url).toBe(true);
     });
 
     it(`should not be able to see the delete claim button of the descriptor more menu`, async() => {
@@ -31,9 +29,7 @@ describe('claim Descriptor path', () => {
     it(`should log in as salesAssistant and navigate to the target claim`, async() => {
         await page.loginAndModule('salesAssistant', 'claim');
         await page.accessToSearchResult(claimId);
-        let url = await page.expectURL('/summary');
+        await page.waitForState('claim.card.summary');
-
-        expect(url).toBe(true);
     });
 
     it(`should be able to see the delete claim button of the descriptor more menu`, async() => {
@@ -50,9 +46,7 @@ describe('claim Descriptor path', () => {
     });
 
     it(`should have been relocated to the claim index`, async() => {
-        let url = await page.expectURL('/claim/index');
+        await page.waitForState('claim.index');
-
-        expect(url).toBe(true);
     });
 
     it(`should search for the deleted claim to find no results`, async() => {

e2e/paths/07-order/01_summary.spec.js

@@ -16,9 +16,7 @@ describe('Order summary path', () => {
     });
 
     it('should reach the order summary section', async() => {
-        const url = await page.expectURL('#!/order/16/summary');
+        await page.waitForState('order.card.summary');
-
-        expect(url).toBe(true);
     });
 
     it('should check the summary contains the order id', async() => {

e2e/paths/07-order/02_basic_data.spec.js

@@ -4,7 +4,6 @@ import getBrowser from '../../helpers/puppeteer';
 describe('Order edit basic data path', () => {
     let browser;
     let page;
-    const today = new Date().getDate();
 
     beforeAll(async() => {
         browser = await getBrowser();
@@ -40,9 +39,7 @@ describe('Order edit basic data path', () => {
             await page.accessToSearchResult(orderId);
             await page.accessToSection('order.card.basicData');
             await page.waitForSelector(selectors.orderBasicData.observation, {visible: true});
-            let url = await page.expectURL(`#!/order/${orderId}/basic-data`);
+            await page.waitForState('order.card.basicData');
-
-            expect(url).toBe(true);
         });
 
         it('should not be able to change anything', async() => {
@@ -60,26 +57,20 @@ describe('Order edit basic data path', () => {
             await page.waitToClick(selectors.orderBasicData.acceptButton);
             await page.waitForContentLoaded();
             await page.waitToClick(selectors.ordersIndex.createOrderButton);
-            let url = await page.expectURL('#!/order/create');
+            await page.waitForState('order.create');
-
-            expect(url).toBe(true);
         });
 
         it('should now create a new one', async() => {
             await page.autocompleteSearch(selectors.createOrderView.client, 'Jessica Jones');
-            await page.datePicker(selectors.createOrderView.landedDatePicker, 0, today);
+            await page.pickDate(selectors.createOrderView.landedDatePicker);
             await page.autocompleteSearch(selectors.createOrderView.agency, 'Other agency');
             await page.waitToClick(selectors.createOrderView.createButton);
-            let url = await page.expectURL('/catalog');
+            await page.waitForState('order.card.catalog');
-
-            expect(url).toBe(true);
         });
 
         it('should navigate to the basic data section of the new order', async() => {
             await page.accessToSection('order.card.basicData');
-            let url = await page.expectURL('/basic-data');
+            await page.waitForState('order.card.basicData');
-
-            expect(url).toBe(true);
         });
 
         it('should be able to modify all the properties', async() => {

e2e/paths/07-order/03_lines.spec.js

@@ -41,10 +41,7 @@ describe('Order lines', () => {
     it('should confirm the whole order and redirect to ticket index filtered by clientFk', async() => {
         await page.waitToClick(selectors.orderLine.confirmOrder);
 
-        let hashPartOne = await page.expectURL('ticket/index');
+        await page.expectURL('ticket/index');
-        let hashPartTwo = await page.expectURL('clientFk');
+        await page.expectURL('clientFk');
-
-        expect(hashPartOne).toBe(true);
-        expect(hashPartTwo).toBe(true);
     });
 });

e2e/paths/07-order/04_catalog.spec.js

@@ -17,21 +17,15 @@ describe('Order catalog', () => {
 
     it('should open the create new order form', async() => {
         await page.waitToClick(selectors.ordersIndex.createOrderButton);
-        let url = await page.expectURL('order/create');
+        await page.waitForState('order.create');
-
-        expect(url).toBe(true);
     });
 
     it('should create a new order', async() => {
-        let today = new Date().getDate();
-
         await page.autocompleteSearch(selectors.createOrderView.client, 'Tony Stark');
-        await page.datePicker(selectors.createOrderView.landedDatePicker, 0, today);
+        await page.pickDate(selectors.createOrderView.landedDatePicker);
         await page.autocompleteSearch(selectors.createOrderView.agency, 'Other agency');
         await page.waitToClick(selectors.createOrderView.createButton);
-        let url = await page.expectURL('/catalog');
+        await page.waitForState('order.card.catalog');
-
-        expect(url).toBe(true);
     });
 
     it('should add the realm and type filters and obtain results', async() => {

e2e/paths/08-route/01_summary.spec.js

@@ -17,9 +17,7 @@ describe('Route summary path', () => {
     });
 
     it('should reach the first route summary section', async() => {
-        let url = await page.expectURL('#!/route/1/summary');
+        await page.waitForState('route.card.summary');
-
-        expect(url).toBe(true);
     });
 
     it(`should display details from the route on the header`, async() => {

e2e/paths/08-route/02_basic_data.spec.js

@@ -18,9 +18,12 @@ describe('Route basic Data path', () => {
     });
 
     it('should edit the route basic data', async() => {
+        const nextMonth = new Date();
+        nextMonth.setMonth(nextMonth.getMonth() + 1);
+
         await page.autocompleteSearch(selectors.routeBasicData.worker, 'adminBossNick');
         await page.autocompleteSearch(selectors.routeBasicData.vehicle, '1111-IMK');
-        await page.datePicker(selectors.routeBasicData.createdDate, 1, null);
+        await page.pickDate(selectors.routeBasicData.createdDate, nextMonth);
         await page.clearInput(selectors.routeBasicData.kmStart);
         await page.write(selectors.routeBasicData.kmStart, '1');
         await page.clearInput(selectors.routeBasicData.kmEnd);
@@ -37,7 +40,6 @@ describe('Route basic Data path', () => {
         await page.reloadSection('route.card.basicData');
         const worker = await page.waitToGetProperty(selectors.routeBasicData.worker, 'value');
 
-
         expect(worker).toEqual('adminBoss - adminBossNick');
     });
 

e2e/paths/08-route/03_create.spec.js

@@ -19,9 +19,7 @@ describe('Route create path', () => {
         it('should click on the add new route button and open the creation form', async() => {
             await page.waitForContentLoaded();
             await page.waitToClick(selectors.routeIndex.addNewRouteButton);
-            let url = await page.expectURL('#!/route/create');
+            await page.waitForState('route.create');
-
-            expect(url).toBe(true);
         });
 
         it(`should attempt to create a new route but fail since employee has no access rights`, async() => {
@@ -41,14 +39,12 @@ describe('Route create path', () => {
 
         it('should again click on the add new route button and open the creation form', async() => {
             await page.waitToClick(selectors.routeIndex.addNewRouteButton);
-            let url = await page.expectURL('#!/route/create');
+            await page.waitForState('route.create');
-
-            expect(url).toBe(true);
         });
 
         it(`should create a new route`, async() => {
             await page.autocompleteSearch(selectors.createRouteView.worker, 'teamManagerNick');
-            await page.datePicker(selectors.createRouteView.createdDatePicker, 0, null);
+            await page.pickDate(selectors.createRouteView.createdDatePicker);
             await page.autocompleteSearch(selectors.createRouteView.vehicleAuto, '4444-IMK');
             await page.autocompleteSearch(selectors.createRouteView.agency, 'Teleportation device');
             await page.write(selectors.createRouteView.description, 'faster faster!!');
@@ -59,9 +55,7 @@ describe('Route create path', () => {
         });
 
         it(`should confirm the redirection to the created route summary`, async() => {
-            let url = await page.expectURL('/summary');
+            await page.waitForState('route.card.summary');
-
-            expect(url).toBe(true);
         });
     });
 });

e2e/paths/09-invoice-out/01_summary.spec.js

@@ -17,9 +17,7 @@ describe('InvoiceOut summary path', () => {
     });
 
     it('should reach the summary section', async() => {
-        const result = await page.expectURL('/summary');
+        await page.waitForState('invoiceOut.card.summary');
-
-        expect(result).toBe(true);
     });
 
     it('should contain the company from which the invoice is emited', async() => {

e2e/paths/09-invoice-out/02_descriptor.spec.js

@@ -20,10 +20,7 @@ describe('InvoiceOut descriptor path', () => {
             await page.waitToClick(selectors.ticketsIndex.openAdvancedSearchButton);
             await page.write(selectors.ticketsIndex.advancedSearchInvoiceOut, 'T2222222');
             await page.waitToClick(selectors.ticketsIndex.advancedSearchButton);
-            await page.waitForNumberOfElements(selectors.ticketsIndex.searchResult, 1);
+            await page.waitForState('ticket.card.summary');
-            const result = await page.countElement(selectors.ticketsIndex.searchResult);
-
-            expect(result).toEqual(1);
         });
 
         it('should navigate to the invoiceOut index', async() => {
@@ -31,25 +28,12 @@ describe('InvoiceOut descriptor path', () => {
             await page.wait(selectors.globalItems.applicationsMenuVisible);
             await page.waitToClick(selectors.globalItems.invoiceOutButton);
             await page.wait(selectors.invoiceOutIndex.topbarSearch);
-            let url = await page.expectURL('#!/invoice-out/index');
+            await page.waitForState('invoiceOut.index');
-
-            expect(url).toBe(true);
-        });
-
-        it('should search for the target invoiceOut', async() => {
-            await page.write(selectors.invoiceOutIndex.topbarSearch, 'T2222222');
-            await page.waitToClick(selectors.invoiceOutIndex.searchButton);
-            await page.waitForNumberOfElements(selectors.invoiceOutIndex.searchResult, 1);
-            const result = await page.countElement(selectors.invoiceOutIndex.searchResult);
-
-            expect(result).toEqual(1);
         });
 
         it(`should click on the search result to access to the invoiceOut summary`, async() => {
             await page.accessToSearchResult('T2222222');
-            let url = await page.expectURL('/summary');
+            await page.waitForState('invoiceOut.card.summary');
-
-            expect(url).toBe(true);
         });
 
         it('should delete the invoiceOut using the descriptor more menu', async() => {
@@ -62,9 +46,7 @@ describe('InvoiceOut descriptor path', () => {
         });
 
         it('should have been relocated to the invoiceOut index', async() => {
-            let url = await page.expectURL('#!/invoice-out/index');
+            await page.waitForState('invoiceOut.index');
-
-            expect(url).toBe(true);
         });
 
         it(`should search for the deleted invouceOut to find no results`, async() => {
@@ -80,13 +62,10 @@ describe('InvoiceOut descriptor path', () => {
             await page.waitToClick(selectors.globalItems.applicationsMenuButton);
             await page.wait(selectors.globalItems.applicationsMenuVisible);
             await page.waitToClick(selectors.globalItems.ticketsButton);
-            let url = await page.expectURL('#!/ticket/index');
+            await page.waitForState('ticket.index');
-
-            expect(url).toBe(true);
         });
 
         it('should search for tickets with an specific invoiceOut to find no results', async() => {
-            await page.waitFor(2000);
             await page.waitToClick(selectors.ticketsIndex.openAdvancedSearchButton);
             await page.write(selectors.ticketsIndex.advancedSearchInvoiceOut, 'T2222222');
             await page.waitToClick(selectors.ticketsIndex.advancedSearchButton);
@@ -101,16 +80,12 @@ describe('InvoiceOut descriptor path', () => {
             await page.waitToClick(selectors.globalItems.applicationsMenuButton);
             await page.wait(selectors.globalItems.applicationsMenuVisible);
             await page.waitToClick(selectors.globalItems.invoiceOutButton);
-            let url = await page.expectURL('#!/invoice-out/index');
+            await page.waitForState('invoiceOut.index');
-
-            expect(url).toBe(true);
         });
 
         it(`should search and access to the invoiceOut summary`, async() => {
             await page.accessToSearchResult('T1111111');
-            let url = await page.expectURL('/summary');
+            await page.waitForState('invoiceOut.card.summary');
-
-            expect(url).toBe(true);
         });
 
         it(`should check the invoiceOut is booked in the summary data`, async() => {

e2e/paths/10-travel/01_thermograph.spec.js

@@ -18,16 +18,12 @@ describe('Travel thermograph path', () => {
     });
 
     it('should reach the thermograph section', async() => {
-        const result = await page.expectURL('/thermograph/index');
+        await page.waitForState('travel.card.thermograph.index');
-
-        expect(result).toBe(true);
     });
 
     it('should click the add thermograph floating button', async() => {
         await page.waitToClick(selectors.travelThermograph.add);
-        const result = await page.expectURL('/thermograph/create');
+        await page.waitForState('travel.card.thermograph.create');
-
-        expect(result).toBe(true);
     });
 
     it('should select the thermograph and then the file to upload', async() => {

e2e/paths/10-travel/02_basic_data_and_log.spec.js

@@ -18,13 +18,14 @@ describe('Travel basic data path', () => {
     });
 
     it('should reach the thermograph section', async() => {
-        const result = await page.expectURL('/basic-data');
+        await page.waitForState('travel.card.basicData');
-
-        expect(result).toBe(true);
     });
 
     it('should set a wrong delivery date then receive an error on submit', async() => {
-        await page.datePicker(selectors.travelBasicDada.deliveryDate, -1, null);
+        const lastMonth = new Date();
+        lastMonth.setMonth(lastMonth.getMonth() - 1);
+
+        await page.pickDate(selectors.travelBasicDada.deliveryDate, lastMonth);
         await page.waitToClick(selectors.travelBasicDada.save);
         const result = await page.waitForLastSnackbar();
 
@@ -89,9 +90,7 @@ describe('Travel basic data path', () => {
 
     it('should navigate to the travel logs', async() => {
         await page.accessToSection('travel.card.log');
-        const result = await page.expectURL('/log');
+        await page.waitForState('travel.card.log');
-
-        expect(result).toBe(true);
     });
 
     it('should check the 1st log contains details from the changes made', async() => {

e2e/paths/11-zone/01_basic-data.spec.js

@@ -18,9 +18,7 @@ describe('Zone basic data path', () => {
     });
 
     it('should reach the basic data section', async() => {
-        let url = await page.expectURL('#!/zone/10/basic-data');
+        await page.waitForState('zone.card.basicData');
-
-        expect(url).toBe(true);
     });
 
     it('should edit de form and then save', async() => {
@@ -31,7 +29,7 @@ describe('Zone basic data path', () => {
         await page.clearInput(selectors.zoneBasicData.travelingDays);
         await page.write(selectors.zoneBasicData.travelingDays, '1');
         await page.clearInput(selectors.zoneBasicData.closing);
-        await page.type(selectors.zoneBasicData.closing, '2100');
+        await page.pickTime(selectors.zoneBasicData.closing, '21:00');
         await page.clearInput(selectors.zoneBasicData.price);
         await page.write(selectors.zoneBasicData.price, '999');
         await page.clearInput(selectors.zoneBasicData.bonus);
@@ -40,14 +38,13 @@ describe('Zone basic data path', () => {
         await page.write(selectors.zoneBasicData.inflation, '200');
         await page.waitToClick(selectors.zoneBasicData.volumetric);
         await page.waitToClick(selectors.zoneBasicData.saveButton);
-        await page.waitForContentLoaded();
+        const result = await page.waitForLastSnackbar();
+
+        expect(result).toEqual('Data saved!');
     });
 
     it('should now reload the section', async() => {
         await page.reloadSection('zone.card.basicData');
-        let url = await page.expectURL('#!/zone/10/basic-data');
-
-        expect(url).toBe(true);
     });
 
     it('should confirm the name was updated', async() => {

e2e/paths/12-entry/01_summary.spec.js

@@ -17,9 +17,7 @@ describe('Entry summary path', () => {
     });
 
     it('should reach the second entry summary section', async() => {
-        let url = await page.expectURL('#!/entry/2/summary');
+        await page.waitForState('entry.card.summary');
-
-        expect(url).toBe(true);
     });
 
     it(`should display details from the entry on the header`, async() => {

e2e/paths/12-entry/02_descriptor.spec.js

@@ -17,9 +17,7 @@ describe('Entry descriptor path', () => {
     });
 
     it('should reach the second entry summary section', async() => {
-        let url = await page.expectURL('#!/entry/2/summary');
+        await page.waitForState('entry.card.summary');
-
-        expect(url).toBe(true);
     });
 
     it('should show some entry information', async() => {
@@ -30,32 +28,22 @@ describe('Entry descriptor path', () => {
 
     it('should click the travels button to be redirected to the travels index filtered by the current agency', async() => {
         await page.waitToClick(selectors.entryDescriptor.travelsQuicklink);
-        const url = await page.expectURL('/travel/index');
+        await page.expectURL('/travel/index');
-        const filter = await page.expectURL('agencyFk');
+        await page.expectURL('agencyFk');
-
-        expect(url).toBe(true);
-        expect(filter).toBe(true);
     });
 
     it('should go back to the entry summary', async() => {
         await page.waitToClick(selectors.globalItems.homeButton);
         await page.selectModule('entry');
         await page.accessToSearchResult('2');
-        let url = await page.expectURL('#!/entry/2/summary');
+        await page.waitForState('entry.card.summary');
-
-        expect(url).toBe(true);
     });
 
     it('should click the entries button to be redirected to the entries index filtered by the current supplier', async() => {
         await page.waitToClick(selectors.entryDescriptor.entriesQuicklink);
-        const url = await page.expectURL('/entry/index');
+        await page.expectURL('/entry/index');
-        const supplierFilter = await page.expectURL('supplierFk');
+        await page.expectURL('supplierFk');
-        const toFilter = await page.expectURL('to');
+        await page.expectURL('to');
-        const fromFilter = await page.expectURL('from');
+        await page.expectURL('from');
-
-        expect(url).toBe(true);
-        expect(supplierFilter).toBe(true);
-        expect(toFilter).toBe(true);
-        expect(fromFilter).toBe(true);
     });
 });

front/core/components/drop-down/index.js

@@ -29,13 +29,16 @@ export default class DropDown extends Popover {
     }
 
     set search(value) {
-        let oldValue = this._search;
+        function nullify(value) {
+            return value == '' || value == undefined ? null : value;
+        }
+
+        let oldValue = nullify(this._search);
         this._search = value;
 
         if (!this.shown) return;
 
-        value = value == '' || value == null ? null : value;
+        value = nullify(value);
-        oldValue = oldValue == '' || oldValue == null ? null : oldValue;
         if (value === oldValue && this.modelData != null) return;
 
         if (value != null)
@@ -45,7 +48,8 @@ export default class DropDown extends Popover {
 
         if (this.model) {
             this.model.clear();
-            if (!this.data) {
+
+            if (this.model instanceof CrudModel) {
                 this.searchTimeout = this.$timeout(() => {
                     this.refreshModel();
                     this.searchTimeout = null;
@@ -353,6 +357,7 @@ export default class DropDown extends Popover {
     set model(value) {
         this.linkEvents({_model: value}, {dataChange: this.onDataChange});
         this.onDataChange();
+        this.search = this.search;
     }
 
     get url() {
@@ -362,10 +367,9 @@ export default class DropDown extends Popover {
     set url(value) {
         this._url = value;
         if (value) {
-            this.model = new CrudModel(this.$q, this.$http);
+            let model = new CrudModel(this.$q, this.$http);
-            this.model.autoLoad = false;
+            model.url = value;
-            this.model.url = value;
+            this.initModel(model);
-            this.model.$onInit();
         }
     }
 
@@ -376,13 +380,18 @@ export default class DropDown extends Popover {
     set data(value) {
         this._data = value;
         if (value) {
-            this.model = new ArrayModel(this.$q, this.$filter);
+            let model = new ArrayModel(this.$q, this.$filter);
-            this.model.autoLoad = false;
+            model.orgData = value;
-            this.model.orgData = value;
+            this.initModel(model);
-            this.model.$onInit();
         }
     }
 
+    initModel(model) {
+        model.autoLoad = false;
+        model.$onInit();
+        this.model = model;
+    }
+
     refreshModel() {
         let model = this.model;
 

front/core/components/searchbar/searchbar.js

@@ -239,6 +239,8 @@ export default class Searchbar extends Component {
 
         this.filter = filter;
 
+        if (!filter && this.model)
+            this.model.clear();
         if (source != 'state')
             this.transition = this.$state.go(state, params, opts).transition;
         if (source != 'bar')

front/core/components/snackbar/snackbar.js

@@ -6,9 +6,8 @@ import './style.scss';
  * A simple component to show non-obstructive notifications to the user.
  */
 export default class Controller extends Component {
-    constructor($element, $translate) {
+    constructor($element, $) {
-        super($element);
+        super($element, $);
-        this.$translate = $translate;
         this.snackbar = $element[0].firstChild;
         this.$snackbar = angular.element(this.snackbar);
     }
@@ -19,38 +18,54 @@ export default class Controller extends Component {
      * @return {Object} Created snackbar shape
      */
     createShape(data) {
-        let shape = document.createElement('div');
+        let shape = Object.assign({
-        shape.className = 'shape';
+            nMessages: 1
+        }, data);
+
+        let element = document.createElement('div');
+        element.className = 'shape';
+        setTimeout(() => element.classList.add('shown'), 30);
+        shape.element = element;
+
+        if (shape.type)
+            element.classList.add(shape.type);
 
         let button = document.createElement('button');
+        button.addEventListener('click', () => this.onButtonClick(shape));
+        element.appendChild(button);
 
-        let buttonText = data.actionText || this.$translate.instant('Hide');
+        let buttonText = shape.actionText || this.$t('Hide');
         buttonText = document.createTextNode(buttonText);
         button.appendChild(buttonText);
 
-        button.addEventListener('click', () => {
-            this.onButtonClick(shape);
-        });
-
-        shape.appendChild(button);
-
         let shapeText = document.createElement('div');
         shapeText.setAttribute('class', 'text');
-        shape.appendChild(shapeText);
+        element.appendChild(shapeText);
 
-        let text = document.createTextNode(data.message);
+        let text = document.createTextNode(shape.message);
         shapeText.appendChild(text);
 
-        if (data.shapeType)
+        let chip = document.createElement('vn-chip');
-            shape.classList.add(data.shapeType);
+        chip.className = 'warning small';
+        chip.style.visibility = 'hidden';
 
-        let parent = this.snackbar.querySelectorAll('.shape')[0];
+        let chipWrapper = document.createElement('div');
+        chip.append(chipWrapper);
+
+        let span = document.createElement('span');
+        chipWrapper.append(span);
+
+        let chipText = document.createTextNode(shape.nMessages);
+        span.append(chipText);
+
+        shapeText.appendChild(chip);
+
+        let parent = this.snackbar.querySelector('.shape');
 
         if (parent)
-            this.snackbar.insertBefore(shape, parent);
+            this.snackbar.insertBefore(element, parent);
         else
-            this.snackbar.appendChild(shape);
+            this.snackbar.appendChild(element);
-
 
         return shape;
     }
@@ -61,58 +76,28 @@ export default class Controller extends Component {
      * @param {Object} data The message data
      */
     show(data) {
-        this.actionHandler = data.actionHandler;
+        let shape = this.lastShape;
 
-        let shape;
+        const isEqual = shape
+            && shape.type == data.type
+            && shape.message == data.message;
 
-        const lastShape = this.lastShape;
+        if (isEqual) {
-        const lastShapeData = lastShape && lastShape.data;
+            shape.nMessages++;
-        const isEqual = lastShape && (lastShapeData.shapeType == data.shapeType && lastShapeData.message == data.message);
 
-        if (lastShape && isEqual) {
+            const chip = shape.element.querySelector('.text vn-chip');
-            shape = lastShape.element;
+            chip.style.visibility = 'visible';
 
-            const shapeText = shape.querySelector('.text');
+            const span = chip.querySelector('span');
-            let chip = shapeText.querySelector('vn-chip');
+            span.innerHTML = shape.nMessages;
-
+        } else
-            if (chip) {
-                const text = chip.querySelector('span');
-                const number = parseInt(text.innerHTML);
-
-                text.innerHTML = number + 1;
-            } else {
-                chip = document.createElement('vn-chip');
-                chip.setAttribute('class', 'warning small');
-                let parent = document.createElement('div');
-                let span = document.createElement('span');
-                let text = document.createTextNode(1);
-                span.append(text);
-                parent.append(span);
-                chip.append(parent);
-
-                shapeText.appendChild(chip);
-            }
-
-            lastShape.element.classList.add('shown');
-
-            if (this.hideTimeout)
-                clearTimeout(this.hideTimeout);
-        } else {
             shape = this.createShape(data);
 
-            setTimeout(() =>
+        clearTimeout(shape.hideTimeout);
-                shape.classList.add('shown'), 30);
+        shape.hideTimeout = setTimeout(
-        }
+            () => this.hide(shape), shape.timeout || 3000);
 
-        this.hideTimeout = setTimeout(() => {
+        this.lastShape = shape;
-            this.hide(shape);
-            this.lastShape = null;
-        }, data.timeout || 3000);
-
-        this.lastShape = {
-            data: data,
-            element: shape
-        };
     }
 
     /**
@@ -121,8 +106,7 @@ export default class Controller extends Component {
      * @param {Object} data The message data
      */
     showError(data) {
-        data.shapeType = 'error';
+        data.type = 'error';
-
         this.show(data);
     }
 
@@ -132,8 +116,7 @@ export default class Controller extends Component {
      * @param {Object} data The message data
      */
     showSuccess(data) {
-        data.shapeType = 'success';
+        data.type = 'success';
-
         this.show(data);
     }
 
@@ -142,8 +125,11 @@ export default class Controller extends Component {
      * @param {Object} shape Snackbar element
      */
     hide(shape) {
-        setTimeout(() => shape.classList.remove('shown'), 30);
+        if (this.lastShape == shape)
-        setTimeout(() => shape.remove(), 250);
+            this.lastShape = null;
+
+        shape.element.classList.remove('shown');
+        setTimeout(() => shape.element.remove(), 250);
     }
 
     onSnackbarClick(event) {
@@ -151,13 +137,12 @@ export default class Controller extends Component {
     }
 
     onButtonClick(shape) {
-        if (this.actionHandler)
+        if (shape.actionHandler)
-            this.actionHandler();
+            shape.actionHandler();
         else
             this.hide(shape);
     }
 }
-Controller.$inject = ['$element', '$translate'];
 
 ngModule.component('vnSnackbar', {
     template: require('./snackbar.html'),

modules/claim/front/action/index.js

@@ -1,16 +1,12 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+export default class Controller extends Section {
-    constructor($stateParams, $scope, $http, $translate, vnApp, $httpParamSerializer) {
+    constructor($element, $) {
-        this.$stateParams = $stateParams;
+        super($element, $);
-        this.$ = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-        this.$httpParamSerializer = $httpParamSerializer;
         this.filter = {
-            where: {claimFk: $stateParams.id},
+            where: {claimFk: this.$params.id},
             include: [
                 {relation: 'sale',
                     scope: {
@@ -34,9 +30,7 @@ class Controller {
     }
 
     getClaimedSales() {
-        let json = encodeURIComponent(JSON.stringify(this.claim.id));
+        let query = `ClaimBeginnings/${this.claim.id}`;
-
-        let query = `ClaimBeginnings/${json}`;
         this.$http.get(query).then(res => {
             if (res.data)
                 this.claimedSales = res.data;
@@ -54,8 +48,7 @@ class Controller {
     }
 
     deleteClaimedSale(id) {
-        let json = encodeURIComponent(JSON.stringify(id));
+        let query = `ClaimEnds/${id}`;
-        let query = `ClaimEnds/${json}`;
         this.$http.delete(query).then(() => {
             this.$.model.refresh();
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
@@ -63,7 +56,7 @@ class Controller {
     }
 
     importToNewRefundTicket() {
-        let query = `ClaimBeginnings/${this.$stateParams.id}/importToNewRefundTicket`;
+        let query = `ClaimBeginnings/${this.$params.id}/importToNewRefundTicket`;
         return this.$http.post(query).then(() => {
             this.$.model.refresh();
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
@@ -112,7 +105,7 @@ class Controller {
     }
 
     importTicketLines(ticketFk) {
-        let data = {claimFk: this.$stateParams.id, ticketFk: ticketFk};
+        let data = {claimFk: this.$params.id, ticketFk: ticketFk};
 
         let query = `ClaimEnds/importTicketSales`;
         this.$http.post(query, data).then(() => {
@@ -123,7 +116,7 @@ class Controller {
     }
 
     regularize() {
-        let data = {claimFk: this.$stateParams.id};
+        let data = {claimFk: this.$params.id};
         let query = `Claims/regularizeClaim`;
         return this.$http.post(query, data).then(() => {
             if (this.claim.responsibility >= Math.ceil(this.maxResponsibility) / 2)
@@ -137,9 +130,8 @@ class Controller {
 
     getGreugeTypeId() {
         const params = {filter: {where: {code: 'freightPickUp'}}};
-        const serializedParams = this.$httpParamSerializer(params);
+        const query = `GreugeTypes/findOne`;
-        const query = `GreugeTypes/findOne?${serializedParams}`;
+        return this.$http.get(query, {params}).then(res => {
-        return this.$http.get(query).then(res => {
             this.greugeTypeFreightId = res.data.id;
 
             return res;
@@ -188,7 +180,7 @@ class Controller {
     }
 
     saveResponsibility(value) {
-        let query = `Claims/${this.$stateParams.id}/updateClaimAction`;
+        let query = `Claims/${this.$params.id}/updateClaimAction`;
 
         this.$http.post(query, {responsibility: value}).then(() => {
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
@@ -196,7 +188,7 @@ class Controller {
     }
 
     saveMana(value) {
-        let query = `Claims/${this.$stateParams.id}/updateClaimAction`;
+        let query = `Claims/${this.$params.id}/updateClaimAction`;
 
         this.$http.post(query, {isChargedToMana: value}).then(() => {
             this.vnApp.showSuccess(this.$translate.instant('Data saved!'));
@@ -208,8 +200,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope', '$http', '$translate', 'vnApp', '$httpParamSerializer'];
-
 ngModule.component('vnClaimAction', {
     template: require('./index.html'),
     controller: Controller,

modules/claim/front/action/index.spec.js

@@ -18,7 +18,8 @@ describe('claim', () => {
             $state = _$state_;
             $state.params.id = 1;
 
-            controller = $componentController('vnClaimAction', {$state, $scope});
+            const $element = angular.element('<vn-claim-action></vn-claim-action>');
+            controller = $componentController('vnClaimAction', {$element, $scope});
             controller.claim = {ticketFk: 1};
             controller.$.model = {refresh: () => {}};
             controller.$.addSales = {

modules/claim/front/basic-data/index.html

@@ -2,7 +2,7 @@
     vn-id="watcher"
     data="$ctrl.claim"
     form="form"
-    url="Claims/{{$ctrl.$stateParams.id}}/updateClaim"
+    url="Claims/{{$ctrl.$params.id}}/updateClaim"
     save="post">
 </vn-watcher>
 <form name="form" ng-submit="$ctrl.onSubmit()" class="vn-w-md">
@@ -55,6 +55,9 @@
     </vn-card>
     <vn-button-bar>
         <vn-submit label="Save"></vn-submit>
-        <vn-button label="Undo changes" ng-if="$ctrl.$scope.form.$dirty" ng-click="watcher.loadOriginalData()"></vn-button>
+        <vn-button label="Undo changes" 
+            ng-if="$ctrl.$.form.$dirty" 
+            ng-click="watcher.loadOriginalData()">
+        </vn-button>
     </vn-button-bar>
 </form>

modules/claim/front/basic-data/index.js

@@ -1,24 +1,16 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($scope, $state, aclService) {
-        this.$scope = $scope;
-        this.$state = $state;
-        this.$stateParams = $state.params;
-        this.aclService = aclService;
-    }
-
     onSubmit() {
-        this.$scope.watcher.submit().then(() => {
+        this.$.watcher.submit().then(() => {
             if (this.aclService.hasAny(['salesAssistant']))
                 this.$state.go('claim.card.detail');
         });
     }
 }
 
-Controller.$inject = ['$scope', '$state', 'aclService'];
-
 ngModule.component('vnClaimBasicData', {
     template: require('./index.html'),
     controller: Controller,

modules/claim/front/basic-data/index.spec.js

@@ -11,12 +11,13 @@ describe('Claim', () => {
         beforeEach(angular.mock.inject(($componentController, $rootScope) => {
             $scope = $rootScope.$new();
             $scope.watcher = watcher;
-            let aclService = {hasAny: () => true};
+            const $element = angular.element('<vn-claim-basic-data></vn-claim-basic-data>');
-            controller = $componentController('vnClaimBasicData', {$scope, aclService});
+            controller = $componentController('vnClaimBasicData', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {
             it(`should redirect to 'claim.card.detail' state`, () => {
+                jest.spyOn(controller.aclService, 'hasAny').mockReturnValue(true);
                 jest.spyOn(controller.$state, 'go');
                 controller.onSubmit();
 

modules/claim/front/descriptor/index.js

@@ -2,8 +2,8 @@ import ngModule from '../module';
 import Component from 'core/lib/component';
 
 class Controller extends Component {
-    constructor($element, $scope, $httpParamSerializer) {
+    constructor($element, $, $httpParamSerializer) {
-        super($element, $scope);
+        super($element, $);
         this.$httpParamSerializer = $httpParamSerializer;
 
         this.moreOptions = [

modules/claim/front/detail/index.js

@@ -1,17 +1,13 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($state, $, $http, $translate, vnApp, aclService) {
+    constructor($element, $) {
-        this.$state = $state;
+        super($element, $);
-        this.$ = $;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
-        this.aclService = aclService;
         this.edit = {};
         this.filter = {
-            where: {claimFk: $state.params.id},
+            where: {claimFk: this.$params.id},
             include: [
                 {
                     relation: 'sale',
@@ -173,7 +169,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$state', '$scope', '$http', '$translate', 'vnApp', 'aclService'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClaimDetail', {
     template: require('./index.html'),

modules/claim/front/detail/index.spec.js

@@ -6,12 +6,10 @@ describe('claim', () => {
         let $scope;
         let controller;
         let $httpBackend;
-        let $state;
-        let aclService;
 
         beforeEach(ngModule('claim'));
 
-        beforeEach(angular.mock.inject(($componentController, _$state_, _$httpBackend_, $rootScope) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $scope = $rootScope.$new();
             $scope.descriptor = {
                 show: () => {}
@@ -19,9 +17,8 @@ describe('claim', () => {
             $httpBackend = _$httpBackend_;
             $httpBackend.whenGET('Claims/ClaimBeginnings').respond({});
             $httpBackend.whenGET(`Tickets/1/isEditable`).respond(true);
-            $state = _$state_;
+            const $element = angular.element('<vn-claim-detail></vn-claim-detail>');
-            aclService = {hasAny: () => true};
+            controller = $componentController('vnClaimDetail', {$element, $scope});
-            controller = $componentController('vnClaimDetail', {$state, aclService, $scope});
             controller.claim = {ticketFk: 1};
             controller.salesToClaim = [{saleFk: 1}, {saleFk: 2}];
             controller.salesClaimed = [{id: 1, sale: {}}];
@@ -33,6 +30,7 @@ describe('claim', () => {
             controller.$.editPopover = {
                 hide: () => {}
             };
+            jest.spyOn(controller.aclService, 'hasAny').mockReturnValue(true);
         }));
 
         describe('openAddSalesDialog()', () => {
@@ -111,7 +109,6 @@ describe('claim', () => {
                     quantity: 10}};
                 controller.newDiscount = 10;
 
-
                 jest.spyOn(controller.vnApp, 'showSuccess');
                 jest.spyOn(controller, 'calculateTotals');
                 jest.spyOn(controller, 'clearDiscount');

modules/claim/front/development/index.html

@@ -2,7 +2,7 @@
     vn-id="model"
     url="ClaimDevelopments"
     fields="['id', 'claimFk', 'claimReasonFk', 'claimResultFk', 'claimResponsibleFk', 'workerFk', 'claimRedeliveryFk']"
-    link="{claimFk: $ctrl.$state.params.id}"
+    link="{claimFk: $ctrl.$params.id}"
     filter="$ctrl.filter"
     data="claimDevelopments"
     auto-load="true">

modules/claim/front/development/index.js

@@ -1,18 +1,13 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($state, $scope, aclService) {
-        this.$state = $state;
-        this.$scope = $scope;
-        this.aclService = aclService;
-    }
-
     onSubmit() {
-        this.$scope.watcher.check();
+        this.$.watcher.check();
-        this.$scope.model.save().then(() => {
+        this.$.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
+            this.$.watcher.notifySaved();
-            this.$scope.watcher.updateOriginalData();
+            this.$.watcher.updateOriginalData();
 
             if (this.aclService.hasAny(['salesAssistant']))
                 this.$state.go('claim.card.action');
@@ -20,8 +15,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$state', '$scope', 'aclService'];
-
 ngModule.component('vnClaimDevelopment', {
     template: require('./index.html'),
     controller: Controller,

modules/claim/front/development/index.spec.js

@@ -6,7 +6,6 @@ describe('Claim', () => {
     describe('Component vnClaimDevelopment', () => {
         let controller;
         let $scope;
-        let aclService;
 
         beforeEach(ngModule('claim'));
 
@@ -14,13 +13,15 @@ describe('Claim', () => {
             $scope = $rootScope.$new();
             $scope.watcher = watcher;
             $scope.model = crudModel;
-            aclService = {hasAny: () => true};
+            const $element = angular.element('<vn-claim-development></vn-claim-development>');
-            controller = $componentController('vnClaimDevelopment', {$scope, aclService});
+            controller = $componentController('vnClaimDevelopment', {$element, $scope});
         }));
 
         describe('onSubmit()', () => {
             it(`should redirect to 'claim.card.action' state`, () => {
+                jest.spyOn(controller.aclService, 'hasAny').mockReturnValue(true);
                 jest.spyOn(controller.$state, 'go');
+
                 controller.onSubmit();
 
                 expect(controller.$state.go).toHaveBeenCalledWith('claim.card.action');

modules/claim/front/dms/style.scss

@@ -1,31 +0,0 @@
-@import "./variables";
-
-vn-claim-dms-index {
-    .drop-zone {
-        color: $color-font-secondary;
-        box-sizing: border-box;
-        border-radius: 0.5em;
-        text-align: center;
-        min-height: 100%;
-        
-        .empty-rows {
-            padding: 5em $spacing-md;
-            font-size: 1.4em
-        }
-
-        vn-icon {
-            font-size: 3em
-        }
-    }
-
-    .photo-list {
-        
-        padding: $spacing-md;
-        min-height: 100%;
-
-        .photo {
-            width: 32em;
-            height: 18em;
-        }
-    }
-}

modules/claim/front/index/index.js

@@ -1,11 +1,7 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
+export default class Controller extends Section {
-    constructor($scope) {
-        this.$ = $scope;
-        this.ticketSelected = null;
-    }
-
     stateColor(claim) {
         switch (claim.description) {
         case 'Pendiente':
@@ -45,8 +41,6 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$scope'];
-
 ngModule.component('vnClaimIndex', {
     template: require('./index.html'),
     controller: Controller

modules/claim/front/photos/index.html

@@ -1,10 +1,9 @@
 <vn-crud-model vn-id="model" auto-load="true"
     url="ClaimDms"
-    link="{claimFk: $ctrl.$stateParams.id}"
+    link="{claimFk: $ctrl.$params.id}"
     limit="20"
     data="$ctrl.photos">
 </vn-crud-model>
-
 <vn-horizontal class="photo-list drop-zone" vn-droppable="$ctrl.onDrop($event)">
     <section class="empty-rows" ng-if="!$ctrl.photos.length">
         <section><vn-icon icon="image"></vn-icon></section>
@@ -12,8 +11,8 @@
     </section>
     <section class="photo" ng-repeat="photo in $ctrl.photos">
         <section class="image vn-shadow" on-error-src 
-            ng-style="{'background': 'url(/api/dms/' + photo.dmsFk + '/downloadFile?access_token=' + $ctrl.accessToken + ')'}"
+            ng-style="{'background': 'url(/api/dms/' + photo.dmsFk + '/downloadFile?access_token=' + $ctrl.vnToken.token + ')'}"
-            zoom-image="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+            zoom-image="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
         </section>
         <section class="actions">
             <vn-button

modules/claim/front/photos/index.js

@@ -1,17 +1,8 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($stateParams, $scope, $http, $translate, vnToken, vnApp, vnConfig) {
-        this.$stateParams = $stateParams;
-        this.$ = $scope;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.accessToken = vnToken.token;
-        this.vnApp = vnApp;
-        this.vnConfig = vnConfig;
-    }
-
     showWorkerDescriptor(event, workerFk) {
         event.preventDefault();
         event.stopImmediatePropagation();
@@ -106,8 +97,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$scope', '$http', '$translate', 'vnToken', 'vnApp', 'vnConfig'];
-
 ngModule.component('vnClaimPhotos', {
     template: require('./index.html'),
     controller: Controller,

modules/claim/front/photos/index.spec.js

@@ -3,7 +3,6 @@ import crudModel from 'core/mocks/crud-model';
 
 describe('Claim', () => {
     describe('Component vnClaimPhotos', () => {
-        let $componentController;
         let $scope;
         let $httpBackend;
         let controller;
@@ -11,12 +10,12 @@ describe('Claim', () => {
 
         beforeEach(ngModule('claim'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$httpBackend_, _$httpParamSerializer_) => {
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$httpBackend_, _$httpParamSerializer_) => {
-            $componentController = _$componentController_;
             $httpParamSerializer = _$httpParamSerializer_;
             $httpBackend = _$httpBackend_;
             $scope = $rootScope.$new();
-            controller = $componentController('vnClaimPhotos', {$: $scope});
+            const $element = angular.element('<vn-claim-photos></vn-claim-photos>');
+            controller = $componentController('vnClaimPhotos', {$element, $scope});
             controller.$.model = crudModel;
             controller.claim = {
                 id: 1,

modules/claim/front/summary/index.html

@@ -86,8 +86,8 @@
             <vn-horizontal class="photo-list">
                 <section class="photo" ng-repeat="photo in photos">
                     <section class="image" on-error-src 
-                        ng-style="{'background': 'url(/api/dms/' + photo.dmsFk + '/downloadFile?access_token=' + $ctrl.accessToken + ')'}"
+                        ng-style="{'background': 'url(/api/dms/' + photo.dmsFk + '/downloadFile?access_token=' + $ctrl.vnToken.token + ')'}"
-                        zoom-image="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.accessToken}}">
+                        zoom-image="/api/dms/{{::photo.dmsFk}}/downloadFile?access_token={{::$ctrl.vnToken.token}}">
                     </section>
                 </section>
             </vn-horizontal>

modules/claim/front/summary/index.js

@@ -1,19 +1,17 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($scope, $http, $stateParams, vnToken) {
+    $onChanges() {
-        this.$http = $http;
+        if (this.claim && this.claim.id)
-        this.$ = $scope;
+            this.getSummary();
-        this.$stateParams = $stateParams;
-        this.accessToken = vnToken.token;
     }
 
     get claim() {
         return this._claim;
     }
 
-
     set claim(value) {
         this._claim = value;
 
@@ -35,11 +33,6 @@ class Controller {
         });
     }
 
-    $onChanges() {
-        if (this.claim && this.claim.id)
-            this.getSummary();
-    }
-
     showItemDescriptor(event, itemFk) {
         this.$.itemDescriptor.itemFk = itemFk;
         this.$.itemDescriptor.parent = event.target;
@@ -59,8 +52,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$http', '$stateParams', 'vnToken'];
-
 ngModule.component('vnClaimSummary', {
     template: require('./index.html'),
     controller: Controller,

modules/claim/front/summary/index.spec.js

@@ -5,12 +5,15 @@ describe('Claim', () => {
     describe('Component summary', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('claim'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
+            $scope = $rootScope.$new();
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnClaimSummary');
+            const $element = angular.element('<vn-claim-summary></vn-claim-summary>');
+            controller = $componentController('vnClaimSummary', {$element, $scope});
             controller.claim = {id: 1};
             controller.$.model = crudModel;
         }));
@@ -29,6 +32,7 @@ describe('Claim', () => {
         describe('$onChanges()', () => {
             it('should call getSummary when item.id is defined', () => {
                 jest.spyOn(controller, 'getSummary');
+
                 controller.$onChanges();
 
                 expect(controller.getSummary).toHaveBeenCalledWith();

modules/client/front/address/create/index.html

@@ -11,7 +11,7 @@
     vn-id="model"
     url="AddressObservations"
     fields="['id', 'addressFk', 'observationTypeFk', 'description']"
-    link="{addressFk: $ctrl.$stateParams.addressId}"
+    link="{addressFk: $ctrl.$params.addressId}"
     data="observations"
     auto-load="true">
 </vn-crud-model>

modules/client/front/address/create/index.js

@@ -1,7 +1,7 @@
 import ngModule from '../../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 
-export default class Controller extends Component {
+export default class Controller extends Section {
     constructor($element, $) {
         super($element, $);
 

modules/client/front/address/edit/index.js

@@ -1,7 +1,7 @@
 import ngModule from '../../module';
-import Component from 'core/lib/component';
+import Section from 'salix/components/section';
 
-export default class Controller extends Component {
+export default class Controller extends Section {
     removeObservation(index) {
         this.$.watcher.setDirty();
         this.$.model.remove(index);

modules/client/front/address/index/index.html

@@ -1,6 +1,6 @@
 <vn-crud-model
     vn-id="model"
-    url="Clients/{{$ctrl.$stateParams.id}}/addresses"
+    url="Clients/{{$ctrl.$params.id}}/addresses"
     filter="$ctrl.filter"
     limit="10"
     data="$ctrl.addresses"

modules/client/front/address/index/index.js

@@ -1,13 +1,10 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($http, $scope, $stateParams, $translate, vnApp) {
+    constructor($element, $) {
-        this.$http = $http;
+        super($element, $);
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
         this.filter = {
             fields: [
                 'id',
@@ -47,7 +44,7 @@ class Controller {
     }
 
     setDefault(address) {
-        let query = `Clients/${this.$stateParams.id}`;
+        let query = `Clients/${this.$params.id}`;
         let params = {defaultAddressFk: address.id};
         this.$http.patch(query, params).then(res => {
             if (res.data) {
@@ -72,7 +69,7 @@ class Controller {
         });
     }
 }
-Controller.$inject = ['$http', '$scope', '$stateParams', '$translate', 'vnApp'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientAddressIndex', {
     template: require('./index.html'),

modules/client/front/address/index/index.spec.js

@@ -15,9 +15,10 @@ describe('Client', () => {
             $stateParams.id = 1;
             $httpBackend = _$httpBackend_;
             $scope = $rootScope.$new();
-            controller = $componentController('vnClientAddressIndex', {$stateParams, $scope});
+            const $element = angular.element('<vn-client-address-index></vn-client-address-index>');
+            controller = $componentController('vnClientAddressIndex', {$element, $scope});
             controller.client = {id: 101, defaultAddressFk: 121};
-            controller.$scope.model = crudModel;
+            controller.$.model = crudModel;
         }));
 
         describe('setDefault()', () => {

modules/client/front/balance/create/index.js

@@ -1,19 +1,15 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($scope, $state, $http, vnApp, $translate, vnConfig) {
+    constructor($element, $) {
-        this.$http = $http;
+        super($element, $);
-        this.$ = $scope;
-        this.$state = $state;
-        this.vnApp = vnApp;
-        this.$translate = $translate;
-
         this.receipt = {
             payed: new Date(),
-            clientFk: this.$state.params.id,
+            clientFk: this.$params.id,
-            companyFk: vnConfig.companyFk,
+            companyFk: this.vnConfig.companyFk,
-            bankFk: vnConfig.bankFk
+            bankFk: this.vnConfig.bankFk
         };
     }
 
@@ -57,7 +53,7 @@ class Controller {
     getAmountPaid() {
         let filter = {
             where: {
-                clientFk: this.$state.params.id,
+                clientFk: this.$params.id,
                 companyFk: this.receipt.companyFk
             }
         };
@@ -86,7 +82,6 @@ class Controller {
         });
     }
 }
-Controller.$inject = ['$scope', '$state', '$http', 'vnApp', '$translate', 'vnConfig'];
 
 ngModule.component('vnClientBalanceCreate', {
     template: require('./index.html'),

modules/client/front/balance/index/index.html

@@ -97,7 +97,7 @@
                     <vn-td center shrink>
                         <a ng-show="balance.hasPdf"
                             target="_blank"
-                            href="InvoiceOuts/{{::balance.id}}/download?access_token={{::$ctrl.accessToken}}">
+                            href="InvoiceOuts/{{::balance.id}}/download?access_token={{::$ctrl.vnToken.token}}">
                             <vn-icon-button
                                 icon="cloud_download"
                                 title="{{'Download PDF' | translate}}">

modules/client/front/balance/index/index.js

@@ -1,14 +1,10 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($stateParams, $translate, $scope, vnToken, $http, vnConfig) {
+    constructor($element, $) {
-        this.$http = $http;
+        super($element, $);
-        this.$ = $scope;
-        this.$stateParams = $stateParams;
-        this.$translate = $translate;
-        this.accessToken = vnToken.token;
-        this.vnConfig = vnConfig;
         this.filter = {
             include: {
                 relation: 'company',
@@ -46,17 +42,16 @@ class Controller {
 
     getData() {
         return this.$.model.applyFilter(null, {
-            clientId: this.$stateParams.id,
+            clientId: this.$params.id,
             companyId: this.companyId
         }).then(() => this.$.riskModel.applyFilter({
             where: {
-                clientFk: this.$stateParams.id,
+                clientFk: this.$params.id,
                 companyFk: this.companyId
             }
         })).then(() => this.getBalances());
     }
 
-
     getCurrentBalance() {
         const clientRisks = this.$.riskModel.data;
         const selectedCompany = this.companyId;
@@ -79,7 +74,6 @@ class Controller {
         });
     }
 
-
     openCreateDialog() {
         this.$.balanceCreateDialog.companyFk = this.companyId;
         this.$.balanceCreateDialog.onResponse = () => this.getData();
@@ -110,7 +104,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$stateParams', '$translate', '$scope', 'vnToken', '$http', 'vnConfig'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientBalanceIndex', {
     template: require('./index.html'),

modules/client/front/balance/index/index.spec.js

@@ -2,15 +2,14 @@ import './index';
 
 describe('Client', () => {
     describe('Component vnClientBalanceIndex', () => {
-        let $componentController;
         let controller;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope) => {
+        beforeEach(angular.mock.inject(($componentController, $rootScope) => {
-            $componentController = _$componentController_;
             let $scope = $rootScope.$new();
-            controller = $componentController('vnClientBalanceIndex', {$scope});
+            const $element = angular.element('<vn-client-balance-index></vn-client-balance-index>');
+            controller = $componentController('vnClientBalanceIndex', {$element, $scope});
             controller.$.model = {applyFilter: () => {}};
             controller.$.riskModel = {
                 applyFilter: () => {},
@@ -30,7 +29,7 @@ describe('Client', () => {
         describe('getData()', () => {
             it('should apply the filters on he models and get the client balance', () => {
                 controller._companyId = 442;
-                controller.$stateParams.id = 101;
+                controller.$params.id = 101;
                 jest.spyOn(controller, 'getBalances').mockReturnThis();
                 jest.spyOn(controller.$.model, 'applyFilter').mockReturnValue(Promise.resolve());
                 jest.spyOn(controller.$.riskModel, 'applyFilter').mockReturnValue(Promise.resolve());

modules/client/front/basic-data/index.js

@@ -1,7 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
 ngModule.component('vnClientBasicData', {
     template: require('./index.html'),
+    controller: Section,
     bindings: {
         client: '<'
     }

modules/client/front/contact/index.html

@@ -2,7 +2,7 @@
     vn-id="model"
     url="ClientContacts"
     fields="['id', 'name', 'phone', 'clientFk']"
-    link="{clientFk: $ctrl.$stateParams.id}"
+    link="{clientFk: $ctrl.$params.id}"
     data="contacts"
     auto-load="true">
 </vn-crud-model>

modules/client/front/contact/index.js

@@ -1,14 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-class Controller {
+class Controller extends Section {
-    constructor($scope, $stateParams, $translate) {
-        this.$scope = $scope;
-        this.$stateParams = $stateParams;
-        this.$translate = $translate;
-    }
-
     add() {
-        this.$scope.model.insert({
+        this.$.model.insert({
             clientFk: this.client.id,
             name: this.$translate.instant('Phone'),
             phone: null
@@ -16,16 +11,14 @@ class Controller {
     }
 
     onSubmit() {
-        this.$scope.watcher.check();
+        this.$.watcher.check();
-        this.$scope.model.save().then(() => {
+        this.$.model.save().then(() => {
-            this.$scope.watcher.notifySaved();
+            this.$.watcher.notifySaved();
-            this.$scope.model.refresh();
+            this.$.watcher.updateOriginalData();
         });
     }
 }
 
-Controller.$inject = ['$scope', '$stateParams', '$translate'];
-
 ngModule.component('vnClientContact', {
     template: require('./index.html'),
     controller: Controller,

modules/client/front/create/index.js

@@ -1,12 +1,9 @@
 import ngModule from '../module';
+import Section from 'salix/components/section';
 
-export default class Controller {
+export default class Controller extends Section {
-    constructor($scope, $state, $http, $translate, vnApp) {
+    constructor($element, $) {
-        this.$ = $scope;
+        super($element, $);
-        this.$state = $state;
-        this.$http = $http;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
         this.client = {
             active: true
         };
@@ -78,7 +75,7 @@ export default class Controller {
     }
 }
 
-Controller.$inject = ['$scope', '$state', '$http', '$translate', 'vnApp'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientCreate', {
     template: require('./index.html'),

modules/client/front/create/index.spec.js

@@ -2,15 +2,13 @@ import './index';
 
 describe('Client', () => {
     describe('Component vnClientCreate', () => {
-        let $componentController;
         let $scope;
         let $state;
         let controller;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject((_$componentController_, $rootScope, _$state_) => {
+        beforeEach(angular.mock.inject(($componentController, $rootScope, _$state_) => {
-            $componentController = _$componentController_;
             $scope = $rootScope.$new();
             $state = _$state_;
             $scope.watcher = {
@@ -22,7 +20,8 @@ describe('Client', () => {
                     };
                 }
             };
-            controller = $componentController('vnClientCreate', {$scope: $scope});
+            const $element = angular.element('<vn-client-create></vn-client-create>');
+            controller = $componentController('vnClientCreate', {$element, $scope});
         }));
 
         it('should define and set scope, state and client properties', () => {

modules/client/front/credit-insurance/create/index.js

@@ -1,19 +1,16 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 
-class Controller {
+class Controller extends Section {
-    constructor($http, $filter, $state, $scope, $translate, vnApp) {
+    constructor($element, $) {
-        this.$http = $http;
+        super($element, $);
-        this.$state = $state;
-        this.$scope = $scope;
-        this.$translate = $translate;
-        this.vnApp = vnApp;
         this.creditClassification = {
-            started: $filter('date')(new Date(), 'yyyy-MM-dd HH:mm')
+            started: this.$filter('date')(new Date(), 'yyyy-MM-dd HH:mm')
         };
     }
 
     onSubmit() {
-        if (this.$scope.form.$invalid)
+        if (this.$.form.$invalid)
             return this.vnApp.showError(this.$translate.instant('Some fields are invalid'));
 
         let query = `creditClassifications/createWithInsurance`;
@@ -29,7 +26,7 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http', '$filter', '$state', '$scope', '$translate', 'vnApp'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientCreditInsuranceCreate', {
     template: require('./index.html'),

modules/client/front/credit-insurance/create/index.spec.js

@@ -14,7 +14,8 @@ describe('Client', () => {
             $scope.form = {
                 $invalid: false
             };
-            controller = $componentController('vnClientCreditInsuranceCreate', {$scope});
+            const $element = angular.element('<vn-client-credit-insurance-create></vn-client-credit-insurance-create>');
+            controller = $componentController('vnClientCreditInsuranceCreate', {$element, $scope});
             controller.client = {id: 101};
             controller.card = {
                 reload: () => {}

modules/client/front/credit-insurance/index/index.js

@@ -1,12 +1,8 @@
 import ngModule from '../../module';
+import Section from 'salix/components/section';
 import './style.scss';
 
-class Controller {
+class Controller extends Section {
-    constructor($http, $scope) {
-        this.$http = $http;
-        this.$scope = $scope;
-    }
-
     $onChanges() {
         if (this.client && this.client.id)
             this._getClassifications(this.client.id);
@@ -52,7 +48,7 @@ class Controller {
 
     closeContract(classification) {
         this.classificationId = classification.id;
-        this.$scope.closeContract.show();
+        this.$.closeContract.show();
     }
 
     returnDialog(response) {
@@ -65,8 +61,6 @@ class Controller {
     }
 }
 
-Controller.$inject = ['$http', '$scope'];
-
 ngModule.component('vnClientCreditInsuranceIndex', {
     template: require('./index.html'),
     controller: Controller,

modules/client/front/credit-insurance/index/index.spec.js

@@ -4,12 +4,15 @@ describe('Client', () => {
     describe('Component vnClientCreditInsuranceIndex', () => {
         let controller;
         let $httpBackend;
+        let $scope;
 
         beforeEach(ngModule('client'));
 
-        beforeEach(angular.mock.inject(($componentController, _$httpBackend_) => {
+        beforeEach(angular.mock.inject(($componentController, _$httpBackend_, $rootScope) => {
             $httpBackend = _$httpBackend_;
-            controller = $componentController('vnClientCreditInsuranceIndex');
+            $scope = $rootScope.$new();
+            const $element = angular.element('<vn-client-credit-insurance-index></vn-client-credit-insurance-index>');
+            controller = $componentController('vnClientCreditInsuranceIndex', {$element, $scope});
             controller.client = {id: 101};
         }));
 
@@ -59,14 +62,14 @@ describe('Client', () => {
 
         describe('closeContract()', () => {
             it('should define the classificationId property of the controller and then call the show method()', () => {
-                controller.$scope.closeContract = {show: () => {}};
+                controller.$.closeContract = {show: () => {}};
-                jest.spyOn(controller.$scope.closeContract, 'show');
+                jest.spyOn(controller.$.closeContract, 'show');
 
                 expect(controller.classificationId).toBeFalsy();
                 controller.closeContract({id: 1});
 
                 expect(controller.classificationId).toEqual(1);
-                expect(controller.$scope.closeContract.show).toHaveBeenCalledWith();
+                expect(controller.$.closeContract.show).toHaveBeenCalledWith();
             });
         });
 

modules/client/front/credit-insurance/insurance/create/index.js

@@ -1,25 +1,25 @@
 import ngModule from '../../../module';
+import Section from 'salix/components/section';
 
-class Controller {
+class Controller extends Section {
-    constructor($scope, $state, $filter) {
+    constructor($element, $) {
-        this.$scope = $scope;
+        super($element, $);
-        this.$state = $state;
         this.insurance = {
-            created: $filter('date')(new Date(), 'yyyy-MM-dd HH:mm:ss')
+            created: this.$filter('date')(new Date(), 'yyyy-MM-dd HH:mm:ss')
         };
     }
 
     onSubmit() {
-        let params = {classificationId: this.$state.params.classificationId};
+        let params = {classificationId: this.$params.classificationId};
         let state = 'client.card.creditInsurance.insurance.index';
 
-        this.$scope.watcher.submitGo(state, params).then(() => {
+        this.$.watcher.submitGo(state, params).then(() => {
             this.card.reload();
         });
     }
 }
 
-Controller.$inject = ['$scope', '$state', '$filter'];
+Controller.$inject = ['$element', '$scope'];
 
 ngModule.component('vnClientCreditInsuranceInsuranceCreate', {
     template: require('./index.html'),

modules/client/front/credit-insurance/insurance/index/index.html

@@ -1,7 +1,7 @@
 <vn-crud-model
     vn-id="model"
     url="CreditInsurances"
-    link="{creditClassification: $ctrl.$stateParams.classificationId}"
+    link="{creditClassification: $ctrl.$params.classificationId}"
     limit="20"
     data="insurances"
     auto-load="true">
@@ -30,7 +30,7 @@
 </div>
 <a 
     ng-if="!$ctrl.isClosed"
-    ui-sref="client.card.creditInsurance.insurance.create({classificationId: {{$ctrl.$stateParams.classificationId}}})" 
+    ui-sref="client.card.creditInsurance.insurance.create({classificationId: {{$ctrl.$params.classificationId}}})" 
     fixed-bottom-right
     vn-tooltip="New credit"
     vn-bind="+">