From 64e8b50c64a824d003b76691a2db2df65ccff24c Mon Sep 17 00:00:00 2001 From: Ben Kucera <14625260+Bkucera@users.noreply.github.com> Date: Mon, 6 Jan 2020 16:47:01 -0500 Subject: [PATCH 1/2] fix iframe styling with compiler error --- packages/runner/src/errors/errors.scss | 7 ++----- packages/runner/src/iframe/iframe.scss | 5 +++++ 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/runner/src/errors/errors.scss b/packages/runner/src/errors/errors.scss index a283dcf54a86..cc5616961af2 100644 --- a/packages/runner/src/errors/errors.scss +++ b/packages/runner/src/errors/errors.scss @@ -58,17 +58,14 @@ .script-error { background-color: #f8f8f8; - bottom: 0; border: none; border-radius: 0; color: #ec6573; - left: 0; overflow: auto; margin: 0; padding: 2em; - position: absolute; - right: 0; - top: 0; + width: 100%; + height: 100%; &:empty { display: none; diff --git a/packages/runner/src/iframe/iframe.scss b/packages/runner/src/iframe/iframe.scss index 9206d0a2d739..d1885a3e2c95 100644 --- a/packages/runner/src/iframe/iframe.scss +++ b/packages/runner/src/iframe/iframe.scss @@ -1,6 +1,11 @@ .runner { .iframes-container { position: fixed; + + &.has-error { + width: 100%; + height: 100%; + } } .size-container { From cc1793570975a7f11cd74241e0b0048748f771c6 Mon Sep 17 00:00:00 2001 From: Ben Kucera <14625260+Bkucera@users.noreply.github.com> Date: Tue, 7 Jan 2020 14:22:02 -0500 Subject: [PATCH 2/2] slight typescript refactor, cleanup --- .vscode/settings.json | 3 ++- package.json | 6 ++--- packages/driver/src/cy/keyboard.ts | 33 ++++++++++++++-------------- packages/driver/src/cy/mouse.js | 2 +- packages/driver/src/dom/elements.ts | 11 ++++++++++ packages/driver/src/dom/selection.ts | 24 ++++++-------------- 6 files changed, 40 insertions(+), 39 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index a08fff44ae4d..c25c1b8538c5 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -45,5 +45,6 @@ "editor.codeActionsOnSave": { "source.fixAll.eslint": false } - } + }, + "typescript.tsdk": "node_modules/typescript/lib" } diff --git a/package.json b/package.json index 18c3e0b4a678..5d96621a9a98 100644 --- a/package.json +++ b/package.json @@ -92,8 +92,8 @@ "@types/react-dom": "16.9.4", "@types/request-promise": "4.1.45", "@types/sinon-chai": "3.2.3", - "@typescript-eslint/eslint-plugin": "1.13.0", - "@typescript-eslint/parser": "1.13.0", + "@typescript-eslint/eslint-plugin": "2.14.0", + "@typescript-eslint/parser": "2.14.0", "ansi-styles": "3.2.1", "arg": "4.1.2", "ascii-table": "0.0.9", @@ -167,7 +167,7 @@ "terminal-banner": "1.1.0", "through": "2.3.8", "ts-node": "8.3.0", - "typescript": "3.5.3", + "typescript": "3.7.4", "vinyl-paths": "2.1.0" }, "engines": { diff --git a/packages/driver/src/cy/keyboard.ts b/packages/driver/src/cy/keyboard.ts index 4184e6e2ffdc..839c721e2161 100644 --- a/packages/driver/src/cy/keyboard.ts +++ b/packages/driver/src/cy/keyboard.ts @@ -37,7 +37,7 @@ interface KeyDetailsPartial extends Partial { type SimulatedDefault = ( el: HTMLElement, key: KeyDetails, - options: any + options: typeOptions ) => void interface KeyDetails { @@ -236,7 +236,7 @@ const shouldIgnoreEvent = < return options[eventName] === false } -const shouldUpdateValue = (el: HTMLElement, key: KeyDetails, options) => { +const shouldUpdateValue = (el: HTMLElement, key: KeyDetails, options: typeOptions) => { if (!key.text) return false const bounds = $selection.getSelectionBounds(el) @@ -250,7 +250,7 @@ const shouldUpdateValue = (el: HTMLElement, key: KeyDetails, options) => { const isNumberInputType = $elements.isInput(el) && $elements.isInputType(el, 'number') if (isNumberInputType) { - const needsValue = options.prevVal || '' + const needsValue = options.prevValue || '' const needsValueLength = (needsValue && needsValue.length) || 0 const curVal = $elements.getNativeProp(el, 'value') const bounds = $selection.getSelectionBounds(el) @@ -263,18 +263,18 @@ const shouldUpdateValue = (el: HTMLElement, key: KeyDetails, options) => { debug('skipping inserting value since number input would be invalid', key.text, potentialValue) // when typing in a number input, only certain whitelisted chars will insert text if (!key.text.match(isValidNumberInputChar)) { - options.prevVal = '' + options.prevValue = '' return } - options.prevVal = needsValue + key.text + options.prevValue = needsValue + key.text return } - key.text = (options.prevVal || '') + key.text - options.prevVal = null + key.text = (options.prevValue || '') + key.text + options.prevValue = undefined } if (noneSelected) { @@ -490,7 +490,7 @@ const simulatedDefaultKeyMap: { [key: string]: SimulatedDefault } = { $selection.replaceSelectionContents(el, '\n') } - options.onEnterPressed() + options.onEnterPressed && options.onEnterPressed() }, Delete: (el, key) => { key.events.input = $selection.deleteRightOfCursor(el) @@ -599,11 +599,14 @@ export interface typeOptions { onEnterPressed?: Function onNoMatchingSpecialChars?: Function onBeforeSpecialCharAction?: Function + prevValue?: string + id?: string } export class Keyboard { - constructor (private state: State) { - null + private state + constructor (state: State) { + this.state = state } type (opts: typeOptions) { @@ -775,11 +778,7 @@ export class Keyboard { el: HTMLElement, eventType: KeyEventType, keyDetails: KeyDetails, - opts: { - id: string - onEvent?: (...args) => boolean - onBeforeEvent?: (...args) => boolean - } + opts: typeOptions ) { debug('fireSimulatedEvent', eventType, keyDetails) @@ -963,7 +962,7 @@ export class Keyboard { return true } - simulatedKeydown (el: HTMLElement, _key: KeyDetails, options: any) { + simulatedKeydown (el: HTMLElement, _key: KeyDetails, options: typeOptions) { if (isModifier(_key)) { const didFlag = this.flagModifier(_key) @@ -1048,7 +1047,7 @@ export class Keyboard { this.simulatedKeyup(elToKeyup, key, options) } - simulatedKeyup (el: HTMLElement, _key: KeyDetails, options: any) { + simulatedKeyup (el: HTMLElement, _key: KeyDetails, options: typeOptions) { if (shouldIgnoreEvent('keyup', _key.events)) { debug('simulatedKeyup: ignoring event') delete _key.events.keyup diff --git a/packages/driver/src/cy/mouse.js b/packages/driver/src/cy/mouse.js index 90f2fb828968..620ade5997c0 100644 --- a/packages/driver/src/cy/mouse.js +++ b/packages/driver/src/cy/mouse.js @@ -173,7 +173,7 @@ const create = (state, keyboard, focused, Cypress) => { const mouse = { _getDefaultMouseOptions (x, y, win) { - const _activeModifiers = keyboard.getActiveModifiers(state) + const _activeModifiers = keyboard.getActiveModifiers() const modifiersEventOptions = $Keyboard.toModifiersEventOptions(_activeModifiers) const coordsEventOptions = toCoordsEventOptions(x, y, win) diff --git a/packages/driver/src/dom/elements.ts b/packages/driver/src/dom/elements.ts index 92be3cadd8a9..fc1641b6a4d1 100644 --- a/packages/driver/src/dom/elements.ts +++ b/packages/driver/src/dom/elements.ts @@ -7,6 +7,9 @@ import * as $jquery from './jquery' import * as $selection from './selection' import { parentHasDisplayNone } from './visibility' import * as $window from './window' +import Debug from 'debug' + +const debug = Debug('cypress:driver:elements') const { wrap } = $jquery @@ -730,11 +733,15 @@ const isScrollable = ($el) => { const checkDocumentElement = (win, documentElement) => { // Check if body height is higher than window height if (win.innerHeight < documentElement.scrollHeight) { + debug('isScrollable: window scrollable on Y') + return true } // Check if body width is higher than window width if (win.innerWidth < documentElement.scrollWidth) { + debug('isScrollable: window scrollable on X') + return true } @@ -762,6 +769,8 @@ const isScrollable = ($el) => { if (el.clientHeight < el.scrollHeight) { // and our element has scroll or auto overflow or overflowX if (isScrollOrAuto(overflow) || isScrollOrAuto(overflowY)) { + debug('isScrollable: clientHeight < scrollHeight and scroll/auto overflow') + return true } } @@ -769,6 +778,8 @@ const isScrollable = ($el) => { // x axis if (el.clientWidth < el.scrollWidth) { if (isScrollOrAuto(overflow) || isScrollOrAuto(overflowX)) { + debug('isScrollable: clientWidth < scrollWidth and scroll/auto overflow') + return true } } diff --git a/packages/driver/src/dom/selection.ts b/packages/driver/src/dom/selection.ts index a4c25e05fedc..3a27033aa0ac 100644 --- a/packages/driver/src/dom/selection.ts +++ b/packages/driver/src/dom/selection.ts @@ -347,15 +347,7 @@ const moveCursorRight = function (el) { } } -const moveCursorUp = (el) => { - return _moveCursorUpOrDown(el, true) -} - -const moveCursorDown = (el) => { - return _moveCursorUpOrDown(el, false) -} - -const _moveCursorUpOrDown = function (el, up) { +const _moveCursorUpOrDown = function (up: boolean, el: HTMLElement) { if ($elements.isInput(el)) { // on an input, instead of moving the cursor // we want to perform the native browser action @@ -422,15 +414,10 @@ const _moveCursorUpOrDown = function (el, up) { } } -const moveCursorToLineStart = (el) => { - return _moveCursorToLineStartOrEnd(el, true) -} - -const moveCursorToLineEnd = (el) => { - return _moveCursorToLineStartOrEnd(el, false) -} +const moveCursorUp = _.curry(_moveCursorUpOrDown)(true) +const moveCursorDown = _.curry(_moveCursorUpOrDown)(false) -const _moveCursorToLineStartOrEnd = function (el: HTMLElement, toStart) { +const _moveCursorToLineStartOrEnd = function (toStart: boolean, el: HTMLElement) { const isInput = $elements.isInput(el) const isTextarea = $elements.isTextarea(el) const isInputOrTextArea = isInput || isTextarea @@ -484,6 +471,9 @@ const _moveCursorToLineStartOrEnd = function (el: HTMLElement, toStart) { } } +const moveCursorToLineStart = _.curry(_moveCursorToLineStartOrEnd)(true) +const moveCursorToLineEnd = _.curry(_moveCursorToLineStartOrEnd)(false) + const isCollapsed = function (el) { if ($elements.isTextarea(el) || $elements.isInput(el)) { const { start, end } = getSelectionBounds(el)