@skbkontur/react-ui 0.0.0-d4e280859d → 0.0.0-d99038a7ec

package/components/Tooltip/Tooltip.styles/Tooltip.styles.js

@@ -1,11 +1,9 @@
-import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2;
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 export var styles = memoizeStyle({
   cross: function cross(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      cursor: pointer;\n      height: ", ";\n      line-height: 0;\n      padding: ", ";\n      position: absolute;\n      right: 0;\n      top: 0;\n      width: ", ";\n      box-sizing: content-box;\n\n      &:hover {\n        color: ", ";\n      }\n    "])), t.tooltipCloseBtnColor, t.tooltipCloseBtnSide, t.tooltipCloseBtnPadding, t.tooltipCloseBtnSide, t.tooltipCloseBtnHoverColor);
+    return /*#__PURE__*/css("color:", t.tooltipCloseBtnColor, ";cursor:pointer;height:", t.tooltipCloseBtnSide, ";line-height:0;padding:", t.tooltipCloseBtnPadding, ";position:absolute;right:0;top:0;width:", t.tooltipCloseBtnSide, ";box-sizing:content-box;&:hover{color:", t.tooltipCloseBtnHoverColor, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:cross;"));
   },
   tooltipContent: function tooltipContent(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      padding: ", " ", ";\n      position: relative;\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.tooltipTextColor, t.tooltipPaddingY, t.tooltipPaddingX, t.tooltipFontSize, t.tooltipLineHeight);
+    return /*#__PURE__*/css("color:", t.tooltipTextColor, ";padding:", t.tooltipPaddingY, " ", t.tooltipPaddingX, ";position:relative;font-size:", t.tooltipFontSize, ";line-height:", t.tooltipLineHeight, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:tooltipContent;"));
   }
 });

package/components/Tooltip/Tooltip.styles/Tooltip.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","styles","cross","t","_templateObject","_taggedTemplateLiteralLoose","tooltipCloseBtnColor","tooltipCloseBtnSide","tooltipCloseBtnPadding","tooltipCloseBtnHoverColor","tooltipContent","_templateObject2","tooltipTextColor","tooltipPaddingY","tooltipPaddingX","tooltipFontSize","tooltipLineHeight"],"sources":["Tooltip.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  cross(t: Theme) {\n    return css`\n      color: ${t.tooltipCloseBtnColor};\n      cursor: pointer;\n      height: ${t.tooltipCloseBtnSide};\n      line-height: 0;\n      padding: ${t.tooltipCloseBtnPadding};\n      position: absolute;\n      right: 0;\n      top: 0;\n      width: ${t.tooltipCloseBtnSide};\n      box-sizing: content-box;\n\n      &:hover {\n        color: ${t.tooltipCloseBtnHoverColor};\n      }\n    `;\n  },\n\n  tooltipContent(t: Theme) {\n    return css`\n      color: ${t.tooltipTextColor};\n      padding: ${t.tooltipPaddingY} ${t.tooltipPaddingX};\n      position: relative;\n      font-size: ${t.tooltipFontSize};\n      line-height: ${t.tooltipLineHeight};\n    `;\n  },\n});\n"],"mappings":"sIAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;AAG7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,KAAK,WAAAA,MAACC,CAAQ,EAAE;IACd,OAAOJ,GAAG,CAAAK,eAAA,KAAAA,eAAA,GAAAC,2BAAA;IACCF,CAAC,CAACG,oBAAoB;;IAErBH,CAAC,CAACI,mBAAmB;;IAEpBJ,CAAC,CAACK,sBAAsB;;;;IAI1BL,CAAC,CAACI,mBAAmB;;;;IAInBJ,CAAC,CAACM,yBAAyB;;;EAG1C,CAAC;;EAEDC,cAAc,WAAAA,eAACP,CAAQ,EAAE;IACvB,OAAOJ,GAAG,CAAAY,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;IACCF,CAAC,CAACS,gBAAgB;IAChBT,CAAC,CAACU,eAAe,EAAIV,CAAC,CAACW,eAAe;;IAEpCX,CAAC,CAACY,eAAe;IACfZ,CAAC,CAACa,iBAAiB;;EAEtC;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","cross","t","tooltipCloseBtnColor","tooltipCloseBtnSide","tooltipCloseBtnPadding","tooltipCloseBtnHoverColor","process","env","NODE_ENV","tooltipContent","tooltipTextColor","tooltipPaddingY","tooltipPaddingX","tooltipFontSize","tooltipLineHeight"],"sources":["Tooltip.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  cross(t: Theme) {\n    return css`\n      color: ${t.tooltipCloseBtnColor};\n      cursor: pointer;\n      height: ${t.tooltipCloseBtnSide};\n      line-height: 0;\n      padding: ${t.tooltipCloseBtnPadding};\n      position: absolute;\n      right: 0;\n      top: 0;\n      width: ${t.tooltipCloseBtnSide};\n      box-sizing: content-box;\n\n      &:hover {\n        color: ${t.tooltipCloseBtnHoverColor};\n      }\n    `;\n  },\n\n  tooltipContent(t: Theme) {\n    return css`\n      color: ${t.tooltipTextColor};\n      padding: ${t.tooltipPaddingY} ${t.tooltipPaddingX};\n      position: relative;\n      font-size: ${t.tooltipFontSize};\n      line-height: ${t.tooltipLineHeight};\n    `;\n  },\n});\n"],"mappings":"AAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;AAG7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,KAAK,WAAAA,MAACC,CAAQ,EAAE;IACd,oBAAOJ,GAAG;IACCI,CAAC,CAACC,oBAAoB;;IAErBD,CAAC,CAACE,mBAAmB;;IAEpBF,CAAC,CAACG,sBAAsB;;;;IAI1BH,CAAC,CAACE,mBAAmB;;;;IAInBF,CAAC,CAACI,yBAAyB,UAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;;;EAG1C,CAAC;;EAEDC,cAAc,WAAAA,eAACR,CAAQ,EAAE;IACvB,oBAAOJ,GAAG;IACCI,CAAC,CAACS,gBAAgB;IAChBT,CAAC,CAACU,eAAe,OAAIV,CAAC,CAACW,eAAe;;IAEpCX,CAAC,CAACY,eAAe;IACfZ,CAAC,CAACa,iBAAiB,SAAAR,OAAA,CAAAC,GAAA,CAAAC,QAAA;;EAEtC;AACF,CAAC,CAAC","ignoreList":[]}

package/components/Tooltip/__creevey__/Tooltip.creevey.mts

@@ -0,0 +1,533 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+
+kind('Tooltip', () => {
+  story('FocusTooltip', () => {
+    test('01 - plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), '01 - plain');
+    });
+
+    test('02 - focus', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .pause(500)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), '02 - focus');
+    });
+
+    test('03 - blur', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .perform(); // NOTE In FF next Tab key event will focus browser tab that fail next tests
+      // Possible solution add focus trap element inside all stories as a decorator
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'body' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), '03 - blur');
+    });
+  });
+
+  story('FocusTooltipNativeInput', () => {
+    test('01 - plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), '01 - plain');
+    });
+
+    test('02 - focus', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'input' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), '02 - focus');
+    });
+
+    test('03 - blur', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'input' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'body' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), '03 - blur');
+    });
+  });
+
+  story('TooltipWithExternalDynamicContent', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'story-skip-1': { in: 'chrome2022', tests: ['06 - changes left position if does not fit'] },
+      },
+    });
+    test('01 - plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), '01 - plain');
+    });
+
+    test('02 - changes top position if does not fit', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#Container-0 button' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), '02 - changes top position if does not fit');
+    });
+
+    test('03 - does not change position back on shrink', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#Container-0 button' }))
+        .pause(100)
+        .click(context.webdriver.findElement({ css: '#Container-0 button' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), '03 - does not change position back on shrink');
+    });
+
+    test('04 - does not change top position if fits', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#Container-1 button' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), '04 - does not change top position if fits');
+    });
+
+    test('05 - does not change position on shrink', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#Container-1 button' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#Container-1 button' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), '05 - does not change position on shrink');
+    });
+
+    test('06 - changes left position if does not fit', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#Container-2 button' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), '06 - changes left position if does not fit');
+    });
+
+    test('07 - does not change position back on shrink', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#Container-2 button' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#Container-2 button' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), '07 - does not change position back on shrink');
+    });
+
+    test('08 - does not change bottom position if fits', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#Container-3 button' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), '08 - does not change bottom position if fits');
+    });
+
+    test('09 - does not change position on shrink', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#Container-3 button' }))
+        .pause(100)
+        .click(context.webdriver.findElement({ css: '#Container-3 button' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), '09 - does not change position on shrink');
+    });
+
+    test('10 - does not change bottom position if does not fit', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#Container-4 button' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), '10 - does not change bottom position if does not fit');
+    });
+
+    test('11 - does not change position on shrink', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#Container-4 button' }))
+        .pause(100)
+        .click(context.webdriver.findElement({ css: '#Container-4 button' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), '11 - does not change position on shrink');
+    });
+  });
+
+  story('TooltipWithInputAndSwitchableContent', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        // TODO @Khlutkova fix after update browsers
+        'story-skip-0': {
+          in: ['firefox2022', 'firefox2022Dark', 'chrome2022Dark'],
+          tests: ['focus and types', 'clear input'],
+        },
+      },
+    });
+
+    test('focus and types', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'input' }))
+        .sendKeys('Hi')
+        .perform();
+      await delay(2000);
+      await context.matchImage(await context.takeScreenshot(), 'focus and types');
+    });
+
+    test('clear input', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'input' }))
+        .sendKeys('Hi')
+        .sendKeys(Key.BACK_SPACE, Key.BACK_SPACE)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'clear input');
+    });
+  });
+
+  story('DynamicTriggersStory', ({ setStoryParameters }) => {
+    setStoryParameters({
+      captureElement: '[data-comp-name~="TestTooltip"]',
+    });
+
+    test('without trigger', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'without trigger');
+    });
+
+    test('hover - mouseEnter', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#hover' }))
+        .move({
+          origin: context.webdriver.findElement({ css: '[type="button"]' }),
+        })
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'hover - mouseEnter');
+    });
+
+    test('hover - mouseLeave', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#hover' }))
+        .move({
+          origin: context.webdriver.findElement({ css: '[type="button"]' }),
+        })
+        .pause(500)
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: 'body' }),
+        })
+        .pause(500)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'hover - mouseLeave');
+    });
+
+    test('click - click anchor', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#click' }))
+        .click(context.webdriver.findElement({ css: '[type="button"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'click - click anchor');
+    });
+
+    test('click - click outside', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#click' }))
+        .click(context.webdriver.findElement({ css: '[type="button"]' }))
+        .click(context.webdriver.findElement({ css: 'body' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'click - click outside');
+    });
+
+    test('focus - focus', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#focus' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[type="button"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'focus - focus');
+    });
+
+    test('focus - blur', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#focus' }))
+        .click(context.webdriver.findElement({ css: '[type="button"]' }))
+        .click(context.webdriver.findElement({ css: 'body' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'focus - blur');
+    });
+
+    test('opened', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#opened' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened');
+    });
+
+    test('closed', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#opened' }))
+        .click(context.webdriver.findElement({ css: '#closed' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'closed');
+    });
+
+    test('hover&focus - mouseEnter', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#hover_focus' }))
+        .move({
+          origin: context.webdriver.findElement({ css: '[type="button"]' }),
+        })
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'hover&focus - mouseEnter');
+    });
+
+    test('hover&focus - mouseLeave', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#hover_focus' }))
+        .move({
+          origin: context.webdriver.findElement({ css: '[type="button"]' }),
+        })
+        .move({
+          origin: context.webdriver.findElement({ css: 'body' }),
+        })
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'hover&focus - mouseLeave');
+    });
+
+    test('hover&focus - focus', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#hover_focus' }))
+        .click(context.webdriver.findElement({ css: '[type="button"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'hover&focus - focus');
+    });
+
+    test('hover&focus - focus - mouseLeave', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#hover_focus' }))
+        .click(context.webdriver.findElement({ css: '[type="button"]' }))
+        .move({
+          origin: context.webdriver.findElement({ css: 'body' }),
+        })
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'hover&focus - focus - mouseLeave');
+    });
+
+    test('hover&focus - blur', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#hover_focus' }))
+        .click(context.webdriver.findElement({ css: '[type="button"]' }))
+        .pause(100)
+        .sendKeys(Key.TAB)
+        .click(context.webdriver.findElement({ css: 'body' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'hover&focus - blur');
+    });
+  });
+
+  story('RenderInFirstAvailablePosition', () => {
+    test('render in available position', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[type="button"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'render in available position');
+    });
+
+    test('relocate on new available position', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[type="button"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[type="button"]' }))
+        .perform();
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[type="button"]' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'relocate on new available position');
+    });
+  });
+
+  story('TooltipWithManualControl', () => {
+    test('call show', async (context) => {
+      const btns = await context.webdriver.findElements({ css: '[type="button"]' });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(btns[0])
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'call show');
+    });
+
+    test('call hide after show', async (context) => {
+      const btns = await context.webdriver.findElements({ css: '[type="button"]' });
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(btns[0])
+        .click(btns[1])
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'call hide after show');
+    });
+  });
+
+  story('TooltipWithAnchor', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'themes do not affect logic': {
+          in: /firefox/,
+          tests: ['hover by dynamic anchor'],
+        },
+      },
+    });
+
+    test('hover by dynamic anchor', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({ x: 0, y: 0 })
+        .move({ origin: context.webdriver.findElement({ css: '[data-tid~="tooltip_anchor_1"]' }) })
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'hover by dynamic anchor');
+    });
+  });
+});

package/components/TooltipMenu/__creevey__/TooltipMenu.creevey.mts

@@ -0,0 +1,131 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { PopupMenuDataTids } from '../../../internal/PopupMenu/tids';
+import { delay } from '../../../lib/delay';
+
+const textAlignmentTests = () => {
+  test('opened', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: `[data-tid~="${PopupMenuDataTids.caption}"]` }))
+      .perform();
+    await delay(1000);
+    await context.matchImage(await context.takeScreenshot(), 'opened');
+  });
+};
+
+kind('TooltipMenu', () => {
+  story('SimpleExample', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'story-skip-0': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['clickAfterClickedOnCaption', 'clicked'],
+        },
+
+        flaky: { in: ['firefox2022', 'firefox2022Dark'], tests: ['tabPress'] },
+      },
+    });
+
+    test('plain', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'plain');
+    });
+
+    test('clickAfterClickedOnCaption', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="PopupMenu"]' }))
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="PopupMenu"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'clickAfterClickedOnCaption');
+    });
+
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="PopupMenu"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'clicked');
+    });
+
+    test('clickedOutside', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="PopupMenu"]' }))
+        .click(context.webdriver.findElement({ css: 'body' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'clickedOutside');
+    });
+
+    test('tabPress', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'tabPress');
+    });
+
+    test('enterPress', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .sendKeys(Key.ENTER)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'enterPress');
+    });
+
+    test('escapePress', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .sendKeys(Key.TAB)
+        .sendKeys(Key.ENTER)
+        .sendKeys(Key.ESCAPE)
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'escapePress');
+    });
+  });
+
+  story('MobileExampleHorizontalPaddings', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: null });
+
+    test('opened', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '#test-element' }))
+        .perform();
+      await delay(200);
+      await context.webdriver
+        .actions({ bridge: true })
+        .move({ origin: context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }) })
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened');
+    });
+  });
+  story('WithItemsAndIcons', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
+
+    textAlignmentTests();
+  });
+
+  story('WithItemsAndIconsWithoutTextAlignment', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
+
+    textAlignmentTests();
+  });
+});