feat(Button): add data-tid for spinner icon (#3277)

skbkontur · Sep 29, 2023 · 88a2d15 · 88a2d15
1 parent a61c549
commit 88a2d15
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/packages/react-ui/components/Button/Button.tsx b/packages/react-ui/components/Button/Button.tsx
@@ -187,6 +187,7 @@ export interface ButtonState {
 
 export const ButtonDataTids = {
   root: 'Button__root',
+  spinner: 'Button__spinner',
 } as const;
 
 type DefaultProps = Required<Pick<ButtonProps, 'use' | 'size' | 'type'>>;
@@ -420,7 +421,11 @@ export class Button extends React.Component<ButtonProps, ButtonState> {
     let loadingNode = null;
     if (loading && !icon) {
       const loadingIcon = _isTheme2022 ? <LoadingIcon size={size} /> : <Spinner caption={null} dimmed type="mini" />;
-      loadingNode = <div className={styles.loading()}>{loadingIcon}</div>;
+      loadingNode = (
+        <div data-tid={ButtonDataTids.spinner} className={styles.loading()}>
+          {loadingIcon}
+        </div>
+      );
     }
 
     // Force disable all props and features, that cannot be use with Link

diff --git a/packages/react-ui/components/Button/__tests__/Button-test.tsx b/packages/react-ui/components/Button/__tests__/Button-test.tsx
@@ -2,7 +2,9 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React, { useState } from 'react';
 
-import { Button, ButtonType } from '../Button';
+import { ThemeContext } from '../../../lib/theming/ThemeContext';
+import { THEME_2022 } from '../../../lib/theming/themes/Theme2022';
+import { Button, ButtonDataTids, ButtonType } from '../Button';
 
 describe('Button', () => {
   it('has correct label', () => {
@@ -196,4 +198,14 @@ describe('Button', () => {
     expect(onMouseDown).toHaveBeenCalledTimes(1);
     expect(onMouseUp).toHaveBeenCalledTimes(1);
   });
+
+  it('has data-tid `Button__spinner` when component in loading state (THEME_2022)', () => {
+    render(
+      <ThemeContext.Provider value={THEME_2022}>
+        <Button loading />
+      </ThemeContext.Provider>,
+    );
+
+    expect(screen.getByTestId(ButtonDataTids.spinner)).toBeInTheDocument();
+  });
 });