Merge pull request #94 from arturbien/feature/table-enhancements-and-tests

Feature/table enhancements and tests

Author: arturbien

src/components/Button/Button.js

@@ -120,6 +120,7 @@ const Button = ({
     primary={primary}
     onClick={disabled ? undefined : onClick}
     style={style}
+    disabled={disabled}
     isDisabled={disabled}
     fullWidth={fullWidth}
     size={size}

src/components/Button/Button.spec.js

@@ -98,13 +98,21 @@ describe('<Button />', () => {
     expect(button.innerHTML).toBe('click me');
   });
 
-  it('should not fire click when disabled', () => {
-    const onButtonClick = jest.fn();
-    const { getByRole } = render(<Button {...defaultProps} disabled />);
-    const button = getByRole('button');
-
-    fireEvent.click(button);
-
-    expect(onButtonClick).not.toHaveBeenCalled();
+  describe('prop: disabled', () => {
+    it('should render disabled', () => {
+      const { getByRole } = render(<Button {...defaultProps} disabled />);
+      const button = getByRole('button');
+
+      expect(button).toHaveAttribute('disabled');
+    });
+    it('should not fire click when disabled', () => {
+      const onButtonClick = jest.fn();
+      const { getByRole } = render(<Button {...defaultProps} disabled />);
+      const button = getByRole('button');
+
+      fireEvent.click(button);
+
+      expect(onButtonClick).not.toHaveBeenCalled();
+    });
   });
 });

src/components/Fieldset/Fieldset.js

@@ -36,7 +36,12 @@ const StyledLegend = styled.legend`
 `;
 
 const Fieldset = ({ label, disabled, variant, children, ...otherProps }) => (
-  <StyledFieldset isDisabled={disabled} variant={variant} {...otherProps}>
+  <StyledFieldset
+    aria-disabled={disabled}
+    isDisabled={disabled}
+    variant={variant}
+    {...otherProps}
+  >
     {label && <StyledLegend variant={variant}>{label}</StyledLegend>}
     {children}
   </StyledFieldset>

src/components/Fieldset/Fieldset.spec.js

@@ -41,6 +41,8 @@ describe('<Fieldset />', () => {
       const { container } = renderWithTheme(<Fieldset disabled />);
       const fieldset = container.firstChild;
 
+      expect(fieldset).toHaveAttribute('aria-disabled', 'true');
+
       expect(fieldset).toHaveStyleRule('color', theme.textDisabled);
       expect(fieldset).toHaveStyleRule(
         'text-shadow',

src/components/Table/Table.js

@@ -17,24 +17,24 @@ const StyledCutout = styled(Cutout)`
   }
 `;
 
-const Table = ({ className, children, style, ...otherProps }) => (
-  <StyledCutout>
-    <StyledTable className={className} style={style} {...otherProps}>
-      {children}
-    </StyledTable>
-  </StyledCutout>
-);
+const Table = React.forwardRef(function Table(props, ref) {
+  const { children, ...otherProps } = props;
+
+  return (
+    <StyledCutout>
+      <StyledTable ref={ref} {...otherProps}>
+        {children}
+      </StyledTable>
+    </StyledCutout>
+  );
+});
 
 Table.defaultProps = {
-  children: null,
-  className: '',
-  style: {}
+  children: null
 };
 
 Table.propTypes = {
-  children: propTypes.node,
-  className: propTypes.string,
-  style: propTypes.shape([propTypes.string, propTypes.number])
+  children: propTypes.node
 };
 
 export default Table;

src/components/Table/Table.spec.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../test/utils';
+
+import Table from './Table';
+
+describe('<Table />', () => {
+  it('renders Table', () => {
+    const { container } = renderWithTheme(<Table />);
+    const list = container.firstChild;
+
+    expect(list).toBeInTheDocument();
+  });
+  it('renders table element', () => {
+    const { getByRole } = renderWithTheme(<Table />);
+
+    expect(getByRole('table')).toBeInTheDocument();
+  });
+  it('renders children', () => {
+    const textContent = 'Hi there!';
+    const { getByText } = renderWithTheme(
+      <Table>
+        <span>{textContent}</span>
+      </Table>
+    );
+    expect(getByText(textContent)).toBeInTheDocument();
+  });
+});

src/components/Table/Table.stories.js

@@ -13,15 +13,15 @@ import WindowHeader from '../WindowHeader/WindowHeader';
 import WindowContent from '../WindowContent/WindowContent';
 
 const SimpleTable = () => (
-  <Window>
+  <Window style={{ width: 320 }}>
     <WindowHeader>Pokedex.exe</WindowHeader>
     <WindowContent>
       <Table>
         <TableHead>
           <TableRow head>
             <TableHeadCell>Type</TableHeadCell>
             <TableHeadCell>Name</TableHeadCell>
-            <TableHeadCell>Lvl.</TableHeadCell>
+            <TableHeadCell disabled>Level</TableHeadCell>
           </TableRow>
         </TableHead>
         <TableBody>

src/components/TableBody/TableBody.js

@@ -10,22 +10,22 @@ const StyledTableBody = styled.tbody`
   box-shadow: ${insetShadow};
 `;
 
-const TableBody = ({ className, children, style, ...otherProps }) => (
-  <StyledTableBody className={className} style={style} {...otherProps}>
-    {children}
-  </StyledTableBody>
-);
+const TableBody = React.forwardRef(function TableBody(props, ref) {
+  const { children, ...otherProps } = props;
+
+  return (
+    <StyledTableBody ref={ref} {...otherProps}>
+      {children}
+    </StyledTableBody>
+  );
+});
 
 TableBody.defaultProps = {
-  children: null,
-  className: '',
-  style: {}
+  children: null
 };
 
 TableBody.propTypes = {
-  children: propTypes.node,
-  className: propTypes.string,
-  style: propTypes.shape([propTypes.string, propTypes.number])
+  children: propTypes.node
 };
 
 export default TableBody;

src/components/TableBody/TableBody.spec.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { renderWithTheme } from '../../../test/utils';
+
+import TableBody from './TableBody';
+
+describe('<TableBody />', () => {
+  it('renders TableBody', () => {
+    const { container } = renderWithTheme(<TableBody />);
+    const list = container.firstChild;
+
+    expect(list).toBeInTheDocument();
+  });
+  it('renders tbody element', () => {
+    const { container } = renderWithTheme(<TableBody />);
+
+    expect(container.querySelector('tbody')).toBeInTheDocument();
+  });
+  it('renders children', () => {
+    const textContent = 'Hi there!';
+    const { getByText } = renderWithTheme(
+      <TableBody>
+        <span>{textContent}</span>
+      </TableBody>
+    );
+    expect(getByText(textContent)).toBeInTheDocument();
+  });
+});

src/components/TableDataCell/TableDataCell.js

@@ -7,22 +7,21 @@ import { padding } from '../common/system';
 const StyledTd = styled.td`
   padding: 0 ${padding.sm};
 `;
-const TableDataCell = ({ className, children, style, ...otherProps }) => (
-  <StyledTd className={className} style={style} {...otherProps}>
-    {children}
-  </StyledTd>
-);
+const TableDataCell = React.forwardRef(function TableDataCell(props, ref) {
+  const { children, ...otherProps } = props;
+  return (
+    <StyledTd ref={ref} {...otherProps}>
+      {children}
+    </StyledTd>
+  );
+});
 
 TableDataCell.defaultProps = {
-  children: null,
-  className: '',
-  style: {}
+  children: null
 };
 
 TableDataCell.propTypes = {
-  children: propTypes.node,
-  className: propTypes.string,
-  style: propTypes.shape([propTypes.string, propTypes.number])
+  children: propTypes.node
 };
 
 export default TableDataCell;