Normalize tests which runs on browsers (handsontable#7121)

This PR adjusts E2E tests, which wasn't passed on browsers other than 
Chrome. I've bumped the normalize.css to the latest version, which caused
some tests failing. Additionally, I've spotted that layerX and layerY event
props were used within the ManualRowMove and ManualColumnMove
plugins. According to the MDN, those props are Non-standard. I've
replaced them to offsetX and offsetY accordingly.

Issue: handsontable#7110

src/plugins/comments/test/comments.e2e.js

@@ -70,7 +70,7 @@ describe('Comments', () => {
         clientY: Handsontable.dom.offset(getCell(1, 1)).top + 5,
       });
 
-      await sleep(300);
+      await sleep(400);
 
       expect(editor.parentNode.style.display).toEqual('block');
     });
@@ -102,7 +102,8 @@ describe('Comments', () => {
 
       plugin.showAtCell(0, 1);
 
-      expect($(editor.parentNode).offset()).toEqual($(getCell(0, 2)).offset());
+      expect($(editor.parentNode).offset().top).toBeCloseTo($(getCell(0, 2)).offset().top, 0);
+      expect($(editor.parentNode).offset().left).toBeCloseTo($(getCell(0, 2)).offset().left, 0);
     });
   });
 
@@ -703,13 +704,13 @@ describe('Comments', () => {
       textarea.focus();
       textarea.value = 'Edited comment';
 
-      await sleep(100);
+      await sleep(150);
 
       $('body').simulate('mousedown');
       $('body').simulate('mouseup');
       textarea.blur();
 
-      await sleep(400);
+      await sleep(500);
 
       expect(afterSetCellMetaCallback)
         .toHaveBeenCalledWith(0, 0, 'comment', { value: 'Edited comment' }, undefined, undefined);
@@ -778,48 +779,53 @@ describe('Comments', () => {
 
       plugin.showAtCell(0, 0);
 
-      expect($(editor.parentNode).offset()).toEqual($(hot.rootElement).offset());
+      expect($(editor.parentNode).offset().top).toBeCloseTo($(hot.rootElement).offset().top, 0);
+      expect($(editor.parentNode).offset().left).toBeCloseTo($(hot.rootElement).offset().left, 0);
 
       plugin.showAtCell(1, 1);
 
-      expect($(editor.parentNode).offset()).toEqual($(hot.rootElement).offset());
+      expect($(editor.parentNode).offset().top).toBeCloseTo($(hot.rootElement).offset().top, 0);
+      expect($(editor.parentNode).offset().left).toBeCloseTo($(hot.rootElement).offset().left, 0);
 
       plugin.showAtCell(2, 2);
 
-      expect($(editor.parentNode).offset()).toEqual($(getCell(2, 3)).offset());
+      expect($(editor.parentNode).offset().top).toBeCloseTo($(getCell(2, 3)).offset().top, 0);
+      expect($(editor.parentNode).offset().left).toBeCloseTo($(getCell(2, 3)).offset().left, 0);
 
       plugin.showAtCell(3, 3);
 
-      expect($(editor.parentNode).offset()).toEqual($(getCell(3, 5)).offset());
+      expect($(editor.parentNode).offset().top).toBeCloseTo($(getCell(3, 5)).offset().top, 0);
+      expect($(editor.parentNode).offset().left).toBeCloseTo($(getCell(3, 5)).offset().left, 0);
 
       plugin.showAtCell(4, 4);
 
-      expect($(editor.parentNode).offset()).toEqual($(getCell(5, 5)).offset());
+      expect($(editor.parentNode).offset().top).toBeCloseTo($(getCell(5, 5)).offset().top, 0);
+      expect($(editor.parentNode).offset().left).toBeCloseTo($(getCell(5, 5)).offset().left, 0);
 
       plugin.showAtCell(5, 5);
 
-      expect($(editor.parentNode).offset()).toEqual($(getCell(5, 6)).offset());
+      expect($(editor.parentNode).offset().top).toBeCloseTo($(getCell(5, 6)).offset().top, 0);
+      expect($(editor.parentNode).offset().left).toBeCloseTo($(getCell(5, 6)).offset().left, 0);
 
       plugin.showAtCell(7, 7);
 
-      expect($(editor.parentNode).offset()).toEqual({
-        top: $(getCell(7, 7)).offset().top,
-        left: $(getCell(7, 7)).offset().left + $(getCell(7, 7)).outerWidth()
-      });
+      expect($(editor.parentNode).offset().top).toBeCloseTo($(getCell(7, 7)).offset().top, 0);
+      expect($(editor.parentNode).offset().left)
+        .toBeCloseTo($(getCell(7, 7)).offset().left + $(getCell(7, 7)).outerWidth(), 0);
 
       plugin.showAtCell(8, 8);
 
-      expect($(editor.parentNode).offset()).toEqual({
-        top: $(getCell(7, 7)).offset().top + $(getCell(7, 7)).outerHeight(),
-        left: $(getCell(7, 7)).offset().left + $(getCell(7, 7)).outerWidth()
-      });
+      expect($(editor.parentNode).offset().top)
+        .toBeCloseTo($(getCell(7, 7)).offset().top + $(getCell(7, 7)).outerHeight(), 0);
+      expect($(editor.parentNode).offset().left)
+        .toBeCloseTo($(getCell(7, 7)).offset().left + $(getCell(7, 7)).outerWidth(), 0);
 
       plugin.showAtCell(9, 9);
 
-      expect($(editor.parentNode).offset()).toEqual({
-        top: $(getCell(7, 7)).offset().top + $(getCell(7, 7)).outerHeight(),
-        left: $(getCell(7, 7)).offset().left + $(getCell(7, 7)).outerWidth()
-      });
+      expect($(editor.parentNode).offset().top)
+        .toBeCloseTo($(getCell(7, 7)).offset().top + $(getCell(7, 7)).outerHeight(), 0);
+      expect($(editor.parentNode).offset().left)
+        .toBeCloseTo($(getCell(7, 7)).offset().left + $(getCell(7, 7)).outerWidth(), 0);
     });
 
     it('should display the correct values in the comment editor, for cells placed past hidden rows/columns', () => {

src/plugins/contextMenu/test/contextMenu.e2e.js

@@ -254,7 +254,7 @@ describe('ContextMenu', () => {
       docInside.documentElement.scrollTop = 500;
       docInside.documentElement.scrollLeft = 500;
 
-      await sleep(300);
+      await sleep(400);
 
       const cell = hot.getCell(2, 2);
       contextMenu(cell, hot);

src/plugins/filters/test/filtersUI.e2e.js

@@ -3731,7 +3731,7 @@ describe('Filters UI', () => {
     expect(compStyleHtFiltersMenuLabel.fontSize).toBe('18px');
 
     expect(compStyleHtUISelectCaption.fontFamily).toBe('Helvetica');
-    expect(compStyleHtUISelectCaption.fontSize).toBe('16.8px');
+    expect(parseFloat(compStyleHtUISelectCaption.fontSize)).toBeCloseTo(16.8, 2);
 
     bodyStyle.fontFamily = fontFamily;
     bodyStyle.fontSize = fontSize;

src/plugins/hiddenColumns/test/hiddenColumns.e2e.js

@@ -4489,7 +4489,7 @@ describe('HiddenColumns', () => {
 
       expect(hot.getColWidth(0)).toBe(0);
       expect(hot.getColWidth(1)).toBe(0);
-      expect([216 + 15, 229 + 15, 247 + 15, 260 + 15, 261 + 15]).toEqual(jasmine.arrayContaining([hot.getColWidth(2)]));
+      expect(hot.getColWidth(2)).toBeAroundValue(225, 1);
     });
 
     it('should return proper values from the `getColWidth` function (when indicator is disabled)', () => {
@@ -4510,7 +4510,7 @@ describe('HiddenColumns', () => {
 
       expect(hot.getColWidth(0)).toBe(0);
       expect(hot.getColWidth(1)).toBe(0);
-      expect([216, 229, 247, 260, 261]).toEqual(jasmine.arrayContaining([hot.getColWidth(2)]));
+      expect(hot.getColWidth(2)).toBeAroundValue(210, 1);
     });
 
     it('should return proper values from the `getColWidth` function when the `ManualColumnResize` plugin define sizes for some columns', () => {

src/plugins/hiddenColumns/test/plugins/manualColumnResize.e2e.js

@@ -137,7 +137,7 @@ describe('HiddenColumns', () => {
         .simulate('mouseup')
       ;
 
-      expect(colWidth(spec().$container, 1)).toBe(91); // 61 (initial column width) + 30
+      expect(colWidth(spec().$container, 1)).toBeAroundValue(85, 1); // 55 (initial column width) + 30
     });
   });
 });

src/plugins/manualColumnMove/manualColumnMove.js

@@ -556,7 +556,7 @@ class ManualColumnMove extends BasePlugin {
       const scrollableElement = this.hot.view.wt.wtOverlays.scrollableElement;
       const wrapperIsWindow = scrollableElement.scrollX ? scrollableElement.scrollX - priv.rootElementOffset : 0;
 
-      const mouseOffset = event.layerX - (fixedColumns ? wrapperIsWindow : 0);
+      const mouseOffset = event.offsetX - (fixedColumns ? wrapperIsWindow : 0);
       const leftOffset = Math.abs(this.getColumnsWidth(start, coords.col - 1) + mouseOffset);
 
       this.backlight.setPosition(topPos, this.getColumnsWidth(countColumnsFrom, start - 1) + leftOffset);

src/plugins/manualColumnResize/test/manualColumnResize.e2e.js

@@ -398,7 +398,7 @@ describe('manualColumnResize', () => {
       await sleep(1000);
 
       expect($columnHeaders.eq(0).width()).toBe(28);
-      expect($columnHeaders.eq(1).width()).toBe(89);
+      expect($columnHeaders.eq(1).width()).toBeAroundValue(82, 1);
       expect($columnHeaders.eq(2).width()).toBe(159);
       expect($columnHeaders.eq(3).width()).toBe(59);
       expect($columnHeaders.eq(4).width()).toBe(79);
@@ -641,9 +641,9 @@ describe('manualColumnResize', () => {
 
     await sleep(600);
 
-    expect(colWidth(spec().$container, 1)).toBeAroundValue(32, 2);
-    expect(colWidth(spec().$container, 2)).toBeAroundValue(32, 2);
-    expect(colWidth(spec().$container, 3)).toBeAroundValue(32, 2);
+    expect(colWidth(spec().$container, 1)).toBe(29);
+    expect(colWidth(spec().$container, 2)).toBe(29);
+    expect(colWidth(spec().$container, 3)).toBe(30);
   });
 
   it('should adjust resize handles position after table size changed', () => {

src/plugins/manualRowMove/manualRowMove.js

@@ -547,7 +547,7 @@ class ManualRowMove extends BasePlugin {
 
       this.backlight.setPosition(null, leftPos);
       this.backlight.setSize(wtTable.hider.offsetWidth - leftPos, this.getRowsHeight(start, end));
-      this.backlight.setOffset((this.getRowsHeight(start, coords.row - 1) + event.layerY) * -1, null);
+      this.backlight.setOffset((this.getRowsHeight(start, coords.row - 1) + event.offsetY) * -1, null);
 
       addClass(this.hot.rootElement, CSS_ON_MOVING);
 

src/plugins/multiColumnSorting/test/multiColumnSorting.e2e.js

@@ -2465,7 +2465,7 @@ describe('MultiColumnSorting', () => {
         .getPropertyValue('content')).toEqual('"+"');
     });
 
-    it('should be properly hided when just one column is sorted', () => {
+    it('should be properly hided when just one column is sorted', async() => {
       handsontable({
         data: createSpreadsheetData(10, 10),
         colHeaders: true,
@@ -2489,9 +2489,9 @@ describe('MultiColumnSorting', () => {
       getPlugin('multiColumnSorting').sort({ column: 0, sortOrder: 'asc' });
 
       expect(window.getComputedStyle(spec().$container.find('th span.columnSorting')[0], ':after')
-        .getPropertyValue('content')).toEqual('none');
+        .getPropertyValue('content')).toMatch(/^(none|)$/);
       expect(window.getComputedStyle(spec().$container.find('th span.columnSorting')[1], ':after')
-        .getPropertyValue('content')).toEqual('none');
+        .getPropertyValue('content')).toMatch(/^(none|)$/);
     });
   });
 

test/e2e/Core_validate.spec.js

@@ -38,7 +38,9 @@ describe('Core_validate', () => {
     });
 
     hot.validateCells();
-    await sleep(10);
+
+    await sleep(100);
+
     hot.destroy();
     spec().$container.remove();
 

test/e2e/core/selectAll.spec.js

@@ -12,7 +12,6 @@ describe('Core.selectAll', () => {
 
   it('should select all cells and clear previous selection', () => {
     const scrollbarWidth = Handsontable.dom.getScrollbarWidth(); // normalize viewport size disregarding of the scrollbar size on any OS
-
     const hot = handsontable({
       data: Handsontable.helper.createSpreadsheetObjectData(15, 20),
       width: 185 + scrollbarWidth,

test/e2e/editors/dateEditor.spec.js

@@ -73,7 +73,7 @@ describe('DateEditor', () => {
     expect(editor.offset()).toEqual($(getCell(0, 0, true)).offset());
 
     keyDown('enter');
-    await sleep(100); // Caused by async DateEditor close.
+    await sleep(200); // Caused by async DateEditor close.
     keyDown('enter');
 
     // Cells that do not touch the edges of the table have an additional top border.
@@ -85,38 +85,38 @@ describe('DateEditor', () => {
     expect(editorOffset()).toEqual($(getCell(1, 0, true)).offset());
 
     keyDown('enter');
-    await sleep(100); // Caused by async DateEditor close.
+    await sleep(200); // Caused by async DateEditor close.
     keyDown('enter');
 
     expect(editorOffset()).toEqual($(getCell(2, 0, true)).offset());
 
     keyDown('enter');
-    await sleep(100); // Caused by async DateEditor close.
+    await sleep(200); // Caused by async DateEditor close.
     keyDown('enter');
 
     expect(editorOffset()).toEqual($(getCell(3, 0, true)).offset());
 
     keyDown('enter');
-    await sleep(100); // Caused by async DateEditor close.
+    await sleep(200); // Caused by async DateEditor close.
     keyDown('enter');
 
     expect(editorOffset()).toEqual($(getCell(4, 0, true)).offset());
 
     keyDown('enter');
-    await sleep(100); // Caused by async DateEditor close.
+    await sleep(200); // Caused by async DateEditor close.
     keyDown('enter');
 
     // The first row of the bottom overlay has different position, influenced by `innerBorderTop` CSS class.
     expect(editor.offset()).toEqual($(getCell(5, 0, true)).offset());
 
     keyDown('enter');
-    await sleep(100); // Caused by async DateEditor close.
+    await sleep(200); // Caused by async DateEditor close.
     keyDown('enter');
 
     expect(editorOffset()).toEqual($(getCell(6, 0, true)).offset());
 
     keyDown('enter');
-    await sleep(100); // Caused by async DateEditor close.
+    await sleep(200); // Caused by async DateEditor close.
     keyDown('enter');
 
     expect(editorOffset()).toEqual($(getCell(7, 0, true)).offset());
@@ -141,7 +141,7 @@ describe('DateEditor', () => {
     expect(editor.offset()).toEqual($(getCell(0, 0, true)).offset());
 
     selectCell(0, 1);
-    await sleep(100); // Caused by async DateEditor close.
+    await sleep(200); // Caused by async DateEditor close.
     keyDown('enter');
 
     // Cells that do not touch the edges of the table have an additional left border.
@@ -153,19 +153,19 @@ describe('DateEditor', () => {
     expect(editorOffset()).toEqual($(getCell(0, 1, true)).offset());
 
     selectCell(0, 2);
-    await sleep(100); // Caused by async DateEditor close.
+    await sleep(200); // Caused by async DateEditor close.
     keyDown('enter');
 
     expect(editorOffset()).toEqual($(getCell(0, 2, true)).offset());
 
     selectCell(0, 3);
-    await sleep(100); // Caused by async DateEditor close.
+    await sleep(200); // Caused by async DateEditor close.
     keyDown('enter');
 
     expect(editorOffset()).toEqual($(getCell(0, 3, true)).offset());
 
     selectCell(0, 4);
-    await sleep(100); // Caused by async DateEditor close.
+    await sleep(200); // Caused by async DateEditor close.
     keyDown('enter');
 
     expect(editorOffset()).toEqual($(getCell(0, 4, true)).offset());
@@ -196,7 +196,7 @@ describe('DateEditor', () => {
     expect(editor.offset()).toEqual($(getCell(1, 0, true)).offset());
 
     keyDown('enter');
-    await sleep(100); // Caused by async DateEditor close.
+    await sleep(200); // Caused by async DateEditor close.
     keyDown('enter');
 
     // Cells that do not touch the edges of the table have an additional top border.
@@ -208,26 +208,26 @@ describe('DateEditor', () => {
     expect(editorOffset()).toEqual($(getCell(2, 0, true)).offset());
 
     keyDown('enter');
-    await sleep(100); // Caused by async DateEditor close.
+    await sleep(200); // Caused by async DateEditor close.
     keyDown('enter');
 
     expect(editorOffset()).toEqual($(getCell(3, 0, true)).offset());
 
     keyDown('enter');
-    await sleep(100); // Caused by async DateEditor close.
+    await sleep(200); // Caused by async DateEditor close.
     keyDown('enter');
 
     expect(editorOffset()).toEqual($(getCell(4, 0, true)).offset());
 
     keyDown('enter');
-    await sleep(100); // Caused by async DateEditor close.
+    await sleep(200); // Caused by async DateEditor close.
     keyDown('enter');
 
     // The first row of the bottom overlay has different position, influenced by `innerBorderTop` CSS class.
     expect(editor.offset()).toEqual($(getCell(6, 0, true)).offset());
 
     keyDown('enter');
-    await sleep(100); // Caused by async DateEditor close.
+    await sleep(200); // Caused by async DateEditor close.
     keyDown('enter');
 
     expect(editorOffset()).toEqual($(getCell(7, 0, true)).offset());
@@ -256,7 +256,7 @@ describe('DateEditor', () => {
     expect(editor.offset()).toEqual($(getCell(0, 1, true)).offset());
 
     selectCell(0, 2);
-    await sleep(100); // Caused by async DateEditor close.
+    await sleep(200); // Caused by async DateEditor close.
     keyDown('enter');
 
     // Cells that do not touch the edges of the table have an additional left border.
@@ -268,13 +268,13 @@ describe('DateEditor', () => {
     expect(editorOffset()).toEqual($(getCell(0, 2, true)).offset());
 
     selectCell(0, 3);
-    await sleep(100); // Caused by async DateEditor close.
+    await sleep(200); // Caused by async DateEditor close.
     keyDown('enter');
 
     expect(editorOffset()).toEqual($(getCell(0, 3, true)).offset());
 
     selectCell(0, 4);
-    await sleep(100); // Caused by async DateEditor close.
+    await sleep(200); // Caused by async DateEditor close.
     keyDown('enter');
 
     expect(editorOffset()).toEqual($(getCell(0, 4, true)).offset());