diff --git a/.eslintrc.js b/.eslintrc.js index 8611173391..97e6070d95 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -263,6 +263,7 @@ module.exports = { */ 'jest/no-standalone-expect': 0, // using custom expect functions 'jest/no-disabled-tests': 0, + 'jest/no-identical-title': 0, // does not account for .each /* * unicorn plugin diff --git a/integration/helpers.ts b/integration/helpers.ts index a0ed36af0c..3dab8df566 100644 --- a/integration/helpers.ts +++ b/integration/helpers.ts @@ -154,11 +154,11 @@ const themeIds = Object.values(ThemeId); export const eachTheme = { it(fn: (theme: ThemeId, urlParam: string) => any, title = 'theme - %s') { // eslint-disable-next-line jest/valid-title - return it.each(themeIds)(title, (theme) => fn(theme, `&globals=theme:${theme}`)); + return it.each(themeIds)(title, (theme) => fn(theme, `globals=theme:${theme}`)); }, describe(fn: (theme: ThemeId, urlParam: string) => any, title = 'theme - %s') { // eslint-disable-next-line jest/valid-title, jest/valid-describe - return describe.each(themeIds)(title, (theme) => fn(theme, `&globals=theme:${theme}`)); + return describe.each(themeIds)(title, (theme) => fn(theme, `globals=theme:${theme}`)); }, }; diff --git a/integration/page_objects/common.ts b/integration/page_objects/common.ts index 465d0f3523..8b1bdafe0b 100644 --- a/integration/page_objects/common.ts +++ b/integration/page_objects/common.ts @@ -8,8 +8,6 @@ import Url from 'url'; -import { AXNode } from 'puppeteer'; - import { DRAG_DETECTION_TIMEOUT } from '../../packages/charts/src/state/reducers/interactions'; // @ts-ignore - no type declarations import { port, hostname, debug, isLegacyVRTServer } from '../config'; @@ -320,23 +318,31 @@ class CommonPage { selector: string = 'body', options?: ScreenshotElementAtUrlOptions, ) { - await this.loadElementFromURL(url, options?.waitSelector ?? selector, options?.timeout); + try { + const success = await this.loadElementFromURL(url, options?.waitSelector ?? selector, options?.timeout); - if (options?.action) { - await options.action(); - } + expect(success).toBe(true); - if (options?.delay) { - await page.waitFor(options.delay); - } + if (options?.action) { + await options.action(); + } - const element = await this.screenshotDOMElement(options?.screenshotSelector ?? selector, options); + if (options?.delay) { + await page.waitFor(options.delay); + } - if (!element) { - throw new Error(`Error: Unable to find element\n\n\t${url}`); - } + const element = await this.screenshotDOMElement(options?.screenshotSelector ?? selector, options); + + if (!element) { + // eslint-disable-next-line no-console + console.error(`Failed to find element at \`${selector}\`\n\n\t${url}`); + } - expect(element).toMatchImageSnapshot(); + expect(element).toBeDefined(); + expect(element).toMatchImageSnapshot(); + } catch { + // prevent throwing error on failed assertion + } } /** @@ -426,12 +432,19 @@ class CommonPage { * @param waitSelector selector of element to wait to appear in DOM * @param timeout timeout for waiting on element to appear in DOM */ - async loadElementFromURL(url: string, waitSelector?: string, timeout?: number) { + async loadElementFromURL(url: string, waitSelector?: string, timeout?: number): Promise { const cleanUrl = CommonPage.parseUrl(url); await page.goto(cleanUrl); if (waitSelector) { - await this.waitForElement(waitSelector, timeout); + try { + await this.waitForElement(waitSelector, timeout); + return true; + } catch { + // eslint-disable-next-line no-console + console.error(`Failed to load url. Check story at: \n\n\tstorybook url: ${url}\n\tlocal vrt url: ${cleanUrl}`); + return false; + } } if (isLegacyVRTServer) { @@ -439,7 +452,10 @@ class CommonPage { await page.evaluate(() => { document.querySelector('html')!.classList.add('echVisualTesting'); }); + return true; } + + return false; } /** @@ -451,19 +467,6 @@ class CommonPage { async waitForElement(waitSelector: string, timeout = 10000) { await page.waitForSelector(waitSelector, { timeout }); } - - /** - * puppeteer accessibility functionality - * @param {string} [url] - * @param {string} [waitSelector] - */ - async testAccessibilityTree(url: string, waitSelector: string): Promise { - await this.loadElementFromURL(url, waitSelector); - const accessibilitySnapshot = await page.accessibility.snapshot().then((value) => { - return value; - }); - return accessibilitySnapshot; - } } export const common = new CommonPage(); diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-sunburst-should-show-custom-black-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-sunburst-should-show-custom-black-text-color-1-snap.png new file mode 100644 index 0000000000..e1c64ba2e8 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-sunburst-should-show-custom-black-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-sunburst-should-show-custom-black-translucent-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-sunburst-should-show-custom-black-translucent-text-color-1-snap.png new file mode 100644 index 0000000000..c6458a337f Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-sunburst-should-show-custom-black-translucent-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-sunburst-should-show-custom-red-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-sunburst-should-show-custom-red-text-color-1-snap.png new file mode 100644 index 0000000000..a10b1322d5 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-sunburst-should-show-custom-red-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-sunburst-should-show-custom-white-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-sunburst-should-show-custom-white-text-color-1-snap.png new file mode 100644 index 0000000000..7ffdf83900 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-sunburst-should-show-custom-white-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-sunburst-should-show-custom-white-translucent-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-sunburst-should-show-custom-white-translucent-text-color-1-snap.png new file mode 100644 index 0000000000..f5ee61b80d Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-sunburst-should-show-custom-white-translucent-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-treemap-should-show-custom-black-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-treemap-should-show-custom-black-text-color-1-snap.png new file mode 100644 index 0000000000..82c080d265 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-treemap-should-show-custom-black-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-treemap-should-show-custom-black-translucent-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-treemap-should-show-custom-black-translucent-text-color-1-snap.png new file mode 100644 index 0000000000..eef7504721 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-treemap-should-show-custom-black-translucent-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-treemap-should-show-custom-red-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-treemap-should-show-custom-red-text-color-1-snap.png new file mode 100644 index 0000000000..9cf43729da Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-treemap-should-show-custom-red-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-treemap-should-show-custom-white-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-treemap-should-show-custom-white-text-color-1-snap.png new file mode 100644 index 0000000000..d3cac1bc38 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-treemap-should-show-custom-white-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-treemap-should-show-custom-white-translucent-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-treemap-should-show-custom-white-translucent-text-color-1-snap.png new file mode 100644 index 0000000000..71f8316526 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-fill-label-textcolor-treemap-should-show-custom-white-translucent-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-black-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-black-text-color-1-snap.png new file mode 100644 index 0000000000..f98491ab7f Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-black-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-black-translucent-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-black-translucent-text-color-1-snap.png new file mode 100644 index 0000000000..511b727766 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-black-translucent-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-red-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-red-text-color-1-snap.png new file mode 100644 index 0000000000..c3b8be9066 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-red-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-white-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-white-text-color-1-snap.png new file mode 100644 index 0000000000..8d5a9966ce Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-white-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-white-translucent-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-white-translucent-text-color-1-snap.png new file mode 100644 index 0000000000..46bec451f2 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-custom-white-translucent-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-default-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-default-text-color-1-snap.png new file mode 100644 index 0000000000..f98491ab7f Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-dark-theme-should-show-default-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-black-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-black-text-color-1-snap.png new file mode 100644 index 0000000000..acffc8f90e Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-black-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-black-translucent-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-black-translucent-text-color-1-snap.png new file mode 100644 index 0000000000..be2dc93da5 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-black-translucent-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-red-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-red-text-color-1-snap.png new file mode 100644 index 0000000000..8634cfe3b7 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-red-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-white-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-white-text-color-1-snap.png new file mode 100644 index 0000000000..80b2f695e7 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-white-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-white-translucent-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-white-translucent-text-color-1-snap.png new file mode 100644 index 0000000000..98603ccc05 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-custom-white-translucent-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-default-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-default-text-color-1-snap.png new file mode 100644 index 0000000000..80b2f695e7 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-dark-theme-should-show-default-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-light-theme-should-show-custom-black-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-light-theme-should-show-custom-black-text-color-1-snap.png new file mode 100644 index 0000000000..351520b154 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-light-theme-should-show-custom-black-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-light-theme-should-show-custom-black-translucent-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-light-theme-should-show-custom-black-translucent-text-color-1-snap.png new file mode 100644 index 0000000000..3eed050327 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-light-theme-should-show-custom-black-translucent-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-light-theme-should-show-custom-red-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-light-theme-should-show-custom-red-text-color-1-snap.png new file mode 100644 index 0000000000..ba9c754cb0 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-light-theme-should-show-custom-red-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-light-theme-should-show-custom-white-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-light-theme-should-show-custom-white-text-color-1-snap.png new file mode 100644 index 0000000000..cea79fee94 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-light-theme-should-show-custom-white-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-light-theme-should-show-custom-white-translucent-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-light-theme-should-show-custom-white-translucent-text-color-1-snap.png new file mode 100644 index 0000000000..b82db00914 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-light-theme-should-show-custom-white-translucent-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-light-theme-should-show-default-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-light-theme-should-show-default-text-color-1-snap.png new file mode 100644 index 0000000000..351520b154 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-eui-light-theme-should-show-default-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-light-theme-should-show-custom-black-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-light-theme-should-show-custom-black-text-color-1-snap.png new file mode 100644 index 0000000000..610b2f2e6c Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-light-theme-should-show-custom-black-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-light-theme-should-show-custom-black-translucent-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-light-theme-should-show-custom-black-translucent-text-color-1-snap.png new file mode 100644 index 0000000000..52f934fa3e Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-light-theme-should-show-custom-black-translucent-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-light-theme-should-show-custom-red-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-light-theme-should-show-custom-red-text-color-1-snap.png new file mode 100644 index 0000000000..f46e81afd6 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-light-theme-should-show-custom-red-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-light-theme-should-show-custom-white-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-light-theme-should-show-custom-white-text-color-1-snap.png new file mode 100644 index 0000000000..986247ccf8 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-light-theme-should-show-custom-white-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-light-theme-should-show-custom-white-translucent-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-light-theme-should-show-custom-white-translucent-text-color-1-snap.png new file mode 100644 index 0000000000..6d62531a29 Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-light-theme-should-show-custom-white-translucent-text-color-1-snap.png differ diff --git a/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-light-theme-should-show-default-text-color-1-snap.png b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-light-theme-should-show-default-text-color-1-snap.png new file mode 100644 index 0000000000..610b2f2e6c Binary files /dev/null and b/integration/tests/__image_snapshots__/partition-stories-test-ts-axis-stories-link-label-textcolor-light-theme-should-show-default-text-color-1-snap.png differ diff --git a/integration/tests/axis_stories.test.ts b/integration/tests/axis_stories.test.ts index 45bc8d28bd..a75dd9f279 100644 --- a/integration/tests/axis_stories.test.ts +++ b/integration/tests/axis_stories.test.ts @@ -14,7 +14,7 @@ describe('Axis stories', () => { eachTheme.describe((_, params) => { it('should switch to a 30 minute raster', async () => { await common.expectChartAtUrlToMatchScreenshot( - `http://localhost:9001/?path=/story/area-chart--timeslip${params}&globals=knob-Minor%20grid%20lines=true&knob-Shorter%20X%20axis%20minor%20whiskers=true&knob-Stretch%20time=-6&knob-Time%20stretch=100&knob-Time%20zoom=119&knob-X%20axis%20minor%20whiskers=true`, + `http://localhost:9001/?path=/story/area-chart--timeslip&${params}&knob-Minor%20grid%20lines=true&knob-Shorter%20X%20axis%20minor%20whiskers=true&knob-Stretch%20time=-6&knob-Time%20stretch=100&knob-Time%20zoom=119&knob-X%20axis%20minor%20whiskers=true`, ); }); }); diff --git a/integration/tests/goal_stories.test.ts b/integration/tests/goal_stories.test.ts index 62a488eef4..bb0c13dac9 100644 --- a/integration/tests/goal_stories.test.ts +++ b/integration/tests/goal_stories.test.ts @@ -47,19 +47,19 @@ describe('Goal stories', () => { eachTheme.describe((_, params) => { it('should render gauge with target story', async () => { await common.expectChartAtUrlToMatchScreenshot( - `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--gauge-with-target${params}`, + `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--gauge-with-target&${params}`, ); }); it('should render minimal goal story', async () => { await common.expectChartAtUrlToMatchScreenshot( - `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--minimal-goal${params}`, + `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--minimal-goal&${params}`, ); }); it('should render vertical negative story', async () => { await common.expectChartAtUrlToMatchScreenshot( - `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--vertical-negative${params}`, + `https://elastic.github.io/elastic-charts/?path=/story/goal-alpha--vertical-negative&${params}`, ); }); }); diff --git a/integration/tests/partition_stories.test.ts b/integration/tests/partition_stories.test.ts new file mode 100644 index 0000000000..43463f3651 --- /dev/null +++ b/integration/tests/partition_stories.test.ts @@ -0,0 +1,85 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { PartitionLayout } from '../../packages/charts/src'; +import { eachTheme } from '../helpers'; +import { common } from '../page_objects'; + +describe('Axis stories', () => { + it('should sort the first layer too', async () => { + await common.expectChartAtUrlToMatchScreenshot( + 'http://localhost:9001/?path=/story/mosaic-alpha--other-slices&globals=background:white;theme:light&knob-"Other" on bottom even if not the smallest=true&knob-Alphabetical outer group sorting=true', + ); + }); + it('should sort just the first layer', async () => { + await common.expectChartAtUrlToMatchScreenshot( + 'http://localhost:9001/?path=/story/mosaic-alpha--other-slices&globals=background:white;theme:light&knob-"Other" on bottom even if not the smallest=false&knob-Alphabetical outer group sorting=true', + ); + }); + + eachTheme.describe((_, params) => { + it('should show default textColor', async () => { + await common.expectChartAtUrlToMatchScreenshot( + `http://localhost:9001/?path=/story/sunburst--linked-labels-only&${params}&knob-custom linkLabel.textColor=false`, + ); + }); + it('should show custom red textColor', async () => { + await common.expectChartAtUrlToMatchScreenshot( + `http://localhost:9001/?path=/story/sunburst--linked-labels-only&${params}&knob-custom linkLabel.textColor=true&knob-linkLabel.textColor=rgba(171, 146, 146, .85)`, + ); + }); + it('should show custom white textColor', async () => { + await common.expectChartAtUrlToMatchScreenshot( + `http://localhost:9001/?path=/story/sunburst--linked-labels-only&${params}&knob-custom linkLabel.textColor=true&knob-linkLabel.textColor=rgba(255, 255, 255, 1)`, + ); + }); + it('should show custom black textColor', async () => { + await common.expectChartAtUrlToMatchScreenshot( + `http://localhost:9001/?path=/story/sunburst--linked-labels-only&${params}&knob-custom linkLabel.textColor=true&knob-linkLabel.textColor=rgba(0, 0, 0, 1)`, + ); + }); + it('should show custom white/translucent textColor', async () => { + await common.expectChartAtUrlToMatchScreenshot( + `http://localhost:9001/?path=/story/sunburst--linked-labels-only&${params}&knob-custom linkLabel.textColor=true&knob-linkLabel.textColor=rgba(255, 255, 255, 0.3)`, + ); + }); + it('should show custom black/translucent textColor', async () => { + await common.expectChartAtUrlToMatchScreenshot( + `http://localhost:9001/?path=/story/sunburst--linked-labels-only&${params}&knob-custom linkLabel.textColor=true&knob-linkLabel.textColor=rgba(0, 0, 0, 0.3)`, + ); + }); + }, 'linkLabel textcolor - %s theme'); + + describe.each([PartitionLayout.treemap, PartitionLayout.sunburst])('fillLabel textcolor - %s', (partitionLayout) => { + it('should show custom red textColor', async () => { + await common.expectChartAtUrlToMatchScreenshot( + `http://localhost:9001/?path=/story/treemap--one-layer2&knob-partitionLayout=${partitionLayout}&knob-custom fillLabel.textColor=true&knob-fillLabel.textColor=rgba(255, 0, 0, 0.85)`, + ); + }); + it('should show custom white textColor', async () => { + await common.expectChartAtUrlToMatchScreenshot( + `http://localhost:9001/?path=/story/treemap--one-layer2&knob-partitionLayout=${partitionLayout}&knob-custom fillLabel.textColor=true&knob-fillLabel.textColor=rgba(255, 255, 255, 1)`, + ); + }); + it('should show custom black textColor', async () => { + await common.expectChartAtUrlToMatchScreenshot( + `http://localhost:9001/?path=/story/treemap--one-layer2&knob-partitionLayout=${partitionLayout}&knob-custom fillLabel.textColor=true&knob-fillLabel.textColor=rgba(0, 0, 0, 1)`, + ); + }); + it('should show custom white/translucent textColor', async () => { + await common.expectChartAtUrlToMatchScreenshot( + `http://localhost:9001/?path=/story/treemap--one-layer2&knob-partitionLayout=${partitionLayout}&knob-custom fillLabel.textColor=true&knob-fillLabel.textColor=rgba(255, 255, 255, 0.3)`, + ); + }); + it('should show custom black/translucent textColor', async () => { + await common.expectChartAtUrlToMatchScreenshot( + `http://localhost:9001/?path=/story/treemap--one-layer2&knob-partitionLayout=${partitionLayout}&knob-custom fillLabel.textColor=true&knob-fillLabel.textColor=rgba(0, 0, 0, 0.3)`, + ); + }); + }); +}); diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md index 243438c4ed..c0fb31f40b 100644 --- a/packages/charts/api/charts.api.md +++ b/packages/charts/api/charts.api.md @@ -485,6 +485,7 @@ export interface ColorConfig { export const ColorVariant: Readonly<{ Series: "__use__series__color__"; None: "__use__empty__color__"; + Adaptive: "__use__adaptive__color__"; }>; // @public (undocumented) diff --git a/packages/charts/src/chart_types/partition_chart/layout/config.ts b/packages/charts/src/chart_types/partition_chart/layout/config.ts index ffdc2d1d90..d35ba571ac 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/config.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/config.ts @@ -10,6 +10,7 @@ import { Colors } from '../../../common/colors'; import { ConfigItem, configMap, Numeric } from '../../../common/config_objects'; import { GOLDEN_RATIO, TAU } from '../../../common/constants'; import { FONT_STYLES, FONT_VARIANTS } from '../../../common/text_utils'; +import { ColorVariant } from '../../../utils/common'; import { Config, PartitionLayout } from './types/config_types'; import { ShapeTreeNode } from './types/viewmodel_types'; import { AGGREGATE_KEY, STATISTICS_KEY } from './utils/group_by_rollup'; @@ -196,7 +197,7 @@ export const configMetadata: Record = { fillLabel: { type: 'group', values: { - textColor: { type: 'color', dflt: '#000000' }, + textColor: { type: 'color', dflt: ColorVariant.Adaptive }, ...fontSettings, valueGetter: { dflt: sumValueGetter, @@ -283,7 +284,7 @@ export const configMetadata: Record = { max: 200, documentation: 'Limits the total number of characters in linked labels.', }, - textColor: { dflt: '#000000', type: 'color' }, + textColor: { dflt: ColorVariant.Adaptive, type: 'color' }, minimumStemLength: { dflt: 0, min: 0, diff --git a/packages/charts/src/chart_types/partition_chart/layout/types/config_types.ts b/packages/charts/src/chart_types/partition_chart/layout/types/config_types.ts index a01b2f1460..2f5990d9f6 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/types/config_types.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/types/config_types.ts @@ -11,7 +11,7 @@ import { $Values as Values } from 'utility-types'; import { Color } from '../../../../common/colors'; import { Distance, Pixels, Radian, Radius, Ratio, SizeRatio, TimeMs } from '../../../../common/geometry'; import { Font, FontFamily, PartialFont } from '../../../../common/text_utils'; -import { StrokeStyle, ValueFormatter } from '../../../../utils/common'; +import { ColorVariant, StrokeStyle, ValueFormatter } from '../../../../utils/common'; import { PerSideDistance } from '../../../../utils/dimensions'; /** @public */ @@ -34,7 +34,7 @@ export type PerSidePadding = PerSideDistance; export type Padding = Pixels | Partial; interface LabelConfig extends Font { - textColor: Color; + textColor: Color | typeof ColorVariant.Adaptive; valueFormatter: ValueFormatter; valueFont: PartialFont; padding: Padding; diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts index 74b4dc2ab6..40f225b2d1 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts @@ -19,7 +19,7 @@ import { trueBearingToStandardPositionAngle, } from '../../../../common/geometry'; import { cutToLength, fitText, Font, measureOneBoxWidth, TextMeasure } from '../../../../common/text_utils'; -import { isRTLString, ValueFormatter } from '../../../../utils/common'; +import { ColorVariant, isRTLString, ValueFormatter } from '../../../../utils/common'; import { Logger } from '../../../../utils/logger'; import { Point } from '../../../../utils/point'; import { Config, LinkLabelConfig } from '../types/config_types'; @@ -85,7 +85,8 @@ export function linkTextLayout( containerBgColor, ); } - const textColor = fillTextColor(containerBgColor); + const textColor = + linkLabel.textColor === ColorVariant.Adaptive ? fillTextColor(containerBgColor) : linkLabel.textColor; const labelFontSpec: Font = { ...linkLabel, textColor }; const valueFontSpec: Font = { ...linkLabel, ...linkLabel.valueFont, textColor }; diff --git a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts index e7a8921a59..f72c838730 100644 --- a/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts +++ b/packages/charts/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts @@ -20,7 +20,7 @@ import { } from '../../../../common/geometry'; import { Part, TextMeasure } from '../../../../common/text_utils'; import { GroupByAccessor, SmallMultiplesStyle } from '../../../../specs'; -import { StrokeStyle, ValueFormatter, RecursivePartial } from '../../../../utils/common'; +import { StrokeStyle, ValueFormatter, RecursivePartial, ColorVariant } from '../../../../utils/common'; import { Logger } from '../../../../utils/logger'; import { Layer } from '../../specs'; import { config as defaultConfig, MODEL_KEY, percentValueGetter } from '../config'; @@ -156,10 +156,13 @@ export function makeQuadViewModel( const strokeWidth = sectorLineWidth; const strokeStyle = sectorLineStroke; const textNegligible = node.y1px - node.y0px < minRectHeightForText; - const textColor = - !isSunburstLayout && textNegligible - ? Colors.Transparent.keyword - : fillTextColor(fillColor, containerBackgroundColor); + + const textColor = textNegligible + ? Colors.Transparent.keyword + : fillLabel.textColor === ColorVariant.Adaptive + ? fillTextColor(fillColor, containerBackgroundColor) + : fillLabel.textColor; + return { index, innerIndex, smAccessorValue, strokeWidth, strokeStyle, fillColor, textColor, ...node }; }); } diff --git a/packages/charts/src/utils/common.ts b/packages/charts/src/utils/common.ts index fa58ec28bf..32d5a41327 100644 --- a/packages/charts/src/utils/common.ts +++ b/packages/charts/src/utils/common.ts @@ -49,6 +49,10 @@ export const ColorVariant = Object.freeze({ * Uses empty color, similar to transparent. */ None: '__use__empty__color__' as const, + /** + * Computes best color based on background contrast + */ + Adaptive: '__use__adaptive__color__' as const, }); /** @public */ export type ColorVariant = $Values; diff --git a/storybook/stories/sunburst/24_linked_label.story.tsx b/storybook/stories/sunburst/24_linked_label.story.tsx index 7036e09924..634e0ca488 100644 --- a/storybook/stories/sunburst/24_linked_label.story.tsx +++ b/storybook/stories/sunburst/24_linked_label.story.tsx @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { boolean, color } from '@storybook/addon-knobs'; import React from 'react'; import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; @@ -34,7 +35,12 @@ export const Example = () => ( ]} config={{ partitionLayout: PartitionLayout.sunburst, - linkLabel: { maximumSection: Infinity }, + linkLabel: { + maximumSection: Infinity, + textColor: boolean('custom linkLabel.textColor', true) + ? color('linkLabel.textColor', 'rgba(0, 0, 0, 1)') + : undefined, + }, }} /> diff --git a/storybook/stories/treemap/2_one_layer_2.story.tsx b/storybook/stories/treemap/2_one_layer_2.story.tsx index 5a646ef4a9..7db07f05e9 100644 --- a/storybook/stories/treemap/2_one_layer_2.story.tsx +++ b/storybook/stories/treemap/2_one_layer_2.story.tsx @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { boolean, color, select } from '@storybook/addon-knobs'; import React from 'react'; import { Chart, Datum, Partition, PartitionLayout, Settings } from '@elastic/charts'; @@ -44,7 +45,19 @@ export const Example = () => ( }, ]} config={{ - partitionLayout: PartitionLayout.treemap, + partitionLayout: select( + 'partitionLayout', + { + Treemap: PartitionLayout.treemap, + Sunburst: PartitionLayout.sunburst, + }, + PartitionLayout.treemap, + ), + fillLabel: { + textColor: boolean('custom fillLabel.textColor', false) + ? color('fillLabel.textColor', 'rgba(0, 0, 0, 1)') + : undefined, + }, }} />