From f7a027c36da15645b7833274d0f4577f0ab894b7 Mon Sep 17 00:00:00 2001
From: jlca <jorgelca1205@gmail.com>
Date: Fri, 22 Dec 2023 23:09:11 -0600
Subject: [PATCH] feat: added button export and added test (#63)

---
 jest.config.js                                |   6 +-
 packages/@blocks-unstyled/package.json        |   4 +
 .../@blocks-unstyled/src/Button/Button.tsx    |  17 ---
 .../src/Button/ButtonContext.tsx              |   2 +-
 .../src/Button/ButtonLabel.tsx                |   2 +-
 .../src/Button/ButtonLoading.tsx              |   2 +-
 .../src/Button/ButtonRoot.tsx                 |   2 +-
 .../@blocks-unstyled/src/Button/index.tsx     |  12 +-
 .../src/Button/tests/Button.test.tsx          | 144 ++++++++++++++++++
 packages/@blocks-unstyled/tsconfig.build.json |   2 +-
 10 files changed, 167 insertions(+), 26 deletions(-)
 delete mode 100644 packages/@blocks-unstyled/src/Button/Button.tsx
 create mode 100644 packages/@blocks-unstyled/src/Button/tests/Button.test.tsx

diff --git a/jest.config.js b/jest.config.js
index 48335a80..471e2dc4 100644
--- a/jest.config.js
+++ b/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",
+  ],
 };
diff --git a/packages/@blocks-unstyled/package.json b/packages/@blocks-unstyled/package.json
index 7c11cc21..82cb4dba 100644
--- a/packages/@blocks-unstyled/package.json
+++ b/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",
diff --git a/packages/@blocks-unstyled/src/Button/Button.tsx b/packages/@blocks-unstyled/src/Button/Button.tsx
deleted file mode 100644
index 6a5166c3..00000000
--- a/packages/@blocks-unstyled/src/Button/Button.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-
-import { ButtonLabel } from './ButtonLabel';
-import { ButtonLoading } from './ButtonLoading';
-import { ButtonRoot } from './ButtonRoot';
-
-export function Button({ children }: { children: React.ReactNode }) {
-  return <>{children}</>;
-}
-
-Button.displayName = 'BlockButton';
-
-Button.Root = ButtonRoot;
-Button.Label = ButtonLabel;
-Button.Loading = ButtonLoading;
-
-export default Button;
diff --git a/packages/@blocks-unstyled/src/Button/ButtonContext.tsx b/packages/@blocks-unstyled/src/Button/ButtonContext.tsx
index 9ffbf780..0d4dc099 100644
--- a/packages/@blocks-unstyled/src/Button/ButtonContext.tsx
+++ b/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';
diff --git a/packages/@blocks-unstyled/src/Button/ButtonLabel.tsx b/packages/@blocks-unstyled/src/Button/ButtonLabel.tsx
index 0cc24aa4..e5d75f30 100644
--- a/packages/@blocks-unstyled/src/Button/ButtonLabel.tsx
+++ b/packages/@blocks-unstyled/src/Button/ButtonLabel.tsx
@@ -39,4 +39,4 @@ const styles = StyleSheet.create({
   },
 });
 
-ButtonLabel.displayName = 'BlockButton.Label';
+ButtonLabel.displayName = 'Block.ButtonLabel';
diff --git a/packages/@blocks-unstyled/src/Button/ButtonLoading.tsx b/packages/@blocks-unstyled/src/Button/ButtonLoading.tsx
index 1717fa16..2bae2940 100644
--- a/packages/@blocks-unstyled/src/Button/ButtonLoading.tsx
+++ b/packages/@blocks-unstyled/src/Button/ButtonLoading.tsx
@@ -29,4 +29,4 @@ const styles = StyleSheet.create({
   root: {},
 });
 
-ButtonLoading.displayName = 'BlockButton.Loading';
+ButtonLoading.displayName = 'Block.ButtonLoading';
diff --git a/packages/@blocks-unstyled/src/Button/ButtonRoot.tsx b/packages/@blocks-unstyled/src/Button/ButtonRoot.tsx
index f9f2e994..102bbbbf 100644
--- a/packages/@blocks-unstyled/src/Button/ButtonRoot.tsx
+++ b/packages/@blocks-unstyled/src/Button/ButtonRoot.tsx
@@ -51,4 +51,4 @@ const styles = StyleSheet.create({
   },
 });
 
-ButtonRoot.displayName = 'BlockButton.Root';
+ButtonRoot.displayName = 'Block.Button';
diff --git a/packages/@blocks-unstyled/src/Button/index.tsx b/packages/@blocks-unstyled/src/Button/index.tsx
index b9202eca..c43a9349 100644
--- a/packages/@blocks-unstyled/src/Button/index.tsx
+++ b/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 };
diff --git a/packages/@blocks-unstyled/src/Button/tests/Button.test.tsx b/packages/@blocks-unstyled/src/Button/tests/Button.test.tsx
new file mode 100644
index 00000000..7cf72e88
--- /dev/null
+++ b/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');
+  });
+});
diff --git a/packages/@blocks-unstyled/tsconfig.build.json b/packages/@blocks-unstyled/tsconfig.build.json
index 74d8af61..18ab27cb 100644
--- a/packages/@blocks-unstyled/tsconfig.build.json
+++ b/packages/@blocks-unstyled/tsconfig.build.json
@@ -4,5 +4,5 @@
     "baseUrl": "."
   },
   "include": ["./src"],
-  "exclude": ["node_modules", ".turbo"]
+  "exclude": ["node_modules", ".turbo", "**/*.test.tsx"]
 }