diff --git a/.storybook/style_test.scss b/.storybook/style_test.scss deleted file mode 100644 index 672ee10be1..0000000000 --- a/.storybook/style_test.scss +++ /dev/null @@ -1,76 +0,0 @@ -@import '../node_modules/@elastic/eui/src/theme_light.scss'; - -html { - background-color: white; -} - -.story-chart { - box-sizing: border-box; - background: white; -} - -.story-chart-dark { - box-sizing: border-box; - background: #1a1b20; -} - -.echInvisible { - visibility: hidden; -} - -#story-root { - padding: 20px; - width: 100%; - height: 400px; - position: relative; - box-sizing: border-box; - background-color: blanchedalmond; - - *, - *::after, - *::before, - .echLegendItem { - transition-delay: 0s !important; - transition-duration: 0s !important; - animation-delay: -0.0001s !important; - animation-duration: 0s !important; - animation-play-state: paused !important; - caret-color: transparent !important; - } -} - -#story-root + div table { - border: 1px solid gray; -} - -#story-root + div table th { - border: 1px solid gray; - padding: 5px; -} - -#story-root + div table td { - border: 1px solid gray; - padding: 5px; -} - -.Pane.vertical.Pane1 { - background: red; -} - -html.echVisualTesting { - background-color: blanchedalmond; - - #root > div:not(#story-root) { - display: none; - } - - #root { - padding-top: 200px; - padding-bottom: 200px; - } -} - -// for using EuiWrappingPopover in stories -.euiPopover__anchor { - width: 100%; -} diff --git a/integration/page_objects/common.ts b/integration/page_objects/common.ts index a682f1e8fd..bf5a2720ce 100644 --- a/integration/page_objects/common.ts +++ b/integration/page_objects/common.ts @@ -61,7 +61,7 @@ interface ElementBBox { } interface KeyboardKey { - actionLabel: string; + key: string; count: number; } @@ -128,7 +128,7 @@ type ScreenshotElementAtUrlOptions = ScreenshotDOMElementOptions & { /** * any desired action to be performed after loading url, prior to screenshot */ - action?: () => void | Promise | Iterable; + action?: () => void | Promise; /** * Selector used to wait on DOM element */ @@ -218,6 +218,15 @@ class CommonPage { return buffer; } + /** + * Move mouse + * @param mousePosition + * @param selector + */ + async moveMouse(x: number, y: number) { + await page.mouse.move(x, y); + } + /** * Move mouse relative to element * @@ -227,7 +236,7 @@ class CommonPage { async moveMouseRelativeToDOMElement(mousePosition: MousePosition, selector: string) { const element = await this.getBoundingClientRect(selector); const { x, y } = getCursorPosition(mousePosition, element); - await page.mouse.move(x, y); + await this.moveMouse(x, y); } /** @@ -252,10 +261,10 @@ class CommonPage { const element = await this.getBoundingClientRect(selector); const { x: x0, y: y0 } = getCursorPosition(start, element); const { x: x1, y: y1 } = getCursorPosition(end, element); - await page.mouse.move(x0, y0); + await this.moveMouse(x0, y0); await page.mouse.down(); await page.waitFor(DRAG_DETECTION_TIMEOUT); - await page.mouse.move(x1, y1); + await this.moveMouse(x1, y1); } /** @@ -271,11 +280,11 @@ class CommonPage { /** * Press keyboard keys * @param count - * @param actionLabel + * @param key */ // eslint-disable-next-line class-methods-use-this - async pressKey(actionLabel: string, count: number) { - if (actionLabel === 'tab') { + async pressKey(key: string, count: number) { + if (key === 'tab') { let i = 0; while (i < count) { // eslint-disable-next-line eslint-comments/disable-enable-pair @@ -283,7 +292,7 @@ class CommonPage { await page.keyboard.press('Tab'); i++; } - } else if (actionLabel === 'enter') { + } else if (key === 'enter') { let i = 0; while (i < count) { await page.keyboard.press('Enter'); @@ -385,11 +394,13 @@ class CommonPage { ) { const action = async () => { await this.disableAnimations(); - await this.clickMouseRelativeToDOMElement({ top: 242, left: 910 }, this.chartSelector); + // click to focus within the chart + await this.clickMouseRelativeToDOMElement({ top: 0, left: 0 }, this.chartSelector); // eslint-disable-next-line no-restricted-syntax for (const actions of keyboardEvents) { - await this.pressKey(actions.actionLabel, actions.count); + await this.pressKey(actions.key, actions.count); } + await this.moveMouseRelativeToDOMElement({ top: 0, left: 0 }, this.chartSelector); }; await this.expectChartAtUrlToMatchScreenshot(url, { diff --git a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-negative-log-areas-snows-only-negative-values-when-hiding-positive-one-1-snap.png b/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-negative-log-areas-snows-only-negative-values-when-hiding-positive-one-1-snap.png deleted file mode 100644 index bef91ab764..0000000000 Binary files a/integration/tests/__image_snapshots__/area-stories-test-ts-area-series-stories-negative-log-areas-snows-only-negative-values-when-hiding-positive-one-1-snap.png and /dev/null differ diff --git a/integration/tests/legend_stories.test.ts b/integration/tests/legend_stories.test.ts index 04a258de89..c5d3ce4244 100644 --- a/integration/tests/legend_stories.test.ts +++ b/integration/tests/legend_stories.test.ts @@ -95,15 +95,17 @@ describe('Legend stories', () => { describe('keyboard navigation', () => { // eslint-disable-next-line jest/expect-expect it('should navigate to legend item with tab', async () => { + // puts mouse to the bottom left + await common.moveMouse(0, 0); await common.expectChartWithKeyboardEventsAtUrlToMatchScreenshot( 'http://localhost:9001/?path=/story/legend--right', [ { - actionLabel: 'tab', + key: 'tab', count: 2, }, { - actionLabel: 'enter', + key: 'enter', count: 1, }, ],