Merge pull request #3461 from skbkontur/test-input-tooltip-top

test(Validations): add example Input with tooltip top-left, rename other Input examples

packages/react-ui-validations/stories/Input.stories.tsx

@@ -4,6 +4,7 @@ import { Button } from '@skbkontur/react-ui/components/Button';
 import { Input } from '@skbkontur/react-ui/components/Input';
 import { Select } from '@skbkontur/react-ui/components/Select';
 import { Gapped } from '@skbkontur/react-ui';
+import { Story } from '@skbkontur/react-ui/typings/stories';
 
 import {
   text,
@@ -32,7 +33,7 @@ const validateValue = (value: string): Nullable<ValidationInfo> => {
   return null;
 };
 
-export const Example_1 = () => {
+export const TwoWordsRequired = () => {
   const [value, setValue] = useState<string>('');
 
   const validateValue = (value: string): Nullable<ValidationInfo> => {
@@ -57,7 +58,7 @@ export const Example_1 = () => {
 };
 
 // #2 ReactElement в сообщении
-export const Example_2 = () => {
+export const ReactElementInMessage = () => {
   const [value, setValue] = useState<string>('');
 
   return (
@@ -72,7 +73,7 @@ export const Example_2 = () => {
 };
 
 // #3 Промотка сообщении
-export const Example_3 = () => {
+export const ScrollMessage = () => {
   const refContainer = useRef<ValidationContainer>(null);
   const [value, setValue] = useState<string>('');
 
@@ -95,7 +96,7 @@ export const Example_3 = () => {
 };
 
 // #4 Зависимые поля
-export const Example_4 = () => {
+export const DependentFields = () => {
   const refContainer = useRef<ValidationContainer>(null);
   const [value, setValue] = useState<string>('');
   const [sex, setSex] = useState<Nullable<Sex>>(null);
@@ -125,7 +126,7 @@ export const Example_4 = () => {
 };
 
 // #5 Промотка внутри котейнера
-export const Example_5 = () => {
+export const ScrollInsideTheContainer = () => {
   const refContainer = useRef<ValidationContainer>(null);
   const [value, setValue] = useState<string>('');
 
@@ -151,8 +152,8 @@ export const Example_5 = () => {
   );
 };
 
-// #6 Выбор первого контра для валидации
-export const Example_6 = () => {
+// #6 Выбор первого контрола для валидации
+export const SelectFirstControlForValidation = () => {
   const refContainer = useRef<ValidationContainer>(null);
   const [value1, setValue1] = useState<string>('');
   const [value2, setValue2] = useState<string>('');
@@ -199,7 +200,7 @@ export const Example_6 = () => {
 };
 
 // #7 Три невалидных поля по сабмиту
-export const Example_7 = () => {
+export const ThreeInvalidInputOnSubmit = () => {
   const refContainer = useRef<ValidationContainer>(null);
   const [value1, setValue1] = useState<string>('');
   const [value2, setValue2] = useState<string>('');
@@ -230,7 +231,7 @@ export const Example_7 = () => {
 };
 
 // #8 Промотка с фиксированной плашкой снизу
-export const Example_8 = () => {
+export const ScrollWithFixedPlaceBottom = () => {
   const refContainer = useRef<ValidationContainer>(null);
   const [value, setValue] = useState<string>('');
 
@@ -279,7 +280,7 @@ export const Example_8 = () => {
 };
 
 // #9 lostfocus не срабатывает после первого рендера
-export const Example_9 = () => {
+export const LostfocusNotWorkAfterFirstRender = () => {
   const [value, setValue] = useState<string>('');
 
   const validateValue = (): Nullable<ValidationInfo> => (!value ? { message: 'Error msg', type: 'lostfocus' } : null);
@@ -296,7 +297,7 @@ export const Example_9 = () => {
 };
 
 // #10 валидация формы с level = warning
-export const Example_10 = () => {
+export const ValidationWithLevelWarning = () => {
   const refContainer = useRef<ValidationContainer>(null);
   const [immediate, setImmediate] = useState<string>('');
   const [lostfocus, setLostfocus] = useState<string>('');
@@ -370,7 +371,7 @@ export const Example_10 = () => {
 };
 
 // #11 задание ширины в процентах
-export const Example_11 = () => {
+export const SetPercentageWidth = () => {
   const refContainer = useRef<ValidationContainer>(null);
 
   return (
@@ -405,3 +406,41 @@ export const Example_11 = () => {
     </form>
   );
 };
+
+// #12 Tooltip сверху-слева при невалидности
+export const TooltipTopLeft: Story = () => {
+  const [value, setValue] = useState<string>('');
+  const validateValue = (): Nullable<ValidationInfo> =>
+    !/^\d{10}$|^\d{12}$/.test(value) ? { message: 'Неверный ИНН', type: 'lostfocus' } : null;
+
+  return (
+    <ValidationContainer>
+      <div style={{ paddingTop: 60 }}>
+        <ValidationWrapper validationInfo={validateValue()} renderMessage={tooltip('top left')}>
+          <Input value={value} onValueChange={setValue} placeholder={'Введите ИНН'} />
+        </ValidationWrapper>
+      </div>
+    </ValidationContainer>
+  );
+};
+
+TooltipTopLeft.parameters = {
+  creevey: {
+    tests: {
+      async invalidTooltip() {
+        const input = await this.browser.findElement({ css: '.react-ui-1xb4xgu' });
+        await this.browser
+          .actions({
+            bridge: true,
+          })
+          .click(input)
+          .sendKeys('test')
+          .click(this.browser.findElement({ css: 'body' }))
+          .click(input)
+          .pause(500)
+          .perform();
+        await this.expect(await this.takeScreenshot()).to.matchImage();
+      },
+    },
+  },
+};