@skbkontur/react-ui 0.0.0-30619a873c → 0.0.0-32550fb571

package/components/PasswordInput/__creevey__/PasswordInput.creevey.mts

@@ -0,0 +1,46 @@
+import { story, kind, test } from 'creevey';
+
+kind('PasswordInput', () => {
+  story('Plain', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'flickering screenshot': { in: ['chrome2022'], tests: ['With typed password'] },
+      },
+    });
+
+    test('Plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'Plain');
+    });
+
+    test('With typed password', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[type="password"]' }))
+        .sendKeys('Test...')
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'With typed password');
+    });
+
+    test('With visible password', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[type="password"]' }))
+        .sendKeys('Test...')
+        .click(context.webdriver.findElement({ css: '[data-tid="PasswordInputEyeIcon"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'With visible password');
+    });
+  });
+
+  story('Width', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'no themes': { in: /^(?!\b(chrome2022)\b)/ },
+      },
+    });
+  });
+});

package/components/Radio/__creevey__/Radio.creevey.mts

@@ -0,0 +1,28 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+kind('Radio', () => {
+  story('Highlighted', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        flaky: { in: /firefox/ },
+      },
+    });
+
+    test('plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+
+    test('tabPress', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'body' }))
+        .sendKeys(Key.TAB)
+        .pause(500)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'tabPress');
+    });
+  });
+});

package/components/RadioGroup/__creevey__/RadioGroup.creevey.mts

@@ -0,0 +1,86 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+
+kind('RadioGroup', () => {
+  story('Vertical', ({ setStoryParameters }) => {
+    setStoryParameters({
+      captureElement: '#RadioGroup-wrap',
+      skip: {
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hovered'],
+        },
+      },
+    });
+
+    test('plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+
+    test('hovered', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: '[data-comp-name~="RadioGroup"] > span > label' }),
+        })
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'hovered');
+    });
+
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="RadioGroup"] > span > label' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'clicked');
+    });
+
+    test('mouseLeave', async (context) => {
+      // NOTE Firefox bug if click send right after click from previous test it results as double click
+      await delay(500);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="RadioGroup"] > span > label' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="JustButton"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'mouseLeave');
+    });
+
+    test('tabPress', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="JustButton"]' }))
+        .sendKeys(Key.TAB)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'tabPress');
+    });
+
+    test('arrow_down', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="JustButton"]' }))
+        .sendKeys(Key.TAB)
+        .pause(100)
+        .sendKeys(Key.DOWN)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'arrow_down');
+    });
+  });
+});

package/components/ScrollContainer/__creevey__/ScrollContainer.creevey.mts

@@ -0,0 +1,247 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+kind('ScrollContainer', () => {
+  story('WithDynamicContent', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: '#test-container' });
+
+    test('changeContent', async (context) => {
+      const idle = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#add' }))
+        .perform();
+      const addContent = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll50' }))
+        .perform();
+      const scroll50 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll100' }))
+        .perform();
+      const scroll100 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#remove' }))
+        .perform();
+      const removeContent = await context.takeScreenshot();
+      await context.matchImages({ idle, addContent, scroll50, scroll100, removeContent });
+    });
+  });
+
+  story('WithOnlyCustomHorizontalScroll', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: '#test-container' });
+
+    test('moveScroll', async (context) => {
+      const idle = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll50' }))
+        .perform();
+      const scroll50 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll100' }))
+        .perform();
+      const scroll100 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll0' }))
+        .perform();
+      const scroll0 = await context.takeScreenshot();
+      await context.matchImages({ idle, scroll50, scroll100, scroll0 });
+    });
+
+    test('changeContent', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#add' }))
+        .perform();
+      const addContent = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll50' }))
+        .perform();
+      const scroll50 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll100' }))
+        .perform();
+      const scroll100 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scroll0' }))
+        .perform();
+      const scroll0 = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#remove' }))
+        .perform();
+      const removeContent = await context.takeScreenshot();
+      await context.matchImages({ addContent, scroll50, scroll100, scroll0, removeContent });
+    });
+  });
+
+  story('WithScrollTo', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: '#test-container' });
+
+    test('scrollTo', async (context) => {
+      const idle = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scrollTo' }))
+        .perform();
+      const scrollTo = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scrollToTop' }))
+        .perform();
+      const scrollToTop = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scrollToLeft' }))
+        .perform();
+      const scrollToLeft = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scrollToBottom' }))
+        .perform();
+      const scrollToBottom = await context.takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#scrollToRight' }))
+        .perform();
+      const scrollToRight = await context.takeScreenshot();
+      await context.matchImages({
+        idle,
+        scrollTo,
+        scrollToTop,
+        scrollToBottom,
+        scrollToLeft,
+        scrollToRight,
+      });
+    });
+  });
+
+  story('ScrollBarVisibleAfterTogglingDisabled', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
+
+    test('toggleDisabled', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="disable-button"]' }))
+        .click(context.webdriver.findElement({ css: '[data-tid="disable-button"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'toggleDisabled');
+    });
+  });
+
+  story('ShowScrollBarOnScroll', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\b(firefox2022|chrome2022)\b)/ } } });
+
+    test('hideScroll', async (context) => {
+      const beforeScroll = await context.takeScreenshot();
+      await context.webdriver.executeScript(function () {
+        const scrollContainer = window.document.querySelector('[data-tid~="ScrollContainer__inner"]');
+        if (scrollContainer) {
+          scrollContainer.scrollTop = 500;
+        }
+      });
+      context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({ origin: context.webdriver.findElement({ css: 'body' }) });
+      await delay(200);
+      const duringScroll = await context.takeScreenshot();
+      await delay(3000);
+      const afterScroll = await context.takeScreenshot();
+      await context.matchImages({ beforeScroll, duringScroll, afterScroll });
+    });
+  });
+
+  story('ShowScrollBarOnHover', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'hover works only in firefox': { in: /^(?!\b(firefox2022)\b)/ } } });
+
+    test('hideScroll', async (context) => {
+      context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: '[data-tid~="ScrollContainer__root"]' }),
+        })
+        .perform();
+      await delay(500);
+      const hovered = await context.takeScreenshot();
+      context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({ x: 1000, y: 700 })
+        .perform();
+      await delay(3000);
+      const withoutHover = await context.takeScreenshot();
+      await context.matchImages({ hovered, withoutHover });
+    });
+  });
+  story('NeverShowScrollBar', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\b(firefox2022|chrome2022)\b)/ } },
+    });
+  });
+  story('OffsetY', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+    });
+  });
+  story('OffsetX', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+    });
+  });
+  story('OffsetYAndX', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+    });
+  });
+});

package/components/Select/Select/Select.js

@@ -34,6 +34,8 @@ import { Item } from "../Item";
 import { SelectLocaleHelper } from "../locale";
 import { styles } from "../Select.styles";
 import { getSelectTheme } from "../selectTheme";
+import { SelectDataTids } from "../tids";
+export * from "../tids";
 var PASS_BUTTON_PROPS = {
   id: true,
   disabled: true,
@@ -41,15 +43,11 @@ var PASS_BUTTON_PROPS = {
   use: true,
   size: true,
   warning: true,
+  corners: true,
   onMouseEnter: true,
   onMouseLeave: true,
   onMouseOver: true
 };
-export var SelectDataTids = {
-  root: 'Select__root',
-  menu: 'Select__menu',
-  label: 'Select__label'
-};
 export var SelectIds = {
   menu: SelectDataTids.menu
 };