@skbkontur/react-ui 5.0.8 → 5.0.10

package/components/Modal/__creevey__/Modal.creevey.mts

@@ -0,0 +1,281 @@
+import { story, kind, test } from 'creevey';
+
+import { delay } from '../../../lib/delay';
+
+const topMiddleBottomModalTests = () => {
+  test('top', async (context) => {
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'top');
+  });
+
+  test('middle', async (context) => {
+    await context.webdriver.executeScript(function () {
+      const modalContainer = window.document.querySelector('[data-tid="modal-container"]') as HTMLElement;
+      const modalContent = window.document.querySelector('[data-tid="modal-content"]') as HTMLElement;
+
+      modalContainer.scrollTop = modalContent.offsetHeight / 2;
+    });
+    await delay(100);
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'middle');
+  });
+
+  test('bottom', async (context) => {
+    await context.webdriver.executeScript(function () {
+      const modalContainer = window.document.querySelector('[data-tid="modal-container"]') as HTMLElement;
+      const modalContent = window.document.querySelector('[data-tid="modal-content"]') as HTMLElement;
+
+      modalContainer.scrollTop = modalContent.offsetHeight;
+    });
+    await delay(100);
+    await context.matchImage(await context.webdriver.takeScreenshot(), 'bottom');
+  });
+};
+
+kind('Modal', () => {
+  story('ModalWithFooterPanelStory', () => {
+    test('open modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Button"]:nth-of-type(1)' }))
+        .perform();
+      await delay(100);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
+    });
+  });
+
+  story('WithIconInput', () => {
+    test('open modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
+    });
+  });
+
+  story('ModalOverAnotherModalStory', () => {
+    test('open first modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-first-modal"]' }))
+        .perform();
+      await delay(200);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open first modal');
+    });
+
+    test('open second modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-first-modal"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-second-modal"]' }))
+        .perform();
+      await delay(100);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open second modal');
+    });
+  });
+
+  story('ModalWithoutFooterPanelStory', () => {
+    test('open modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(200);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
+    });
+  });
+
+  story('ModalWithoutFooterStory', () => {
+    test('open modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
+    });
+  });
+
+  story('ModalMobileView', () => {
+    test('idle', async (context) => {
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'idle');
+    });
+  });
+
+  story('ModalWithVariableHeightOfContent', () => {
+    test('open modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(100);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
+    });
+
+    test('toggle content height', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '#modal-inner [data-comp-name~="Toggle"]' }))
+        .pause(500)
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'toggle content height');
+    });
+  });
+
+  story('ModalWithoutStickyElements', () => {
+    topMiddleBottomModalTests();
+  });
+
+  story('SmallModalOnTheTop', () => {
+    test('open modal', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(100);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'open modal');
+    });
+
+    test('close by click on the cross', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid="modal-close"]' }))
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'close by click on the cross');
+    });
+
+    test("doesn't close by click on the content", async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid="modal-content-button"]' }))
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), "doesn't close by click on the content");
+    });
+
+    test('closes by click on the background', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-tid="modal-container"]' }))
+        .perform();
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'closes by click on the background');
+    });
+  });
+
+  story('ModalWithChildrenFromOtherComponent', () => {
+    topMiddleBottomModalTests();
+  });
+
+  story('MobileModal', () => {
+    test('top', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(200);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'top');
+    });
+
+    test('middle', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(200);
+      await context.webdriver.executeScript(function () {
+        const modalContent = window.document.querySelector('.focus-lock-container') as HTMLElement;
+        const modalBody = window.document.querySelector('[data-comp-name~="Modal.Body"] ') as HTMLElement;
+
+        modalContent.scrollTop = modalBody.offsetHeight / 2;
+      });
+      await delay(100);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'middle');
+    });
+
+    test('bottom', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-modal"]' }))
+        .perform();
+      await delay(200);
+      await context.webdriver.executeScript(function () {
+        const modalContent = window.document.querySelector('.focus-lock-container') as HTMLElement;
+        const modalBody = window.document.querySelector('[data-comp-name~="Modal.Body"] ') as HTMLElement;
+
+        modalContent.scrollTop = modalBody.offsetHeight;
+      });
+      await delay(100);
+      await context.matchImage(await context.webdriver.takeScreenshot(), 'bottom');
+    });
+  });
+
+  story('ChangeAllModalContent', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } },
+    });
+    test('idle', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="open-first-modal"]' }))
+        .perform();
+      await delay(500);
+      const firstModal = await context.webdriver.takeScreenshot();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: `[data-tid~="open-second-modal"] button` }))
+        .perform();
+      await delay(500);
+      const secondModal = await context.webdriver.takeScreenshot();
+      await context.expect({ firstModal, secondModal }).to.matchImages();
+    });
+  });
+});

package/components/Paging/__creevey__/Paging.creevey.mts

@@ -0,0 +1,97 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+
+kind('Paging', () => {
+  story('GoToAbsensePageStory', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hover', 'Move to page by Ender'],
+        },
+        flaky: {
+          in: ['firefox2022', 'firefox2022Dark'],
+          tests: ['Move focus right', 'Move to page by Ender'],
+        },
+      },
+    });
+
+    test('plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+
+    test('hover', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: `[data-tid='Paging__pageLinkWrapper']` }),
+        })
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'hover');
+    });
+
+    test('change page by number', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: `[data-tid='Paging__pageLinkWrapper']` }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'change page by number');
+    });
+
+    test('change page by forwardLink', 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-tid='Paging__forwardLink']` }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'change page by forwardLink');
+    });
+
+    test('focused', 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-tid='Paging__pageLinkWrapper']` }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'focused');
+    });
+
+    test('Move focus right', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: `[data-tid='Paging__pageLinkWrapper']` }))
+        .pause(100)
+        .sendKeys(Key.ARROW_RIGHT)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'Move focus right');
+    });
+
+    test('Move to page by Ender', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: `[data-tid='Paging__pageLinkWrapper']` }))
+        .pause(100)
+        .sendKeys(Key.ARROW_RIGHT)
+        .pause(100)
+        .sendKeys(Key.ENTER)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'Move to page by Ender');
+    });
+  });
+});

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

@@ -0,0 +1,38 @@
+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');
+    });
+  });
+});

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');
+    });
+  });
+});