Fix nbrowser test failures (#837)

app/client/components/GridView.js

@@ -295,6 +295,15 @@ GridView.gridCommands = {
     }
     this.cursor.rowIndex(this.cursor.rowIndex() - 1);
   },
+  cursorLeft: function() {
+    // This conditional exists so that when users have the cursor in the leftmost column but
+    // are not scrolled to the left i.e. in the case of a wide column, pressing left again will
+    // scroll the pane to the left.
+    if (this.cursor.fieldIndex() === 0) {
+      this.scrollPane.scrollLeft = 0;
+    }
+    this.cursor.fieldIndex(this.cursor.fieldIndex() - 1);
+  },
   shiftDown: function() { this._shiftSelect({step: 1, direction: 'down'}); },
   shiftUp: function() { this._shiftSelect({step: 1, direction: 'up'}); },
   shiftRight: function() { this._shiftSelect({step: 1, direction: 'right'}); },

app/client/components/ViewLayout.css

@@ -19,6 +19,7 @@
   margin-left: -16px;   /* to include drag handle that shows up on hover */
   margin-bottom: 4px;
   white-space: nowrap;
+  overflow: hidden;
 }
 
 .viewsection_title, .viewsection_title_font {

test/nbrowser/CellColor.ts

@@ -5,6 +5,7 @@ import { setupTestSuite } from 'test/nbrowser/testUtils';
 
 describe('CellColor', function() {
   this.timeout(20000);
+  gu.bigScreen();
   const cleanup = setupTestSuite();
   let doc: string;
 
@@ -534,6 +535,9 @@ describe('CellColor', function() {
     await gu.waitForServer();
     await gu.setType(/Toggle/);
 
+    // make sure the view pane is scrolled all the way left
+    await gu.sendKeys(Key.ARROW_LEFT);
+
     // enter 'true'
     await gu.getCell('E', 1).click();
     await gu.enterCell('true');

test/nbrowser/CustomView.ts

@@ -22,6 +22,7 @@ async function setCustomWidget() {
 
 describe('CustomView', function() {
   this.timeout(20000);
+  gu.bigScreen();
   const cleanup = setupTestSuite();
 
   let serving: Serving;

test/nbrowser/GridViewNewColumnMenu.ts

@@ -83,8 +83,9 @@ describe('GridViewNewColumnMenu', function () {
     it('should create a new column', async function () {
       await clickAddColumn();
       await driver.findWait('.test-new-columns-menu-add-new', 100).click();
+      await gu.waitForServer();
       //discard rename menu
-      await driver.findWait('.test-column-title-close', 100).click();
+      await driver.find('.test-column-title-close').click();
       //check if new column is present
       const columns = await gu.getColumnNames();
       assert.include(columns, 'D', 'new column is not present');
@@ -194,24 +195,24 @@ describe('GridViewNewColumnMenu', function () {
       "Attachment",
     ].map((option) => ({type:option, testClass: option.toLowerCase().replace(' ', '-')}));
     for (const option of optionsToBeDisplayed) {
-    it(`should allow to select column type ${option.type}`, async function () {
-      // open add new colum menu
-      await clickAddColumn();
-      // select "Add Column With type" option
-      await driver.findWait('.test-new-columns-menu-add-with-type', 100).click();
-      // wait for submenu to appear
-      await driver.findWait('.test-new-columns-menu-add-with-type-submenu', 100);
-      // check if it is present in the menu
-      const element = await driver.findWait(
-        `.test-new-columns-menu-add-${option.testClass}`.toLowerCase(),
-        100,
-        `${option.type} option is not present`);
-      // click on the option and check if column is added with a proper type
-      await element.click();
+      it(`should allow to select column type ${option.type}`, async function () {
+        // open add new colum menu
+        await clickAddColumn();
+        // select "Add Column With type" option
+        await driver.findWait('.test-new-columns-menu-add-with-type', 100).click();
+        // wait for submenu to appear
+        await driver.findWait('.test-new-columns-menu-add-with-type-submenu', 100);
+        // check if it is present in the menu
+        const element = await driver.findWait(
+          `.test-new-columns-menu-add-${option.testClass}`.toLowerCase(),
+          100,
+          `${option.type} option is not present`);
+        // click on the option and check if column is added with a proper type
+        await element.click();
+        await gu.waitForServer();
         //discard rename menu
         await driver.findWait('.test-column-title-close', 100).click();
         //check if new column is present
-        await gu.waitForServer();
         await gu.selectColumn('D');
         await gu.openColumnPanel();
         const type = await gu.getType();

test/nbrowser/ReferenceColumns.ts

@@ -294,6 +294,10 @@ describe('ReferenceColumns', function() {
       assert.equal(await driver.find('.celleditor_text_editor').value(), 'da');
       assert.equal(await driver.find('.test-ref-editor-item.selected').isPresent(), false);
 
+      // Clear the typed-in text temporarily. Something changed in a recent version of Chrome,
+      // causing the wrong item to be moused over below when the "Add New" option is visible.
+      await driver.sendKeys(Key.BACK_SPACE, Key.BACK_SPACE);
+
       // Mouse over an item.
       await driver.findContent('.test-ref-editor-item', /Dark Gray/).mouseMove();
       assert.equal(await driver.find('.celleditor_text_editor').value(), 'Dark Gray');
@@ -301,10 +305,11 @@ describe('ReferenceColumns', function() {
 
       // Mouse back out of the dropdown
       await driver.find('.celleditor_text_editor').mouseMove();
-      assert.equal(await driver.find('.celleditor_text_editor').value(), 'da');
+      assert.equal(await driver.find('.celleditor_text_editor').value(), '');
       assert.equal(await driver.find('.test-ref-editor-item.selected').isPresent(), false);
 
-      // Click away to save the typed-in text.
+      // Re-enter the typed-in text and click away to save it.
+      await driver.sendKeys('da', Key.UP);
       await gu.getCell({section: 'References', col: 'Color', rowNum: 1}).doClick();
       await gu.waitForServer();
       assert.equal(await cell.getText(), "da");

test/nbrowser/ReferenceList.ts

@@ -582,6 +582,10 @@ describe('ReferenceList', function() {
       assert.equal(await driver.find('.cell_editor .test-tokenfield .test-tokenfield-input').value(), 'da');
       assert.equal(await driver.find('.test-ref-editor-item.selected').isPresent(), false);
 
+      // Clear the typed-in text temporarily. Something changed in a recent version of Chrome,
+      // causing the wrong item to be moused over below when the "Add New" option is visible.
+      await driver.sendKeys(Key.BACK_SPACE, Key.BACK_SPACE);
+
       // Mouse over an item.
       await driver.findContent('.test-ref-editor-item', /Dark Gray/).mouseMove();
       assert.equal(await driver.find('.cell_editor .test-tokenfield .test-tokenfield-input').value(), 'Dark Gray');
@@ -589,10 +593,12 @@ describe('ReferenceList', function() {
 
       // Mouse back out of the dropdown
       await driver.find('.cell_editor .test-tokenfield .test-tokenfield-input').mouseMove();
-      assert.equal(await driver.find('.cell_editor .test-tokenfield .test-tokenfield-input').value(), 'da');
+      assert.equal(await driver.find('.cell_editor .test-tokenfield .test-tokenfield-input').value(), '');
       assert.equal(await driver.find('.test-ref-editor-item.selected').isPresent(), false);
 
-      // Click away and check the cell is now empty since no reference items were added.
+      // Re-enter the typed-in text and click away. Check the cell is now empty since
+      // no reference items were added.
+      await driver.sendKeys('da', Key.UP);
       await gu.getCell({section: 'References', col: 'Colors', rowNum: 1}).doClick();
       await gu.waitForServer();
       assert.equal(await cell.getText(), "");