feat(buttonWithOptions): add component with stories and tests

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indec/react-commons",
-  "version": "7.2.0",
+  "version": "7.2.1",
   "description": "Common reactjs components for apps",
   "private": false,
   "main": "index.js",

src/__tests__/components/ButtonWithOptions.test.js

@@ -0,0 +1,41 @@
+import {getByTestId, queryByText} from '@testing-library/react';
+
+import ButtonWithOptions from '../../components/ButtonWithOptions.jsx';
+
+describe('<ButtonWithOptions>', () => {
+  let props;
+  const getComponent = () => render(ButtonWithOptions, props);
+  beforeEach(() => {
+    props = {
+      options: [
+        {
+          id: 1,
+          label: 'Option 1',
+          onClick: jest.fn()
+        },
+        {
+          id: 2,
+          label: 'Option 1',
+          onClick: jest.fn()
+        },
+        {
+          id: 3,
+          label: 'Option 3',
+          onClick: jest.fn()
+        }
+      ]
+    };
+  });
+
+  it('should a render a button to show options', () => {
+    const {container} = getComponent();
+    expect(getByTestId(container, 'fade-button')).toBeInTheDocument();
+  });
+
+  it('should not display `props.options`', () => {
+    const {container} = getComponent();
+    props.options.forEach(option => {
+      expect(queryByText(container, option.label)).toBeNull();
+    });
+  });
+});

src/__tests__/components/ErrorMessage.test.js

@@ -5,7 +5,7 @@ import ErrorMessage from '../../components/ErrorMessage.jsx';
 describe('<ErrorMessage>', () => {
   let props;
   const getComponent = () => render(ErrorMessage, props);
-  
+
   beforeEach(() => {
     props = {
       error: 'This is an error message'
@@ -41,4 +41,4 @@ describe('<ErrorMessage>', () => {
       expect(errorElement.textContent).toBe('');
     });
   });
-});
+});

src/__tests__/components/Footer.test.js

@@ -5,7 +5,7 @@ import Footer from '../../components/Footer.jsx';
 describe('<Footer>', () => {
   let props;
   const getComponent = () => render(Footer, props);
-  
+
   beforeEach(() => {
     props = {
       children: '© 2024 INDEC. All rights reserved.'
@@ -36,4 +36,4 @@ describe('<Footer>', () => {
       expect(footer.textContent).toBe('');
     });
   });
-});
+});

src/__tests__/components/Header.test.js

@@ -25,7 +25,7 @@ import Header from '../../components/Header/index.jsx';
 describe('<Header>', () => {
   let props;
   const getComponent = () => render(Header, props);
-  
+
   beforeEach(() => {
     props = {
       onRedirect: jest.fn(),
@@ -87,4 +87,4 @@ describe('<Header>', () => {
       expect(queryByText(container, 'Dashboard')).toBeNull();
     });
   });
-});
+});

src/__tests__/components/Loading.test.js

@@ -5,7 +5,7 @@ import Loading from '../../components/Loading.jsx';
 describe('<Loading>', () => {
   let props;
   const getComponent = () => render(Loading, props);
-  
+
   beforeEach(() => {
     props = {};
   });
@@ -29,4 +29,4 @@ describe('<Loading>', () => {
     expect(spinner).toBeInTheDocument();
     expect(spinner).toHaveClass('animate-spin', 'rounded-full', 'h-10', 'w-10', 'border-b-2', 'border-blue-600');
   });
-});
+});

src/__tests__/components/Login.test.js

@@ -8,8 +8,8 @@ describe('<Login>', () => {
   beforeEach(() => {
     props = {
       title: 'My Application'
-    }
-  })
+    };
+  });
 
   it('should display `My Application`', () => {
     const {container} = getComponent();

src/__tests__/components/Modal.test.js

@@ -5,7 +5,7 @@ import Modal from '../../components/Modal/index.jsx';
 describe('<Modal>', () => {
   let props;
   const getComponent = () => render(Modal, props);
-  
+
   beforeEach(() => {
     props = {
       show: true,
@@ -60,4 +60,4 @@ describe('<Modal>', () => {
       expect(modalContent).toBeInTheDocument();
     });
   });
-});
+});

src/__tests__/components/Pagination.test.js

@@ -5,7 +5,7 @@ import Pagination from '../../components/Pagination.jsx';
 describe('<Pagination>', () => {
   let props;
   const getComponent = () => render(Pagination, props);
-  
+
   beforeEach(() => {
     props = {
       page: 2,
@@ -36,7 +36,7 @@ describe('<Pagination>', () => {
     const {container} = getComponent();
     const pageButton = getByText(container, '1');
     fireEvent.click(pageButton);
-    
+
     expect(props.onChange).toHaveBeenCalledWith(1);
   });
 
@@ -81,4 +81,4 @@ describe('<Pagination>', () => {
       expect(getByText(container, /1 - 5 \| 5/)).toBeInTheDocument();
     });
   });
-});
+});

src/__tests__/components/Select.test.js

@@ -5,7 +5,7 @@ import Select from '../../components/Select.jsx';
 describe('<Select>', () => {
   let props;
   const getComponent = () => render(Select, props);
-  
+
   beforeEach(() => {
     props = {
       options: [
@@ -37,7 +37,7 @@ describe('<Select>', () => {
     const {container} = getComponent();
     const input = container.querySelector('input');
     fireEvent.click(input);
-    
+
     expect(getByText(container, 'Option 1')).toBeInTheDocument();
     expect(getByText(container, 'Option 2')).toBeInTheDocument();
     expect(getByText(container, 'Option 3')).toBeInTheDocument();
@@ -47,10 +47,10 @@ describe('<Select>', () => {
     const {container} = getComponent();
     const input = container.querySelector('input');
     fireEvent.click(input);
-    
+
     const option = getByText(container, 'Option 1');
     fireEvent.click(option);
-    
+
     expect(props.onSelect).toHaveBeenCalledWith(props.name, 1);
   });
 
@@ -80,7 +80,7 @@ describe('<Select>', () => {
       const {container} = getComponent();
       const input = container.querySelector('input');
       fireEvent.click(input);
-      
+
       expect(queryByText(container, 'Option 1')).toBeNull();
     });
   });
@@ -94,7 +94,7 @@ describe('<Select>', () => {
       const {container} = getComponent();
       const input = container.querySelector('input');
       fireEvent.click(input);
-      
+
       expect(getByText(container, 'Cargando...')).toBeInTheDocument();
     });
   });
@@ -108,7 +108,7 @@ describe('<Select>', () => {
       const {container} = getComponent();
       const input = container.querySelector('input');
       fireEvent.click(input);
-      
+
       expect(getByText(container, 'No hay opciones')).toBeInTheDocument();
     });
   });
@@ -145,24 +145,24 @@ describe('<Select>', () => {
     it('should hide error message when dropdown is open', () => {
       const {container} = getComponent();
       const input = container.querySelector('input');
-      
+
       expect(getByText(container, 'This field is required')).toBeInTheDocument();
-      
+
       fireEvent.click(input);
-      
+
       expect(queryByText(container, 'This field is required')).toBeNull();
     });
 
     it('should show error message again when dropdown is closed', () => {
       const {container} = getComponent();
       const input = container.querySelector('input');
-      
+
       fireEvent.click(input);
       expect(queryByText(container, 'This field is required')).toBeNull();
-      
+
       const backdrop = container.querySelector('.fixed');
       fireEvent.click(backdrop);
-      
+
       expect(getByText(container, 'This field is required')).toBeInTheDocument();
     });
 
@@ -185,4 +185,4 @@ describe('<Select>', () => {
       expect(getByText(container, 'Please select a country')).toBeInTheDocument();
     });
   });
-});
+});

src/__tests__/components/Snackbar.test.js

@@ -5,7 +5,7 @@ import Snackbar from '../../components/Snackbar.jsx';
 describe('<Snackbar>', () => {
   let props;
   const getComponent = () => render(Snackbar, props);
-  
+
   beforeEach(() => {
     props = {
       open: true,
@@ -31,7 +31,7 @@ describe('<Snackbar>', () => {
     const {container} = getComponent();
     const closeButton = container.querySelector('button');
     fireEvent.click(closeButton);
-    
+
     expect(props.onClose).toHaveBeenCalled();
   });
 
@@ -105,10 +105,10 @@ describe('<Snackbar>', () => {
 
     it('should auto close after 6 seconds', () => {
       getComponent();
-      
+
       jest.advanceTimersByTime(6000);
-      
+
       expect(props.onClose).toHaveBeenCalled();
     });
   });
-});
+});

src/__tests__/components/Table.test.js

@@ -5,7 +5,7 @@ import Table from '../../components/Table/index.jsx';
 describe('<Table>', () => {
   let props;
   const getComponent = () => render(Table, props);
-  
+
   beforeEach(() => {
     props = {
       columns: [
@@ -112,4 +112,4 @@ describe('<Table>', () => {
       expect(getByText(container, 'Custom no data message')).toBeInTheDocument();
     });
   });
-});
+});

src/__tests__/components/Typeahead.test.js

@@ -5,7 +5,7 @@ import Typeahead from '../../components/Typeahead.jsx';
 describe('<Typeahead>', () => {
   let props;
   const getComponent = () => render(Typeahead, props);
-  
+
   beforeEach(() => {
     props = {
       options: [
@@ -43,15 +43,15 @@ describe('<Typeahead>', () => {
     const {container} = getComponent();
     const input = container.querySelector('input');
     fireEvent.change(input, {target: {value: 'App'}});
-    
+
     expect(props.onInputChange).toHaveBeenCalledWith('App');
   });
 
   it('should open dropdown on focus', () => {
     const {container} = getComponent();
     const input = container.querySelector('input');
     fireEvent.focus(input);
-    
+
     expect(getByText(container, 'Apple')).toBeInTheDocument();
     expect(getByText(container, 'Banana')).toBeInTheDocument();
   });
@@ -60,10 +60,10 @@ describe('<Typeahead>', () => {
     const {container} = getComponent();
     const input = container.querySelector('input');
     fireEvent.focus(input);
-    
+
     const option = getByText(container, 'Apple');
     fireEvent.click(option);
-    
+
     expect(props.onSelect).toHaveBeenCalledWith(props.options[0]);
   });
 
@@ -87,7 +87,7 @@ describe('<Typeahead>', () => {
       const {container} = getComponent();
       const clearButton = container.querySelector('button[type="button"]');
       fireEvent.click(clearButton);
-      
+
       expect(props.onInputChange).toHaveBeenCalledWith('');
       expect(props.onSelect).toHaveBeenCalledWith({_id: ''});
     });
@@ -145,7 +145,7 @@ describe('<Typeahead>', () => {
       const {container} = getComponent();
       const input = container.querySelector('input');
       fireEvent.focus(input);
-      
+
       fireEvent.keyDown(input, {key: 'ArrowDown'});
       const firstOption = getByText(container, 'Apple');
       expect(firstOption).toHaveClass('bg-blue-50', 'text-blue-700');
@@ -157,7 +157,7 @@ describe('<Typeahead>', () => {
       fireEvent.focus(input);
       fireEvent.keyDown(input, {key: 'ArrowDown'});
       fireEvent.keyDown(input, {key: 'Enter'});
-      
+
       expect(props.onSelect).toHaveBeenCalledWith(props.options[0]);
     });
 
@@ -166,8 +166,8 @@ describe('<Typeahead>', () => {
       const input = container.querySelector('input');
       fireEvent.focus(input);
       fireEvent.keyDown(input, {key: 'Escape'});
-      
+
       expect(queryByText(container, 'Apple')).toBeNull();
     });
   });
-});
+});