@skbkontur/react-ui 5.0.8 → 5.0.10

package/cjs/components/Sticky/__creevey__/Sticky.creevey.mts

@@ -0,0 +1,98 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+kind('Sticky', () => {
+  story('WideContainer', () => {
+    test('fixed', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const stickyContent = window.document.querySelector('[data-tid="stickyContent"]') as HTMLElement;
+        const nonStickyText = window.document.querySelector('[data-tid="nonStickyText"]') as HTMLElement;
+        const scrollXOffset = nonStickyText.getBoundingClientRect().width / 2;
+        const scrollYOffset = stickyContent.getBoundingClientRect().height / 2;
+
+        window.scrollTo(scrollXOffset, scrollYOffset);
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'fixed');
+    });
+  });
+
+  story('Top', () => {
+    test('top', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'top');
+    });
+
+    test('fixed', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const stickyStop = window.document.querySelector('[data-tid="stickyStop"]') as HTMLElement;
+        const scrollOffset = stickyStop.getBoundingClientRect().top - window.innerHeight / 2;
+
+        window.scrollTo(0, scrollOffset);
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'fixed');
+    });
+
+    test('stoped', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const stickyStop = window.document.querySelector('[data-tid="stickyStop"]') as HTMLElement;
+        stickyStop.scrollIntoView();
+      });
+      await context.webdriver.executeScript(function () {
+        const stickyContent = window.document.querySelector('[data-tid="stickyContent"]') as HTMLElement;
+        const scrollOffset = pageYOffset - stickyContent.getBoundingClientRect().height / 2;
+
+        window.scrollTo(0, scrollOffset);
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'stoped');
+    });
+  });
+
+  story('Bottom', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'flacky stopped position': {
+          in: ['firefox', 'firefox8px', 'firefoxDark'],
+          tests: 'stoped',
+        },
+      },
+    });
+
+    test('bottom', async (context) => {
+      await context.webdriver.executeScript(function () {
+        window.scrollTo(0, 9999);
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'bottom');
+    });
+
+    test('fixed', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const sticky = window.document.querySelector('[data-comp-name~="Sticky"]') as HTMLElement;
+        const scrollOffset = sticky.getBoundingClientRect().top - window.innerHeight;
+
+        window.scrollTo(0, scrollOffset);
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'fixed');
+    });
+
+    test('stoped', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const stickyStop = window.document.querySelector('[data-tid="stickyStop"]') as HTMLElement;
+        stickyStop.scrollIntoView(false);
+      });
+      await context.webdriver.executeScript(function () {
+        const stickyContent = window.document.querySelector('[data-tid="stickyContent"]') as HTMLElement;
+        const scrollOffset = pageYOffset + stickyContent.getBoundingClientRect().height / 2;
+
+        window.scrollTo(0, scrollOffset);
+      });
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'fixed');
+    });
+  });
+});

package/cjs/components/Switcher/__creevey__/Switcher.creevey.mts

@@ -0,0 +1,24 @@
+import { story, kind, test } from 'creevey';
+
+kind('Switcher', () => {
+  story('Horizontal', () => {
+    test('idle', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'idle');
+    });
+
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Button"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'clicked');
+    });
+  });
+  story('WithCustomRenderItems', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'chrome only': { in: /^(?!\bchrome2022\b)/ } },
+    });
+  });
+});

package/cjs/components/Tabs/__creevey__/Tabs.creevey.mts

@@ -0,0 +1,239 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+
+const tabsSimpleTests = () => {
+  test('move focus forward', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-comp-name~="Tab"]:nth-child(1)' }))
+      .perform();
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .sendKeys(Key.ARROW_RIGHT)
+      .pause(500)
+      .sendKeys(Key.ARROW_DOWN)
+      .perform();
+    await context.matchImage(await context.takeScreenshot(), 'move focus forward');
+  });
+  test('move focus backward', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-comp-name~="Tab"]:nth-child(3)' }))
+      .perform();
+    await delay(1000);
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .sendKeys(Key.ARROW_LEFT)
+      .perform();
+    await delay(1000);
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .sendKeys(Key.ARROW_UP)
+      .perform();
+    await context.matchImage(await context.takeScreenshot(), 'move focus backward');
+  });
+  test('reset focus after click', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-comp-name~="Tab"]:nth-child(1)' }))
+      .perform();
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .sendKeys(Key.ARROW_RIGHT)
+      .pause(500)
+      .click(context.webdriver.findElement({ css: '[data-comp-name~="Tab"]:nth-child(3)' }))
+      .perform();
+    await context.matchImage(await context.takeScreenshot(), 'reset focus after click');
+  });
+};
+const tabsTests = () => {
+  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~="Tab"]:nth-child(2)' }),
+      })
+      .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~="Tab"]:nth-child(2)' }))
+      .perform();
+    await context.matchImage(await context.takeScreenshot(), 'clicked');
+  });
+
+  test('mouseLeave', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-comp-name~="Tab"]:nth-child(2)' }))
+      .move({
+        origin: context.webdriver.findElement({ css: 'body' }),
+      })
+      .perform();
+    await context.matchImage(await context.takeScreenshot(), 'mouseLeave');
+  });
+
+  test('focused', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-comp-name~="Tab"]:nth-child(2)' }))
+      .move({
+        origin: context.webdriver.findElement({ css: 'body' }),
+      })
+      .click(context.webdriver.findElement({ css: '[data-comp-name~="Tab"]:nth-child(2)' }))
+      .perform();
+    await context.matchImage(await context.takeScreenshot(), 'focused');
+  });
+
+  test('tabPress', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-comp-name~="Tab"]:nth-child(2)' }))
+      .perform();
+    await delay(1000);
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .sendKeys(Key.TAB)
+      .perform();
+    await delay(1000);
+    await context.matchImage(await context.takeScreenshot(), 'tabPress');
+  });
+
+  test('enterPress', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-comp-name~="Tab"]:nth-child(2)' }))
+      .perform();
+    await delay(1000);
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .sendKeys(Key.TAB)
+      .perform();
+    await delay(1000);
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .sendKeys(Key.ENTER)
+      .perform();
+    await delay(1000);
+    await context.matchImage(await context.takeScreenshot(), 'enterPress');
+  });
+};
+
+kind('Tabs', () => {
+  story('WithDisabledTab', () => {
+    tabsTests();
+  });
+  story('Simple', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hovered'],
+        },
+      },
+    });
+
+    tabsTests();
+    tabsSimpleTests();
+  });
+  story('SimpleMedium', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hovered'],
+        },
+      },
+    });
+
+    tabsTests();
+    tabsSimpleTests();
+  });
+  story('SimpleSmall', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hovered'],
+        },
+      },
+    });
+
+    tabsTests();
+    tabsSimpleTests();
+  });
+  story('Vertical', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hovered', 'enterPress'],
+        },
+      },
+    });
+    tabsTests();
+  });
+  story('VerticalMedium', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hovered', 'enterPress'],
+        },
+      },
+    });
+    tabsTests();
+  });
+  story('VerticalSmall', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hovered', 'enterPress'],
+        },
+      },
+    });
+    tabsTests();
+  });
+});

package/cjs/components/Textarea/__creevey__/Textarea.creevey.mts

@@ -0,0 +1,177 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+
+kind('Textarea', () => {
+  story('DifferentStates', () => {
+    test('Plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Plain');
+    });
+
+    test('Focus', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#TextareaPlain textarea' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Focus');
+    });
+
+    test('FocusedByTab', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({ x: 0, y: 0 })
+        .click()
+        .sendKeys(Key.TAB)
+        .sendKeys(Key.TAB)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Focused by tab');
+    });
+
+    test('Typed', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#TextareaPlain textarea' }))
+        .sendKeys('Test...')
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Typed');
+    });
+  });
+
+  story('AutoresizableTextareaStory', () => {
+    test('autoresize', async (context) => {
+      const textArea = () => context.webdriver.findElement({ css: '[data-tid~="TextArea"]' });
+      const before = await textArea().takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="AddButton"]' }))
+        .pause(500)
+        .perform();
+      const addText = await textArea().takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="CollapseButton"]' }))
+        .pause(500)
+        .perform();
+      const collapse = await textArea().takeScreenshot();
+      await context.matchImages({ before, addText, collapse });
+    });
+  });
+
+  story('SelectAllByProp', () => {
+    test('Plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Plain');
+    });
+
+    test('Focused', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'label' }))
+        .pause(500)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Focused');
+    });
+  });
+
+  story('SelectAllByButton', () => {
+    test('Plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Plain');
+    });
+
+    test('Selected', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="select-all"]' }))
+        .pause(500)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Selected');
+    });
+  });
+
+  story('TextareaWithCounters', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'flacky scrollbars height': {
+          in: ['firefox', 'firefox8px', 'firefoxFlat8px', 'firefoxDark'],
+        },
+      },
+    });
+
+    test('Plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Plain');
+    });
+
+    test('Focus', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#CounterPlain textarea' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Focus');
+    });
+
+    test('FocusAutoresize', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#CounterAutoresizeTextarea textarea' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'FocusAutoresize');
+    });
+
+    test('FocusWithHelpClosed', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#CounterWithHelp textarea' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'CounterWithHelp');
+    });
+
+    test('FocusWithHelpOpened', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#CounterWithHelp textarea' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: `svg` }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'CounterWithHelpOpened');
+    });
+  });
+});

package/cjs/components/Toast/__creevey__/Toast.creevey.mts

@@ -0,0 +1,54 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+const kindTests = () => {
+  test('toastShown', async (context) => {
+    const showToast = context.webdriver.findElement({ css: '[data-tid~="show-toast"]' });
+    await context.webdriver.actions({ bridge: true }).click(showToast).move({ x: 0, y: 0 }).click().perform();
+    await delay(1000);
+    await context.matchImage(await context.takeScreenshot());
+  });
+};
+
+kind('Toast', () => {
+  story('SimpleNotification', () => {
+    kindTests();
+  });
+
+  story('TestNotifier', () => {
+    kindTests();
+  });
+
+  story('ComplexNotification', () => {
+    kindTests();
+  });
+
+  story('complex', () => {
+    kindTests();
+  });
+
+  story('StaticMethod', () => {
+    kindTests();
+  });
+
+  story('button', () => {
+    kindTests();
+  });
+
+  story('data-tid', () => {
+    kindTests();
+  });
+
+  story('onClick', () => {
+    kindTests();
+  });
+
+  story('Toast', () => {
+    kindTests();
+  });
+
+  story('push', () => {
+    kindTests();
+  });
+});

package/cjs/components/Toggle/__creevey__/Toggle.creevey.mts

@@ -0,0 +1,87 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+kind('Toggle', () => {
+  story('Plain', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        flaky: { in: /chrome2022(Dark)?/, tests: ['pressed', 'clicked'] },
+      },
+    });
+
+    test('plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+
+    test('pressed', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: 'label' }),
+        })
+        .press()
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'pressed');
+    });
+
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'label' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'clicked');
+    });
+  });
+
+  story('DisabledWithTooltip', () => {
+    test('pressed', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: 'label' }),
+        })
+        .press()
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'pressed');
+    });
+  });
+
+  story('WithChildren', () => {
+    test('plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+  });
+
+  story('WithLongDescription', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        flaky: { in: /chrome2022(Dark)?/, tests: 'clicked' },
+      },
+    });
+
+    test('plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'label' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'clicked');
+    });
+  });
+});