@lumx/react 3.18.2-alpha.1 → 3.18.2-alpha.2

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.18.2-alpha.1",
-        "@lumx/icons": "^3.18.2-alpha.1",
+        "@lumx/core": "^3.18.2-alpha.2",
+        "@lumx/icons": "^3.18.2-alpha.2",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -105,5 +105,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.18.2-alpha.1"
+    "version": "3.18.2-alpha.2"
 }

package/src/utils/disabled/useDisableStateProps.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import { fireEvent, render } from '@testing-library/react';
+import { DisabledStateProvider } from './DisabledStateContext';
+import { useDisableStateProps } from './useDisableStateProps';
+
+describe(useDisableStateProps.name, () => {
+    const setup = (props: any, wrapper?: React.ComponentType) => {
+        const testId = 'test-container';
+        const Component = () => {
+            const { disabledStateProps, otherProps } = useDisableStateProps(props);
+            return <div data-testid={testId} {...otherProps} {...disabledStateProps} />;
+        };
+        const renderResult = render(wrapper ? React.createElement(wrapper, undefined, <Component />) : <Component />);
+        return { ...renderResult, element: renderResult.getByTestId(testId) };
+    };
+
+    it('should not be disabled by default', () => {
+        const { element } = setup({});
+        expect(element).not.toHaveAttribute('disabled');
+        expect(element).toHaveAttribute('aria-disabled', 'false');
+    });
+
+    it('should be disabled with `disabled` prop', () => {
+        const { element } = setup({ disabled: true });
+        expect(element).toHaveAttribute('disabled');
+    });
+
+    it('should be disabled with `isDisabled` prop', () => {
+        const { element } = setup({ isDisabled: true });
+        expect(element).toHaveAttribute('disabled');
+    });
+
+    it('should be disabled with `aria-disabled` prop', () => {
+        const { element } = setup({ 'aria-disabled': true });
+        expect(element).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('should be disabled with `aria-disabled` string prop', () => {
+        const { element } = setup({ 'aria-disabled': 'true' });
+        expect(element).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    it('should be disabled with context', () => {
+        const wrapper = ({ children }: any) => (
+            <DisabledStateProvider state="disabled">{children}</DisabledStateProvider>
+        );
+        const { element } = setup({}, wrapper);
+        expect(element).toHaveAttribute('disabled');
+    });
+
+    it('should prioritize context', () => {
+        const wrapper = ({ children }: any) => (
+            <DisabledStateProvider state="disabled">{children}</DisabledStateProvider>
+        );
+        const { element } = setup({ disabled: false }, wrapper);
+        expect(element).toHaveAttribute('disabled');
+        expect(element).toHaveAttribute('aria-disabled', 'false');
+    });
+
+    it('should forward onClick when not disabled', () => {
+        const onClick = jest.fn();
+        const { element } = setup({ onClick });
+        fireEvent.click(element);
+        expect(onClick).toHaveBeenCalled();
+    });
+
+    it('should not forward onClick when disabled', () => {
+        const onClick = jest.fn();
+        const { element } = setup({ disabled: true, onClick });
+        fireEvent.click(element);
+        expect(onClick).not.toHaveBeenCalled();
+    });
+});