Добавить data-tid

packages/react-ui/.styleguide/helpers.js

@@ -82,6 +82,7 @@ const getCommonSections = () => {
     { name: 'Roadmap', content: path.join(__dirname, '../ROADMAP.md') },
     { name: 'Migration', content: path.join(__dirname, '../MIGRATION.md'), exampleMode: 'expand' },
     { name: 'LocaleContext', content: path.join(__dirname, '../lib/locale/LOCALECONTEXT.md') },
+    { name: 'DataTid', content: path.join(__dirname, '../lib/data-tid/DATATID.md') },
     { name: 'SSR', content: path.join(__dirname, '../SSR.md') },
     { name: 'Mobiles', content: path.join(__dirname, '../MOBILES.md') },
     { name: 'Accessibility', content: path.join(__dirname, '../../../accessibility.md') },

packages/react-ui/components/Autocomplete/Autocomplete.tsx

@@ -77,6 +77,10 @@ export interface AutocompleteState {
   isMobileOpened: boolean;
 }
 
+export const autocompleteDataTid = {
+  root: 'Autocomplete__root',
+};
+
 /**
  * Стандартный инпут с подсказками.
  *
@@ -209,7 +213,12 @@ export class Autocomplete extends React.Component<AutocompleteProps, Autocomplet
 
     return (
       <RenderLayer onFocusOutside={this.handleBlur} onClickOutside={this.handleClickOutside} active={focused}>
-        <span className={styles.root(this.theme)} style={{ width }} ref={this.refRootSpan}>
+        <span
+          data-tid={autocompleteDataTid.root}
+          className={styles.root(this.theme)}
+          style={{ width }}
+          ref={this.refRootSpan}
+        >
           <Input {...inputProps} />
           {isMobile ? this.renderMobileMenu() : this.renderMenu()}
         </span>

packages/react-ui/components/Button/Button.tsx

@@ -164,6 +164,10 @@ export interface ButtonState {
   focusedByTab: boolean;
 }
 
+export const buttonDataTid = {
+  root: 'Button__root',
+};
+
 @rootNode
 export class Button extends React.Component<ButtonProps, ButtonState> {
   public static __KONTUR_REACT_UI__ = 'Button';
@@ -382,7 +386,7 @@ export class Button extends React.Component<ButtonProps, ButtonState> {
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
         <span {...wrapProps}>
-          <button ref={this._ref} {...rootProps}>
+          <button data-tid={buttonDataTid.root} ref={this._ref} {...rootProps}>
             {innerShadowNode}
             {outlineNode}
             {loadingNode}

packages/react-ui/components/Center/Center.tsx

@@ -23,6 +23,10 @@ export interface CenterProps
       }
     > {}
 
+export const centerDataTid = {
+  root: 'Center__root',
+};
+
 /**
  * Контейнер, который центрирует элементы внутри себя.
  */
@@ -47,6 +51,7 @@ export class Center extends React.Component<CenterProps> {
 
     return (
       <div
+        data-tid={centerDataTid.root}
         {...rest}
         className={cx({
           [styles.root()]: true,

packages/react-ui/components/Checkbox/Checkbox.tsx

@@ -62,6 +62,10 @@ export interface CheckboxState {
   focusedByTab: boolean;
   indeterminate: boolean;
 }
+
+export const checkboxDataTid = {
+  root: 'Checkbox__root',
+};
 @rootNode
 export class Checkbox extends React.PureComponent<CheckboxProps, CheckboxState> {
   public static __KONTUR_REACT_UI__ = 'Checkbox';
@@ -222,6 +226,7 @@ export class Checkbox extends React.PureComponent<CheckboxProps, CheckboxState>
 
     return (
       <label
+        data-tid={checkboxDataTid.root}
         className={rootClass}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}

packages/react-ui/components/CurrencyInput/CurrencyInput.tsx

@@ -46,6 +46,10 @@ export interface CurrencyInputState {
   focused: boolean;
 }
 
+export const currencyInputDataTid = {
+  root: 'CurrencyInput__root',
+};
+
 /**
  * Поле для денежных сумм (и других числовых значений).
  * Принимает любые свойства `Input`.
@@ -144,6 +148,7 @@ export class CurrencyInput extends React.PureComponent<CurrencyInputProps, Curre
 
     return (
       <Input
+        data-tid={currencyInputDataTid.root}
         {...rest}
         value={this.state.formatted}
         onBlur={this.handleBlur}

packages/react-ui/components/CurrencyLabel/CurrencyLabel.tsx

@@ -18,11 +18,15 @@ export const defaultProps = {
   fractionDigits: 2,
 };
 
+export const currencyLabelDataTid = {
+  root: 'CurrencyLabel__root',
+};
+
 export const CurrencyLabel = (props: CurrencyLabelProps): JSX.Element => {
   const { value, fractionDigits, currencySymbol } = props;
   return (
     <CommonWrapper {...props}>
-      <span>
+      <span data-tid={currencyLabelDataTid.root}>
         {CurrencyHelper.format(value, { fractionDigits })}
         {currencySymbol && String.fromCharCode(0xa0) /* &nbsp; */}
         {currencySymbol}

packages/react-ui/components/DatePicker/DatePicker.tsx

@@ -85,6 +85,10 @@ export interface DatePickerState {
 
 type DatePickerValue = string;
 
+export const dataPickerDataTid = {
+  root: 'DatePicker__root',
+};
+
 @rootNode
 export class DatePicker extends React.PureComponent<DatePickerProps<DatePickerValue>, DatePickerState> {
   public static __KONTUR_REACT_UI__ = 'DatePicker';
@@ -250,7 +254,12 @@ export class DatePicker extends React.PureComponent<DatePickerProps<DatePickerVa
 
     if (this.state.opened) {
       picker = (
-        <DropdownContainer getParent={this.getParent} offsetY={2} align={this.props.menuAlign}>
+        <DropdownContainer
+          data-tid={dataPickerDataTid.root}
+          getParent={this.getParent}
+          offsetY={2}
+          align={this.props.menuAlign}
+        >
           <Picker
             value={date}
             minDate={formattedMinDate}

packages/react-ui/components/DatePicker/Picker.tsx

@@ -36,6 +36,11 @@ const getTodayCalendarDate = () => {
   };
 };
 
+export const pickerDataTid = {
+  root: 'Picker__root',
+  todayWrapper: 'Picker__todayWrapper',
+};
+
 @locale('DatePicker', DatePickerLocaleHelper)
 export class Picker extends React.Component<Props, State> {
   public static __KONTUR_REACT_UI__ = 'Picker';
@@ -75,7 +80,7 @@ export class Picker extends React.Component<Props, State> {
     const { date } = this.state;
 
     return (
-      <div className={styles.root(this.theme)} onMouseDown={(e) => e.preventDefault()}>
+      <div data-tid={pickerDataTid.root} className={styles.root(this.theme)} onMouseDown={(e) => e.preventDefault()}>
         <Calendar
           ref={(c) => (this.calendar = c)}
           value={this.props.value}
@@ -102,7 +107,7 @@ export class Picker extends React.Component<Props, State> {
     const today = new InternalDate({ order, separator }).setComponents(InternalDateGetter.getTodayComponents());
     return (
       <button
-        data-tid="Picker__todayWrapper"
+        data-tid={pickerDataTid.todayWrapper}
         className={styles.todayWrapper(this.theme)}
         onClick={this.handleSelectToday(today)}
         tabIndex={-1}

packages/react-ui/components/Dropdown/Dropdown.tsx

@@ -87,6 +87,10 @@ export interface DropdownProps extends CommonProps {
 
 type DropdownSelectType = Select<React.ReactNode, React.ReactNode>;
 
+export const dropdownDataTid = {
+  root: 'Dropdown__root',
+};
+
 /**
  * Выпадающее меню.
  *
@@ -178,6 +182,7 @@ export class Dropdown extends React.Component<DropdownProps> {
 
     return (
       <Select<React.ReactNode, React.ReactNode>
+        data-tid={dropdownDataTid.root}
         ref={this._refSelect}
         {...filterProps(props, PASS_PROPS)}
         value={caption}

packages/react-ui/components/FileUploader/FileUploader.tsx

@@ -61,6 +61,12 @@ export interface FileUploaderRef {
   reset: () => void;
 }
 
+export const fileUploaderDataTid = {
+  root: 'FileUploader__root',
+  content: 'FileUploader__content',
+  link: 'FileUploader__link',
+};
+
 const defaultRenderFile = (file: FileUploaderAttachedFile, fileNode: React.ReactElement) => fileNode;
 
 const _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((props: _FileUploaderProps, ref) => {
@@ -225,7 +231,7 @@ const _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((pro
 
   return (
     <CommonWrapper {...props}>
-      <div className={jsStyles.root(theme)} style={useMemoObject({ width })}>
+      <div data-tid={fileUploaderDataTid.root} className={jsStyles.root(theme)} style={useMemoObject({ width })}>
         {!hideFiles && !isSingleMode && !!files.length && <FileUploaderFileList renderFile={renderFile} />}
         <div className={uploadButtonWrapperClassNames}>
           <label
@@ -234,8 +240,8 @@ const _FileUploader = React.forwardRef<FileUploaderRef, _FileUploaderProps>((pro
             ref={labelRef}
             className={uploadButtonClassNames}
           >
-            <div data-tid={'FileUploader__content'} className={jsStyles.content()}>
-              <span data-tid={'FileUploader__link'} className={linkClassNames}>
+            <div data-tid={fileUploaderDataTid.content} className={jsStyles.content()}>
+              <span data-tid={fileUploaderDataTid.link} className={linkClassNames}>
                 {hasOneFileForSingle ? locale.choosedFile : locale.chooseFile}
               </span>
               &nbsp;

packages/react-ui/components/FxInput/FxInput.tsx

@@ -33,6 +33,10 @@ export interface FxInputProps
       }
     > {}
 
+export const fxInputDataTid = {
+  root: 'FxInput__root',
+};
+
 /** Принимает все свойства `Input`'a */
 @rootNode
 export class FxInput extends React.Component<FxInputProps> {
@@ -87,7 +91,7 @@ export class FxInput extends React.Component<FxInputProps> {
     }
 
     return (
-      <Group width={this.props.width}>
+      <Group data-tid={fxInputDataTid.root} width={this.props.width}>
         {button}
         {this.getProps().type === 'currency' ? (
           <CurrencyInput

packages/react-ui/components/Gapped/Gapped.tsx

@@ -28,6 +28,11 @@ export interface GappedProps extends CommonProps {
   children: React.ReactNode;
 }
 
+export const gappedDataTid = {
+  vertical: 'Gapped__vertical',
+  horizontal: 'Gapped__horizontal',
+};
+
 /**
  * Контейнер, расстояние между элементами в котором равно `gap`.
  */
@@ -93,7 +98,7 @@ export class Gapped extends React.Component<GappedProps> {
         );
       });
 
-    return <div>{children}</div>;
+    return <div data-tid={gappedDataTid.vertical}>{children}</div>;
   }
 
   private renderHorizontal() {
@@ -108,7 +113,7 @@ export class Gapped extends React.Component<GappedProps> {
     const contStyle: React.CSSProperties = wrap ? { marginTop: -gap - 1, marginLeft: -gap } : { whiteSpace: 'nowrap' };
 
     return (
-      <div style={rootStyle}>
+      <div data-tid={gappedDataTid.horizontal} style={rootStyle}>
         <div style={contStyle}>
           {React.Children.toArray(children)
             .filter(this.filterChildren)

packages/react-ui/components/GlobalLoader/GlobalLoader.tsx

@@ -72,6 +72,10 @@ interface DefaultProps {
 }
 export type GlobalLoaderComponentProps = GlobalLoaderProps & DefaultProps;
 
+export const globalLoaderDataTid = {
+  root: 'GlobalLoader',
+};
+
 let currentGlobalLoader: GlobalLoader;
 
 @rootNode
@@ -160,7 +164,7 @@ export class GlobalLoader extends React.Component<GlobalLoaderComponentProps, Gl
             expectedResponseTime={this.state.expectedResponseTime}
             delayBeforeHide={this.props.delayBeforeHide}
             status={status}
-            data-tid="GlobalLoader"
+            data-tid={globalLoaderDataTid.root}
             disableAnimations={this.props.disableAnimations}
           />
         </CommonWrapper>

packages/react-ui/components/Group/Group.tsx

@@ -20,6 +20,10 @@ interface GroupChildProps {
   corners?: number;
 }
 
+export const groupDataTid = {
+  root: 'Group__root',
+};
+
 @rootNode
 export class Group extends React.Component<GroupProps> {
   public static __KONTUR_REACT_UI__ = 'Group';
@@ -46,7 +50,7 @@ export class Group extends React.Component<GroupProps> {
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <span className={styles.root()} style={style}>
+        <span data-tid={groupDataTid.root} className={styles.root()} style={style}>
           {React.Children.map(this.props.children, (child) => {
             if (!child || !React.isValidElement<GroupChildProps>(child)) {
               return null;

packages/react-ui/components/Input/Input.tsx

@@ -107,6 +107,10 @@ export interface InputState {
   needsPolyfillPlaceholder: boolean;
 }
 
+export const inputDataTid = {
+  root: 'Input__root',
+};
+
 /**
  * Интерфейс пропсов наследуется от `React.InputHTMLAttributes<HTMLInputElement>`.
  *  Все пропсы кроме перечисленных, `className` и `style` передаются в `<input>`
@@ -328,7 +332,7 @@ export class Input extends React.Component<InputProps, InputState> {
     const input = mask ? this.renderMaskedInput(inputProps, mask) : React.createElement('input', inputProps);
 
     return (
-      <label {...labelProps}>
+      <label data-tid={inputDataTid.root} {...labelProps}>
         <span className={styles.sideContainer()}>
           {this.renderLeftIcon()}
           {this.renderPrefix()}

packages/react-ui/components/Link/Link.tsx

@@ -61,6 +61,10 @@ export interface LinkState {
   focusedByTab: boolean;
 }
 
+export const linkDataTid = {
+  root: 'Link__root',
+};
+
 /**
  * Элемент ссылки из HTML.
  */
@@ -149,7 +153,7 @@ export class Link extends React.Component<LinkProps, LinkState> {
     };
 
     return (
-      <a {...rest} {...linkProps}>
+      <a data-tid={linkDataTid.root} {...rest} {...linkProps}>
         {iconElement}
         {this.props.children}
         {arrow}

packages/react-ui/components/Loader/Loader.tsx

@@ -51,6 +51,11 @@ export interface LoaderState {
   spinnerStyle?: object;
 }
 
+export const loaderDataTid = {
+  vail: 'Loader__Veil',
+  spinner: 'Loader__Spinner',
+};
+
 /**
  * DRAFT - лоадер-контейнер
  */
@@ -217,7 +222,7 @@ export class Loader extends React.Component<LoaderProps, LoaderState> {
 
     return (
       <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>
-        <div className={styles.loader()} data-tid={isLoaderActive ? 'Loader__Veil' : ''}>
+        <div className={styles.loader()} data-tid={isLoaderActive ? loaderDataTid.vail : ''}>
           <ZIndex
             priority={'Loader'}
             applyZIndex={isLoaderActive}
@@ -254,7 +259,7 @@ export class Loader extends React.Component<LoaderProps, LoaderState> {
   private renderSpinner(type?: 'mini' | 'normal' | 'big', caption?: React.ReactNode, component?: React.ReactNode) {
     return (
       <span
-        data-tid={'Loader__Spinner'}
+        data-tid={loaderDataTid.spinner}
         className={cx(styles.spinnerContainer(), { [styles.spinnerContainerSticky()]: this.state.isStickySpinner })}
         style={this.state.spinnerStyle}
       >