diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index c3cf76f38..3ff62840e 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -1,18 +1,33 @@ import React from 'react'; -import { Button as RsButton } from 'reactstrap'; +import { Button as RsButton, ButtonProps as RsButtonProps } from 'reactstrap'; -const Button = ({ disabled = false, block = false, outline = false, ...props }) => ( - -); +export interface ButtonProps extends RsButtonProps { + ariaLabelledBy?: string; +} -export type { ButtonProps } from 'reactstrap'; +const Button = ({ + ariaLabelledBy = '', + disabled = false, + children, + 'aria-label': ariaLabel, + ...props +}: ButtonProps) => { + if (!ariaLabel && children && typeof children === 'string') { + ariaLabel = children; + } + + return ( + + {children} + + ); +}; export default Button; diff --git a/src/components/Combobox/Combobox.tsx b/src/components/Combobox/Combobox.tsx index a0521df80..9e51e0254 100644 --- a/src/components/Combobox/Combobox.tsx +++ b/src/components/Combobox/Combobox.tsx @@ -78,7 +78,7 @@ function Combobox({ const grouped = !!(optionsProp[0] as OptionGroup)?.options; const options: Option[] = useMemo(() => { - if (optionsProp === [] || !optionsProp) { + if (!Array.isArray(optionsProp) || !optionsProp.length) { return []; } diff --git a/src/components/Input/DateInput.spec.js b/src/components/Input/DateInput.spec.js index df6c5da94..ab4c1deef 100644 --- a/src/components/Input/DateInput.spec.js +++ b/src/components/Input/DateInput.spec.js @@ -50,7 +50,7 @@ describe('', () => { const component = mount(); const toggle = component.find('InputGroup'); - const calendarButton = toggle.find('Button'); + const calendarButton = toggle.find(Button); assert.equal(calendarButton.props().tabIndex, -1); }); @@ -58,7 +58,7 @@ describe('', () => { const component = mount(); assert.equal(component.find('Dropdown').props().isOpen, false); - const toggle = component.find('InputGroup').find('Button'); + const toggle = component.find('InputGroup').find(Button); toggle.simulate('click'); assert.equal(component.find('Dropdown').props().isOpen, true); @@ -91,7 +91,7 @@ describe('', () => { const dropdown = component.find('Dropdown'); assert.equal(dropdown.props().isOpen, false); - const toggle = component.find('InputGroup').find('Button'); + const toggle = component.find('InputGroup').find(Button); toggle.simulate('click'); assert.equal(dropdown.props().isOpen, false); @@ -182,7 +182,7 @@ describe('', () => { it('should set date after clicking prev year', () => { callback.resetHistory(); const expectedDate = addYears(component.instance().getCurrentDate(), -1); - const prevYear = component.find('Button.js-prev-year'); + const prevYear = component.find('button.js-prev-year'); prevYear.simulate('click'); @@ -193,7 +193,7 @@ describe('', () => { it('should set date after clicking next year', () => { callback.resetHistory(); const expectedDate = addYears(component.instance().getCurrentDate(), 1); - const nextYear = component.find('Button.js-next-year'); + const nextYear = component.find('button.js-next-year'); nextYear.simulate('click'); @@ -204,7 +204,7 @@ describe('', () => { it('should set date after clicking prev month', () => { callback.resetHistory(); const expectedDate = addMonths(component.instance().getCurrentDate(), -1); - const prevMonth = component.find('Button.js-prev-month'); + const prevMonth = component.find('button.js-prev-month'); prevMonth.simulate('click'); @@ -215,7 +215,7 @@ describe('', () => { it('should set date after clicking next month', () => { callback.resetHistory(); const expectedDate = addMonths(component.instance().getCurrentDate(), 1); - const nextMonth = component.find('Button.js-next-month'); + const nextMonth = component.find('button.js-next-month'); nextMonth.simulate('click'); @@ -224,14 +224,14 @@ describe('', () => { }); it('should set date to start of today after clicking today', () => { - const today = component.find('footer Button').at(0); + const today = component.find('footer button').at(0); today.simulate('click'); assert.deepEqual(component.instance().getCurrentDate(), startOfToday()); }); it('should call onChange after clicking today', () => { callback.resetHistory(); - const today = component.find('footer Button').at(0); + const today = component.find('footer button').at(0); today.simulate('click'); assert(callback.called); const spyCall = callback.getCall(0); @@ -240,14 +240,14 @@ describe('', () => { }); it('should clear date after clicking clear', () => { - const clear = component.find('footer Button').at(1); + const clear = component.find('footer button').at(1); clear.simulate('click'); assert.equal(component.instance().inputEl.value, ''); }); it('should call onChange after clicking clear', () => { callback.resetHistory(); - const clear = component.find('footer Button').at(1); + const clear = component.find('footer button').at(1); clear.simulate('click'); assert(callback.calledWith('', false)); }); @@ -374,7 +374,7 @@ describe('', () => { it('should allow setting to prev year', () => { onChange.resetHistory(); const expectedDate = addYears(component.instance().getCurrentDate(), -1); - const prevYear = component.find('Button.js-prev-year'); + const prevYear = component.find('button.js-prev-year'); prevYear.simulate('click'); @@ -385,7 +385,7 @@ describe('', () => { it('should allow setting to next year', () => { onChange.resetHistory(); const expectedDate = addYears(component.instance().getCurrentDate(), 1); - const nextYear = component.find('Button.js-next-year'); + const nextYear = component.find('button.js-next-year'); nextYear.simulate('click'); @@ -396,7 +396,7 @@ describe('', () => { it('should allow setting to prev month', () => { onChange.resetHistory(); const expectedDate = addMonths(component.instance().getCurrentDate(), -1); - const prevMonth = component.find('Button.js-prev-month'); + const prevMonth = component.find('button.js-prev-month'); prevMonth.simulate('click'); @@ -407,7 +407,7 @@ describe('', () => { it('should allow setting to next month', () => { onChange.resetHistory(); const expectedDate = addMonths(component.instance().getCurrentDate(), 1); - const nextMonth = component.find('Button.js-next-month'); + const nextMonth = component.find('button.js-next-month'); nextMonth.simulate('click'); @@ -467,7 +467,7 @@ describe('', () => { it('should allow setting date to today', () => { onChange.resetHistory(); - const today = component.find('Button.today-button').first(); + const today = component.find('button.today-button').first(); today.simulate('click'); assert.deepStrictEqual(component.instance().getCurrentDate(), startOfToday()); @@ -481,7 +481,7 @@ describe('', () => { it('should allow clearing date', () => { onChange.resetHistory(); - const clear = component.find('Button.clear-button').first(); + const clear = component.find('button.clear-button').first(); clear.simulate('click'); assert.strictEqual(component.instance().inputEl.value, ''); diff --git a/src/components/Input/MonthInput.spec.js b/src/components/Input/MonthInput.spec.js index 2ec3aea2a..72f0d1cdd 100644 --- a/src/components/Input/MonthInput.spec.js +++ b/src/components/Input/MonthInput.spec.js @@ -7,6 +7,7 @@ import isToday from 'date-fns/is_today'; import { mount } from 'enzyme'; import React from 'react'; import sinon from 'sinon'; +import Button from '../Button/Button'; import MonthInput from './MonthInput'; describe('', () => { @@ -45,7 +46,7 @@ describe('', () => { const component = mount(); const toggle = component.find('InputGroup'); - const calendarButton = toggle.find('Button'); + const calendarButton = toggle.find(Button); assert.equal(calendarButton.props().tabIndex, -1); }); @@ -53,7 +54,7 @@ describe('', () => { const component = mount(); assert.equal(component.find('Dropdown').props().isOpen, false); - const toggle = component.find('InputGroup').find('Button'); + const toggle = component.find('InputGroup').find(Button); toggle.simulate('click'); assert.equal(component.find('Dropdown').props().isOpen, true); @@ -86,7 +87,7 @@ describe('', () => { assert.equal(component.find('Dropdown').props().isOpen, false); - const toggle = component.find('InputGroup').find('Button'); + const toggle = component.find('InputGroup').find(Button); toggle.simulate('click'); assert.equal(component.find('Dropdown').props().isOpen, false); @@ -177,7 +178,7 @@ describe('', () => { it('should set date after clicking prev year', () => { callback.resetHistory(); const expectedDate = addYears(component.instance().getCurrentDate(), -1); - const prevYear = component.find('Button.js-prev-year'); + const prevYear = component.find('button.js-prev-year'); prevYear.simulate('click'); @@ -188,7 +189,7 @@ describe('', () => { it('should set date after clicking next year', () => { callback.resetHistory(); const expectedDate = addYears(component.instance().getCurrentDate(), 1); - const nextYear = component.find('Button.js-next-year'); + const nextYear = component.find('button.js-next-year'); nextYear.simulate('click'); @@ -199,7 +200,7 @@ describe('', () => { it('should set date after clicking prev month', () => { callback.resetHistory(); const expectedDate = addMonths(component.instance().getCurrentDate(), -1); - const prevMonth = component.find('Button.js-prev-month'); + const prevMonth = component.find('button.js-prev-month'); prevMonth.simulate('click'); @@ -210,7 +211,7 @@ describe('', () => { it('should set date after clicking next month', () => { callback.resetHistory(); const expectedDate = addMonths(component.instance().getCurrentDate(), 1); - const nextMonth = component.find('Button.js-next-month'); + const nextMonth = component.find('button.js-next-month'); nextMonth.simulate('click'); @@ -219,7 +220,7 @@ describe('', () => { }); it('should set date after clicking today', () => { - const today = component.find('footer Button'); + const today = component.find('footer button'); today.simulate('click'); assert(isSameMonth(new Date(), component.instance().getCurrentDate())); }); @@ -260,7 +261,7 @@ describe('', () => { showOnFocus /> ); - const toggle = component.find('InputGroup').find('Button'); + const toggle = component.find('InputGroup').find(Button); toggle.simulate('click'); it('should pass dateVisible func to Calendar component', () => { diff --git a/src/components/List/List.spec.js b/src/components/List/List.spec.js index a3fc1445d..631f9aba5 100644 --- a/src/components/List/List.spec.js +++ b/src/components/List/List.spec.js @@ -3,6 +3,7 @@ import { render } from '@testing-library/react'; import { mount, shallow } from 'enzyme'; import React from 'react'; import sinon from 'sinon'; +import Button from '../Button/Button'; import List from './List'; import ListItem from './ListItem'; @@ -62,7 +63,7 @@ describe('', () => { {(item) => item} ); - const buttons = component.find('Button'); + const buttons = component.find(Button); assert.equal(buttons.length, 5); assert.equal(buttons.at(0).props().style.visibility, 'hidden'); diff --git a/src/components/MultiSelectCombobox/UncontrolledMultiSelectCombobox.spec.tsx b/src/components/MultiSelectCombobox/UncontrolledMultiSelectCombobox.spec.tsx index ac6e6b03f..2eae6e072 100644 --- a/src/components/MultiSelectCombobox/UncontrolledMultiSelectCombobox.spec.tsx +++ b/src/components/MultiSelectCombobox/UncontrolledMultiSelectCombobox.spec.tsx @@ -133,7 +133,6 @@ describe('', () => { const removeAllButton = screen.getByLabelText('Remove all selections'); user.click(removeAllButton); - expect(changeSpy).toHaveBeenCalledTimes(3); expect(changeSpy).toHaveBeenLastCalledWith([]); }); diff --git a/src/components/Table/SortableTable.spec.js b/src/components/Table/SortableTable.spec.js index 33ca8e179..1eae81c9a 100644 --- a/src/components/Table/SortableTable.spec.js +++ b/src/components/Table/SortableTable.spec.js @@ -337,14 +337,14 @@ describe('', () => { it('should not render expandable column helper when onExpand not present', () => { const wrapper = mount(); - assert.equal(wrapper.find('td Button').length, 0, 'expand buttons present'); + assert.equal(wrapper.find('td button').length, 0, 'expand buttons present'); }); it('should render expandable column helper when onExpand present', () => { const wrapper = mount( {}} /> ); - assert.equal(wrapper.find('td Button').length, 3, 'expand buttons missing'); + assert.equal(wrapper.find('td button').length, 3, 'expand buttons missing'); }); it('should call onExpand when clicked', () => { @@ -352,9 +352,9 @@ describe('', () => { const wrapper = mount( ); - wrapper.find('td Button').first().simulate('click'); + wrapper.find('td button').first().simulate('click'); assert(onExpand.calledWith(1)); - wrapper.find('td Button').last().simulate('click'); + wrapper.find('td button').last().simulate('click'); assert(onExpand.calledWith(3)); }); });