feat: added button export and added test (#63)

jest.config.js

@@ -3,7 +3,6 @@ module.exports = {
   modulePathIgnorePatterns: [
     "<rootDir>/node_modules",
     "<rootDir>/packages/(.+)/dist/",
-    "<rootDir>/packages/@blocks-unstyled",
   ],
   // collectCoverageFrom: [
   //   "packages/**/*.{js,jsx,ts,tsx}",
@@ -12,5 +11,8 @@ module.exports = {
   globals: {
     __DEV__: true,
   },
-  setupFilesAfterEnv: ["@testing-library/jest-native/extend-expect"],
+  setupFilesAfterEnv: [
+    "@testing-library/jest-native/extend-expect",
+    "@testing-library/react-native/extend-expect",
+  ],
 };

packages/@blocks-unstyled/package.json

@@ -73,6 +73,10 @@
   "react-native-builder-bob": {
     "source": "src",
     "output": "build",
+    "exclude": [
+      "**/*.test.tsx",
+      "**/*.test.ts"
+    ],
     "targets": [
       "commonjs",
       "module",

packages/@blocks-unstyled/src/Button/ButtonContext.tsx

@@ -4,4 +4,4 @@ import type { ButtonContextProps } from './Button.types';
 
 export const ButtonContext = createContext<ButtonContextProps>(null as any);
 
-ButtonContext.displayName = 'BlockButton.Context';
+ButtonContext.displayName = 'Block.ButtonContext';

packages/@blocks-unstyled/src/Button/ButtonLabel.tsx

@@ -39,4 +39,4 @@ const styles = StyleSheet.create({
   },
 });
 
-ButtonLabel.displayName = 'BlockButton.Label';
+ButtonLabel.displayName = 'Block.ButtonLabel';

packages/@blocks-unstyled/src/Button/ButtonLoading.tsx

@@ -29,4 +29,4 @@ const styles = StyleSheet.create({
   root: {},
 });
 
-ButtonLoading.displayName = 'BlockButton.Loading';
+ButtonLoading.displayName = 'Block.ButtonLoading';

packages/@blocks-unstyled/src/Button/ButtonRoot.tsx

@@ -51,4 +51,4 @@ const styles = StyleSheet.create({
   },
 });
 
-ButtonRoot.displayName = 'BlockButton.Root';
+ButtonRoot.displayName = 'Block.Button';

packages/@blocks-unstyled/src/Button/index.tsx

@@ -1,3 +1,11 @@
-export * from './Button';
+import { ButtonLabel } from './ButtonLabel';
+import { ButtonLoading } from './ButtonLoading';
+import { ButtonRoot } from './ButtonRoot';
+
 export * from './Button.types';
-export { default } from './Button';
+
+const Root = ButtonRoot;
+const Label = ButtonLabel;
+const Loading = ButtonLoading;
+
+export { Root, Label, Loading };

packages/@blocks-unstyled/src/Button/tests/Button.test.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+
+import { fireEvent } from '@testing-library/react-native';
+import { render, screen } from '@testing-library/react-native';
+
+import * as Button from '..';
+
+const LABEL_TEXT = 'Hello Blocks';
+
+describe('<Button />', () => {
+  it('should render correctly', () => {
+    render(
+      <Button.Root>
+        <Button.Label>{LABEL_TEXT}</Button.Label>
+      </Button.Root>,
+    );
+
+    const result = screen.toJSON();
+    expect(result.props.accessibilityRole).toEqual('button');
+    expect(result.props.accessible).toBeTruthy();
+
+    const element = screen.getByRole('button');
+    expect(element).toBeTruthy();
+  });
+
+  it('should render button with testID', () => {
+    const BUTTON_TEST_ID = 'buttonTestId';
+
+    render(
+      <Button.Root testID={BUTTON_TEST_ID}>
+        <Button.Label>{LABEL_TEXT}</Button.Label>
+      </Button.Root>,
+    );
+
+    const result = screen.toJSON();
+    expect(result.props.testID).toEqual(BUTTON_TEST_ID);
+
+    const element = screen.getByTestId(BUTTON_TEST_ID);
+    expect(element).toBeTruthy();
+  });
+
+  it('should render button in accessibilityState.disabled when props.disabled is true', () => {
+    render(
+      <Button.Root disabled>
+        <Button.Label>{LABEL_TEXT}</Button.Label>
+      </Button.Root>,
+    );
+
+    const element = screen.getByRole('button', { name: LABEL_TEXT, disabled: true });
+    expect(element).toBeTruthy();
+  });
+
+  it('should render button in accessibilityState.busy and render "ActivityIndicator" when props.loading is true', () => {
+    render(
+      <Button.Root loading>
+        <Button.Label>{LABEL_TEXT}</Button.Label>
+        <Button.Loading />
+      </Button.Root>,
+    );
+
+    const element = screen.getByRole('button', { name: LABEL_TEXT, busy: true });
+    expect(element).toBeTruthy();
+
+    const result = screen.toJSON();
+    const ActivityIndicator = result.children[1];
+    expect(ActivityIndicator.type).toEqual('ActivityIndicator');
+  });
+
+  it('should NOT render label when hideLabelOnLoading is true and loading is true', () => {
+    render(
+      <Button.Root loading hideLabelOnLoading>
+        <Button.Label>{LABEL_TEXT}</Button.Label>
+        <Button.Loading />
+      </Button.Root>,
+    );
+
+    const element = screen.getByRole('button', { busy: true, disabled: true });
+    expect(element).toBeTruthy();
+
+    expect(screen.queryAllByText(LABEL_TEXT)).toEqual([]);
+  });
+
+  it('should be call onPress events', () => {
+    const onPress = jest.fn();
+
+    render(
+      <Button.Root onPress={onPress}>
+        <Button.Label>{LABEL_TEXT}</Button.Label>
+      </Button.Root>,
+    );
+
+    const element = screen.getByRole('button', { name: LABEL_TEXT });
+    expect(element).toBeTruthy();
+
+    fireEvent(element, 'press');
+    expect(onPress).toHaveBeenCalled();
+  });
+
+  it('should be NOT call onPress events while loading', () => {
+    const onPress = jest.fn();
+    render(
+      <Button.Root loading>
+        <Button.Label>{LABEL_TEXT}</Button.Label>
+        <Button.Loading />
+      </Button.Root>,
+    );
+
+    const element = screen.getByRole('button', { name: LABEL_TEXT });
+    expect(element).toBeTruthy();
+
+    fireEvent(element, 'press');
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it('should be NOT call onPress events if disabled', () => {
+    const onPress = jest.fn();
+    render(
+      <Button.Root disabled>
+        <Button.Label>{LABEL_TEXT}</Button.Label>
+        <Button.Loading />
+      </Button.Root>,
+    );
+
+    const element = screen.getByRole('button', { name: LABEL_TEXT });
+    expect(element).toBeTruthy();
+
+    fireEvent(element, 'press');
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it('should render button with testID and nativeID', () => {
+    render(
+      <Button.Root disabled testID='testIDbuttonTest' nativeID='nativeIDbuttonTest'>
+        <Button.Label>{LABEL_TEXT}</Button.Label>
+        <Button.Loading />
+      </Button.Root>,
+    );
+
+    const result = screen.toJSON();
+
+    expect(result.props.testID).toEqual('testIDbuttonTest');
+    expect(result.props.nativeID).toEqual('nativeIDbuttonTest');
+  });
+});

packages/@blocks-unstyled/tsconfig.build.json

@@ -4,5 +4,5 @@
     "baseUrl": "."
   },
   "include": ["./src"],
-  "exclude": ["node_modules", ".turbo"]
+  "exclude": ["node_modules", ".turbo", "**/*.test.tsx"]
 }