diff --git a/package.json b/package.json index 68a1e3c721..44f82781b9 100644 --- a/package.json +++ b/package.json @@ -110,7 +110,7 @@ "prepublishOnly": "npm run build && npm pkg delete engines", "playwright:install": "playwright install chromium webkit --with-deps", "playwright": "playwright test --config=playwright/playwright.config.ts", - "playwright:update": "npm run playwright -- -u", + "playwright:update": "npm run playwright -- -u --grep Select", "playwright:clear-cache": "rm -rf ./playwright/.cache", "playwright:docker": "./scripts/playwright-docker.sh 'npm run playwright'", "playwright:docker:update": "./scripts/playwright-docker.sh 'npm run playwright:update'", diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-empty-trigger-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-empty-trigger-light-chromium-linux.png new file mode 100644 index 0000000000..fa2e1d53d9 Binary files /dev/null and b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-empty-trigger-light-chromium-linux.png differ diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-default-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-default-light-chromium-linux.png new file mode 100644 index 0000000000..be562f74c6 Binary files /dev/null and b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-default-light-chromium-linux.png differ diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-auto-end-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-auto-end-light-chromium-linux.png new file mode 100644 index 0000000000..a2cbc28541 Binary files /dev/null and b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-auto-end-light-chromium-linux.png differ diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-auto-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-auto-light-chromium-linux.png new file mode 100644 index 0000000000..13886253e6 Binary files /dev/null and b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-auto-light-chromium-linux.png differ diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-auto-start-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-auto-start-light-chromium-linux.png new file mode 100644 index 0000000000..0f003af42c Binary files /dev/null and b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-auto-start-light-chromium-linux.png differ diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-bottom-end-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-bottom-end-light-chromium-linux.png new file mode 100644 index 0000000000..f0d910de66 Binary files /dev/null and b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-bottom-end-light-chromium-linux.png differ diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-bottom-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-bottom-light-chromium-linux.png new file mode 100644 index 0000000000..38d8107be9 Binary files /dev/null and b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-bottom-light-chromium-linux.png differ diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-bottom-start-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-bottom-start-light-chromium-linux.png new file mode 100644 index 0000000000..4997dbd2df Binary files /dev/null and b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-bottom-start-light-chromium-linux.png differ diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-left-end-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-left-end-light-chromium-linux.png new file mode 100644 index 0000000000..b998baed4c Binary files /dev/null and b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-left-end-light-chromium-linux.png differ diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-left-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-left-light-chromium-linux.png new file mode 100644 index 0000000000..f6feee8dcf Binary files /dev/null and b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-left-light-chromium-linux.png differ diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-left-start-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-left-start-light-chromium-linux.png new file mode 100644 index 0000000000..a838ae9c23 Binary files /dev/null and b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-left-start-light-chromium-linux.png differ diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-right-end-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-right-end-light-chromium-linux.png new file mode 100644 index 0000000000..9da2f8ec5b Binary files /dev/null and b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-right-end-light-chromium-linux.png differ diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-right-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-right-light-chromium-linux.png new file mode 100644 index 0000000000..18bb34fabf Binary files /dev/null and b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-right-light-chromium-linux.png differ diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-right-start-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-right-start-light-chromium-linux.png new file mode 100644 index 0000000000..f2a0097481 Binary files /dev/null and b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-right-start-light-chromium-linux.png differ diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-top-end-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-top-end-light-chromium-linux.png new file mode 100644 index 0000000000..51eb4f6c41 Binary files /dev/null and b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-top-end-light-chromium-linux.png differ diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-top-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-top-light-chromium-linux.png new file mode 100644 index 0000000000..13886253e6 Binary files /dev/null and b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-top-light-chromium-linux.png differ diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-top-start-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-top-start-light-chromium-linux.png new file mode 100644 index 0000000000..45ad2ae571 Binary files /dev/null and b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupPlacement-top-start-light-chromium-linux.png differ diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupWidth-200-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupWidth-200-light-chromium-linux.png new file mode 100644 index 0000000000..529b894d7c Binary files /dev/null and b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupWidth-200-light-chromium-linux.png differ diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupWidth-fit-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupWidth-fit-light-chromium-linux.png new file mode 100644 index 0000000000..046f270d3b Binary files /dev/null and b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-popup-placement-popupWidth-fit-light-chromium-linux.png differ diff --git a/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-trigger-with-value-light-chromium-linux.png b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-trigger-with-value-light-chromium-linux.png new file mode 100644 index 0000000000..b66a3f84b2 Binary files /dev/null and b/src/components/Select/__snapshots__/Select.visual.test.tsx-snapshots/Select-smoke-trigger-with-value-light-chromium-linux.png differ diff --git a/src/components/Select/__tests__/Select.visual.test.tsx b/src/components/Select/__tests__/Select.visual.test.tsx new file mode 100644 index 0000000000..ebefe77891 --- /dev/null +++ b/src/components/Select/__tests__/Select.visual.test.tsx @@ -0,0 +1,299 @@ +import { smokeTest, test } from "~playwright/core"; + +import { createSmokeScenarios } from "../../../stories/tests-factory/create-smoke-scenarios"; +import { Select } from "../Select"; +import type { SelectProps } from "../types"; + +import { + hasClearCases, + labelCases, + pinCases, + popupPlacementCases, + popupWidthCases, + sizeCases, + validationStateCases, + viewCases, + widthCases +} from "./cases"; +import { getSelectOptionTestQA, SelectTestQA } from "./constants"; +import { SelectQa } from "../constants"; +import { expect } from "@playwright/experimental-ct-react"; + +test.describe("Select", { tag: "@Select" }, () => { + smokeTest("trigger with value", async ({ mount, expectScreenshot }) => { + const smokeScenarios = createSmokeScenarios>({ + value: ["val1"], + qa: SelectTestQA.trigger + }, { + size: sizeCases, + view: viewCases, + pin: pinCases, + width: widthCases, + validationState: validationStateCases, + label: labelCases, + hasClear: hasClearCases + }); + + await mount( +
+ {smokeScenarios.map(([title, props]) => ( +
+

{title}

+
+ +
+
+ ))} +
+ ); + + await expectScreenshot({ + themes: ["light"] + }); + }); + + smokeTest("empty trigger", async ({ mount, expectScreenshot }) => { + const smokeScenarios = createSmokeScenarios>({ + qa: SelectTestQA.trigger, + placeholder: "Placeholder" + }, { + size: sizeCases, + view: viewCases, + pin: pinCases, + width: widthCases, + validationState: validationStateCases, + label: labelCases, + hasClear: hasClearCases, + placeholder: [["without", undefined]] + }); + + await mount( +
+ {smokeScenarios.map(([title, props]) => ( +
+

{title}

+
+ +
+
+ ))} +
+ ); + + await expectScreenshot({ + themes: ["light"] + }); + }); + + createSmokeScenarios>( + { + value: ['val1'], + width: 200, + qa: SelectTestQA.trigger, + popupWidth: 100, + }, + { + popupPlacement: popupPlacementCases, + popupWidth: popupWidthCases, + }, + { + scenarioName: "popup placement" + } + ).forEach(([title, props]) => { + smokeTest(title, async ({ mount, page, expectScreenshot }) => { + await page.setViewportSize({ width: 600, height: 600 }); + + const root = await mount( +
+
+

{title}

+
+ +
+ ); + + await root.getByTestId(SelectTestQA.trigger).click(); + // await expect(page.getByTestId(SelectQa.LIST)).toBeVisible(); + + await expectScreenshot({ + themes: ["light"], + component: page, + }); + }); + }); + + /* + // save errorr + createSmokeScenarios>( + { + ...defaultProps, + errorMessage: "Error message", + validationState: "invalid" + }, + { + errorPlacement: errorPlacementCases + }, + { + scenarioName: "error state" + } + ).forEach(([title, props]) => { + smokeTest(title, async ({ mount, page, expectScreenshot }) => { + await page.setViewportSize({ width: 500, height: 500 }); + + await mount( + + ); + + await expectScreenshot({ + themes: ["light"] + }); + }); + }); + + // kekw + createSmokeScenarios>( + { + value: ["val1", "val5"], + qa: SelectTestQA.trigger, + multiple: true + }, + { + hasCounter: hasCounterCases, + validationState: validationStateCases + }, + { + scenarioName: "multiple" + } + ).forEach(([title, props]) => { + smokeTest(title, async ({ mount, page, expectScreenshot }) => { + await page.setViewportSize({ width: 500, height: 500 }); + + const root = await mount( +
+ +
+ ); + + await expectScreenshot({ + themes: ["light"] + }); + + await root.getByTestId(SelectTestQA.trigger).click(); + + await expectScreenshot({ + themes: ["light"], + component: page, + nameSuffix: "after click on trigger" + }); + }); + }); + + createSmokeScenarios( + defaultProps, + { + filterPlaceholder: filterPlaceholderCases + }, + { + scenarioName: "with filter" + } + ).forEach(([title, props]) => { + smokeTest(title, async ({ mount, page, expectScreenshot }) => { + await page.setViewportSize({ width: 500, height: 500 }); + + const root = await mount(); + + await root.getByTestId(SelectTestQA.trigger).click(); + + await expectScreenshot({ + themes: ["light"], + component: page + }); + }); + }); + +*/ + +}); diff --git a/src/components/Select/__tests__/cases.tsx b/src/components/Select/__tests__/cases.tsx new file mode 100644 index 0000000000..4c2ac3fb08 --- /dev/null +++ b/src/components/Select/__tests__/cases.tsx @@ -0,0 +1,57 @@ +import type {Cases} from '../../../stories/tests-factory/models'; +import type {SelectProps} from '../types'; + +export const sizeCases: Cases['size']> = ['s', 'm', 'l', 'xl']; + +export const viewCases: Cases['view']> = ['normal', 'clear']; + +export const pinCases: Cases['pin']> = [ + 'round-round', + 'brick-brick', + 'clear-clear', + 'round-brick', + 'brick-round', + 'round-clear', + 'clear-round', + 'brick-clear', + 'clear-brick', +]; + +export const widthCases: Cases['width']> = ['auto', 'max', 200]; + +export const labelCases: Cases['label']> = ['Test label']; + +export const hasClearCases: Cases['hasClear']> = [true]; + +export const errorPlacementCases: Cases['errorPlacement']> = [ + 'outside', + 'inside', +]; + +export const popupWidthCases: Cases['popupWidth']> = ['fit', 200]; + +export const popupPlacementCases: Cases['popupPlacement']> = [ + 'auto', + 'auto-start', + 'auto-end', + 'top', + 'bottom', + 'right', + 'left', + 'top-start', + 'top-end', + 'bottom-start', + 'bottom-end', + 'right-start', + 'right-end', + 'left-start', + 'left-end', +]; + +export const validationStateCases: Cases['validationState']> = ['invalid']; + +export const hasCounterCases: Cases['hasCounter']> = [true]; + +export const filterPlaceholderCases: Cases['filterPlaceholder']> = [ + 'Filter placeholder', +]; diff --git a/src/components/Select/__tests__/constants.ts b/src/components/Select/__tests__/constants.ts new file mode 100644 index 0000000000..f521dd6e8b --- /dev/null +++ b/src/components/Select/__tests__/constants.ts @@ -0,0 +1,5 @@ +export const SelectTestQA = { + trigger: 'trigger', +}; + +export const getSelectOptionTestQA = (data: number | string) => `select-${data}`; diff --git a/src/components/Select/__tests__/helpers.tsx b/src/components/Select/__tests__/helpers.tsx new file mode 100644 index 0000000000..de70c7dbf2 --- /dev/null +++ b/src/components/Select/__tests__/helpers.tsx @@ -0,0 +1,68 @@ +import * as React from "react"; + +import { Select } from "../Select"; +import { useSelectOptions } from "../hooks-public"; +import type { SelectProps } from "../types"; + +import { getSelectOptionTestQA } from "./constants"; + +export const TestSelectWithFilter = (props: Partial>) => { + const [value, setValue] = React.useState([]); + const [filter, setFilter] = React.useState(''); + const filterable = true; + const options = useSelectOptions({ + options: [ + { + label: 'Group 1', + options: [ + {value: 'val1', content: 'Value 1'}, + {value: 'val2', content: 'Value 2'}, + {value: 'val3', content: 'Value 3'}, + {value: 'val4', content: 'Value 4'}, + ], + }, + { + label: 'Group 2', + options: [ + {value: 'val5', content: 'Value 5'}, + {value: 'val6', content: 'Value 6'}, + {value: 'val7', content: 'Value 7'}, + {value: 'val8', content: 'Value 8'}, + ], + }, + ], + filter, + filterable, + }); + + return ( + + ); +};