feat/base-button-component

jest.config.mjs

@@ -56,6 +56,8 @@ const [initialProjectOptions] = [
         moduleNameMapper: {
             ...pathsToModuleNameMapper(tsconfig.compilerOptions.paths, { prefix: '<rootDir>/' }),
             '^.+\\.css$': 'identity-obj-proxy',
+            // TODO remove test
+            'postcss-each': path.join(import.meta.dirname, 'tools/postcss/postcss-each.cjs'),
         },
         testPathIgnorePatterns: IGNORED_PACKAGES.map((pkg) => {
             const relativeDir = path.relative(import.meta.dirname, resolveInternal(pkg));

package.json

@@ -146,14 +146,14 @@
         "postcss-color-mod-function": "^4.1.1",
         "postcss-custom-media": "^8.0.2",
         "postcss-custom-properties": "^12.1.10",
-        "postcss-each": "^1.1.0",
         "postcss-export-custom-variables": "^1.0.0",
         "postcss-for": "^2.1.1",
         "postcss-import": "^16.1.1",
         "postcss-loader": "^8.1.1",
         "postcss-mixins": "^7.0.3",
         "postcss-modules": "^6.0.1",
         "postcss-preset-env": "^7.8.3",
+        "postcss-simple-vars": "^7.0.1",
         "prettier": "~3.6.2",
         "querystring-es3": "^0.2.1",
         "raw-loader": "^4.0.1",

packages/action-button/package.json

@@ -10,9 +10,8 @@
     "main": "index.js",
     "module": "./esm/index.js",
     "dependencies": {
+        "@alfalab/core-components-button": "^13.1.0",
         "@alfalab/core-components-shared": "^2.1.0",
-        "@alfalab/core-components-spinner": "^6.0.2",
-        "@alfalab/hooks": "^1.13.1",
         "classnames": "^2.5.1",
         "react-merge-refs": "^1.1.0",
         "tslib": "^2.4.0"

packages/action-button/src/Component.screenshots.test.tsx

@@ -87,8 +87,10 @@ describe(
             },
         }),
         screenshotOpts: { clip },
-        evaluate: (page: Page) =>
-            page.hover('button[class^=component]').then(() => page.waitForTimeout(500)),
+        evaluate: async (page) => {
+            await page.hover('button[class*=component]');
+            await page.waitForTimeout(500);
+        },
         matchImageSnapshotOptions: {
             customSnapshotIdentifier: (...args) => `hover-${customSnapshotIdentifier(...args)}`,
         },
@@ -106,10 +108,10 @@ describe(
             },
         }),
         screenshotOpts: { clip },
-        evaluate: (page: Page) => {
-            return page.mouse
-                .move(30, 30)
-                .then(() => page.mouse.down().then(() => page.waitForTimeout(500)));
+        evaluate: async (page) => {
+            await page.mouse.move(30, 30);
+            await page.mouse.down();
+            await page.waitForTimeout(500);
         },
         matchImageSnapshotOptions: {
             customSnapshotIdentifier: (...args) => `pressed-${customSnapshotIdentifier(...args)}`,

packages/action-button/src/Component.test.tsx

@@ -20,102 +20,106 @@ describe('ActionButton', () => {
     it('should use "size" prop', () => {
         const size = 48;
 
-        render(<ActionButton size={size} />);
+        render(<ActionButton icon={null} size={size} />);
 
-        expect(screen.getByRole('button')).toHaveClass('size-48');
-    });
-
-    it('should use "size" prop "s" by default', () => {
-        render(<ActionButton />);
-
-        expect(screen.getByRole('button')).toHaveClass('size-48');
+        expect(screen.getByRole('button')).toHaveClass('size48');
     });
 
     it('should use "iconWrapperClassName" prop', () => {
         const iconClassName = 'test-class';
-        const { container } = render(<ActionButton iconWrapperClassName={iconClassName} />);
+        const { container } = render(
+            <ActionButton icon={null} iconWrapperClassName={iconClassName} />,
+        );
 
         expect(container.querySelector(`.${iconClassName}`)).toBeInTheDocument();
     });
 
     it('should use "href" prop and become a link', () => {
         const href = 'http://127.0.0.1';
 
-        render(<ActionButton href={href} />);
+        render(<ActionButton icon={null} href={href} dataTestId={dti} />);
 
-        expect(screen.getByRole('button')).toHaveAttribute('href', href);
+        expect(screen.getByTestId(dti)).toHaveAttribute('href', href);
     });
 
     it('should use "disabled" prop (button)', () => {
-        const { rerender } = render(<ActionButton />);
+        const { rerender } = render(<ActionButton icon={null} />);
 
         expect(screen.getByRole('button')).not.toBeDisabled();
 
-        rerender(<ActionButton disabled={true} />);
+        rerender(<ActionButton icon={null} disabled={true} />);
 
         expect(screen.getByRole('button')).toBeDisabled();
     });
 
     it('should use "disabled" prop (link)', () => {
-        const { rerender } = render(<ActionButton href='http://localhost' />);
+        const { rerender } = render(
+            <ActionButton icon={null} href='http://localhost' dataTestId={dti} />,
+        );
 
-        expect(screen.getByRole('button')).not.toHaveAttribute('aria-disabled', 'true');
+        expect(screen.getByTestId(dti)).not.toHaveAttribute('aria-disabled', 'true');
 
-        rerender(<ActionButton href='http://localhost' disabled={true} />);
+        rerender(
+            <ActionButton icon={null} href='http://localhost' dataTestId={dti} disabled={true} />,
+        );
 
-        expect(screen.getByRole('button')).toHaveAttribute('aria-disabled', 'true');
+        expect(screen.getByTestId(dti)).toHaveAttribute('aria-disabled', 'true');
     });
 
     it('should use "loading" prop (button)', () => {
-        const { rerender } = render(<ActionButton dataTestId={dti} />);
+        const { rerender } = render(<ActionButton icon={null} dataTestId={dti} />);
 
         expect(screen.getByRole('button')).not.toBeDisabled();
         expect(screen.queryByTestId(loaderDti)).toBeNull();
 
-        rerender(<ActionButton loading={true} dataTestId={dti} />);
+        rerender(<ActionButton icon={null} loading={true} dataTestId={dti} />);
 
         expect(screen.getByRole('button')).toBeDisabled();
         expect(screen.getByTestId(loaderDti)).toBeInTheDocument();
     });
 
     it('should use "loading" prop (link)', () => {
-        const { rerender } = render(<ActionButton href='http://localhost' dataTestId={dti} />);
+        const { rerender } = render(
+            <ActionButton icon={null} href='http://localhost' dataTestId={dti} />,
+        );
 
-        expect(screen.getByRole('button')).not.toHaveAttribute('aria-disabled', 'true');
+        expect(screen.getByTestId(dti)).not.toHaveAttribute('aria-disabled', 'true');
         expect(screen.queryByTestId(loaderDti)).toBeNull();
 
-        rerender(<ActionButton href='http://localhost' loading={true} dataTestId={dti} />);
+        rerender(
+            <ActionButton icon={null} href='http://localhost' loading={true} dataTestId={dti} />,
+        );
 
-        expect(screen.getByRole('button')).toHaveAttribute('aria-disabled', 'true');
+        expect(screen.getByTestId(dti)).toHaveAttribute('aria-disabled', 'true');
         expect(screen.getByTestId(loaderDti)).toBeInTheDocument();
     });
 
     it('should use "dataTestId" prop', () => {
-        render(<ActionButton dataTestId={dti} />);
+        render(<ActionButton icon={null} dataTestId={dti} />);
 
         expect(screen.getByRole('button')).toHaveAttribute('data-test-id', dti);
     });
 
     it('should use "children" prop', () => {
         const label = 'Action Button';
 
-        render(<ActionButton>{label}</ActionButton>);
+        render(<ActionButton icon={null}>{label}</ActionButton>);
 
         expect(screen.getByRole('button')).toHaveTextContent(label);
     });
 
     it('should use "className" prop', () => {
         const className = 'test-class';
 
-        render(<ActionButton className={className} />);
+        render(<ActionButton icon={null} className={className} />);
 
         expect(screen.getByRole('button')).toHaveClass(className);
     });
 
     it('should call "onClick" prop', async () => {
         const cb = jest.fn();
 
-        render(<ActionButton onClick={cb} />);
+        render(<ActionButton icon={null} onClick={cb} />);
 
         await userEvent.click(screen.getByRole('button'));
 
@@ -124,11 +128,28 @@ describe('ActionButton', () => {
 
     it('should have data-test-id', () => {
         const dti = 'action-button-dti';
-        const { getByTestId } = render(<ActionButton dataTestId={dti} loading />);
+        const { getByTestId } = render(<ActionButton icon={null} dataTestId={dti} loading />);
 
         const testIds = getActionButtonTestIds(dti);
 
         expect(getByTestId(testIds.actionButton)).toBeInTheDocument();
         expect(getByTestId(testIds.spinner)).toBeInTheDocument();
     });
+
+    it('should pass "loaderClassName"', () => {
+        const dti = 'action-button-dti';
+        const loaderClassName = 'foo';
+        const { getByTestId } = render(
+            <ActionButton
+                icon={null}
+                dataTestId={dti}
+                loading={true}
+                loaderClassName={loaderClassName}
+            />,
+        );
+
+        const testIds = getActionButtonTestIds(dti);
+
+        expect(getByTestId(testIds.spinner)).toHaveClass(loaderClassName);
+    });
 });