diff --git a/packages/canary-react/cypress-image-diff-screenshots/baseline/IcCardHorizontal.cy.tsx-clickable-high-contrast.png b/packages/canary-react/cypress-image-diff-screenshots/baseline/IcCardHorizontal.cy.tsx-clickable-high-contrast.png old mode 100644 new mode 100755 index 43eff13f50..44f938548d Binary files a/packages/canary-react/cypress-image-diff-screenshots/baseline/IcCardHorizontal.cy.tsx-clickable-high-contrast.png and b/packages/canary-react/cypress-image-diff-screenshots/baseline/IcCardHorizontal.cy.tsx-clickable-high-contrast.png differ diff --git a/packages/canary-react/cypress-image-diff-screenshots/baseline/IcCardHorizontal.cy.tsx-clickable-link-high-contrast.png b/packages/canary-react/cypress-image-diff-screenshots/baseline/IcCardHorizontal.cy.tsx-clickable-link-high-contrast.png old mode 100644 new mode 100755 index b2d645343e..baae436fb8 Binary files a/packages/canary-react/cypress-image-diff-screenshots/baseline/IcCardHorizontal.cy.tsx-clickable-link-high-contrast.png and b/packages/canary-react/cypress-image-diff-screenshots/baseline/IcCardHorizontal.cy.tsx-clickable-link-high-contrast.png differ diff --git a/packages/canary-react/cypress-image-diff-screenshots/baseline/IcCardHorizontal.cy.tsx-default-high-contrast.png b/packages/canary-react/cypress-image-diff-screenshots/baseline/IcCardHorizontal.cy.tsx-default-high-contrast.png old mode 100644 new mode 100755 diff --git a/packages/canary-react/cypress-image-diff-screenshots/baseline/IcCardHorizontal.cy.tsx-disabled-high-contrast.png b/packages/canary-react/cypress-image-diff-screenshots/baseline/IcCardHorizontal.cy.tsx-disabled-high-contrast.png old mode 100644 new mode 100755 index 756054cc5f..91ed133433 Binary files a/packages/canary-react/cypress-image-diff-screenshots/baseline/IcCardHorizontal.cy.tsx-disabled-high-contrast.png and b/packages/canary-react/cypress-image-diff-screenshots/baseline/IcCardHorizontal.cy.tsx-disabled-high-contrast.png differ diff --git a/packages/canary-react/cypress-image-diff-screenshots/baseline/IcDataTable.cy.tsx-dark-mode-icons.png b/packages/canary-react/cypress-image-diff-screenshots/baseline/IcDataTable.cy.tsx-dark-mode-icons.png old mode 100644 new mode 100755 diff --git a/packages/canary-react/cypress-image-diff-screenshots/baseline/IcDataTable.cy.tsx-dark-mode-sortable.png b/packages/canary-react/cypress-image-diff-screenshots/baseline/IcDataTable.cy.tsx-dark-mode-sortable.png old mode 100644 new mode 100755 diff --git a/packages/canary-react/cypress-image-diff-screenshots/baseline/IcDataTable.cy.tsx-dark-mode-title-bar.png b/packages/canary-react/cypress-image-diff-screenshots/baseline/IcDataTable.cy.tsx-dark-mode-title-bar.png old mode 100644 new mode 100755 diff --git a/packages/canary-react/cypress-image-diff-screenshots/baseline/IcDataTable.cy.tsx-dark-mode-updating.png b/packages/canary-react/cypress-image-diff-screenshots/baseline/IcDataTable.cy.tsx-dark-mode-updating.png old mode 100644 new mode 100755 diff --git a/packages/canary-react/cypress-image-diff-screenshots/baseline/IcDataTable.cy.tsx-tooltip-truncation-sort.png b/packages/canary-react/cypress-image-diff-screenshots/baseline/IcDataTable.cy.tsx-tooltip-truncation-sort.png new file mode 100644 index 0000000000..443d12c9d4 Binary files /dev/null and b/packages/canary-react/cypress-image-diff-screenshots/baseline/IcDataTable.cy.tsx-tooltip-truncation-sort.png differ diff --git a/packages/canary-react/src/component-tests/IcCardHorizontal/IcCardHorizontal.cy.tsx b/packages/canary-react/src/component-tests/IcCardHorizontal/IcCardHorizontal.cy.tsx index ef40cb48d5..37fe7fce8a 100644 --- a/packages/canary-react/src/component-tests/IcCardHorizontal/IcCardHorizontal.cy.tsx +++ b/packages/canary-react/src/component-tests/IcCardHorizontal/IcCardHorizontal.cy.tsx @@ -12,7 +12,7 @@ import { import { setThresholdBasedOnEnv } from "@ukic/react/cypress/utils/helpers"; import { IcThemeMode } from "../../../../web-components/dist/types/utils/types"; -const DEFAULT_TEST_THRESHOLD = 0.008; +const DEFAULT_TEST_THRESHOLD = 0.005; const CARD_SELECTOR = "ic-card-horizontal"; @@ -122,7 +122,7 @@ describe("IcCardHorizontal", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "with-message", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.014), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.012), }); }); @@ -136,7 +136,7 @@ describe("IcCardHorizontal", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "with-icon", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.015), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.012), }); }); @@ -152,7 +152,7 @@ describe("IcCardHorizontal", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "clickable", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.002), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.004), }); }); @@ -164,7 +164,7 @@ describe("IcCardHorizontal", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "clickable-link", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.005), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.004), }); }); @@ -181,7 +181,7 @@ describe("IcCardHorizontal", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "with-image-small", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.018), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.017), }); }); @@ -198,7 +198,7 @@ describe("IcCardHorizontal", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "with-image-default", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.027), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.025), }); }); @@ -215,7 +215,7 @@ describe("IcCardHorizontal", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "with-image-large", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.03), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.026), }); }); @@ -232,7 +232,7 @@ describe("IcCardHorizontal", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "with-image-extra-large", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.038), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.031), }); }); @@ -244,7 +244,7 @@ describe("IcCardHorizontal", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "disabled", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.002), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD), }); }); @@ -288,7 +288,7 @@ describe("IcCardHorizontal", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "with-truncated-text", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.039), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.032), }); }); @@ -299,7 +299,7 @@ describe("IcCardHorizontal", () => { cy.compareSnapshot({ name: "theme", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.037), }); }); @@ -310,7 +310,7 @@ describe("IcCardHorizontal", () => { cy.compareSnapshot({ name: "theme-clickable", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.035), }); }); @@ -321,72 +321,75 @@ describe("IcCardHorizontal", () => { cy.compareSnapshot({ name: "theme-disabled", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.018), }); }); +}); - describe("IcCardHorizontal visual regression tests in high contrast mode", () => { - before(() => { - cy.enableForcedColors(); - cy.viewport(1024, 768); - }); +describe("IcCardHorizontal visual regression tests in high contrast mode", () => { + before(() => { + cy.enableForcedColors(); + }); - after(() => { - cy.disableForcedColors(); - }); + before(() => { + cy.viewport(1024, 768); + }); - afterEach(() => { - cy.task("generateReport"); - }); + afterEach(() => { + cy.task("generateReport"); + }); + + after(() => { + cy.disableForcedColors(); + }); - it("should render", () => { - mount(); + it("should render", () => { + mount(); - cy.checkHydrated(CARD_SELECTOR); + cy.checkHydrated(CARD_SELECTOR); - cy.checkA11yWithWait(); - cy.compareSnapshot({ - name: "default-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.008), - }); + cy.checkA11yWithWait(); + cy.compareSnapshot({ + name: "default-high-contrast", + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.009), }); + }); - it("should render clickable", () => { - mount( -
- -
- ); + it("should render clickable", () => { + mount( +
+ +
+ ); - cy.get(CARD_SELECTOR).click("topLeft").should(HAVE_FOCUS); + cy.get(CARD_SELECTOR).click("topLeft").should(HAVE_FOCUS); - cy.checkA11yWithWait(); - cy.compareSnapshot({ - name: "clickable-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.008), - }); + cy.checkA11yWithWait(); + cy.compareSnapshot({ + name: "clickable-high-contrast", + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.02), }); + }); - it("should render clickable as a link", () => { - mount(); + it("should render clickable as a link", () => { + mount(); - cy.get('[href="#"]').should(BE_VISIBLE); + cy.get('[href="#"]').should(BE_VISIBLE); - // cy.checkA11yWithWait(); - cy.compareSnapshot({ - name: "clickable-link-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.005), - }); + // cy.checkA11yWithWait(); + cy.compareSnapshot({ + name: "clickable-link-high-contrast", + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.015), }); + }); - it("should render disabled", () => { - mount(); + it("should render disabled", () => { + mount(); - cy.checkA11yWithWait(); - cy.compareSnapshot({ - name: "disabled-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD), - }); + cy.checkA11yWithWait(); + cy.compareSnapshot({ + name: "disabled-high-contrast", + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.012), }); }); }); diff --git a/packages/canary-react/src/component-tests/IcDataTable/IcDataTable.cy.tsx b/packages/canary-react/src/component-tests/IcDataTable/IcDataTable.cy.tsx index 188a762244..3769dc094a 100644 --- a/packages/canary-react/src/component-tests/IcDataTable/IcDataTable.cy.tsx +++ b/packages/canary-react/src/component-tests/IcDataTable/IcDataTable.cy.tsx @@ -15,7 +15,7 @@ import { IcLink, } from "@ukic/react"; import { IcPaginationBarOptions } from "@ukic/canary-web-components/src/utils/types"; -import { mdiAccountGroup, mdiDelete, mdiImage, mdiPlus } from "@mdi/js"; +import { mdiAccountGroup, mdiImage, mdiPlus } from "@mdi/js"; import { COLS, @@ -72,7 +72,7 @@ import { } from "./IcDataTableTestData"; const DATA_TABLE_SELECTOR = "ic-data-table"; -const DEFAULT_THRESHOLD = 0.04; +const DEFAULT_THRESHOLD = 0.022; const LOADING_INDICATOR_SELECTOR = "ic-loading-indicator"; const SORT_BUTTON_SELECTOR = ".sort-button"; const TOOLTIP_BUTTON_SELECTOR = "ic-tooltip button"; @@ -158,7 +158,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "default", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.044), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.043), cypressScreenshotOptions: { capture: "viewport", }, @@ -172,7 +172,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "section-container", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.093), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.114), cypressSCreenshotOptions: { capture: "viewport", }, @@ -189,7 +189,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "highlighted-row", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.043), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.042), cypressScreenshotOptions: { capture: "viewport", }, @@ -212,7 +212,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "with-row-headers", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.049), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.047), cypressScreenshotOptions: { capture: "viewport", }, @@ -226,7 +226,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "embedded", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.046), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.041), cypressScreenshotOptions: { capture: "viewport", }, @@ -246,7 +246,7 @@ describe("IcDataTables", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "column-header-truncation", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.043), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.045), cypressScreenshotOptions: { capture: "viewport", }, @@ -271,7 +271,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "sortable-first-sort", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.047), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.045), cypressScreenshotOptions: { capture: "viewport", }, @@ -283,7 +283,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "sortable-second-sort", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.045), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.044), cypressScreenshotOptions: { capture: "viewport", }, @@ -399,7 +399,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "column-overrides", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.049), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.047), cypressScreenshotOptions: { capture: "viewport", }, @@ -420,7 +420,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "row-overrides", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.049), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.048), cypressScreenshotOptions: { capture: "viewport", }, @@ -441,7 +441,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "cell-overrides", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.045), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.044), cypressScreenshotOptions: { capture: "viewport", }, @@ -457,7 +457,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "custom-icons", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.033), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.036), cypressScreenshotOptions: { capture: "viewport", }, @@ -481,7 +481,7 @@ describe("IcDataTables", () => { cy.checkHydrated(DATA_TABLE_SELECTOR); cy.compareSnapshot({ name: "slotted-icon", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.033), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.036), cypressScreenshotOptions: { capture: "viewport", }, @@ -495,7 +495,7 @@ describe("IcDataTables", () => { cy.checkHydrated(DATA_TABLE_SELECTOR); cy.compareSnapshot({ name: "null-data", - testThreshold: setThresholdBasedOnEnv(0.027), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD), }); cy.checkA11yWithWait(); }); @@ -511,7 +511,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "no-data", - testThreshold: setThresholdBasedOnEnv(0.027), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD), }); }); @@ -546,7 +546,7 @@ describe("IcDataTables", () => { cy.checkHydrated(DATA_TABLE_SELECTOR); cy.compareSnapshot({ name: "empty-state", - testThreshold: setThresholdBasedOnEnv(0.033), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.003), cypressScreenshotOptions: { capture: "viewport", }, @@ -560,7 +560,7 @@ describe("IcDataTables", () => { cy.checkHydrated(DATA_TABLE_SELECTOR); cy.compareSnapshot({ name: "updating", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.015), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD), cypressScreenshotOptions: { capture: "viewport", }, @@ -585,7 +585,7 @@ describe("IcDataTables", () => { cy.checkHydrated(DATA_TABLE_SELECTOR); cy.wait(350).compareSnapshot({ name: "loading-options", - testThreshold: setThresholdBasedOnEnv(0.029), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD), cypressScreenshotOptions: { capture: "viewport", }, @@ -620,7 +620,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "loading-indicator-background", - testThreshold: setThresholdBasedOnEnv(0.028), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD), cypressScreenshotOptions: { capture: "viewport", }, @@ -642,7 +642,7 @@ describe("IcDataTables", () => { cy.checkHydrated(DATA_TABLE_SELECTOR); cy.compareSnapshot({ name: "updating-options", - testThreshold: setThresholdBasedOnEnv(0.027), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD), cypressScreenshotOptions: { capture: "viewport", }, @@ -701,7 +701,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "specified-row-height", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.091), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.11), cypressScreenshotOptions: { capture: "viewport", }, @@ -721,7 +721,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "auto-set-row-height", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.044), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.043), cypressScreenshotOptions: { capture: "viewport", }, @@ -779,7 +779,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "slotted-title-bar", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.049), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.045), cypressScreenshotOptions: { capture: "viewport", }, @@ -807,7 +807,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "on-all-cells-except-cells-with-custom-icon", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.033), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.036), cypressScreenshotOptions: { capture: "viewport", }, @@ -870,7 +870,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "density-dense", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.04), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.041), }); cy.get(DATA_TABLE_SELECTOR).invoke("prop", "density", "spacious"); @@ -879,7 +879,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "density-spacious", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.044), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.042), cypressScreenshotOptions: { capture: "viewport", }, @@ -900,7 +900,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "globalRowHeight-set-to-auto", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.044), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.043), cypressScreenshotOptions: { capture: "viewport", }, @@ -924,7 +924,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "sticky-header", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.089), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.113), delay: 500, cypressScreenshotOptions: { capture: "viewport", @@ -943,7 +943,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "sticky-header-removed", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.086), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.11), cypressScreenshotOptions: { capture: "viewport", }, @@ -973,7 +973,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "density-default-dropdown", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.05), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.045), cypressScreenshotOptions: { capture: "viewport", }, @@ -999,7 +999,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "density-dense-dropdown", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.047), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.043), cypressScreenshotOptions: { capture: "viewport", }, @@ -1044,7 +1044,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "slotted-icon-in-cell", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.032), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.035), cypressScreenshotOptions: { capture: "viewport", }, @@ -1113,7 +1113,7 @@ describe("IcDataTables", () => { cy.compareSnapshot({ name: "action-elements", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.038), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.039), cypressScreenshotOptions: { capture: "viewport", }, @@ -1174,7 +1174,7 @@ describe("IcDataTables", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "empty-data-values", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.043), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.018), cypressScreenshotOptions: { capture: "viewport", }, @@ -1309,7 +1309,7 @@ describe("IcDataTables with IcPaginationBar", () => { cy.compareSnapshot({ name: "pagination", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.129), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.151), cypressScreenshotOptions: { capture: "viewport", }, @@ -1379,7 +1379,7 @@ describe("IcDataTables with IcPaginationBar", () => { cy.compareSnapshot({ name: "pagination-uncontrolled", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.129), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.151), cypressScreenshotOptions: { capture: "viewport", }, @@ -1639,7 +1639,7 @@ describe("IcDataTable with truncation", () => { cy.compareSnapshot({ name: "tooltip-truncation-rowheight", // cspell:disable-line - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.045), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.044), }); }); @@ -1780,7 +1780,7 @@ describe("IcDataTable with truncation", () => { cy.compareSnapshot({ name: "tooltip-truncation-wide-table", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.029), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.032), }); }); @@ -1838,7 +1838,7 @@ describe("IcDataTable with truncation", () => { cy.compareSnapshot({ name: "tooltip-truncation-spacious", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.034), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.037), }); }); @@ -2052,7 +2052,7 @@ describe("IcDataTable with truncation", () => { cy.compareSnapshot({ name: "tooltip-truncation-custom-icon", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.023), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.028), cypressScreenshotOptions: { capture: "viewport", }, @@ -2142,7 +2142,7 @@ describe("IcDataTable with truncation", () => { cy.compareSnapshot({ name: "show-hide-truncation-hide", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.039), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.038), cypressScreenshotOptions: { capture: "viewport", }, @@ -2164,7 +2164,7 @@ describe("IcDataTable with truncation", () => { cy.compareSnapshot({ name: "show-hide-truncation-show", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.043), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.04), cypressScreenshotOptions: { capture: "viewport", }, @@ -2193,7 +2193,7 @@ describe("IcDataTable with truncation", () => { cy.compareSnapshot({ name: "show-hide-truncation-focus-hover-state", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.04), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.038), cypressScreenshotOptions: { capture: "viewport", }, @@ -2263,7 +2263,7 @@ describe("IcDataTable with truncation", () => { cy.compareSnapshot({ name: "show-hide-truncation-row-height", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.045), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.043), }); }); @@ -2420,7 +2420,7 @@ describe("IcDataTable with truncation", () => { cy.compareSnapshot({ name: "show-hide-truncation-data-update", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.027), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.028), cypressScreenshotOptions: { capture: "viewport", }, @@ -2460,7 +2460,7 @@ describe("IcDataTable with truncation", () => { cy.compareSnapshot({ name: "show-hide-truncation-scroll", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.087), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.111), cypressScreenshotOptions: { capture: "viewport", }, @@ -2601,7 +2601,7 @@ describe("IcDataTable with truncation", () => { cy.compareSnapshot({ name: "show-hide-truncation-spacious", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.039), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.043), cypressScreenshotOptions: { capture: "viewport", }, @@ -2753,6 +2753,7 @@ describe("IcDataTable with truncation", () => { .should("have.text", "See more"); }); }); + it("should render truncation correctly with custom icon", () => { mount( { cy.compareSnapshot({ name: "show-hide-truncation-custom-icon", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.02), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.024), cypressScreenshotOptions: { capture: "viewport", }, }); }); + it("should render show / hide on multiple lines for small tables", () => { cy.viewport(300, 750); @@ -2791,7 +2793,7 @@ describe("IcDataTable with truncation", () => { cy.compareSnapshot({ name: "show-hide-truncation-link-multiline", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.086), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.07), cypressScreenshotOptions: { capture: "viewport", }, @@ -2996,7 +2998,7 @@ describe("IcDataTable with truncation", () => { cy.compareSnapshot({ name: "show-hide-truncation-toggle", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.09), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.05), cypressScreenshotOptions: { capture: "viewport", }, @@ -3253,7 +3255,7 @@ describe("IcDataTable with truncation", () => { cy.compareSnapshot({ name: "text-wrap-tooltip-truncation-column", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.053), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.049), cypressScreenshotOptions: { capture: "viewport", }, @@ -3275,7 +3277,7 @@ describe("IcDataTable with truncation", () => { cy.compareSnapshot({ name: "text-wrap-show-hide-truncation-column", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.054), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.05), cypressScreenshotOptions: { capture: "viewport", }, @@ -3296,7 +3298,7 @@ describe("IcDataTable with truncation", () => { cy.compareSnapshot({ name: "text-wrap-tooltip-truncation-rows", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.055), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.05), cypressScreenshotOptions: { capture: "viewport", }, @@ -3318,7 +3320,7 @@ describe("IcDataTable with truncation", () => { cy.compareSnapshot({ name: "text-wrap-show-hide-truncation-rows", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.043), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.04), cypressScreenshotOptions: { capture: "viewport", }, @@ -3342,7 +3344,7 @@ describe("IcDataTable with truncation", () => { cy.compareSnapshot({ name: "text-wrap-tooltip-truncation-table-cell", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.039), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.037), cypressScreenshotOptions: { capture: "viewport", }, @@ -3364,7 +3366,7 @@ describe("IcDataTable with truncation", () => { cy.compareSnapshot({ name: "text-wrap-show-hide-truncation-table-cell", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.042), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.04), cypressScreenshotOptions: { capture: "viewport", }, @@ -3401,6 +3403,7 @@ describe("IcDataTable table sizing and column width", () => { .should("equal", 200); }); }); + it("should set the column width to the correct % when table width is 100%", () => { mount( { .should("equal", 256); }); }); + it("should set the column width to the correct rem when table width is 100%", () => { mount( { .should("equal", 200); }); }); + it("should set the column width to the correct % when table width is 500px", () => { mount( { .should("equal", 125); }); }); + it("should set the column width to the correct rem when table width is 500px", () => { mount( { .should("equal", 100); }); }); + it("should set 2 column width to the correct % when table width is 100%", () => { mount( { .should("equal", 102.390625); }); }); + it("should set 2 column width to the correct rem when table width is 100%", () => { mount( { .should("equal", 100); }); }); + it("should set 2 column width to the correct % when table width is 500px", () => { mount( { .should("equal", 50); }); }); + it("should set 2 column width to the correct rem when table width is 500px", () => { mount( { .find(".table-cell:nth-child(2) ic-tooltip") .should("exist"); }); + it("should display show-hide truncation on truncation column set with px", () => { mount( { .find(".table-cell:nth-child(2) ic-tooltip") .should("exist"); }); + it("should display show-hide truncation on column when first column width set with px and table width set to 500px", () => { mount( { .find("button") .should("have.text", "See more"); }); + it("should set column width to correct px when data table includes pagination and navigating to different pages", () => { const nextData = (rows: number) => { const newData: { firstName: string; lastName: string; age: number }[] = @@ -4318,7 +4331,7 @@ describe("IcDataTable row deletion", () => { cy.compareSnapshot({ name: "slotted-custom-element-in-cell", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.064), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.042), cypressScreenshotOptions: { capture: "viewport", }, @@ -4376,7 +4389,7 @@ describe("IcDataTable row deletion", () => { cy.compareSnapshot({ name: "tooltip-in-final-row", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.041), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.042), cypressScreenshotOptions: { capture: "viewport", }, @@ -4417,7 +4430,7 @@ describe("IcDataTable row deletion", () => { cy.compareSnapshot({ name: "icons-only-in-some-rows", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.038), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.041), cypressScreenshotOptions: { capture: "viewport", }, @@ -4445,7 +4458,7 @@ describe("IcDataTable row selection", () => { cy.compareSnapshot({ name: "selected-row-highlight", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.044), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.041), cypressScreenshotOptions: { capture: "viewport", }, @@ -4461,7 +4474,7 @@ describe("IcDataTable row selection", () => { cy.compareSnapshot({ name: "selected-row-highlight-turned-off", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.044), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.043), cypressScreenshotOptions: { capture: "viewport", }, @@ -4524,7 +4537,7 @@ describe("IcDataTable visual regression tests in high contrast mode", () => { cy.compareSnapshot({ name: "default-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.033), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.056), cypressScreenshotOptions: { capture: "viewport", }, @@ -4545,7 +4558,7 @@ describe("IcDataTable visual regression tests in high contrast mode", () => { cy.compareSnapshot({ name: "with-title-bar-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.05), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.065), cypressScreenshotOptions: { capture: "viewport", }, @@ -4562,7 +4575,7 @@ describe("IcDataTable visual regression tests in high contrast mode", () => { cy.compareSnapshot({ name: "custom-icons-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.024), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.048), cypressScreenshotOptions: { capture: "viewport", }, @@ -4579,7 +4592,7 @@ describe("IcDataTable visual regression tests in high contrast mode", () => { cy.compareSnapshot({ name: "highlighted-row-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.033), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.056), cypressScreenshotOptions: { capture: "viewport", }, @@ -4614,7 +4627,7 @@ describe("IcDataTable visual regression tests in high contrast mode", () => { cy.compareSnapshot({ name: "loading-indicator-background-high-contrast", - testThreshold: setThresholdBasedOnEnv(0.026), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.006), cypressScreenshotOptions: { capture: "viewport", }, @@ -4632,7 +4645,7 @@ describe("IcDataTable visual regression tests in high contrast mode", () => { cy.compareSnapshot({ name: "no-data-high-contrast", - testThreshold: setThresholdBasedOnEnv(0.026), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.006), }); }); @@ -4652,7 +4665,7 @@ describe("IcDataTable visual regression tests in high contrast mode", () => { cy.compareSnapshot({ name: "show-hide-truncation-dense-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.042), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.055), cypressScreenshotOptions: { capture: "viewport", }, @@ -4684,7 +4697,7 @@ describe("IcDataTable visual regression tests in high contrast mode", () => { cy.compareSnapshot({ name: "tooltip-truncation-spacious-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.022), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.046), }); }); @@ -4710,7 +4723,7 @@ describe("IcDataTable visual regression tests in high contrast mode", () => { cy.compareSnapshot({ name: "show-hide-truncation-focus-hover-state-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.031), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.054), cypressScreenshotOptions: { capture: "viewport", }, @@ -4734,7 +4747,7 @@ describe("IcDataTable visual regression tests in high contrast mode", () => { cy.checkHydrated(DATA_TABLE_SELECTOR); cy.compareSnapshot({ name: "slotted-icon-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.024), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.047), cypressScreenshotOptions: { capture: "viewport", }, @@ -4747,7 +4760,7 @@ describe("IcDataTable visual regression tests in high contrast mode", () => { cy.wait(300).compareSnapshot({ name: "sortable-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.033), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.056), cypressScreenshotOptions: { capture: "viewport", }, @@ -4768,7 +4781,7 @@ describe("IcDataTable visual regression tests in high contrast mode", () => { cy.compareSnapshot({ name: "row-overrides-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.042), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.062), cypressScreenshotOptions: { capture: "viewport", }, @@ -4818,7 +4831,7 @@ describe("IcDataTable visual regression tests in high contrast mode", () => { cy.compareSnapshot({ name: "slotted-custom-element-in-cell-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.038), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.054), cypressScreenshotOptions: { capture: "viewport", }, @@ -4844,6 +4857,56 @@ describe("Dark mode", () => { cy.viewport(1024, 768); }); + afterEach(() => { + cy.task("generateReport"); + }); + + it("should render a custom title bar in dark mode", () => { + mount( + + + Primary + + + + + + + + + + +

+ This is some text and{" "} + + this is an inline link + {" "} + within the text. +

+
+
+
+ ); + + // cy.checkA11yWithWait(); + cy.compareSnapshot({ + name: "dark-mode-title-bar", + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.052), + cypressScreenshotOptions: { + capture: "viewport", + }, + }); + }); + it("should render rows, columns and cells in dark mode", () => { mount(); @@ -4852,7 +4915,7 @@ describe("Dark mode", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "dark-mode-default", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.044), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.046), cypressScreenshotOptions: { capture: "viewport", }, @@ -4889,7 +4952,7 @@ describe("Dark mode", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "dark-mode-row-headers", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.044), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.051), cypressScreenshotOptions: { capture: "viewport", }, @@ -4912,7 +4975,7 @@ describe("Dark mode", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "dark-mode-sortable", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.044), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.047), cypressScreenshotOptions: { capture: "viewport", }, @@ -4944,7 +5007,7 @@ describe("Dark mode", () => { // cy.checkA11yWithWait(); cy.compareSnapshot({ name: "dark-mode-pagination", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.044), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.048), cypressScreenshotOptions: { capture: "viewport", }, @@ -4966,7 +5029,7 @@ describe("Dark mode", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "dark-mode-emphasis", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.044), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.042), cypressScreenshotOptions: { capture: "viewport", }, @@ -4992,7 +5055,7 @@ describe("Dark mode", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "dark-mode-empty-state", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.044), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.008), cypressScreenshotOptions: { capture: "viewport", }, @@ -5016,7 +5079,7 @@ describe("Dark mode", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "dark-mode-loading", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.044), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.002), cypressScreenshotOptions: { capture: "viewport", }, @@ -5069,52 +5132,4 @@ describe("Dark mode", () => { }, }); }); - - it("should render a custom title bar in dark mode", () => { - mount( -
- - - Primary - - - - - - - - - - -

- This is some text and{" "} - - this is an inline link - {" "} - within the text. -

-
-
-
-
- ); - - // cy.checkA11yWithWait(); - cy.compareSnapshot({ - name: "dark-mode-title-bar", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.044), - cypressScreenshotOptions: { - capture: "viewport", - }, - }); - }); }); diff --git a/packages/canary-react/src/component-tests/IcDataTableTitleBar/IcDataTableTitleBar.cy.tsx b/packages/canary-react/src/component-tests/IcDataTableTitleBar/IcDataTableTitleBar.cy.tsx index 1508ebef35..c013947210 100644 --- a/packages/canary-react/src/component-tests/IcDataTableTitleBar/IcDataTableTitleBar.cy.tsx +++ b/packages/canary-react/src/component-tests/IcDataTableTitleBar/IcDataTableTitleBar.cy.tsx @@ -9,7 +9,7 @@ import { IcLink, IcTypography } from "@ukic/react"; import { HAVE_LENGTH } from "@ukic/react/src/component-tests/utils/constants"; const TITLE_BAR = "ic-data-table-title-bar"; -const DEFAULT_THRESHOLD = 0.04; +const DEFAULT_THRESHOLD = 0.014; describe("IcDataTableTitleBar", () => { beforeEach(() => { @@ -72,7 +72,7 @@ describe("IcDataTableTitleBar", () => { cy.compareSnapshot({ name: "slotted-header-and-description", - testThreshold: setThresholdBasedOnEnv(0), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.002), }); }); @@ -91,7 +91,7 @@ describe("IcDataTableTitleBar", () => { cy.compareSnapshot({ name: "metadata-and-description", - testThreshold: setThresholdBasedOnEnv(0), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.005), }); }); }); @@ -122,7 +122,7 @@ describe("IcDataTableTitleBar visual regression tests in high contrast mode", () cy.compareSnapshot({ name: "default-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.003), }); }); @@ -143,7 +143,7 @@ describe("IcDataTableTitleBar visual regression tests in high contrast mode", () cy.compareSnapshot({ name: "slotted-header-and-description-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.016), }); }); @@ -160,7 +160,7 @@ describe("IcDataTableTitleBar visual regression tests in high contrast mode", () cy.compareSnapshot({ name: "metadata-and-description-high-contrast", - testThreshold: setThresholdBasedOnEnv(0), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.025), }); }); }); diff --git a/packages/canary-react/src/component-tests/IcDateInput/IcDateInput.cy.tsx b/packages/canary-react/src/component-tests/IcDateInput/IcDateInput.cy.tsx index ae5d7dcaf8..8f0a82d748 100644 --- a/packages/canary-react/src/component-tests/IcDateInput/IcDateInput.cy.tsx +++ b/packages/canary-react/src/component-tests/IcDateInput/IcDateInput.cy.tsx @@ -32,7 +32,7 @@ const LONG_CUSTOM_DISABLE_DAY_MESSAGE = "This is a very long message to test the validation message"; const STATUS_TEXT_SPAN = ".statustext"; const DEFAULT_HELPER_TEXT = "Use format DD/MM/YYYY"; -const DEFAULT_THRESHOLD = 0.04; +const DEFAULT_THRESHOLD = 0.031; describe("IcDateInput end-to-end, visual regression and a11y tests", () => { beforeEach(() => { @@ -61,7 +61,7 @@ describe("IcDateInput end-to-end, visual regression and a11y tests", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "date-input-render", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.004), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD), cypressScreenshotOptions: { capture: "viewport", }, @@ -80,7 +80,7 @@ describe("IcDateInput end-to-end, visual regression and a11y tests", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "date-input-dark-mode", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.006), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.011), cypressScreenshotOptions: { capture: "viewport", }, @@ -335,7 +335,7 @@ describe("IcDateInput end-to-end, visual regression and a11y tests", () => { cy.checkA11yWithWait(undefined, 500); cy.compareSnapshot({ name: "date-input-with-values", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.01), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.004), delay: 500, cypressScreenshotOptions: { capture: "viewport", @@ -390,7 +390,7 @@ describe("IcDateInput end-to-end, visual regression and a11y tests", () => { cy.checkA11yWithWait(undefined, 500); cy.compareSnapshot({ name: "date-input-with-min-validation", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.025), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.022), delay: 500, cypressScreenshotOptions: { capture: "viewport", @@ -419,7 +419,7 @@ describe("IcDateInput end-to-end, visual regression and a11y tests", () => { cy.checkA11yWithWait(undefined, 500); cy.compareSnapshot({ name: "date-input-with-max-validation", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.025), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.023), delay: 500, cypressScreenshotOptions: { capture: "viewport", @@ -464,7 +464,7 @@ describe("IcDateInput end-to-end, visual regression and a11y tests", () => { cy.checkA11yWithWait(undefined, 500); cy.compareSnapshot({ name: "date-input-with-custom-invalid-date-message", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.018), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.013), delay: 500, cypressScreenshotOptions: { capture: "viewport", @@ -497,7 +497,7 @@ describe("IcDateInput end-to-end, visual regression and a11y tests", () => { cy.checkA11yWithWait(undefined, 500); cy.compareSnapshot({ name: "date-input-with-custom-disable-days-message", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.02), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.013), delay: 500, cypressScreenshotOptions: { capture: "viewport", @@ -525,7 +525,7 @@ describe("IcDateInput end-to-end, visual regression and a11y tests", () => { cy.checkA11yWithWait(undefined, 500); cy.compareSnapshot({ name: "date-input-with-long-custom-disable-days-message", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.037), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.036), delay: 500, cypressScreenshotOptions: { capture: "viewport", @@ -558,7 +558,7 @@ describe("IcDateInput end-to-end, visual regression and a11y tests", () => { cy.checkA11yWithWait(undefined, 500); cy.compareSnapshot({ name: "date-input-with-custom-disable-future-message", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.016), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.013), delay: 500, cypressScreenshotOptions: { capture: "viewport", @@ -586,7 +586,7 @@ describe("IcDateInput end-to-end, visual regression and a11y tests", () => { cy.checkA11yWithWait(undefined, 500); cy.compareSnapshot({ name: "date-input-with-long-custom-disable-future-message", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.037), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.036), delay: 500, cypressScreenshotOptions: { capture: "viewport", @@ -619,7 +619,7 @@ describe("IcDateInput end-to-end, visual regression and a11y tests", () => { cy.checkA11yWithWait(undefined, 500); cy.compareSnapshot({ name: "date-input-with-custom-disable-past-message", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.016), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.014), delay: 500, cypressScreenshotOptions: { capture: "viewport", @@ -647,7 +647,7 @@ describe("IcDateInput end-to-end, visual regression and a11y tests", () => { cy.checkA11yWithWait(undefined, 500); cy.compareSnapshot({ name: "date-input-with-long-custom-disable-past-message", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.037), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.036), delay: 500, cypressScreenshotOptions: { capture: "viewport", @@ -737,7 +737,7 @@ describe("IcDateInput end-to-end, visual regression and a11y tests", () => { cy.checkA11yWithWait(undefined, 500); cy.compareSnapshot({ name: "date-input-with-error-validation", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.008), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.004), delay: 500, cypressScreenshotOptions: { capture: "viewport", @@ -761,7 +761,7 @@ describe("IcDateInput end-to-end, visual regression and a11y tests", () => { cy.checkA11yWithWait(undefined, 500); cy.compareSnapshot({ name: "date-input-with-warning-validation", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.015), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.007), delay: 500, cypressScreenshotOptions: { capture: "viewport", @@ -785,7 +785,7 @@ describe("IcDateInput end-to-end, visual regression and a11y tests", () => { cy.checkA11yWithWait(undefined, 500); cy.compareSnapshot({ name: "date-input-with-success-validation", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.0085), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.005), delay: 500, cypressScreenshotOptions: { capture: "viewport", @@ -822,7 +822,7 @@ describe("IcDateInput end-to-end, visual regression and a11y tests", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "date-input-validation-dark-mode", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.046), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.048), cypressScreenshotOptions: { capture: "viewport", }, @@ -948,7 +948,7 @@ describe("IcDateInput visual regression tests in high contrast mode", () => { cy.compareSnapshot({ name: "date-input-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.006), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.013), cypressScreenshotOptions: { capture: "viewport", }, @@ -979,7 +979,7 @@ describe("IcDateInput visual regression tests in high contrast mode", () => { cy.wait(500).compareSnapshot({ name: "date-input-with-custom-disable-days-message-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.013), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.022), delay: 500, cypressScreenshotOptions: { capture: "viewport", @@ -994,7 +994,7 @@ describe("IcDateInput visual regression tests in high contrast mode", () => { cy.wait(500).compareSnapshot({ name: "date-input-with-validation-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.102), + testThreshold: setThresholdBasedOnEnv(DEFAULT_THRESHOLD + 0.114), delay: 500, cypressScreenshotOptions: { capture: "viewport", diff --git a/packages/canary-react/src/component-tests/IcDatePicker/IcDatePicker.cy.tsx b/packages/canary-react/src/component-tests/IcDatePicker/IcDatePicker.cy.tsx index 33a885abac..444ae05279 100644 --- a/packages/canary-react/src/component-tests/IcDatePicker/IcDatePicker.cy.tsx +++ b/packages/canary-react/src/component-tests/IcDatePicker/IcDatePicker.cy.tsx @@ -61,7 +61,7 @@ const END_KEY = "{End}"; const PAGE_UP_KEY = "{PageUp}"; const PAGE_DOWN_KEY = "{PageDown}"; -const DEFAULT_TEST_THRESHOLD = 0.038; +const DEFAULT_TEST_THRESHOLD = 0.018; const SCREENSHOT_DELAY = 500; const checkDateInputValue = (date: Date | null) => { @@ -127,7 +127,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "default", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.03), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.037), }); }); @@ -154,7 +154,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "default-dark-mode", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.03), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.037), }); }); @@ -178,7 +178,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "default-max-width", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.031), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.038), }); }); @@ -197,7 +197,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "default-month-view", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.034), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.035), }); }); @@ -225,7 +225,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "default-month-view-dark-mode", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.034), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.022), }); }); @@ -250,7 +250,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "default-max-width-month-view", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.034), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.036), }); }); @@ -268,7 +268,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.checkA11yWithWait(undefined, SCREENSHOT_DELAY); cy.compareSnapshot({ name: "default-year-view", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.024), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.029), }); }); @@ -296,7 +296,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "default-year-view-dark-mode", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.024), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.022), }); }); @@ -320,7 +320,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.checkA11yWithWait(undefined, SCREENSHOT_DELAY); cy.compareSnapshot({ name: "default-max-width-year-view", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.024), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.029), }); }); @@ -340,7 +340,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "small", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.031), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.035), }); }); @@ -365,7 +365,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "small-max-width", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.031), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.035), }); }); @@ -387,7 +387,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "small-month-view", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.034), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.035), }); }); @@ -414,7 +414,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "small-max-width-month-view", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.034), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.036), }); }); @@ -436,7 +436,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "small-year-view", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.024), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.029), }); }); @@ -463,7 +463,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "small-max-width-year-view", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.025), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.029), }); }); @@ -483,7 +483,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "large", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.032), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.053), }); }); @@ -508,7 +508,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "large-max-width", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.032), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.056), }); }); @@ -579,7 +579,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "large-year-view", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.026), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.03), }); }); @@ -606,7 +606,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "large-max-width-year-view", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.026), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.03), }); }); @@ -628,7 +628,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.wait(SCREENSHOT_DELAY).compareSnapshot({ name: "goto-today-hidden", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.027), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.034), }); }); @@ -650,7 +650,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.wait(SCREENSHOT_DELAY).compareSnapshot({ name: "clear-hidden", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.028), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.035), }); }); @@ -1123,7 +1123,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "escape-to-close", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.002), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.012), }); }); @@ -1139,7 +1139,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "escape-pressed-in-input", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.002), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.009), }); }); @@ -1232,7 +1232,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "click-to-close", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.002), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.012), }); }); @@ -2327,7 +2327,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.wait(SCREENSHOT_DELAY).compareSnapshot({ name: "open-at-date", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.029), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.035), }); cy.findShadowEl(DATE_PICKER, FOCUSSED_DAY_BTN_CLASS) @@ -2390,7 +2390,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "disabled", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.002), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD), }); // check input becomes enabled when prop changed @@ -2450,7 +2450,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.wait(SCREENSHOT_DELAY).compareSnapshot({ name: "disable-weekends", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.026), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.033), }); }); @@ -2670,7 +2670,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.wait(SCREENSHOT_DELAY).compareSnapshot({ name: "days-outside-month-hidden", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.026), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.034), }); cy.get(DATE_PICKER) @@ -2678,7 +2678,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { .then(() => { cy.wait(SCREENSHOT_DELAY).compareSnapshot({ name: "start-of-week", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.026), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.046), }); }); }); @@ -2699,7 +2699,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "min-max", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.028), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.034), }); }); @@ -2720,7 +2720,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "min-max-month-view", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.012), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.017), }); }); @@ -2741,7 +2741,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.compareSnapshot({ name: "min-max-year-view", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.009), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.016), }); }); @@ -2791,7 +2791,7 @@ describe("IcDatePicker end-to-end, visual regression and a11y tests", () => { cy.wait(SCREENSHOT_DELAY).compareSnapshot({ name: "position-above", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.016), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.027), }); }); @@ -2851,7 +2851,7 @@ describe("IcDatePicker visual regression tests in high contrast mode", () => { cy.wait(SCREENSHOT_DELAY).compareSnapshot({ name: "default-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.033), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.051), }); }); @@ -2868,7 +2868,7 @@ describe("IcDatePicker visual regression tests in high contrast mode", () => { cy.wait(SCREENSHOT_DELAY).compareSnapshot({ name: "default-month-view-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.04), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.057), }); }); @@ -2878,7 +2878,7 @@ describe("IcDatePicker visual regression tests in high contrast mode", () => { cy.checkHydrated(DATE_PICKER); cy.compareSnapshot({ name: "disabled-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.002), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.02), }); }); @@ -2900,7 +2900,7 @@ describe("IcDatePicker visual regression tests in high contrast mode", () => { cy.wait(SCREENSHOT_DELAY).compareSnapshot({ name: "disable-weekends-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.033), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.049), }); }); @@ -2919,7 +2919,7 @@ describe("IcDatePicker visual regression tests in high contrast mode", () => { cy.wait(SCREENSHOT_DELAY).compareSnapshot({ name: "min-max-month-view-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.028), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.043), }); }); @@ -2938,7 +2938,7 @@ describe("IcDatePicker visual regression tests in high contrast mode", () => { cy.wait(SCREENSHOT_DELAY).compareSnapshot({ name: "calendar-button-focused-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.007), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.029), }); }); }); diff --git a/packages/canary-react/src/component-tests/IcPaginationBar/IcPaginationBar.cy.tsx b/packages/canary-react/src/component-tests/IcPaginationBar/IcPaginationBar.cy.tsx index 0993eb2b78..5831d1365b 100644 --- a/packages/canary-react/src/component-tests/IcPaginationBar/IcPaginationBar.cy.tsx +++ b/packages/canary-react/src/component-tests/IcPaginationBar/IcPaginationBar.cy.tsx @@ -27,7 +27,7 @@ const ARIA_CURRENT = "aria-current"; const ITEM_PAGINATION_LABEL_SELECTOR = ".item-pagination-label"; const TEXT_FIELD = "ic-text-field"; -const DEFAULT_TEST_THRESHOLD = 0.027; +const DEFAULT_TEST_THRESHOLD = 0.022; describe("IcPaginationBar end-to-end tests", () => { beforeEach(() => { @@ -596,7 +596,7 @@ describe("IcPaginationBar visual regression and a11y tests", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "right-alignment", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.001), }); }); @@ -634,7 +634,7 @@ describe("IcPaginationBar visual regression and a11y tests", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "go-to-page", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.02), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.004), }); }); @@ -651,7 +651,7 @@ describe("IcPaginationBar visual regression and a11y tests", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "go-to-page-valid", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.004), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.005), }); }); @@ -676,7 +676,7 @@ describe("IcPaginationBar visual regression and a11y tests", () => { cy.compareSnapshot({ name: "go-to-page-invalid-tooltip", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.01), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.012), }); }); @@ -690,7 +690,7 @@ describe("IcPaginationBar visual regression and a11y tests", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "hide-all-option", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.003), }); }); }); @@ -719,7 +719,7 @@ describe("IcPaginationBar visual regression tests in high contrast mode", () => cy.compareSnapshot({ name: "go-to-page-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.003), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.006), }); }); @@ -744,7 +744,7 @@ describe("IcPaginationBar visual regression tests in high contrast mode", () => cy.compareSnapshot({ name: "go-to-page-invalid-tooltip-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.009), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.015), }); }); }); diff --git a/packages/canary-react/src/component-tests/IcTreeView/IcTreeView.cy.tsx b/packages/canary-react/src/component-tests/IcTreeView/IcTreeView.cy.tsx index 3eb480fe2c..68dde265c2 100644 --- a/packages/canary-react/src/component-tests/IcTreeView/IcTreeView.cy.tsx +++ b/packages/canary-react/src/component-tests/IcTreeView/IcTreeView.cy.tsx @@ -16,7 +16,7 @@ const TREE_VIEW = "ic-tree-view"; const TREE_ITEM = "ic-tree-item"; const TREE_ITEM_CONTENT = ".tree-item-content"; -const DEFAULT_TEST_THRESHOLD = 0.026; +const DEFAULT_TEST_THRESHOLD = 0.025; export const BasicTreeView = ( props?: any, @@ -67,7 +67,7 @@ describe("IcTreeView", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "default", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.01), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.007), }); }); @@ -109,7 +109,7 @@ describe("IcTreeView", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "small", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.01), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.007), }); }); @@ -121,7 +121,7 @@ describe("IcTreeView", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "large", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.01), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.007), }); }); @@ -133,7 +133,7 @@ describe("IcTreeView", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "theme-dark", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.015), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.008), }); }); @@ -144,10 +144,10 @@ describe("IcTreeView", () => { cy.findShadowEl(TREE_ITEM, TREE_ITEM_CONTENT).eq(1).focus(); - cy.checkA11yWithWait(); + cy.checkA11yWithWait(undefined, 500); cy.compareSnapshot({ name: "focus-inset", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.09), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.007), }); }); @@ -159,7 +159,7 @@ describe("IcTreeView", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "disabled-tree-item", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.006), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.003), }); }); @@ -171,7 +171,7 @@ describe("IcTreeView", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "selected-tree-item", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.01), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.006), }); }); @@ -183,7 +183,7 @@ describe("IcTreeView", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "link-tree-item", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.01), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.007), }); }); @@ -192,10 +192,10 @@ describe("IcTreeView", () => { cy.findShadowEl(TREE_ITEM, TREE_ITEM_CONTENT).eq(1).click(); - cy.checkA11yWithWait(); + cy.checkA11yWithWait(undefined, 500); cy.compareSnapshot({ name: "expanded-tree-item", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.016), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.012), }); }); @@ -222,10 +222,10 @@ describe("IcTreeView", () => { cy.findShadowEl(TREE_ITEM, TREE_ITEM_CONTENT).eq(2).click(); - cy.checkA11yWithWait(); + cy.checkA11yWithWait(undefined, 500); cy.compareSnapshot({ name: "text-wrapping", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.01), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.034), }); }); @@ -271,10 +271,10 @@ describe("IcTreeView", () => { .eq(2) .should(HAVE_CSS, TEXT_OVERFLOW, ELLIPSIS); - cy.checkA11yWithWait(); + cy.checkA11yWithWait(undefined, 500); cy.compareSnapshot({ name: "truncated-text", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.032), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.023), }); cy.findShadowEl(TREE_ITEM, TREE_ITEM_CONTENT).eq(0).realHover("mouse"); @@ -282,7 +282,7 @@ describe("IcTreeView", () => { cy.checkA11yWithWait(); cy.compareSnapshot({ name: "truncated-text-hover", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.036), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.037), }); }); @@ -446,7 +446,7 @@ describe("IcTreeView visual regression tests in high contrast mode", () => { cy.compareSnapshot({ name: "default-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.015), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.011), }); }); @@ -457,7 +457,7 @@ describe("IcTreeView visual regression tests in high contrast mode", () => { cy.compareSnapshot({ name: "disabled-tree-item-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.015), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.009), }); }); @@ -468,7 +468,7 @@ describe("IcTreeView visual regression tests in high contrast mode", () => { cy.compareSnapshot({ name: "expanded-tree-item-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.022), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.017), }); }); @@ -479,7 +479,7 @@ describe("IcTreeView visual regression tests in high contrast mode", () => { cy.compareSnapshot({ name: "selected-tree-item-high-contrast", - testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.018), + testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.01), }); }); @@ -506,9 +506,6 @@ describe("IcTreeView visual regression tests in high contrast mode", () => { ); - /* removed for now - unsure why this fails at present - * if only HC tests are run then this test passes */ - // cy.checkA11yWithWait(); cy.compareSnapshot({ name: "with-icons-high-contrast", testThreshold: setThresholdBasedOnEnv(DEFAULT_TEST_THRESHOLD + 0.014),