diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx b/src/components/ScrollView/__tests__/ScrollView.spec.tsx new file mode 100644 index 000000000..b187c6eb6 --- /dev/null +++ b/src/components/ScrollView/__tests__/ScrollView.spec.tsx @@ -0,0 +1,350 @@ +import React from 'react'; +import { + expect, + test, +} from '@playwright/experimental-ct-react'; +import { + mixPropTests, + propTests, +} from '../../../../tests/playwright'; +import { + ScrollViewForDetectEndAutoscrollTest, + ScrollViewForRefTest, + ScrollViewForTest, +} from './ScrollView.story'; +import { directionPropTest } from './_propTests/directionPropTest'; +import { nextArrowColorPropTest } from './_propTests/nextArrowColorPropTest'; +import { nextArrowElementPropTest } from './_propTests/nextArrowElementPropTest'; +import { prevArrowColorPropTest } from './_propTests/prevArrowColorPropTest'; +import { prevArrowElementPropTest } from './_propTests/prevArrowElementPropTest'; +import { endShadowSizePropTest } from './_propTests/endShadowSizePropTest'; +import { startShadowSizePropTest } from './_propTests/startShadowSizePropTest'; +import { mixArrowsDirectionPropTest } from './_propTests/mixes/mixArrowsDirectionPropTest'; +import { mixEndShadowBackgroundDirectionPropTest } from './_propTests/mixes/mixEndShadowBackgroundDirectionPropTest'; +import { mixStartShadowBackgroundDirectionPropTest } from './_propTests/mixes/mixStartShadowBackgroundDirectionPropTest'; +import { shadowsPropTest } from './_propTests/shadowsPropTest'; +import type { ExtendedWindow } from './types'; + +test.describe('ScrollView', () => { + test.describe('visual', () => { + [ + ...propTests.defaultComponentPropTest, + ...mixArrowsDirectionPropTest, + ...mixEndShadowBackgroundDirectionPropTest, + ...mixPropTests([ + endShadowSizePropTest, + directionPropTest, + ]), + ...nextArrowColorPropTest, + ...nextArrowElementPropTest, + ...prevArrowColorPropTest, + ...prevArrowElementPropTest, + ...shadowsPropTest, + ...mixStartShadowBackgroundDirectionPropTest, + ...mixPropTests([ + startShadowSizePropTest, + directionPropTest, + ]), + ].forEach(({ + name, + onBeforeTest, + onBeforeSnapshot, + props, + }) => { + test(name, async ({ + mount, + page, + }) => { + if (onBeforeTest) { + await onBeforeTest(page); + } + + const component = await mount( + , + ); + + /** + * Because onBeforeSnapshot is not propagated through mixPropTests + */ + if ( + props?.startShadowBackground !== undefined + || props?.startShadowSize !== undefined + ) { + await page.evaluate((id) => { + (window as ExtendedWindow).scrollEnd = false; + const parent = document.getElementById(id); + parent.children[0].addEventListener('scrollend', () => { + (window as ExtendedWindow).scrollEnd = true; + }, { once: true }); + }, 'scrollbar'); + + if (props?.direction === 'horizontal') { + await page.evaluate((id) => { + const parent = document.getElementById(id); + parent.children[0].scrollLeft += 124; + }, 'scrollbar'); + } else { + await page.evaluate((id) => { + const parent = document.getElementById(id); + parent.children[0].scrollTop += 124; + }, 'scrollbar'); + } + + await page.waitForFunction(() => (window as ExtendedWindow).scrollEnd === true); + } + + if (onBeforeSnapshot) { + await onBeforeSnapshot(page, component); + } + + const screenshot = await component.screenshot({ animations: 'disabled' }); + expect(screenshot).toMatchSnapshot(); + }); + }); + }); + + test.describe('non-visual', () => { + test('id', async ({ mount }) => { + const id = 'testId'; + + const component = await mount( + , + ); + + expect(component.locator(`div[id="${id}"]`)).toBeDefined(); + expect(component.locator(`div[id="${id}__content"]`)).toBeDefined(); + expect(component.locator(`div[id="${id}__arrowPrevButton"]`)).toBeDefined(); + expect(component.locator(`div[id="${id}__arrowNextButton"]`)).toBeDefined(); + }); + + test('ref', async ({ mount }) => { + const id = 'testId'; + + const component = await mount( + , + ); + + const refValue = await component.evaluate((_, idArg) => document.getElementById(idArg).firstElementChild.getAttribute('test-ref'), id); + + expect(refValue).toBe('test-ref-value'); + }); + }); + + test.describe('functionality', () => { + test('scroll by arrowScrollStep when click on arrow', async ({ + mount, + page, + }) => { + const id = 'testId'; + + const component = await mount( + , + ); + + const arrow = component.locator(`button[id="${id}__arrowNextButton"]`); + await page.evaluate((idArg) => { + const parent = document.getElementById(idArg); + parent.children[0].setAttribute('style', 'scroll-behavior: unset;'); + }, id); + const scroll = component.locator(`div[id="${id}"] > div:first-child`); + await arrow.click(); + + const atrValue = await scroll.evaluate((element) => element.scrollTop); + + expect(atrValue).toBe(600); + }); + + test('scroll at end when content change and autoScroll is "always"', async ({ + mount, + page, + }) => { + const id = 'testId'; + + const component = await mount( + , + ); + + await page.evaluate((idArg) => { + (window as ExtendedWindow).scrollEnd = false; + const parent = document.getElementById(idArg); + parent.children[0].setAttribute('style', 'scroll-behavior: unset;'); + }, id); + + await page.evaluate((idArg) => { + const parent = document.getElementById(idArg); + parent.children[0].addEventListener('scrollend', () => { + (window as ExtendedWindow).scrollEnd = true; + }); + parent.children[0].textContent += 'content fragment content fragment content fragment'; + }, id); + + await page.waitForFunction(() => (window as ExtendedWindow).scrollEnd === true); + + const scroll = component.locator(`div[id="${id}"] > div:first-child`); + const atrValue = await scroll.evaluate((element) => element.scrollTop); + + expect(atrValue).not.toBe(0); + }); + + test('scroll at end when scrolled down and content change and autoScroll is "detectEnd"', async ({ + mount, + page, + }) => { + const id = 'testId'; + let initialScrollTop = 0; + + await page.exposeFunction('onScrollEnd', (value: number) => { + initialScrollTop = value; + }); + + const component = await mount( + , + ); + + /** + * First need to wait for initial scroll down. + */ + await page.evaluate((idArg) => { + (window as ExtendedWindow).scrollEnd = false; + + const parent = document.getElementById(idArg); + parent.children[0].addEventListener('scrollend', () => { + (window as ExtendedWindow).scrollEnd = true; + (window as ExtendedWindow)?.onScrollEnd(parent.children[0].scrollTop); + }, { once: true }); + }, id); + + await page.waitForFunction(() => (window as ExtendedWindow).scrollEnd === true); + + /** + * Add scroll detect setup. + */ + await page.evaluate((idArg) => { + (window as ExtendedWindow).scrollEnd = false; + const parent = document.getElementById(idArg); + parent.children[0].addEventListener('scrollend', () => { + (window as ExtendedWindow).scrollEnd = true; + }); + }, id); + + const button = component.getByRole('button'); + await button.click(); + + /** + * Wait for scroll down. + */ + await page.waitForFunction(() => (window as ExtendedWindow).scrollEnd === true); + + const scrollTopAfter = await page.evaluate((idArg) => { + const parent = document.getElementById(idArg); + return parent.children[0].scrollTop; + }, id); + + expect(scrollTopAfter).toBeGreaterThan(initialScrollTop); + }); + + test('do not display top arrow after scroll before debounce expires', async ({ + mount, + page, + }) => { + const id = 'testId'; + const debounceTimeout = 2000; + + const component = await mount( + , + ); + + /** + * Setup scroll down listener. + */ + await page.evaluate((idArg) => { + (window as ExtendedWindow).scrollEnd = false; + const parent = document.getElementById(idArg); + parent.children[0].addEventListener('scrollend', () => { + (window as ExtendedWindow).scrollEnd = true; + }, { once: true }); + }, id); + + /** + * Scroll down + */ + await page.evaluate((idArg) => { + const parent = document.getElementById(idArg); + parent.children[0].scrollTop += 200; + }, id); + await page.waitForFunction(() => (window as ExtendedWindow).scrollEnd === true); + + const bottomArrowAfter = component.locator(`button[id="${id}__arrowPrevButton"]`); + await expect(bottomArrowAfter).not.toBeVisible(); + }); + + test('do not display bottom arrow after scroll when debounce expires', async ({ + mount, + page, + }) => { + const id = 'testId'; + const debounceTimeout = 5000; + + const component = await mount( + , + ); + + /** + * Setup scroll down listener. + */ + await page.evaluate((idArg) => { + (window as ExtendedWindow).scrollEnd = false; + const parent = document.getElementById(idArg); + parent.children[0].addEventListener('scrollend', () => { + (window as ExtendedWindow).scrollEnd = true; + }, { once: true }); + }, id); + + /** + * Scroll down + */ + await page.evaluate((idArg) => { + const parent = document.getElementById(idArg); + parent.children[0].scrollTop = parent.children[0].children[0].clientHeight; + }, id); + await page.waitForFunction(() => (window as ExtendedWindow).scrollEnd === true); + + const bottomArrowBefore = component.locator(`button[id="${id}__arrowNextButton"]`); + await expect(bottomArrowBefore).toBeVisible(); + + /** + * Wait on debounce timeout to expire. + */ + await page.waitForTimeout(1.5 * debounceTimeout); + + const bottomArrowAfter = component.locator(`button[id="${id}__arrowNextButton"]`); + await expect(bottomArrowAfter).not.toBeVisible(); + }); + }); +}); diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-defaultComponentProps-object-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-defaultComponentProps-object-1-chromium-linux.png new file mode 100644 index 000000000..0262ad63d Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-defaultComponentProps-object-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-horizontal-arrows-boolean-false-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-horizontal-arrows-boolean-false-1-chromium-linux.png new file mode 100644 index 000000000..cc90d1581 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-horizontal-arrows-boolean-false-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-horizontal-arrows-boolean-true-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-horizontal-arrows-boolean-true-1-chromium-linux.png new file mode 100644 index 000000000..bdf25378e Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-horizontal-arrows-boolean-true-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-horizontal-endShadowBackground-string-gradient-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-horizontal-endShadowBackground-string-gradient-1-chromium-linux.png new file mode 100644 index 000000000..7ed3abb1a Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-horizontal-endShadowBackground-string-gradient-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-horizontal-startShadowBackground-string-gradient-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-horizontal-startShadowBackground-string-gradient-1-chromium-linux.png new file mode 100644 index 000000000..2558a6d43 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-horizontal-startShadowBackground-string-gradient-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-vertical-arrows-boolean-false-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-vertical-arrows-boolean-false-1-chromium-linux.png new file mode 100644 index 000000000..bb4b78723 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-vertical-arrows-boolean-false-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-vertical-arrows-boolean-true-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-vertical-arrows-boolean-true-1-chromium-linux.png new file mode 100644 index 000000000..d4e2b5351 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-vertical-arrows-boolean-true-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-vertical-endShadowBackground-string-gradient-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-vertical-endShadowBackground-string-gradient-1-chromium-linux.png new file mode 100644 index 000000000..01d2bb2e1 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-vertical-endShadowBackground-string-gradient-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-vertical-startShadowBackground-string-gradient-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-vertical-startShadowBackground-string-gradient-1-chromium-linux.png new file mode 100644 index 000000000..61eb99f7f Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-direction-string-vertical-startShadowBackground-string-gradient-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-10vh-direction-string-horizontal-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-10vh-direction-string-horizontal-1-chromium-linux.png new file mode 100644 index 000000000..fcbaf393b Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-10vh-direction-string-horizontal-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-10vh-direction-string-vertical-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-10vh-direction-string-vertical-1-chromium-linux.png new file mode 100644 index 000000000..f46dbe373 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-10vh-direction-string-vertical-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-20px-direction-string-horizontal-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-20px-direction-string-horizontal-1-chromium-linux.png new file mode 100644 index 000000000..29c97bab8 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-20px-direction-string-horizontal-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-20px-direction-string-vertical-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-20px-direction-string-vertical-1-chromium-linux.png new file mode 100644 index 000000000..c5e56673d Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-20px-direction-string-vertical-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-30-direction-string-horizontal-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-30-direction-string-horizontal-1-chromium-linux.png new file mode 100644 index 000000000..4a91f90b5 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-30-direction-string-horizontal-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-30-direction-string-vertical-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-30-direction-string-vertical-1-chromium-linux.png new file mode 100644 index 000000000..69c869e0f Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-30-direction-string-vertical-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-4em-direction-string-horizontal-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-4em-direction-string-horizontal-1-chromium-linux.png new file mode 100644 index 000000000..320e46c36 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-4em-direction-string-horizontal-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-4em-direction-string-vertical-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-4em-direction-string-vertical-1-chromium-linux.png new file mode 100644 index 000000000..ab6480b6f Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-4em-direction-string-vertical-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-6rem-direction-string-horizontal-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-6rem-direction-string-horizontal-1-chromium-linux.png new file mode 100644 index 000000000..cfd75444a Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-6rem-direction-string-horizontal-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-6rem-direction-string-vertical-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-6rem-direction-string-vertical-1-chromium-linux.png new file mode 100644 index 000000000..d4b949941 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-endShadowSize-string-6rem-direction-string-vertical-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowColor-string-C67FAE-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowColor-string-C67FAE-1-chromium-linux.png new file mode 100644 index 000000000..b03e30e3f Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowColor-string-C67FAE-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowColor-string-hsl-108-48-00-50-20-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowColor-string-hsl-108-48-00-50-20-1-chromium-linux.png new file mode 100644 index 000000000..454fadd84 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowColor-string-hsl-108-48-00-50-20-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowColor-string-red-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowColor-string-red-1-chromium-linux.png new file mode 100644 index 000000000..a33c164a1 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowColor-string-red-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowColor-string-rgb-0-4-255-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowColor-string-rgb-0-4-255-1-chromium-linux.png new file mode 100644 index 000000000..6ba1ee65e Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowColor-string-rgb-0-4-255-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowElement-node-customElement-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowElement-node-customElement-1-chromium-linux.png new file mode 100644 index 000000000..6d4cff401 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowElement-node-customElement-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowElement-node-icon-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowElement-node-icon-1-chromium-linux.png new file mode 100644 index 000000000..47bb134af Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowElement-node-icon-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowElement-node-string-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowElement-node-string-1-chromium-linux.png new file mode 100644 index 000000000..ca177a02b Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-nextArrowElement-node-string-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowColor-string-C67FAE-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowColor-string-C67FAE-1-chromium-linux.png new file mode 100644 index 000000000..c200d37a5 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowColor-string-C67FAE-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowColor-string-hsl-108-48-00-50-20-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowColor-string-hsl-108-48-00-50-20-1-chromium-linux.png new file mode 100644 index 000000000..1b4508a1f Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowColor-string-hsl-108-48-00-50-20-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowColor-string-red-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowColor-string-red-1-chromium-linux.png new file mode 100644 index 000000000..ec0039374 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowColor-string-red-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowColor-string-rgb-0-4-255-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowColor-string-rgb-0-4-255-1-chromium-linux.png new file mode 100644 index 000000000..bda7ea114 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowColor-string-rgb-0-4-255-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowElement-node-customElement-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowElement-node-customElement-1-chromium-linux.png new file mode 100644 index 000000000..fc0072d39 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowElement-node-customElement-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowElement-node-icon-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowElement-node-icon-1-chromium-linux.png new file mode 100644 index 000000000..d3e6b3452 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowElement-node-icon-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowElement-node-string-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowElement-node-string-1-chromium-linux.png new file mode 100644 index 000000000..4be3e4bc0 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-prevArrowElement-node-string-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-shadows-boolean-false-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-shadows-boolean-false-1-chromium-linux.png new file mode 100644 index 000000000..e3a5b3db4 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-shadows-boolean-false-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-shadows-boolean-true-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-shadows-boolean-true-1-chromium-linux.png new file mode 100644 index 000000000..0262ad63d Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-shadows-boolean-true-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-10vh-direction-string-horizontal-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-10vh-direction-string-horizontal-1-chromium-linux.png new file mode 100644 index 000000000..1c6e5f8b4 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-10vh-direction-string-horizontal-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-10vh-direction-string-vertical-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-10vh-direction-string-vertical-1-chromium-linux.png new file mode 100644 index 000000000..fd456f3a6 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-10vh-direction-string-vertical-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-20px-direction-string-horizontal-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-20px-direction-string-horizontal-1-chromium-linux.png new file mode 100644 index 000000000..376154ae4 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-20px-direction-string-horizontal-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-20px-direction-string-vertical-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-20px-direction-string-vertical-1-chromium-linux.png new file mode 100644 index 000000000..68547cf23 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-20px-direction-string-vertical-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-30-direction-string-horizontal-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-30-direction-string-horizontal-1-chromium-linux.png new file mode 100644 index 000000000..15f7b84ac Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-30-direction-string-horizontal-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-30-direction-string-vertical-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-30-direction-string-vertical-1-chromium-linux.png new file mode 100644 index 000000000..d4ed5cc83 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-30-direction-string-vertical-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-4em-direction-string-horizontal-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-4em-direction-string-horizontal-1-chromium-linux.png new file mode 100644 index 000000000..06a671a90 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-4em-direction-string-horizontal-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-4em-direction-string-vertical-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-4em-direction-string-vertical-1-chromium-linux.png new file mode 100644 index 000000000..cade7c537 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-4em-direction-string-vertical-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-6rem-direction-string-horizontal-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-6rem-direction-string-horizontal-1-chromium-linux.png new file mode 100644 index 000000000..2d4378400 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-6rem-direction-string-horizontal-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-6rem-direction-string-vertical-1-chromium-linux.png b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-6rem-direction-string-vertical-1-chromium-linux.png new file mode 100644 index 000000000..c0b886ca0 Binary files /dev/null and b/src/components/ScrollView/__tests__/ScrollView.spec.tsx-snapshots/ScrollView-visual-startShadowSize-string-6rem-direction-string-vertical-1-chromium-linux.png differ diff --git a/src/components/ScrollView/__tests__/ScrollView.story.tsx b/src/components/ScrollView/__tests__/ScrollView.story.tsx new file mode 100644 index 000000000..19d64015c --- /dev/null +++ b/src/components/ScrollView/__tests__/ScrollView.story.tsx @@ -0,0 +1,167 @@ +import React, { + useEffect, + useRef, +} from 'react'; +import type { HTMLAttributes } from 'react'; +import { ScrollView } from '..'; + +// Types for story component will be improved when we have full TypeScript support +type ScrollViewTestProps = HTMLAttributes; +type ScrollViewForRefTestProps = ScrollViewTestProps & { + testRefAttrName: string; + testRefAttrValue: string; +}; + +const baseText = ` + Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo + ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus. Donec quam felis, + ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa + quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, + arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. + Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras + dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend + tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, + enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. + Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean + imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper + ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus + eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing + sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, + hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec + vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit + amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris + sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget + bibendum sodales, augue velit cursus nunc.Aenean massa. Cum sociis + natoque penatibus et magnis dis parturient montes, nascetur ridiculus + mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, + sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, + aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet + a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. + Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean + vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat + vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, + feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. + Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. + Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. + Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper + libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit + vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante + tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. + Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. + Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis + magna. Sed consequat, leo eget bibendum sodales, augue velit cursus + nunc. +`; + +const content = ( +
+ {baseText} +
+); + +const texts = [ + 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.', + 'Aenean commodo ligula eget dolor. Aenean massa.', + 'Aenean commodo ligula eget dolor. Aenean massa.', + 'Cum sociis natoque penatibus et magnis dis parturient montes.', + 'Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.', + 'Nulla consequat massa quis enim. Donec pede justo, fringilla vel.', + 'In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.', +]; + +const generateRandomString = () => { + let text = ''; + const repeatAmount = Math.floor(Math.random() * 9); + for (let i = 0; i < (repeatAmount + 1); i += 1) { + text += texts[Math.floor(Math.random() * Math.floor(texts.length - 1))]; + } + return text; +}; + +export const ScrollViewForTest = ({ + children, + ...props +}: ScrollViewTestProps) => ( +
+ + { + props?.direction === 'horizontal' ? ( +
+ {children ?? content} +
+ ) : (children ?? content) + } + +
+); + +export const ScrollViewForRefTest = ({ + testRefAttrName, + testRefAttrValue, + ...props +} : ScrollViewForRefTestProps) => { + const ref = useRef(undefined); + + useEffect(() => { + ref.current?.setAttribute(testRefAttrName, testRefAttrValue); + }, [testRefAttrName, testRefAttrValue]); + + return ( + + {content} + + ); +}; + +export const ScrollViewForDetectEndAutoscrollTest = ({ + ...props +}: ScrollViewTestProps) => { + const [scrollViewContent, setScrollViewContent] = React.useState(baseText); + + return ( +
+ + +
+ {scrollViewContent} +
+ +
+ ); +}; diff --git a/src/components/ScrollView/__tests__/ScrollView.test.jsx b/src/components/ScrollView/__tests__/ScrollView.test.jsx deleted file mode 100644 index 3a6f0354a..000000000 --- a/src/components/ScrollView/__tests__/ScrollView.test.jsx +++ /dev/null @@ -1,152 +0,0 @@ -import React from 'react'; -import { - render, - within, -} from '@testing-library/react'; -import { ScrollView } from '../ScrollView'; - -const mandatoryProps = { - children:
content text
, -}; - -const scrollViewRefPropTest = (ref) => [ - [ - { - id: 'id', - ref, - }, - () => expect(ref.current.parentNode).toHaveAttribute('id', 'id'), - ], -]; - -describe('rendering', () => { - it.each([ - ...scrollViewRefPropTest(React.createRef()), - [ - { arrows: true }, - (rootElement) => { - expect(within(rootElement).getByTitle('Next')); - expect(within(rootElement).getByTitle('Previous')); - }, - ], - [ - { arrows: false }, - (rootElement) => { - expect(within(rootElement).queryByTitle('Next')).not.toBeInTheDocument(); - expect(within(rootElement).queryByTitle('Previous')).not.toBeInTheDocument(); - }, - ], - [ - { - arrows: true, - id: 'id', - }, - (rootElement) => { - expect(rootElement).toHaveAttribute('id', 'id'); - expect(within(rootElement).getByTestId('id__content')); - expect(within(rootElement).getByTitle('Next')).toHaveAttribute('id', 'id__arrowNextButton'); - expect(within(rootElement).getByTitle('Previous')).toHaveAttribute('id', 'id__arrowPrevButton'); - }, - ], - [ - { - arrows: true, - nextArrowColor: 'color', - nextArrowElement: next arrow, - nextArrowInitialOffset: 'offset', - }, - (rootElement) => { - expect(within(rootElement).getByText('next arrow')); - expect(rootElement).toHaveStyle({ - '--rui-local-next-arrow-color': 'color', - '--rui-local-next-arrow-initial-offset': 'offset', - }); - }, - ], - [ - { - arrows: true, - prevArrowColor: 'color', - prevArrowElement: prev arrow, - prevArrowInitialOffset: 'offset', - }, - (rootElement) => { - expect(within(rootElement).getByText('prev arrow')); - expect(rootElement).toHaveStyle({ - '--rui-local-prev-arrow-color': 'color', - '--rui-local-prev-arrow-initial-offset': 'offset', - }); - }, - ], - // `arrowsScrollStep` untested - // `autoScroll` untested - [ - { children:
content text
}, - (rootElement) => expect(within(rootElement).getByText('content text')), - ], - // `debounce` untested - [ - { direction: 'vertical' }, - (rootElement) => { - expect(rootElement).toHaveClass('isRootVertical'); - expect(rootElement).toHaveStyle({ - '--rui-local-end-shadow-direction': 'to top', - '--rui-local-start-shadow-direction': 'to bottom', - }); - }, - ], - [ - { direction: 'horizontal' }, - (rootElement) => { - expect(rootElement).toHaveClass('isRootHorizontal'); - expect(rootElement).toHaveStyle({ - '--rui-local-end-shadow-direction': 'to left', - '--rui-local-start-shadow-direction': 'to right', - }); - }, - ], - [ - { - endShadowBackground: 'background', - endShadowInitialOffset: 'offset', - endShadowSize: 'size', - }, - (rootElement) => expect(rootElement).toHaveStyle({ - '--rui-local-end-shadow-background': 'background', - '--rui-local-end-shadow-initial-offset': 'offset', - '--rui-local-end-shadow-size': 'size', - }), - ], - [ - { scrollbar: true }, - (rootElement) => expect(rootElement).not.toHaveClass('hasRootScrollbarDisabled'), - ], - [ - { scrollbar: false }, - (rootElement) => expect(rootElement).toHaveClass('hasRootScrollbarDisabled'), - ], - [ - { - startShadowBackground: 'background', - startShadowInitialOffset: 'offset', - startShadowSize: 'size', - }, - (rootElement) => expect(rootElement).toHaveStyle({ - '--rui-local-start-shadow-background': 'background', - '--rui-local-start-shadow-direction': 'to bottom', - '--rui-local-start-shadow-initial-offset': 'offset', - '--rui-local-start-shadow-size': 'size', - }), - ], - // `shadows` untested - ])('renders with props: "%s"', (testedProps, assert) => { - const dom = render(( - - )); - - assert(dom.container.firstChild); - }); -}); diff --git a/src/components/ScrollView/__tests__/_propTests/arrowsPropTest.ts b/src/components/ScrollView/__tests__/_propTests/arrowsPropTest.ts new file mode 100644 index 000000000..2e218c9ff --- /dev/null +++ b/src/components/ScrollView/__tests__/_propTests/arrowsPropTest.ts @@ -0,0 +1,24 @@ +import type { PropTests } from '../../../../../tests/playwright/types'; + +export const arrowsPropTest: PropTests = [ + { + name: 'arrows:boolean=true', + props: { + arrows: true, + endShadowBackground: 'linear-gradient(rgba(255 0 0 / 0), rgba(255 0 0 / 0.5), rgb(255, 0, 0))', + endShadowSize: '4em', + startShadowBackground: 'linear-gradient(rgb(255, 0, 0), rgba(255 0 0 / 0.5), rgba(255 0 0 / 0))', + startShadowSize: '4em', + }, + }, + { + name: 'arrows:boolean=false', + props: { + arrows: false, + endShadowBackground: 'linear-gradient(rgba(255 0 0 / 0), rgba(255 0 0 / 0.5), rgb(255, 0, 0))', + endShadowSize: '4em', + startShadowBackground: 'linear-gradient(rgb(255, 0, 0), rgba(255 0 0 / 0.5), rgba(255 0 0 / 0))', + startShadowSize: '4em', + }, + }, +]; diff --git a/src/components/ScrollView/__tests__/_propTests/constants.ts b/src/components/ScrollView/__tests__/_propTests/constants.ts new file mode 100644 index 000000000..70805c13b --- /dev/null +++ b/src/components/ScrollView/__tests__/_propTests/constants.ts @@ -0,0 +1,14 @@ +export const colorForms = [ + 'red', + '#C67FAE', + 'rgb(0, 4, 255)', + 'hsl(108, 48.00%, 50.20%)', +]; + +export const lengthValueForms = [ + '20px', + '4em', + '6rem', + '10vh', + '30%', +]; diff --git a/src/components/ScrollView/__tests__/_propTests/directionPropTest.ts b/src/components/ScrollView/__tests__/_propTests/directionPropTest.ts new file mode 100644 index 000000000..5e6155354 --- /dev/null +++ b/src/components/ScrollView/__tests__/_propTests/directionPropTest.ts @@ -0,0 +1,16 @@ +import type { PropTests } from '../../../../../tests/playwright/types'; + +export const directionPropTest: PropTests = [ + { + name: 'direction:string=vertical', + props: { + direction: 'vertical', + }, + }, + { + name: 'direction:string=horizontal', + props: { + direction: 'horizontal', + }, + }, +]; diff --git a/src/components/ScrollView/__tests__/_propTests/endShadowBackgroundPropTest.ts b/src/components/ScrollView/__tests__/_propTests/endShadowBackgroundPropTest.ts new file mode 100644 index 000000000..8124dd634 --- /dev/null +++ b/src/components/ScrollView/__tests__/_propTests/endShadowBackgroundPropTest.ts @@ -0,0 +1,10 @@ +import type { PropTests } from '../../../../../tests/playwright/types'; + +export const endShadowBackgroundPropTest: PropTests = [ + { + name: 'endShadowBackground:string=gradient', + props: { + endShadowBackground: 'linear-gradient(rgba(255 0 0 / 0), rgba(255 0 0 / 0.5), rgb(255, 0, 0))', + }, + }, +]; diff --git a/src/components/ScrollView/__tests__/_propTests/endShadowSizePropTest.ts b/src/components/ScrollView/__tests__/_propTests/endShadowSizePropTest.ts new file mode 100644 index 000000000..d965bff5b --- /dev/null +++ b/src/components/ScrollView/__tests__/_propTests/endShadowSizePropTest.ts @@ -0,0 +1,10 @@ +import type { PropTests } from '../../../../../tests/playwright/types'; +import { lengthValueForms } from './constants'; + +export const endShadowSizePropTest: PropTests = lengthValueForms.map((length) => ({ + name: `endShadowSize:string=${length}`, + props: { + endShadowBackground: 'red', + endShadowSize: length, + }, +})); diff --git a/src/components/ScrollView/__tests__/_propTests/mixes/mixArrowsDirectionPropTest.ts b/src/components/ScrollView/__tests__/_propTests/mixes/mixArrowsDirectionPropTest.ts new file mode 100644 index 000000000..234b6ea46 --- /dev/null +++ b/src/components/ScrollView/__tests__/_propTests/mixes/mixArrowsDirectionPropTest.ts @@ -0,0 +1,32 @@ +import { mixPropTests } from '../../../../../../tests/playwright'; +import type { PropTests } from '../../../../../../tests/playwright/types'; +import { arrowsPropTest } from '../arrowsPropTest'; +import { directionPropTest } from '../directionPropTest'; + +const [arrowsTrue, arrowFalse] = arrowsPropTest; +const [directionVertical, directionHorizontal] = directionPropTest; + +export const mixArrowsDirectionPropTest: PropTests = [ + ...mixPropTests([ + [directionVertical], + arrowsPropTest, + ]), + { + name: `${directionHorizontal.name} & ${arrowFalse.name}`, + props: { + ...directionHorizontal.props, + ...arrowFalse.props, + endShadowBackground: 'linear-gradient(to left, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0))', + startShadowBackground: 'linear-gradient(to right, rgb(255, 0, 0), rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0))', + }, + }, + { + name: `${directionHorizontal.name} & ${arrowsTrue.name}`, + props: { + ...directionHorizontal.props, + ...arrowsTrue.props, + endShadowBackground: 'linear-gradient(to left, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0))', + startShadowBackground: 'linear-gradient(to right, rgb(255, 0, 0), rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0))', + }, + }, +]; diff --git a/src/components/ScrollView/__tests__/_propTests/mixes/mixEndShadowBackgroundDirectionPropTest.ts b/src/components/ScrollView/__tests__/_propTests/mixes/mixEndShadowBackgroundDirectionPropTest.ts new file mode 100644 index 000000000..e5b3e8a07 --- /dev/null +++ b/src/components/ScrollView/__tests__/_propTests/mixes/mixEndShadowBackgroundDirectionPropTest.ts @@ -0,0 +1,22 @@ +import { mixPropTests } from '../../../../../../tests/playwright'; +import type { PropTests } from '../../../../../../tests/playwright/types'; +import { directionPropTest } from '../directionPropTest'; +import { endShadowBackgroundPropTest } from '../endShadowBackgroundPropTest'; + +const [verticalTest, horizontalTest] = directionPropTest; + +export const mixEndShadowBackgroundDirectionPropTest: PropTests = [ + ...mixPropTests([ + [verticalTest], + endShadowBackgroundPropTest, + ]), + ...endShadowBackgroundPropTest.map((test) => ({ + ...test, + name: `${horizontalTest.name} & ${test.name}`, + props: { + ...horizontalTest.props, + ...test.props, + endShadowBackground: 'linear-gradient(to left, rgba(255, 0, 0, 1), rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0))', + }, + })), +]; diff --git a/src/components/ScrollView/__tests__/_propTests/mixes/mixStartShadowBackgroundDirectionPropTest.ts b/src/components/ScrollView/__tests__/_propTests/mixes/mixStartShadowBackgroundDirectionPropTest.ts new file mode 100644 index 000000000..9c17f21fb --- /dev/null +++ b/src/components/ScrollView/__tests__/_propTests/mixes/mixStartShadowBackgroundDirectionPropTest.ts @@ -0,0 +1,22 @@ +import { mixPropTests } from '../../../../../../tests/playwright'; +import type { PropTests } from '../../../../../../tests/playwright/types'; +import { directionPropTest } from '../directionPropTest'; +import { startShadowBackgroundPropTest } from '../startShadowBackgroundPropTest'; + +const [verticalTest, horizontalTest] = directionPropTest; + +export const mixStartShadowBackgroundDirectionPropTest: PropTests = [ + ...mixPropTests([ + [verticalTest], + startShadowBackgroundPropTest, + ]), + ...startShadowBackgroundPropTest.map((test) => ({ + ...test, + name: `${horizontalTest.name} & ${test.name}`, + props: { + ...horizontalTest.props, + ...test.props, + startShadowBackground: 'linear-gradient(to right, rgb(255, 0, 0), rgba(255, 0, 0, 0.5), rgba(255, 0, 0, 0))', + }, + })), +]; diff --git a/src/components/ScrollView/__tests__/_propTests/nextArrowColorPropTest.ts b/src/components/ScrollView/__tests__/_propTests/nextArrowColorPropTest.ts new file mode 100644 index 000000000..222725a8c --- /dev/null +++ b/src/components/ScrollView/__tests__/_propTests/nextArrowColorPropTest.ts @@ -0,0 +1,10 @@ +import type { PropTests } from '../../../../../tests/playwright/types'; +import { colorForms } from './constants'; + +export const nextArrowColorPropTest: PropTests = colorForms.map((color) => ({ + name: `nextArrowColor:string=${color}`, + props: { + arrows: true, + nextArrowColor: color, + }, +})); diff --git a/src/components/ScrollView/__tests__/_propTests/nextArrowElementPropTest.tsx b/src/components/ScrollView/__tests__/_propTests/nextArrowElementPropTest.tsx new file mode 100644 index 000000000..a696ab2b6 --- /dev/null +++ b/src/components/ScrollView/__tests__/_propTests/nextArrowElementPropTest.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { propTests } from '../../../../../tests/playwright'; +import type { PropTests } from '../../../../../tests/playwright/types'; + +export const nextArrowElementPropTest: PropTests = [ + { + name: 'nextArrowElement:node=customElement', + props: { + arrows: true, + nextArrowElement: ( +
+ Custom node arrow +
+ ), + }, + }, + { + name: 'nextArrowElement:node=string', + props: { + arrows: true, + nextArrowElement: 'Custom string arrow', + }, + }, + ...propTests.iconPropTest.map((test) => ({ + name: 'nextArrowElement:node=icon', + props: { + arrows: true, + nextArrowElement: test.props.icon, + }, + })), +]; diff --git a/src/components/ScrollView/__tests__/_propTests/prevArrowColorPropTest.ts b/src/components/ScrollView/__tests__/_propTests/prevArrowColorPropTest.ts new file mode 100644 index 000000000..374659d10 --- /dev/null +++ b/src/components/ScrollView/__tests__/_propTests/prevArrowColorPropTest.ts @@ -0,0 +1,27 @@ +import type { PropTests } from '../../../../../tests/playwright/types'; +import type { ExtendedWindow } from '../types'; +import { colorForms } from './constants'; + +export const prevArrowColorPropTest: PropTests = colorForms.map((color) => ({ + name: `prevArrowColor:string=${color}`, + onBeforeSnapshot: async (page) => { + await page.evaluate((id) => { + (window as ExtendedWindow).scrollEnd = false; + const parent = document.getElementById(id); + parent.children[0].addEventListener('scrollend', () => { + (window as ExtendedWindow).scrollEnd = true; + }, { once: true }); + }, 'scrollbar'); + + await page.evaluate((id) => { + const parent = document.getElementById(id); + parent.children[0].scrollTop += 124; + }, 'scrollbar'); + + await page.waitForFunction(() => (window as ExtendedWindow).scrollEnd === true); + }, + props: { + arrows: true, + prevArrowColor: color, + }, +})); diff --git a/src/components/ScrollView/__tests__/_propTests/prevArrowElementPropTest.tsx b/src/components/ScrollView/__tests__/_propTests/prevArrowElementPropTest.tsx new file mode 100644 index 000000000..87a2cd51d --- /dev/null +++ b/src/components/ScrollView/__tests__/_propTests/prevArrowElementPropTest.tsx @@ -0,0 +1,88 @@ +import React from 'react'; +import { propTests } from '../../../../../tests/playwright'; +import type { + PropTest, + PropTests, +} from '../../../../../tests/playwright/types'; +import type { ExtendedWindow } from '../types'; + +export const prevArrowElementPropTest: PropTests = [ + { + name: 'prevArrowElement:node=customElement', + onBeforeSnapshot: async (page) => { + await page.evaluate((id) => { + (window as ExtendedWindow).scrollEnd = false; + const parent = document.getElementById(id); + parent.children[0].addEventListener('scrollend', () => { + (window as ExtendedWindow).scrollEnd = true; + }, { once: true }); + }, 'scrollbar'); + + await page.evaluate((id) => { + const parent = document.getElementById(id); + parent.children[0].scrollTop += 124; + }, 'scrollbar'); + + await page.waitForFunction(() => (window as ExtendedWindow).scrollEnd === true); + }, + props: { + arrows: true, + prevArrowElement: ( +
+ Custom node arrow +
+ ), + }, + }, + { + name: 'prevArrowElement:node=string', + onBeforeSnapshot: async (page) => { + await page.evaluate((id) => { + (window as ExtendedWindow).scrollEnd = false; + const parent = document.getElementById(id); + parent.children[0].addEventListener('scrollend', () => { + (window as ExtendedWindow).scrollEnd = true; + }, { once: true }); + }, 'scrollbar'); + + await page.evaluate((id) => { + const parent = document.getElementById(id); + parent.children[0].scrollTop += 124; + }, 'scrollbar'); + + await page.waitForFunction(() => (window as ExtendedWindow).scrollEnd === true); + }, + props: { + arrows: true, + prevArrowElement: 'Custom string arrow', + }, + }, + ...propTests.iconPropTest.map((test) => ({ + name: 'prevArrowElement:node=icon', + onBeforeSnapshot: async (page) => { + await page.evaluate((id) => { + (window as ExtendedWindow).scrollEnd = false; + const parent = document.getElementById(id); + parent.children[0].addEventListener('scrollend', () => { + (window as ExtendedWindow).scrollEnd = true; + }, { once: true }); + }, 'scrollbar'); + + await page.evaluate((id) => { + const parent = document.getElementById(id); + parent.children[0].scrollTop += 124; + }, 'scrollbar'); + + await page.waitForFunction(() => (window as ExtendedWindow).scrollEnd === true); + }, + props: { + arrows: true, + prevArrowElement: test.props.icon, + }, + }) as PropTest), +]; diff --git a/src/components/ScrollView/__tests__/_propTests/shadowsPropTest.ts b/src/components/ScrollView/__tests__/_propTests/shadowsPropTest.ts new file mode 100644 index 000000000..541a1bb78 --- /dev/null +++ b/src/components/ScrollView/__tests__/_propTests/shadowsPropTest.ts @@ -0,0 +1,16 @@ +import type { PropTests } from '../../../../../tests/playwright/types'; + +export const shadowsPropTest: PropTests = [ + { + name: 'shadows:boolean=true', + props: { + shadows: true, + }, + }, + { + name: 'shadows:boolean=false', + props: { + shadows: false, + }, + }, +]; diff --git a/src/components/ScrollView/__tests__/_propTests/startShadowBackgroundPropTest.ts b/src/components/ScrollView/__tests__/_propTests/startShadowBackgroundPropTest.ts new file mode 100644 index 000000000..d30304a88 --- /dev/null +++ b/src/components/ScrollView/__tests__/_propTests/startShadowBackgroundPropTest.ts @@ -0,0 +1,10 @@ +import type { PropTests } from '../../../../../tests/playwright/types'; + +export const startShadowBackgroundPropTest: PropTests = [ + { + name: 'startShadowBackground:string=gradient', + props: { + startShadowBackground: 'linear-gradient(rgb(255, 0, 0), rgba(255 0 0 / 0.5), rgba(255 0 0 / 0))', + }, + }, +]; diff --git a/src/components/ScrollView/__tests__/_propTests/startShadowSizePropTest.ts b/src/components/ScrollView/__tests__/_propTests/startShadowSizePropTest.ts new file mode 100644 index 000000000..5614a9262 --- /dev/null +++ b/src/components/ScrollView/__tests__/_propTests/startShadowSizePropTest.ts @@ -0,0 +1,10 @@ +import type { PropTests } from '../../../../../tests/playwright/types'; +import { lengthValueForms } from './constants'; + +export const startShadowSizePropTest: PropTests = lengthValueForms.map((length) => ({ + name: `startShadowSize:string=${length}`, + props: { + startShadowBackground: 'red', + startShadowSize: length, + }, +})); diff --git a/src/components/ScrollView/__tests__/types.ts b/src/components/ScrollView/__tests__/types.ts new file mode 100644 index 000000000..6b4078ee7 --- /dev/null +++ b/src/components/ScrollView/__tests__/types.ts @@ -0,0 +1,4 @@ +export type ExtendedWindow = Window & { + onScrollEnd?: (scrollTop: number) => void + scrollEnd?: boolean; +}; diff --git a/src/docs/contribute/testing-guidelines.md b/src/docs/contribute/testing-guidelines.md index 65aba6f28..2ff90ccbd 100644 --- a/src/docs/contribute/testing-guidelines.md +++ b/src/docs/contribute/testing-guidelines.md @@ -94,13 +94,13 @@ npm run test:playwright-ct: You can also run specific tests by passing a path to the test files: ```bash -npm run test:playwright-ct: -- +npm run test:playwright-ct: -- -- ``` You can also pass any [CLI command][playwright-cli] to the test runner: ```bash -npm run test:playwright-ct: -- +npm run test:playwright-ct: -- -- ``` #### Opening Test Report