test: add integration tests for arrow navigation in Calendar and Tree components

integration/specs/Calendar/calendar-1.spec.js

@@ -186,4 +186,36 @@ describe('Calendar', () => {
         browser.keys(TAB_KEY);
         expect(calendar.isDayFocused(1)).toBe(true);
     });
+    it('should navigate on the header when using ARROW keys', () => {
+        const calendar = new PageCalendar(CALENDAR);
+        calendar.clickPrevMonthButton();
+        expect(calendar.isPrevMonthButtonFocused()).toBe(true);
+        expect(calendar.isNextMonthButtonFocused()).toBe(false);
+        expect(calendar.isYearSelectFocused()).toBe(false);
+        browser.keys(ARROW_LEFT_KEY);
+        expect(calendar.isPrevMonthButtonFocused()).toBe(true);
+        expect(calendar.isNextMonthButtonFocused()).toBe(false);
+        expect(calendar.isYearSelectFocused()).toBe(false);
+        browser.keys(ARROW_RIGHT_KEY);
+        expect(calendar.isPrevMonthButtonFocused()).toBe(false);
+        expect(calendar.isNextMonthButtonFocused()).toBe(true);
+        expect(calendar.isYearSelectFocused()).toBe(false);
+        browser.keys(ARROW_RIGHT_KEY);
+        expect(calendar.isPrevMonthButtonFocused()).toBe(false);
+        expect(calendar.isNextMonthButtonFocused()).toBe(false);
+        expect(calendar.isYearSelectFocused()).toBe(true);
+        browser.keys(ARROW_RIGHT_KEY);
+        expect(calendar.isPrevMonthButtonFocused()).toBe(false);
+        expect(calendar.isNextMonthButtonFocused()).toBe(false);
+        expect(calendar.isYearSelectFocused()).toBe(true);
+    });
+    it('should move from calendar controls to days when TAB key is pressed', () => {
+        const calendar = new PageCalendar(CALENDAR);
+        calendar.clickPrevMonthButton();
+        expect(calendar.isDayFocused(1)).toBe(false);
+        browser.keys(TAB_KEY);
+        expect(calendar.isDayFocused(1)).toBe(true);
+        browser.keys(TAB_KEY);
+        expect(calendar.isDayFocused(1)).toBe(false);
+    });
 });

integration/specs/Calendar/calendar-7.spec.js

@@ -186,4 +186,42 @@ describe('Calendar', () => {
         expect(calendar.getRightSelectedMonth()).toBe('January');
         expect(calendar.getRightMonthSelectedYear()).toBe('2021');
     });
+    it('should navigate on the header when using arrow keys', () => {
+        const calendar = new PageCalendar(CALENDAR);
+        calendar.clickPrevMonthButton();
+        expect(calendar.isPrevMonthButtonFocused()).toBe(true);
+        expect(calendar.isLeftYearSelectFocused()).toBe(false);
+        expect(calendar.isRightYearSelectFocused()).toBe(false);
+        expect(calendar.isNextMonthButtonFocused()).toBe(false);
+        browser.keys(ARROW_LEFT_KEY);
+        expect(calendar.isPrevMonthButtonFocused()).toBe(true);
+        expect(calendar.isLeftYearSelectFocused()).toBe(false);
+        expect(calendar.isRightYearSelectFocused()).toBe(false);
+        expect(calendar.isNextMonthButtonFocused()).toBe(false);
+        browser.keys(ARROW_RIGHT_KEY);
+        expect(calendar.isPrevMonthButtonFocused()).toBe(false);
+        expect(calendar.isLeftYearSelectFocused()).toBe(true);
+        expect(calendar.isRightYearSelectFocused()).toBe(false);
+        expect(calendar.isNextMonthButtonFocused()).toBe(false);
+        browser.keys(ARROW_RIGHT_KEY);
+        expect(calendar.isPrevMonthButtonFocused()).toBe(false);
+        expect(calendar.isLeftYearSelectFocused()).toBe(false);
+        expect(calendar.isRightYearSelectFocused()).toBe(true);
+        expect(calendar.isNextMonthButtonFocused()).toBe(false);
+        browser.keys(ARROW_RIGHT_KEY);
+        expect(calendar.isPrevMonthButtonFocused()).toBe(false);
+        expect(calendar.isLeftYearSelectFocused()).toBe(false);
+        expect(calendar.isRightYearSelectFocused()).toBe(false);
+        expect(calendar.isNextMonthButtonFocused()).toBe(true);
+    });
+
+    it('should move from calendar controls to days when TAB key is pressed', () => {
+        const calendar = new PageCalendar(CALENDAR);
+        calendar.clickPrevMonthButton();
+        expect(calendar.isLeftMonthDayFocused(1)).toBe(false);
+        browser.keys(TAB_KEY);
+        expect(calendar.isLeftMonthDayFocused(1)).toBe(true);
+        browser.keys(TAB_KEY);
+        expect(calendar.isLeftMonthDayFocused(1)).toBe(false);
+    });
 });

integration/specs/Tree/tree-1.spec.js

@@ -15,49 +15,49 @@ describe('Tree basic', () => {
 
     it('should expand the node when it is collapse and its button icon is clicked', () => {
         const tree = new PageTree(TREE);
-        const node = tree.getNode(3);
-        node.click();
+        const node = tree.getNode([3]);
+        node.clickExpandButton();
         expect(node.isExpanded()).toBe(true);
     });
     it('should collapse the node when it is expand and its button icon is clicked', () => {
         const tree = new PageTree(TREE);
-        const node = tree.getNode(2);
-        node.click();
+        const node = tree.getNode([2]);
+        node.clickExpandButton();
         expect(node.isExpanded()).toBe(false);
     });
     it('should move focus outside the tree when the first button icon is focused and press tab', () => {
         const tree = new PageTree(TREE);
-        const firstNode = tree.getNode(2);
-        const secondNode = tree.getNode(3);
-        firstNode.click();
+        const firstNode = tree.getNode([2]);
+        const secondNode = tree.getNode([3]);
+        firstNode.clickExpandButton();
         browser.keys(TAB_KEY);
         expect(secondNode.hasFocus()).toBe(false);
     });
     it('should expand the node when its button icon is focused, press enter and the node was initially expanded', () => {
         const tree = new PageTree(TREE);
-        const node = tree.getNode(2);
-        node.click();
+        const node = tree.getNode([2]);
+        node.clickExpandButton();
         browser.keys(ENTER_KEY);
         expect(node.isExpanded()).toBe(true);
     });
     it('should collapse the node when its button icon is focused, press enter and the node was initially collapse', () => {
         const tree = new PageTree(TREE);
-        const node = tree.getNode(3);
-        node.click();
+        const node = tree.getNode([3]);
+        node.clickExpandButton();
         browser.keys(ENTER_KEY);
         expect(node.isExpanded()).toBe(false);
     });
     it('should expand the node when its button icon is focused, press space and the node was initially expanded', () => {
         const tree = new PageTree(TREE);
-        const node = tree.getNode(2);
-        node.click();
+        const node = tree.getNode([2]);
+        node.clickExpandButton();
         browser.keys(SPACE_KEY);
         expect(node.isExpanded()).toBe(true);
     });
     it('should collapse the node when its button icon is focused, press space and the node was initially collapse', () => {
         const tree = new PageTree(TREE);
-        const node = tree.getNode(3);
-        node.click();
+        const node = tree.getNode([3]);
+        node.clickExpandButton();
         browser.keys(SPACE_KEY);
         expect(node.isExpanded()).toBe(false);
     });

integration/specs/Tree/tree-9.spec.js

@@ -0,0 +1,155 @@
+const PageTree = require('../../../src/components/Tree/pageObject');
+const {
+    ENTER_KEY,
+    SPACE_KEY,
+    ARROW_UP_KEY,
+    ARROW_DOWN_KEY,
+    ARROW_LEFT_KEY,
+    ARROW_RIGHT_KEY,
+    HOME_KEY,
+    END_KEY,
+} = require('../../constants');
+
+const TREE = '#tree-component-9';
+
+describe('Tree', () => {
+    beforeAll(() => {
+        browser.url('/#!/Tree/9');
+    });
+    beforeEach(() => {
+        browser.refresh();
+        const component = $(TREE);
+        component.waitForExist();
+    });
+    it('should focus prev node in tree when press ARROW UP key', () => {
+        const tree = new PageTree(TREE);
+        tree.getNode([2]).click();
+        expect(tree.getNode([2]).hasFocus()).toBe(true);
+        browser.keys(ARROW_UP_KEY);
+        expect(tree.getNode([1, 2]).hasFocus()).toBe(true);
+        browser.keys(ARROW_UP_KEY);
+        expect(tree.getNode([1, 1]).hasFocus()).toBe(true);
+    });
+
+    it('should focus next node in tree when press ARROW DOWN key', () => {
+        const tree = new PageTree(TREE);
+        tree.getNode([0]).click();
+        expect(tree.getNode([0]).hasFocus()).toBe(true);
+        browser.keys(ARROW_DOWN_KEY);
+        expect(tree.getNode([1]).hasFocus()).toBe(true);
+        browser.keys(ARROW_DOWN_KEY);
+        expect(tree.getNode([1, 0]).hasFocus()).toBe(true);
+    });
+    it('should expand node when it is collapsed and press ARROW RIGHT key', () => {
+        const tree = new PageTree(TREE);
+        const node = tree.getNode([0]);
+        node.click();
+        expect(node.isExpanded()).toBe(false);
+        browser.keys(ARROW_RIGHT_KEY);
+        expect(node.isExpanded()).toBe(true);
+        browser.keys(ARROW_RIGHT_KEY);
+        expect(node.isExpanded()).toBe(true);
+    });
+    it('should collapse node when it is expanded and press ARROW LEFT key', () => {
+        const tree = new PageTree(TREE);
+        const node = tree.getNode([1]);
+        node.click();
+        expect(node.isExpanded()).toBe(true);
+        browser.keys(ARROW_LEFT_KEY);
+        browser.keys(ARROW_LEFT_KEY);
+        expect(node.isExpanded()).toBe(false);
+        browser.keys(ARROW_LEFT_KEY);
+        browser.keys(ARROW_LEFT_KEY);
+        expect(node.isExpanded()).toBe(false);
+    });
+    it('should focus parent node when node is child and press ARROW LEFT key', () => {
+        const tree = new PageTree(TREE);
+        const parentNode = tree.getNode([1]);
+        const childNode = tree.getNode([1, 2]);
+        childNode.click();
+        expect(parentNode.hasFocus()).toBe(false);
+        browser.keys(ARROW_LEFT_KEY);
+        expect(parentNode.hasFocus()).toBe(true);
+    });
+    it('should focus first node in tree when press HOME key', () => {
+        const tree = new PageTree(TREE);
+        const firstNode = tree.getNode([0]);
+        tree.getNode([1, 2]).click();
+        expect(firstNode.hasFocus()).toBe(false);
+        browser.keys(HOME_KEY);
+        expect(firstNode.hasFocus()).toBe(true);
+        tree.getNode([2]).click();
+        browser.keys(HOME_KEY);
+        expect(firstNode.hasFocus()).toBe(true);
+    });
+    it('should focus last node in tree when press END key', () => {
+        const tree = new PageTree(TREE);
+        const lastNode = tree.getNode([2]);
+        tree.getNode([0]).click();
+        expect(lastNode.hasFocus()).toBe(false);
+        browser.keys(END_KEY);
+        expect(lastNode.hasFocus()).toBe(true);
+        tree.getNode([1, 0]).click();
+        browser.keys(END_KEY);
+        expect(lastNode.hasFocus()).toBe(true);
+    });
+    it('should expand or collase node when press SPACE key', () => {
+        const tree = new PageTree(TREE);
+        const node = tree.getNode([0]);
+        node.click();
+        expect(node.isExpanded()).toBe(false);
+        browser.keys(SPACE_KEY);
+        expect(node.isExpanded()).toBe(true);
+        browser.keys(SPACE_KEY);
+        expect(node.isExpanded()).toBe(false);
+    });
+    it('should select node when it is focused but not selected and press ENTER key', () => {
+        const tree = new PageTree(TREE);
+        const firstNode = tree.getNode([0]);
+        firstNode.click();
+        browser.keys(ARROW_DOWN_KEY);
+        browser.keys(ENTER_KEY);
+        expect(tree.getNode([1]).isSelected()).toBe(true);
+        browser.keys(ARROW_DOWN_KEY);
+        browser.keys(ENTER_KEY);
+        expect(tree.getNode([2]).isSelected()).toBe(false);
+    });
+    it('should expand or collapse node when it is selected and press ENTER key', () => {
+        const tree = new PageTree(TREE);
+        const node = tree.getNode([0]);
+        node.click();
+        expect(node.isSelected()).toBe(true);
+        browser.keys(ENTER_KEY);
+        expect(node.isExpanded()).toBe(true);
+        browser.keys(ENTER_KEY);
+        expect(node.isExpanded()).toBe(false);
+    });
+    it('should expand all nodes at same level when press `*` key', () => {
+        const tree = new PageTree(TREE);
+        const firstRootNode = tree.getNode([0]);
+        const lastRootNode = tree.getNode([2]);
+        firstRootNode.click();
+        expect(firstRootNode.isExpanded()).toBe(false);
+        expect(lastRootNode.isExpanded()).toBe(false);
+        browser.keys('*');
+        expect(firstRootNode.isExpanded()).toBe(true);
+        expect(lastRootNode.isExpanded()).toBe(true);
+    });
+    it('should focus the node that the first letter in label matches alphanumeric key pressed', () => {
+        const tree = new PageTree(TREE);
+        tree.getNode([2]).click();
+        browser.keys(ARROW_RIGHT_KEY);
+        tree.getNode([0]).click();
+        browser.keys(ARROW_RIGHT_KEY);
+        browser.keys('p');
+        expect(tree.getNode([0, 1]).hasFocus()).toBe(true);
+        browser.keys('P');
+        expect(tree.getNode([0, 4]).hasFocus()).toBe(true);
+        browser.keys('p');
+        expect(tree.getNode([1, 0]).hasFocus()).toBe(true);
+        browser.keys('P');
+        expect(tree.getNode([2, 1]).hasFocus()).toBe(true);
+        browser.keys('p');
+        expect(tree.getNode([0, 1]).hasFocus()).toBe(true);
+    });
+});

src/components/Calendar/pageObject/doubleCalendar.js

@@ -53,6 +53,26 @@ class PageDoubleCalendar {
         return !buttonEl.isEnabled();
     }
 
+    /**
+     * Returns true when the previous month button element has focus.
+     * @method
+     * @returns {bool}
+     */
+    isPrevMonthButtonFocused() {
+        const buttonEl = $(this.rootElement).$$('button[data-id=button-icon-element]')[0];
+        return buttonEl.isExisting() && buttonEl.isFocused();
+    }
+
+    /**
+     * Returns true when the next month button element is disabled.
+     * @method
+     * @returns {bool}
+     */
+    isNextMonthButtonFocused() {
+        const buttonEl = $(this.rootElement).$$('button[data-id=button-icon-element]')[1];
+        return buttonEl.isExisting() && buttonEl.isFocused();
+    }
+
     /**
      * Clicks the select year element on the left month.
      * @method
@@ -144,6 +164,16 @@ class PageDoubleCalendar {
         return buttonEl.isExisting() && buttonEl.getAttribute('data-selected') === 'true';
     }
 
+    /**
+     * Returns true when the year select element in left month has focus.
+     * @method
+     * @returns {bool}
+     */
+    isLeftYearSelectFocused() {
+        const selectEl = $(this.rootElement).$$('select')[0];
+        return selectEl.isExisting() && selectEl.isFocused();
+    }
+
     /**
      * Clicks the select year element on the right month.
      * @method
@@ -234,6 +264,16 @@ class PageDoubleCalendar {
             .$(`button=${day}`);
         return buttonEl.isExisting() && buttonEl.getAttribute('data-selected') === 'true';
     }
+
+    /**
+     * Returns true when the year select element in right month has focus.
+     * @method
+     * @returns {bool}
+     */
+    isRightYearSelectFocused() {
+        const selectEl = $(this.rootElement).$$('select')[1];
+        return selectEl.isExisting() && selectEl.isFocused();
+    }
 }
 
 module.exports = PageDoubleCalendar;

src/components/Calendar/pageObject/singleCalendar.js

@@ -141,6 +141,36 @@ class PageSingleCalendar {
         const buttonEl = $(this.rootElement).$$('button[data-id=button-icon-element]')[1];
         return !buttonEl.isEnabled();
     }
+
+    /**
+     * Returns true when the previous month button element has focus.
+     * @method
+     * @returns {bool}
+     */
+    isPrevMonthButtonFocused() {
+        const buttonEl = $(this.rootElement).$$('button[data-id=button-icon-element]')[0];
+        return buttonEl.isExisting() && buttonEl.isFocused();
+    }
+
+    /**
+     * Returns true when the next month button element has focus.
+     * @method
+     * @returns {bool}
+     */
+    isNextMonthButtonFocused() {
+        const buttonEl = $(this.rootElement).$$('button[data-id=button-icon-element]')[1];
+        return buttonEl.isExisting() && buttonEl.isFocused();
+    }
+
+    /**
+     * Returns true when the year select element has focus.
+     * @method
+     * @returns {bool}
+     */
+    isYearSelectFocused() {
+        const selectEl = $(this.rootElement).$('select');
+        return selectEl.isExisting() && selectEl.isFocused();
+    }
 }
 
 module.exports = PageSingleCalendar;