diff --git a/app/client/models/NotifyModel.ts b/app/client/models/NotifyModel.ts index e5b1771a..dbced044 100644 --- a/app/client/models/NotifyModel.ts +++ b/app/client/models/NotifyModel.ts @@ -8,6 +8,7 @@ import {bundleChanges, Disposable, Holder, IDisposable, IDisposableOwner } from import {Computed, dom, DomElementArg, MutableObsArray, obsArray, Observable} from 'grainjs'; import clamp = require('lodash/clamp'); import defaults = require('lodash/defaults'); +import {isNarrowScreenObs, testId} from 'app/client/ui2018/cssVars'; // When rendering app errors, we'll only show the last few. const maxAppErrors = 5; @@ -341,11 +342,24 @@ export class Notifier extends Disposable implements INotifier { private _createAppErrorItem(where: 'toast' | 'dropdown') { return this.createNotification({ // Building DOM here in NotifyModel seems wrong, but I haven't come up with a better way. - message: () => dom.forEach(this._appErrorList, (appErr: IAppError) => - (where === 'toast' && appErr.seen ? null : - dom('div', timeFormat('T', new Date(appErr.timestamp)), ' ', appErr.error.message) - ) - ), + message: () => dom.domComputed((use) => { + let appErrors = use(this._appErrorList); + + // On narrow screens, only show the most recent error in toasts to conserve space. + if (where === 'toast' && use(isNarrowScreenObs())) { + appErrors = appErrors.length > 0 ? [appErrors[appErrors.length - 1]] : []; + } + + return dom('div', + dom.forEach(appErrors, (appErr: IAppError) => + (where === 'toast' && appErr.seen ? null : + dom('div', timeFormat('T', new Date(appErr.timestamp)), ' ', + appErr.error.message, testId('notification-app-error')) + ) + ), + testId('notification-app-errors') + ); + }), title: 'Unexpected error', canUserClose: true, inToast: where === 'toast', diff --git a/test/nbrowser/gristUtils.ts b/test/nbrowser/gristUtils.ts index 98831e1a..937e403f 100644 --- a/test/nbrowser/gristUtils.ts +++ b/test/nbrowser/gristUtils.ts @@ -7,7 +7,7 @@ import * as fse from 'fs-extra'; import escapeRegExp = require('lodash/escapeRegExp'); import noop = require('lodash/noop'); import startCase = require('lodash/startCase'); -import { assert, driver, error, IRectangle, Key, WebElement, WebElementPromise } from 'mocha-webdriver'; +import { assert, driver, error, Key, WebElement, WebElementPromise } from 'mocha-webdriver'; import { stackWrapFunc, stackWrapOwnMethods } from 'mocha-webdriver'; import * as path from 'path'; @@ -920,7 +920,7 @@ export async function toggleSidePanel(which: 'right'|'left', goal: 'open'|'close const delta = 0.1; // Adds '-ns' when narrow screen - const suffix = (await driver.manage().window().getRect()).width < 768 ? '-ns' : ''; + const suffix = (await getWindowDimensions()).width < 768 ? '-ns' : ''; // click the opener and wait for the duration of the transition await driver.find(`.test-${which}-opener${suffix}`).doClick(); @@ -1524,20 +1524,55 @@ export async function selectColumnRange(col1: string, col2: string) { await driver.mouseUp(); } +export interface WindowDimensions { + width: number; + height: number; +} + /** - * Changes browser window dimension to FullHd for a test suit. + * Gets browser window dimensions. */ -export function bigScreen() { - let oldRect!: IRectangle; + export async function getWindowDimensions(): Promise { + const {width, height} = await driver.manage().window().getRect(); + return {width, height}; +} + +/** + * Sets browser window dimensions. + */ +export function setWindowDimensions(width: number, height: number) { + return driver.manage().window().setRect({width, height}); +} + +/** + * Changes browser window dimensions for the duration of a test suite. + */ +export function resizeWindowForSuite(width: number, height: number) { + let oldDimensions: WindowDimensions; before(async function () { - oldRect = await driver.manage().window().getRect(); - await driver.manage().window().setRect({ width: 1920, height: 1080 }); + oldDimensions = await getWindowDimensions(); + await setWindowDimensions(width, height); }); after(async function () { - await driver.manage().window().setRect(oldRect); + await setWindowDimensions(oldDimensions.width, oldDimensions.height); }); } +/** + * Changes browser window dimensions to FullHd for a test suite. + */ +export function bigScreen() { + resizeWindowForSuite(1920, 1080); +} + +/** + * Shrinks browser window dimensions to trigger mobile mode for a test suite. + */ + export function narrowScreen() { + resizeWindowForSuite(400, 750); + +} + /** * Adds samples to the Examples & Templates page. */