diff --git a/packages/plasma-ui/package.json b/packages/plasma-ui/package.json index aec1cd4a24..0445329f8d 100644 --- a/packages/plasma-ui/package.json +++ b/packages/plasma-ui/package.json @@ -1,7 +1,7 @@ { "name": "@salutejs/plasma-ui", "version": "1.228.0", - "description": "Salute Design System", + "description": "Salute Design System.", "main": "index.js", "module": "es/index.js", "types": "index.d.ts", diff --git a/packages/plasma-ui/src/components/Badge/BadgeBase.component-test.tsx b/packages/plasma-ui/src/components/Badge/BadgeBase.component-test.tsx deleted file mode 120000 index e0af633a95..0000000000 --- a/packages/plasma-ui/src/components/Badge/BadgeBase.component-test.tsx +++ /dev/null @@ -1 +0,0 @@ -../../../../plasma-core/src/components/Badge/Badge.component-test.tsx \ No newline at end of file diff --git a/packages/plasma-ui/src/components/Badge/BadgeBase.component-test.tsx b/packages/plasma-ui/src/components/Badge/BadgeBase.component-test.tsx new file mode 100644 index 0000000000..99ff5fdd82 --- /dev/null +++ b/packages/plasma-ui/src/components/Badge/BadgeBase.component-test.tsx @@ -0,0 +1,67 @@ +/* eslint-disable */ +import React from 'react'; +import { IconEye } from '@salutejs/plasma-icons'; + +import { mount, CypressTestDecorator, getComponent, PadMe, SpaceMe } from '@salutejs/plasma-cy-utils'; + +const Icon = () => ; + +describe('plasma-core: Badge', () => { + const Badge = getComponent('Badge'); + + it('simple', () => { + mount( + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('with Icon', () => { + mount( + + } /> + + } /> + , + ); + + cy.matchImageSnapshot(); + }); + + it('_sizes', () => { + mount( + + } /> + + } /> + + , + ); + + cy.matchImageSnapshot(); + }); + + it('_circled', () => { + mount( + + circled : + + + + + + simple : + + + + + + , + ); + + cy.matchImageSnapshot(); + }); +}); diff --git a/packages/plasma-ui/src/components/Slider/Slider.component-test.tsx b/packages/plasma-ui/src/components/Slider/Slider.component-test.tsx deleted file mode 120000 index 4c9a39bbd8..0000000000 --- a/packages/plasma-ui/src/components/Slider/Slider.component-test.tsx +++ /dev/null @@ -1 +0,0 @@ -../../../../plasma-core/src/components/Slider/Slider.component-test.tsx \ No newline at end of file diff --git a/packages/plasma-ui/src/components/Slider/Slider.component-test.tsx b/packages/plasma-ui/src/components/Slider/Slider.component-test.tsx new file mode 100644 index 0000000000..807c083b58 --- /dev/null +++ b/packages/plasma-ui/src/components/Slider/Slider.component-test.tsx @@ -0,0 +1,257 @@ +import React, { useState } from 'react'; +import { mount, CypressTestDecorator, getComponent, PadMe, Portal } from '@salutejs/plasma-cy-utils'; + +const noop = () => {}; + +const dragAndDrop = (chainableSelector: Cypress.Chainable, coord: { clientX: number; clientY: number }) => { + chainableSelector.trigger('mousedown').trigger('mousemove', coord).trigger('mouseup'); +}; + +describe('plasma-core: Slider', () => { + const Slider = getComponent('Slider'); + const Badge = getComponent('Badge'); + const sliderThumbSelector = 'div > div + div > div'; + + it('default', () => { + mount( + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('default: focus', () => { + mount( + + + , + ); + + cy.get(sliderThumbSelector).focus(); + + cy.matchImageSnapshot(); + }); + + it('with portal', () => { + const PORTAL_ROOT_ID = 'portal-root'; + + mount( + + <> +
+ +
+ + + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('_disabled', () => { + mount( + + + , + ); + + cy.get(sliderThumbSelector).focus(); + + cy.matchImageSnapshot(); + }); + + it('double', () => { + mount( + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('drag and drop with single', () => { + mount( + + + , + ); + + dragAndDrop(cy.root(), { clientX: 350, clientY: 15 }); + + cy.root().click(270, 15); + + cy.matchImageSnapshot(); + }); + + it('drag and drop without onChange', () => { + mount( + + + + + , + ); + + dragAndDrop(cy.root().get('div > div + div').first(), { clientX: 50, clientY: 15 }); + + cy.root().click(350, 15); + + cy.root().click(350, 45); + + cy.matchImageSnapshot(); + }); + + it('drag and drop with double', () => { + mount( + + + , + ); + + dragAndDrop(cy.root().get('div > div + div').first(), { clientX: 50, clientY: 15 }); + + dragAndDrop(cy.root().get('div > div + div').last(), { clientX: 450, clientY: 15 }); + + cy.matchImageSnapshot(); + }); + + describe('Keyboard support', () => { + const props = { + max: 100, + min: 0, + }; + + const ariaValueNow = 'aria-valuenow'; + const ariaValueMax = 'aria-valuemax'; + const ariaValueMin = 'aria-valuemin'; + const defaultSliderValue = 20; + + function StubComponent({ value = defaultSliderValue }: { value?: number | number[] }) { + const [state, setState] = useState(value); + + const onChangeCommittedHandle = (values) => { + setState(values); + }; + + return ; + } + + it('increase value by ArrowRight, ArrowUp', () => { + const countRepeat = 2; + + mount( + + + , + ); + + cy.get(sliderThumbSelector) + .focus() + .should('have.attr', ariaValueNow, defaultSliderValue) + .type('{rightArrow}'.repeat(countRepeat)) + .should('have.attr', ariaValueNow, defaultSliderValue + countRepeat) + .type('{upArrow}'.repeat(countRepeat)) + .should('have.attr', ariaValueNow, defaultSliderValue + countRepeat * 2); + }); + + it('decrease value by ArrowLeft, ArrowDown', () => { + const countRepeat = 2; + + mount( + + + , + ); + + cy.get(sliderThumbSelector) + .focus() + .should('have.attr', ariaValueNow, defaultSliderValue) + .type('{leftArrow}'.repeat(countRepeat)) + .should('have.attr', ariaValueNow, defaultSliderValue - countRepeat) + .type('{downArrow}'.repeat(countRepeat)) + .should('have.attr', ariaValueNow, defaultSliderValue - countRepeat * 2); + }); + + it('change value by Home, End', () => { + mount( + + + , + ); + + cy.get(sliderThumbSelector) + .focus() + .should('have.attr', ariaValueNow, defaultSliderValue) + .type('{end}') + .should('have.attr', ariaValueNow, props.max) + .type('{home}') + .should('have.attr', ariaValueNow, props.min); + }); + + it('processing multiple steps by PageUp, PageDown', () => { + mount( + + + , + ); + + const multipleSteps = props.max * 0.1; + + cy.get(sliderThumbSelector) + .focus() + .should('have.attr', ariaValueNow, defaultSliderValue) + .type('{pageUp}') + .should('have.attr', ariaValueNow, defaultSliderValue + multipleSteps) + .type('{pageDown}') + .should('have.attr', ariaValueNow, defaultSliderValue); + }); + + it('Double slider', () => { + mount( + + + , + ); + + cy.get(sliderThumbSelector) + .first() + .focus() + .should('have.attr', ariaValueNow, 25) + .should('have.attr', ariaValueMin, props.min) + .type('{end}') + .should('have.attr', ariaValueMax, 75) + .type('{home}') + .should('have.attr', ariaValueNow, props.min) + .type('{rightArrow}'.repeat(10)); + + cy.get(sliderThumbSelector) + .last() + .focus() + .type('{end}') + .should('have.attr', ariaValueMax, props.max) + .type('{home}') + .invoke('attr', ariaValueNow) + .then((state) => { + // INFO: Проверяем, что максимальное значение первого слайдера ограничено текущем значением второго + cy.get(sliderThumbSelector).first().should('have.attr', ariaValueMax, state); + }); + + // INFO: Проверяем, что минимальное значение второго слайдера ограничено текущем значением первого + cy.get(sliderThumbSelector) + .last() + .focus() + .invoke('attr', ariaValueMin) + .then((state) => { + cy.get(sliderThumbSelector).first().should('have.attr', ariaValueNow, state); + }); + + cy.matchImageSnapshot(); + }); + }); +});