@skbkontur/react-ui 5.0.8 → 5.0.9

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.9](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@5.0.8...@skbkontur/react-ui@5.0.9) (2025-01-24)
+
+**Note:** Version bump only for package @skbkontur/react-ui
+
+
+
+
+
 ## [5.0.8](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@5.0.7...@skbkontur/react-ui@5.0.8) (2025-01-17)
 
 

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

@@ -0,0 +1,239 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+const commonTests = () => {
+  test('focus and type text', async (context) => {
+    const screenshotElement = context.webdriver.findElement({
+      css: '#test-element',
+    });
+    const autocompleteElement = context.webdriver.findElement({
+      css: '[data-comp-name~="Autocomplete"]',
+    });
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElement).sendKeys('o').perform();
+    await delay(1000);
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+};
+
+const mobileHintsTests = () => {
+  test('noInputValue', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: 'input' }))
+      .perform();
+    await delay(200);
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'noInputValue');
+  });
+
+  test('nothingWasFound', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: 'input' }))
+      .sendKeys('abc')
+      .perform();
+    await delay(200);
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'nothingWasFound');
+  });
+
+  test('updateValue', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: 'input' }))
+      .sendKeys('one')
+      .perform();
+    await delay(200);
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }))
+      .click(context.webdriver.findElement({ css: 'input' }))
+      .perform();
+    await delay(200);
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'updateValue');
+  });
+};
+
+const sizeTests = () => {
+  test('focus and type text small', async (context) => {
+    const screenshotElement = context.webdriver.findElement({
+      css: '#test-element',
+    });
+    const autocompleteElements = await context.webdriver.findElements({
+      css: '[data-comp-name~="Autocomplete"]',
+    });
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[0]).sendKeys('o').perform();
+    await delay(1000);
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+
+  test('focus and type text medium', async (context) => {
+    const screenshotElement = context.webdriver.findElement({
+      css: '#test-element',
+    });
+    const autocompleteElements = await context.webdriver.findElements({
+      css: '[data-comp-name~="Autocomplete"]',
+    });
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[1]).sendKeys('o').perform();
+    await delay(1000);
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+
+  test('focus and type text large', async (context) => {
+    const screenshotElement = context.webdriver.findElement({
+      css: '#test-element',
+    });
+    const autocompleteElements = await context.webdriver.findElements({
+      css: '[data-comp-name~="Autocomplete"]',
+    });
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[2]).sendKeys('o').perform();
+    await delay(1000);
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+};
+
+const menuPosTests = () => {
+  test('focus and type text menu top', async (context) => {
+    const screenshotElement = context.webdriver.findElement({ css: '#test-element' });
+    const autocompleteElements = await context.webdriver.findElements({ css: '[data-comp-name~="Autocomplete"]' });
+
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[0]).sendKeys('o').perform();
+    await delay(1000);
+
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+  test('focus and type text menu bottom', async (context) => {
+    const screenshotElement = context.webdriver.findElement({ css: '#test-element' });
+    const autocompleteElements = await context.webdriver.findElements({ css: '[data-comp-name~="Autocomplete"]' });
+
+    await context.webdriver.actions({ bridge: true }).click(autocompleteElements[1]).sendKeys('o').perform();
+    await delay(1000);
+
+    await context.matchImage(await screenshotElement.takeScreenshot());
+  });
+};
+
+kind('Autocomplete', () => {
+  story('Simple', () => {
+    test('idle', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'idle');
+    });
+
+    test('focused', async (context) => {
+      const autocompleteElement = context.webdriver.findElement({
+        css: '[data-comp-name~="Autocomplete"]',
+      });
+      await context.webdriver.actions({ bridge: true }).click(autocompleteElement).perform();
+      await delay(1000);
+      await context.matchImage(await autocompleteElement.takeScreenshot());
+    });
+
+    commonTests();
+  });
+
+  story('WithRenderItem', () => {
+    commonTests();
+  });
+
+  story('WithBigRenderItemWidth', () => {
+    commonTests();
+  });
+
+  story('WithFixedMenuSize', () => {
+    commonTests();
+  });
+
+  story('WithPercentageWidth', () => {
+    commonTests();
+  });
+
+  story('WithFixedWidth', () => {
+    commonTests();
+  });
+
+  story('WithZeroWidth', () => {
+    commonTests();
+  });
+
+  story('MobileHints', () => {
+    mobileHintsTests();
+  });
+
+  story('MobileHintsEN', () => {
+    mobileHintsTests();
+  });
+
+  story('MobileWithTitle', () => {
+    test('opened', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'input' }))
+        .perform();
+      await delay(200);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'opened');
+    });
+  });
+
+  story('WithManualPosition', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ },
+        flaky: {
+          in: ['firefox2022'],
+          tests: ['opened top with portal', 'opened bottom with portal'],
+        },
+      },
+    });
+
+    test('opened top with portal', async (context) => {
+      const screenshotElement = context.webdriver.findElement({
+        css: '#test-element',
+      });
+      const autocompleteElement = context.webdriver.findElement({
+        css: '[data-comp-name~="Autocomplete"]',
+      });
+      await context.webdriver.actions({ bridge: true }).click(autocompleteElement).sendKeys('o').perform();
+      await delay(1000);
+      await context.matchImage(await screenshotElement.takeScreenshot());
+    });
+
+    test('opened bottom with portal', async (context) => {
+      const screenshotElement = context.webdriver.findElement({
+        css: '#test-element',
+      });
+      const autocompleteElement = context.webdriver.findElement({
+        css: '[data-comp-name~="Autocomplete"]',
+      });
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
+        .click(autocompleteElement)
+        .sendKeys('o')
+        .perform();
+      await delay(1000);
+      await context.matchImage(await screenshotElement.takeScreenshot());
+    });
+  });
+
+  story('Size', () => {
+    sizeTests();
+  });
+
+  story('WithDisabledPortal', () => {
+    commonTests();
+    menuPosTests();
+  });
+
+  story('MenuPos', () => {
+    menuPosTests();
+  });
+});

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

@@ -0,0 +1,251 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+const buttonTests = () => {
+  test('idle', async (context) => {
+    await context.matchImage(await context.takeScreenshot(), 'idle');
+  });
+
+  test('hover', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .move({
+        origin: context.webdriver.findElement({ css: '[data-tid~="test-button"]' }),
+      })
+      .perform();
+    await context.matchImage(await context.takeScreenshot(), 'hover');
+  });
+
+  test('pressed', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .move({
+        origin: context.webdriver.findElement({ css: '[data-tid~="test-button"]' }),
+      })
+      .press()
+      .perform();
+    await context.matchImage(await context.takeScreenshot(), 'pressed');
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .release()
+      .perform();
+  });
+
+  test('clicked', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-tid~="test-button"]' }))
+      .perform();
+    await context.matchImage(await context.takeScreenshot(), 'clicked');
+  });
+
+  test('tabPress', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .sendKeys(Key.TAB)
+      .pause(500)
+      .perform();
+    await context.matchImage(await context.takeScreenshot(), 'tabPress');
+  });
+};
+
+kind('Button', () => {
+  story('PlaygroundDefault', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hover', 'pressed', 'clicked'],
+        },
+        'focus goes out of page and breaks other tests': { in: /firefox/, tests: 'tabPress' },
+      },
+    });
+
+    buttonTests();
+  });
+
+  story('PlaygroundDisabled', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'focus goes out of page and breaks other tests': {
+          in: /firefox/,
+          tests: 'tabPress',
+        },
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hover', 'pressed', 'clicked'],
+        },
+      },
+    });
+
+    buttonTests();
+  });
+
+  story('ButtonAsLinkIconColor', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'focus goes out of page and breaks other tests': {
+          tests: ['pressed', 'clicked', 'tabPress'],
+        },
+        'hover does not work in chrome': {
+          in: /^(?!\b(firefox.*)\b)/,
+          tests: ['hover'],
+        },
+      },
+    });
+
+    buttonTests();
+  });
+
+  story('BtnTextBgHoverActive', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome & only 22 dark theme needed': {
+          in: /^(?!\bfirefox2022Dark?\b)/,
+        },
+      },
+    });
+
+    test('hover', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: '[data-tid~="test-button"]' }),
+        })
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'hover');
+    });
+
+    test('pressed', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: '[data-tid~="test-button"]' }),
+        })
+        .press()
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'pressed');
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .release()
+        .perform();
+    });
+  });
+
+  story('IconAndTextHoverColor', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: /^(?!\bfirefox(2022)?\b)/,
+        },
+      },
+    });
+
+    test('hover', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({
+            css: '[data-tid~="test-button"]',
+          }),
+        })
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'hover');
+    });
+  });
+
+  story('HoverTextColor', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: /^(?!\bfirefox(2022)?\b)/,
+        },
+      },
+    });
+
+    test('hover', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({
+            css: '[data-tid~="test-button"]',
+          }),
+        })
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'hover');
+    });
+  });
+  story('ArrowDisabled', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: true,
+    });
+  });
+  story('UnusedPropValues', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'chrome default and 2022': { in: /^(?!\bchrome(2022)?\b)/ } },
+    });
+  });
+
+  story('BtnBacklessBgHoverActive', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome & only 22 dark theme needed': {
+          in: /^(?!\bfirefox2022Dark?\b)/,
+        },
+      },
+    });
+
+    test('hover', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({
+            css: '[data-tid~="test-button"]',
+          }),
+        })
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'hover');
+    });
+
+    test('pressed', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: '[data-tid~="test-button"]' }),
+        })
+        .press()
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'pressed');
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .release()
+        .perform();
+    });
+  });
+});

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

@@ -0,0 +1,74 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+kind('Calendar', () => {
+  story('CalendarWithMinMaxDate', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { "themes don't affect logic": { in: /^(?!\b(chrome2022|firefox2022)\b)/ } },
+    });
+    test('DateSelect months', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Calendar"]' }))
+        .pause(1000)
+        .click(
+          context.webdriver.findElement({
+            css: '[data-tid="MonthView__month"]:first-child [data-tid="MonthView__headerMonth"] [data-tid="DateSelect__caption"]',
+          }),
+        )
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'DateSelect months');
+    });
+
+    test('DateSelect years', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Calendar"]' }))
+        .pause(1000)
+        .click(
+          context.webdriver.findElement({
+            css: '[data-comp-name~="MonthView"]:first-child [data-tid="MonthView__headerYear"] [data-tid="DateSelect__caption"]',
+          }),
+        )
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'DateSelect years');
+    });
+  });
+
+  story('ScrollsCalendarOnDateChange', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { "themes don't affect logic": { in: /^(?!\b(chrome2022|firefox2022)\b)/ } },
+    });
+    test('initial date', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'initial date');
+    });
+
+    test('scrolls to new date on date change', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="change-date-button"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'scrolls to new date on date change');
+    });
+  });
+
+  story('CalendarWithBottomSeparator', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        "themes don't affect the bottom separator": {
+          in: /^(?!\b(chrome2022|chrome2022Dark|firefox2022|firefox2022Dark)\b)/,
+        },
+      },
+    });
+  });
+});