@skbkontur/react-ui 5.0.8 → 5.0.9

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

@@ -0,0 +1,156 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+
+kind('DateInput', () => {
+  story('Simple', () => {
+    test('idle', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'idle');
+    });
+
+    test('focus', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const input = window.document.querySelector("[data-comp-name~='DateInput']");
+        if (input instanceof HTMLElement) {
+          input.focus();
+        }
+      });
+      await context.matchImage(await context.takeScreenshot(), 'focus');
+    });
+  });
+
+  story('Disabled', () => {
+    test('idle', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'idle');
+    });
+
+    test('focus', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const input = window.document.querySelector("[data-comp-name~='DateInput']");
+        if (input instanceof HTMLElement) {
+          input.focus();
+        }
+      });
+      await context.matchImage(await context.takeScreenshot(), 'focus');
+    });
+  });
+
+  story('WithWidth', () => {
+    test('idle', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'idle');
+    });
+
+    test('focus', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const input = window.document.querySelector("[data-comp-name~='DateInput']");
+        if (input instanceof HTMLElement) {
+          input.focus();
+        }
+      });
+      await context.matchImage(await context.takeScreenshot(), 'focus');
+    });
+  });
+
+  story('BlurAlwaysAfterChange', () => {
+    test('value not changed', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const input = window.document.querySelector("[data-comp-name~='DateInput']");
+        if (input instanceof HTMLElement) {
+          input.focus();
+        }
+      });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'body' }))
+        .perform();
+      await delay(500);
+      await context.matchImage(await context.takeScreenshot(), 'value not changed');
+    });
+
+    test('value changed', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const input = window.document.querySelector("[data-comp-name~='DateInput']");
+        if (input instanceof HTMLElement) {
+          input.focus();
+        }
+      });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys('12')
+        .click(context.webdriver.findElement({ css: 'body' }))
+        .perform();
+      await delay(500);
+      await context.matchImage(await context.takeScreenshot(), 'value changed');
+    });
+
+    test('value restored', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const input = window.document.querySelector("[data-comp-name~='DateInput']");
+        if (input instanceof HTMLElement) {
+          input.focus();
+        }
+      });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.NUMPAD1)
+        .click(context.webdriver.findElement({ css: 'body' }))
+        .perform();
+      await context.webdriver.executeScript(function () {
+        const input = window.document.querySelector("[data-comp-name~='DateInput']");
+        if (input instanceof HTMLElement) {
+          input.blur();
+        }
+      });
+      await context.matchImage(await context.takeScreenshot(), 'value restored');
+    });
+  });
+
+  story('WithNoValue', () => {
+    test('idle', async (context) => {
+      await context.matchImage(await context.takeScreenshot());
+    });
+
+    test('focused', async (context) => {
+      await context.webdriver.executeScript(function () {
+        const input = window.document.querySelector("[data-comp-name~='DateInput']");
+        if (input instanceof HTMLElement) {
+          input.focus();
+        }
+      });
+      await context.matchImage(await context.takeScreenshot());
+    });
+  });
+
+  story('WithError', () => {
+    test('focused', async (context) => {
+      const plain = await context.takeScreenshot();
+      const DateInputPlaceholder = context.webdriver.findElement({
+        css: '[data-tid~="DateFragmentsView__placeholder"]',
+      });
+      await context.webdriver.actions({ bridge: true }).click(DateInputPlaceholder).perform();
+      await delay(1000);
+      const focused = await context.takeScreenshot();
+      await context.matchImages({ plain, focused });
+    });
+  });
+
+  story('ShouldSetFocusOnPlaceholderClick', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'chrome only': { in: /^(?!\bchrome2022\b)/ } } });
+
+    test('focused', async (context) => {
+      const DateInputPlaceholder = context.webdriver.findElement({
+        css: '[data-tid~="DateFragmentsView__placeholder"]',
+      });
+      await context.webdriver.actions({ bridge: true }).click(DateInputPlaceholder).perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot());
+    });
+  });
+});

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

@@ -0,0 +1,209 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+kind('DatePicker', () => {
+  story('WithMouseeventHandlers', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        flaky: {
+          in: ['chrome2022Dark'],
+          tests: ['DateSelect year'],
+        },
+      },
+    });
+    test('opened', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened');
+    });
+
+    test('DateSelect month', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .perform();
+      await delay(1000);
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(
+          context.webdriver.findElement({
+            css: '[data-tid="MonthView__month"]:first-child [data-tid="MonthView__headerMonth"] [data-tid="DateSelect__caption"]',
+          }),
+        )
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'DateSelect month');
+    });
+
+    test('DateSelect year', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .perform();
+      await delay(1000);
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(
+          context.webdriver.findElement({
+            css: '[data-comp-name~="MonthView"]:first-child [data-tid="MonthView__headerYear"] [data-tid="DateSelect__caption"]',
+          }),
+        )
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'DateSelect year');
+    });
+  });
+
+  story('DatePickerWithMinMaxDate', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        flaky: {
+          in: /^(?!\b(chrome|ie11)\b)/,
+          tests: ['DateSelect months', 'DateSelect years'],
+        },
+      },
+    });
+
+    test('DateSelect months', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .pause(1000)
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(
+          context.webdriver.findElement({
+            css: '[data-tid="MonthView__month"]:first-child [data-tid="MonthView__headerMonth"] [data-tid="DateSelect__caption"]',
+          }),
+        )
+        .pause(1000)
+        .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~="DatePicker"]' }))
+        .pause(1000)
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(
+          context.webdriver.findElement({
+            css: '[data-comp-name~="MonthView"]:first-child [data-tid="MonthView__headerYear"] [data-tid="DateSelect__caption"]',
+          }),
+        )
+        .pause(1000)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'DateSelect years');
+    });
+  });
+
+  story('DatePickerInRelativeBody', () => {
+    test('opened', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="toggle-relative-position"]' }))
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened');
+    });
+  });
+
+  story('WithManualPosition', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ } } });
+
+    test('opened top without relative position', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened top without relative position');
+    });
+
+    test('opened bottom without relative position', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened bottom without relative position');
+    });
+
+    test('opened top with relative position', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="relative"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened top with relative position');
+    });
+
+    test('opened bottom with relative position', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-tid~="relative"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened bottom');
+    });
+  });
+  story('MobilePicker', () => {
+    test('MobilePicker on iphone opened', async (context) => {
+      await delay(1000);
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="DatePicker"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'MobilePicker on iphone opened');
+    });
+  });
+});

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

@@ -0,0 +1,184 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+kind('Dropdown', () => {
+  story('SimpleDropdown', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': { in: ['chrome2022', 'chrome2022Dark'], tests: ['MenuItem hover'] },
+      },
+    });
+
+    test('idle', async (context) => {
+      const element = await context.webdriver.findElement({ css: '.dropdown-test-container' });
+      await delay(1000);
+      await context.matchImage(await element.takeScreenshot(), 'idle');
+    });
+
+    test('clicked', async (context) => {
+      const element = await context.webdriver.findElement({ css: '.dropdown-test-container' });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await element.takeScreenshot(), 'clicked');
+    });
+
+    test('MenuItem hover', async (context) => {
+      const element = await context.webdriver.findElement({ css: '.dropdown-test-container' });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }),
+        })
+        .perform();
+      await delay(1000);
+      await context.matchImage(await element.takeScreenshot(), 'MenuItem hover');
+    });
+
+    test('selected item', async (context) => {
+      const element = await context.webdriver.findElement({ css: '.dropdown-test-container' });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await element.takeScreenshot(), 'selected item');
+    });
+  });
+
+  story('WithMenuItemIcon', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: '.dropdown-test-container' });
+
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'clicked');
+    });
+  });
+
+  story('InsideScrollableContainer', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: '.dropdown-test-container' });
+
+    test('scrolled', async (context) => {
+      await context.webdriver
+        .actions()
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      const opened = await context.takeScreenshot();
+      await context.webdriver.executeScript(function () {
+        const scrollContainer = window.document.querySelector('.dropdown-test-container') as HTMLElement;
+        scrollContainer.scrollTop = scrollContainer.scrollHeight;
+      });
+      const scrolled = await context.takeScreenshot();
+      await context.matchImages({ opened, scrolled });
+    });
+  });
+
+  story('WithCustomSelectTheme', () => {
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'clicked');
+    });
+  });
+
+  story('WithManualPosition', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'no themes': { in: /^(?!\b(chrome2022|firefox2022)\b)/ } } });
+
+    test('opened top with portal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened top with portal');
+    });
+
+    test('opened bottom with portal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened bottom with portal');
+    });
+
+    test('opened top without portal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="portal"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened top without portal');
+    });
+
+    test('opened bottom without portal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="portal"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-tid~="pos"]' }))
+        .pause(1000)
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Dropdown"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened bottom without portal');
+    });
+  });
+
+  story('Size', () => {
+    test('clicked all', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="open-all"]' }))
+        .pause(500)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'ClickedAll');
+    });
+  });
+});