Add test for resizing and navigation in RTL

vaadin · Apr 8, 2020 · 0269bad · 0269bad
1 parent 67d6d31
commit 0269bad
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 61 deletions.
diff --git a/test/column-resizing.html b/test/column-resizing.html
@@ -126,14 +126,17 @@
         expect(getElementFromPoint(grid, x, y)).to.equal(handle);
       });
 
-      it('should resize on track', () => {
-        const options = {node: handle};
-        const rect = headerCells[0].getBoundingClientRect();
+      ['rtl', 'ltr'].forEach(direction => {
+        it(`should resize on track in ${direction}`, () => {
+          grid.setAttribute('dir', direction);
+          const options = {node: handle};
+          const rect = headerCells[0].getBoundingClientRect();
 
-        fire('track', {state: 'start'}, options);
-        fire('track', {state: 'track', x: rect.left + 200, y: 0}, options);
+          fire('track', {state: 'start'}, options);
+          fire('track', {state: 'track', x: rect.left + (direction === 'rtl' ? -200 : 200), y: 0}, options);
 
-        expect(headerCells[0].clientWidth).to.equal(200);
+          expect(headerCells[0].clientWidth).to.equal(direction === 'rtl' ? 349 : 200);
+        });
       });
 
       it('should not listen to track event on scroller', () => {
@@ -285,49 +288,55 @@
         expect(newColumn.resizable).to.be.undefined;
       });
 
-      it('should resize the child column', () => {
-        const headerRows = getRows(grid.$.header);
-        const handle = getRowCells(headerRows[0])[0].querySelector('[part~="resize-handle"]');
-
-        const cell = getRowCells(headerRows[1])[1];
-        const rect = cell.getBoundingClientRect();
-        const options = {node: handle};
-        fire('track', {state: 'start'}, options);
-        fire('track', {state: 'track', x: rect.right + 100, y: 0}, options);
-
-        expect(cell.clientWidth).to.equal(200);
-      });
-
-      it('should resize the last non-hidden child column', () => {
-        grid._columnTree[1][1].hidden = true;
-        const headerRows = getRows(grid.$.header);
-        const handle = getRowCells(headerRows[0])[0].querySelector('[part~="resize-handle"]');
-
-        const cell = getRowCells(headerRows[1])[0];
-        const rect = cell.getBoundingClientRect();
-        const options = {node: handle};
-        fire('track', {state: 'start'}, options);
-        fire('track', {state: 'track', x: rect.right + 100, y: 0}, options);
-
-        expect(cell.clientWidth).to.equal(200);
-      });
-
-      it('should resize the child group\'s child column', done => {
-        grid = fixture('group-inside-group');
-        grid.dataProvider = infiniteDataProvider;
-
-        animationFrameFlush(() => {
-          const headerRows = getRows(grid.$.header);
-          const handle = getRowCells(headerRows[0])[0].querySelector('[part~="resize-handle"]');
-
-          const cell = getRowCells(headerRows[1])[1];
-          const rect = cell.getBoundingClientRect();
-          const options = {node: handle};
-          fire('track', {state: 'start'}, options);
-          fire('track', {state: 'track', x: rect.right + 100, y: 0}, options);
-
-          expect(cell.clientWidth).to.equal(100);
-          done();
+      ['rtl', 'ltr'].forEach(direction => {
+        describe(`child columns resizing in ${direction}`, () => {
+          beforeEach(() => grid.setAttribute('dir', direction));
+
+          it('should resize the child column', () => {
+            const headerRows = getRows(grid.$.header);
+            const handle = getRowCells(headerRows[0])[0].querySelector('[part~="resize-handle"]');
+
+            const cell = getRowCells(headerRows[1])[1];
+            const rect = cell.getBoundingClientRect();
+            const options = {node: handle};
+            fire('track', {state: 'start'}, options);
+            fire('track', {state: 'track', x: rect.right + (direction === 'rtl' ? -100 : 100), y: 0}, options);
+
+            expect(cell.clientWidth).to.equal(direction === 'rtl' ? 100 : 200);
+          });
+
+          it('should resize the last non-hidden child column', () => {
+            grid._columnTree[1][1].hidden = true;
+            const headerRows = getRows(grid.$.header);
+            const handle = getRowCells(headerRows[0])[0].querySelector('[part~="resize-handle"]');
+
+            const cell = getRowCells(headerRows[1])[0];
+            const rect = cell.getBoundingClientRect();
+            const options = {node: handle};
+            fire('track', {state: 'start'}, options);
+            fire('track', {state: 'track', x: rect.right + (direction === 'rtl' ? -100 : 100), y: 0}, options);
+
+            expect(cell.clientWidth).to.equal(direction === 'rtl' ? 100 : 200);
+          });
+
+          it('should resize the child group\'s child column', done => {
+            grid = fixture('group-inside-group');
+            grid.dataProvider = infiniteDataProvider;
+
+            animationFrameFlush(() => {
+              const headerRows = getRows(grid.$.header);
+              const handle = getRowCells(headerRows[0])[0].querySelector('[part~="resize-handle"]');
+
+              const cell = getRowCells(headerRows[1])[1];
+              const rect = cell.getBoundingClientRect();
+              const options = {node: handle};
+              fire('track', {state: 'start'}, options);
+              fire('track', {state: 'track', x: rect.right + 100, y: 0}, options);
+
+              expect(cell.clientWidth).to.equal(100);
+              done();
+            });
+          });
         });
       });
 

diff --git a/test/keyboard-navigation.html b/test/keyboard-navigation.html
@@ -706,14 +706,6 @@
           expect(grid.hasAttribute('navigating')).to.be.true;
         });
 
-        it('should navigate on left when navigation mode is off', () => {
-          getRows(body)[0].children[1].focus();
-
-          left();
-
-          expect(getFocusedCellIndex()).to.equal(0);
-        });
-
         it('should enable navigation mode on right', () => {
           focusItem(0);
 
@@ -722,12 +714,27 @@
           expect(grid.hasAttribute('navigating')).to.be.true;
         });
 
-        it('should navigate on right when navigation mode is off', () => {
-          focusItem(0);
+        ['rtl', 'ltr'].forEach(direction => {
+          describe(`navigation left / right in ${direction}`, () => {
+            beforeEach(() => grid.setAttribute('dir', direction));
 
-          right();
+            it('should navigate on left when navigation mode is off', () => {
+              getRows(body)[0].children[1].focus();
 
-          expect(getFocusedCellIndex()).to.equal(1);
+              left();
+
+              expect(getFocusedCellIndex()).to.equal(direction === 'rtl' ? 2 : 0);
+            });
+
+            it('should navigate on right when navigation mode is off', () => {
+              getRows(body)[0].children[1].focus();
+
+              right();
+
+              expect(getFocusedCellIndex()).to.equal(direction === 'rtl' ? 0 : 2);
+            });
+
+          });
         });
 
         it('should focus cell below with down', () => {