@atlaskit/editor-plugin-table 0.0.8 → 0.0.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 0.0.10
+
+### Patch Changes
+
+- [`b519be31909`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b519be31909) - Improve FloatingDeleteButton accessibility and update tests
+
+## 0.0.9
+
+### Patch Changes
+
+- [`30d47a9f80d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/30d47a9f80d) - This change adds data-testid to the top and bottom sticky sentinels in TableComponent and updates tests to access the sentinels by the testId.
+
 ## 0.0.8
 
 ### Patch Changes

package/dist/cjs/plugins/table/nodeviews/TableComponent.js

@@ -558,7 +558,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         "data-number-column": node.attrs.isNumberColumnEnabled,
         "data-layout": node.attrs.layout
       }, stickyHeadersOptimization && /*#__PURE__*/_react.default.createElement("div", {
-        className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP
+        className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,
+        "data-testid": "sticky-sentinel-top"
       }), allowControls && (!isLoading || initialRenderOptimization) && rowControls, /*#__PURE__*/_react.default.createElement("div", {
         style: shadowStyle(showBeforeShadow),
         className: _types.TableCssClassName.TABLE_LEFT_SHADOW
@@ -598,7 +599,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           top: "".concat(this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2, "px")
         }
       })), stickyHeadersOptimization && /*#__PURE__*/_react.default.createElement("div", {
-        className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM
+        className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM,
+        "data-testid": "sticky-sentinel-bottom"
       }));
     }
   }]);

package/dist/cjs/plugins/table/ui/FloatingDeleteButton/DeleteButton.js

@@ -27,7 +27,7 @@ var DeleteButton = function DeleteButton(_ref) {
     onMouseLeave: onMouseLeave
   }, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
-    title: formatMessage(removeLabel, {
+    "aria-label": formatMessage(removeLabel, {
       0: 1
     }),
     className: _types.TableCssClassName.CONTROLS_DELETE_BUTTON,

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "0.0.8"
+	"version": "0.0.10"
 }

package/dist/es2019/plugins/table/nodeviews/TableComponent.js

@@ -528,7 +528,8 @@ class TableComponent extends React.Component {
       "data-number-column": node.attrs.isNumberColumnEnabled,
       "data-layout": node.attrs.layout
     }, stickyHeadersOptimization && /*#__PURE__*/React.createElement("div", {
-      className: ClassName.TABLE_STICKY_SENTINEL_TOP
+      className: ClassName.TABLE_STICKY_SENTINEL_TOP,
+      "data-testid": "sticky-sentinel-top"
     }), allowControls && (!isLoading || initialRenderOptimization) && rowControls, /*#__PURE__*/React.createElement("div", {
       style: shadowStyle(showBeforeShadow),
       className: ClassName.TABLE_LEFT_SHADOW
@@ -567,7 +568,8 @@ class TableComponent extends React.Component {
         top: `${this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2}px`
       }
     })), stickyHeadersOptimization && /*#__PURE__*/React.createElement("div", {
-      className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM
+      className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM,
+      "data-testid": "sticky-sentinel-bottom"
     }));
   }
 

package/dist/es2019/plugins/table/ui/FloatingDeleteButton/DeleteButton.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl-next'; // import { MessageDescriptor } from '../../../../types/i18n';
-
+import { injectIntl } from 'react-intl-next';
 import { TableCssClassName as ClassName } from '../../types';
 
 const DeleteButton = ({
@@ -19,7 +18,7 @@ const DeleteButton = ({
   onMouseLeave: onMouseLeave
 }, /*#__PURE__*/React.createElement("button", {
   type: "button",
-  title: formatMessage(removeLabel, {
+  "aria-label": formatMessage(removeLabel, {
     0: 1
   }),
   className: ClassName.CONTROLS_DELETE_BUTTON,

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "0.0.8"
+	"version": "0.0.10"
 }

package/dist/esm/plugins/table/nodeviews/TableComponent.js

@@ -543,7 +543,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         "data-number-column": node.attrs.isNumberColumnEnabled,
         "data-layout": node.attrs.layout
       }, stickyHeadersOptimization && /*#__PURE__*/React.createElement("div", {
-        className: ClassName.TABLE_STICKY_SENTINEL_TOP
+        className: ClassName.TABLE_STICKY_SENTINEL_TOP,
+        "data-testid": "sticky-sentinel-top"
       }), allowControls && (!isLoading || initialRenderOptimization) && rowControls, /*#__PURE__*/React.createElement("div", {
         style: shadowStyle(showBeforeShadow),
         className: ClassName.TABLE_LEFT_SHADOW
@@ -583,7 +584,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           top: "".concat(this.state.stickyHeader.top + this.state.stickyHeader.padding + shadowPadding + 2, "px")
         }
       })), stickyHeadersOptimization && /*#__PURE__*/React.createElement("div", {
-        className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM
+        className: ClassName.TABLE_STICKY_SENTINEL_BOTTOM,
+        "data-testid": "sticky-sentinel-bottom"
       }));
     }
   }]);

package/dist/esm/plugins/table/ui/FloatingDeleteButton/DeleteButton.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { injectIntl } from 'react-intl-next'; // import { MessageDescriptor } from '../../../../types/i18n';
-
+import { injectIntl } from 'react-intl-next';
 import { TableCssClassName as ClassName } from '../../types';
 
 var DeleteButton = function DeleteButton(_ref) {
@@ -17,7 +16,7 @@ var DeleteButton = function DeleteButton(_ref) {
     onMouseLeave: onMouseLeave
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
-    title: formatMessage(removeLabel, {
+    "aria-label": formatMessage(removeLabel, {
       0: 1
     }),
     className: ClassName.CONTROLS_DELETE_BUTTON,

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "0.0.8"
+	"version": "0.0.10"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/__tests__/unit/ui/DeleteButton.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { IntlProvider } from 'react-intl-next';
+import DeleteButton from '../../../plugins/table/ui/FloatingDeleteButton/DeleteButton';
+import tableMessages from '../../../plugins/table/ui/messages';
+
+describe('<DeleteButton />', () => {
+  it('should fire the onMouseEnter callback', () => {
+    const onMouseEnter = jest.fn();
+    render(
+      <IntlProvider locale="en">
+        <DeleteButton
+          removeLabel={tableMessages.removeColumns}
+          onMouseEnter={onMouseEnter}
+        />
+      </IntlProvider>,
+    );
+    fireEvent.mouseEnter(screen.getByLabelText('Delete column'));
+    expect(onMouseEnter).toHaveBeenCalled();
+  });
+
+  it('should fire the onMouseLeave callback', () => {
+    const onMouseLeave = jest.fn();
+    render(
+      <IntlProvider locale="en">
+        <DeleteButton
+          removeLabel={tableMessages.removeColumns}
+          onMouseLeave={onMouseLeave}
+        />
+      </IntlProvider>,
+    );
+    fireEvent.mouseLeave(screen.getByLabelText('Delete column'));
+    expect(onMouseLeave).toHaveBeenCalled();
+  });
+});

package/src/__tests__/unit/ui/FloatingDeleteButton.tsx

@@ -1,5 +1,4 @@
 import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
-import { mountWithIntl } from '@atlaskit/editor-test-helpers/enzyme';
 import {
   doc,
   table,
@@ -10,10 +9,11 @@ import {
   DocBuilder,
 } from '@atlaskit/editor-test-helpers/doc-builder';
 import { selectColumns, selectRows } from '@atlaskit/editor-test-helpers/table';
-import { ReactWrapper } from 'enzyme';
 import { selectTable } from '@atlaskit/editor-tables/utils';
 import { EditorView } from 'prosemirror-view';
 import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl-next';
 import {
   TablePluginState,
   TableCssClassName,
@@ -21,8 +21,6 @@ import {
 import FloatingDeleteButton, {
   Props as FloatingDeleteButtonProps,
 } from '../../../plugins/table/ui/FloatingDeleteButton';
-import DeleteButton from '../../../plugins/table/ui/FloatingDeleteButton/DeleteButton';
-import tableMessages from '../../../plugins/table/ui/messages';
 import * as tableColumnControlsUtils from '../../../plugins/table/utils/column-controls';
 import { pluginKey } from '../../../plugins/table/pm-plugins/plugin-key';
 import tablePlugin from '../../../plugins/table-plugin';
@@ -40,7 +38,6 @@ describe('Floating Delete Button', () => {
       pluginKey,
     });
 
-  let wrapper: ReactWrapper<FloatingDeleteButtonProps>;
   let editorView: EditorView;
 
   beforeEach(() => {
@@ -53,34 +50,31 @@ describe('Floating Delete Button', () => {
         ),
       ),
     ));
-
-    wrapper = (mountWithIntl(
-      <FloatingDeleteButton
-        tableRef={document.querySelector('table')!}
-        editorView={editorView}
-        selection={editorView.state.selection}
-      />,
-    ) as unknown) as ReactWrapper<FloatingDeleteButtonProps>;
   });
 
-  afterEach(() => {
-    if (wrapper) {
-      wrapper.unmount();
-    }
-  });
+  const component = (props: FloatingDeleteButtonProps) =>
+    render(
+      <IntlProvider locale="en">
+        <FloatingDeleteButton
+          tableRef={editorView.dom.querySelector('table')!}
+          {...props}
+        />
+      </IntlProvider>,
+    );
 
   it('should not render a delete button with no selection', () => {
-    expect(wrapper.find(DeleteButton).length).toBe(0);
+    component({ selection: editorView.state.selection, editorView });
+
+    expect(screen.queryByLabelText('Popup')).toBeFalsy();
   });
 
   it('should not render a delete button with whole table selected', () => {
-    // select the whole table
+    // selects the whole table
     editorView.dispatch(selectTable(editorView.state.tr));
 
-    // We need to force renderer
-    wrapper.setProps({ selection: editorView.state.selection });
-    // set numberOfColumns prop to trick shouldComponentUpdate and force re-render
-    expect(wrapper.find(DeleteButton).length).toBe(0);
+    component({ selection: editorView.state.selection, editorView });
+
+    expect(screen.queryByLabelText('Popup')).toBeFalsy();
   });
 
   describe('Columns', () => {
@@ -104,21 +98,18 @@ describe('Floating Delete Button', () => {
         // Select columns start from 0
         selectColumns([column - 1])(editorView.state, editorView.dispatch);
 
-        // We need to force renderer
-        wrapper.setProps({ selection: editorView.state.selection });
+        component({ selection: editorView.state.selection, editorView });
 
-        // we should now have a delete button
-        expect(wrapper.find(DeleteButton).length).toBe(1);
+        expect(screen.getAllByLabelText('Delete column').length).toBe(1);
       },
     );
 
     it('should render a single delete button over multiple column selections', () => {
       selectColumns([0, 1])(editorView.state, editorView.dispatch);
 
-      // We need to force renderer
-      wrapper.setProps({ selection: editorView.state.selection });
+      component({ selection: editorView.state.selection, editorView });
 
-      expect(wrapper.find(DeleteButton).length).toBe(1);
+      expect(screen.getAllByLabelText('Delete column').length).toBe(1);
     });
   });
 
@@ -128,9 +119,9 @@ describe('Floating Delete Button', () => {
       (row) => {
         selectRows([row - 1])(editorView.state, editorView.dispatch);
 
-        wrapper.setProps({ selection: editorView.state.selection });
+        component({ selection: editorView.state.selection, editorView });
 
-        expect(wrapper.find(DeleteButton).length).toBe(1);
+        expect(screen.getAllByLabelText('Delete row').length).toBe(1);
       },
     );
 
@@ -138,38 +129,9 @@ describe('Floating Delete Button', () => {
       selectRows([0, 1])(editorView.state, editorView.dispatch);
 
       // selecting the row mutates the editor state (which is inside editorView)
-      // we set tableHeight prop to trick shouldComponentUpdate and force re-render
-      wrapper.setProps({ selection: editorView.state.selection });
-
-      expect(wrapper.find(DeleteButton).length).toBe(1);
-    });
-  });
-
-  describe('<DeleteButton />', () => {
-    it('should fire the onMouseEnter callback', () => {
-      const onMouseEnter = jest.fn();
-      const button = mountWithIntl(
-        <DeleteButton
-          removeLabel={tableMessages.removeColumns}
-          onMouseEnter={onMouseEnter}
-        />,
-      );
-      button.simulate('mouseenter');
-      expect(onMouseEnter).toBeCalled();
-      button.unmount();
-    });
+      component({ selection: editorView.state.selection, editorView });
 
-    it('should fire the onMouseLeave callback', () => {
-      const onMouseLeave = jest.fn();
-      const button = mountWithIntl(
-        <DeleteButton
-          removeLabel={tableMessages.removeRows}
-          onMouseLeave={onMouseLeave}
-        />,
-      );
-      button.simulate('mouseleave');
-      expect(onMouseLeave).toBeCalled();
-      button.unmount();
+      expect(screen.getAllByLabelText('Delete row').length).toBe(1);
     });
   });
 });

package/src/plugins/table/__tests__/unit/pm-plugins/sticky-headers/tableRow.tsx

@@ -33,9 +33,9 @@ jest.mock('@atlaskit/editor-common/ui', () => ({
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { updateStickyState } from '../../../../pm-plugins/sticky-headers/commands';
 import { TableCssClassName } from '../../../../types';
-import { mount } from 'enzyme';
 import TableComponent from '../../../../nodeviews/TableComponent';
 import React from 'react';
+import { render, screen } from '@testing-library/react';
 import {
   stickyRowOffsetTop,
   tableScrollbarOffset,
@@ -388,13 +388,13 @@ describe('TableRowNodeView', () => {
       return scrollContainer;
     }
 
-    function mountTableComponent({
+    function renderTableComponent({
       disableContentDomMock,
     }: {
       disableContentDomMock?: true;
     } = {}) {
       const getNode = () => editorView.state.doc.firstChild;
-      return mount(
+      return render(
         <TableComponent
           view={editorView}
           eventDispatcher={eventDispatcher}
@@ -428,28 +428,21 @@ describe('TableRowNodeView', () => {
     });
 
     it('sentinel elements are rendered inside table component', () => {
-      const tableComponent = mountTableComponent();
-      // rafStub.flush();
-      const sentinelWrapperTop = tableComponent.find(
-        `.${TableCssClassName.TABLE_STICKY_SENTINEL_TOP}`,
-      );
-      const sentinelWrapperBottom = tableComponent.find(
-        `.${TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM}`,
-      );
-      expect(sentinelWrapperTop).toHaveLength(1);
-      expect(sentinelWrapperBottom).toHaveLength(1);
+      renderTableComponent();
+      const sentinelTop = screen.getByTestId('sticky-sentinel-top');
+      const sentinelBottom = screen.getByTestId('sticky-sentinel-bottom');
+
+      expect(sentinelTop).toBeTruthy();
+      expect(sentinelBottom).toBeTruthy();
     });
 
     describe('updates sticky header state', () => {
       it('top sentinel does nothing if the rootBounds has height 0', () => {
-        const tableComponent = mountTableComponent();
-        const sentinelWrapperTop = tableComponent.find(
-          `.${TableCssClassName.TABLE_STICKY_SENTINEL_TOP}`,
-        );
-        const sentinelTop = sentinelWrapperTop.getDOMNode() as HTMLElement;
+        renderTableComponent();
+        const sentinelTop = screen.getByTestId('sticky-sentinel-top');
 
         triggerElementIntersect({
-          target: sentinelTop,
+          target: sentinelTop as HTMLElement,
           isIntersecting: false,
           rootBounds: { bottom: 0, top: 0, height: 0 },
           boundingClientRect: { bottom: 0, top: 0 },
@@ -459,13 +452,10 @@ describe('TableRowNodeView', () => {
       });
 
       it('bottom sentinel does nothing if the rootBounds has height 0', () => {
-        const tableComponent = mountTableComponent();
-        const sentinelWrapperBottom = tableComponent.find(
-          `.${TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM}`,
-        );
-        const sentinelBottom = sentinelWrapperBottom.getDOMNode() as HTMLElement;
+        renderTableComponent();
+        const sentinelBottom = screen.getByTestId('sticky-sentinel-bottom');
         triggerElementIntersect({
-          target: sentinelBottom,
+          target: sentinelBottom as HTMLElement,
           isIntersecting: false,
           rootBounds: { bottom: 0, top: 0, height: 0 },
           boundingClientRect: { bottom: 0, top: 0 },
@@ -474,12 +464,9 @@ describe('TableRowNodeView', () => {
         expect(updateStickyState).not.toHaveBeenCalled();
       });
 
-      it('when top sentinel leaves scroll area', () => {
-        const tableComponent = mountTableComponent();
-        const sentinelWrapperTop = tableComponent.find(
-          `.${TableCssClassName.TABLE_STICKY_SENTINEL_TOP}`,
-        );
-        const sentinelTop = sentinelWrapperTop.getDOMNode() as HTMLElement;
+      it('updates sticky header when top of sticky header sentinel leaves scroll area', () => {
+        renderTableComponent();
+        const sentinelTop = screen.getByTestId('sticky-sentinel-top');
 
         triggerElementIntersect({
           target: sentinelTop,
@@ -512,12 +499,9 @@ describe('TableRowNodeView', () => {
         );
       });
 
-      it('when bottom sentinel enters or leaves scroll area', () => {
-        const tableComponent = mountTableComponent();
-        const sentinelWrapperBottom = tableComponent.find(
-          `.${TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM}`,
-        );
-        const sentinelBottom = sentinelWrapperBottom.getDOMNode() as HTMLElement;
+      it('updates sticky header when bottom of sticky header sentinel enters or leaves scroll area', () => {
+        renderTableComponent();
+        const sentinelBottom = screen.getByTestId('sticky-sentinel-bottom');
 
         triggerElementIntersect({
           target: sentinelBottom,
@@ -560,13 +544,10 @@ describe('TableRowNodeView', () => {
       (_, contentRectSupported: boolean) => {
         const { tableWrapper } = getTableElements(tableRowDom);
         // disabled due to editorView dom being cleared by use of contentDom mocks
-        const tableComponent = mountTableComponent({
+        renderTableComponent({
           disableContentDomMock: true,
         });
-        const sentinelWrapperBottom = tableComponent.find(
-          `.${TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM}`,
-        );
-        const sentinelBottom = sentinelWrapperBottom.getDOMNode() as HTMLElement;
+        const sentinelBottom = screen.getByTestId('sticky-sentinel-bottom');
         tableWrapper?.appendChild(sentinelBottom);
         rafStub.flush();
 
@@ -584,13 +565,10 @@ describe('TableRowNodeView', () => {
     it('marks sentinels as unobserved when isHeaderRowEnabled is set to false', () => {
       const { tableWrapper } = getTableElements(tableRowDom);
       // disabled due to editorView dom being cleared by use of contentDom mocks
-      const tableComponent = mountTableComponent({
+      renderTableComponent({
         disableContentDomMock: true,
       });
-      const sentinelWrapperBottom = tableComponent.find(
-        `.${TableCssClassName.TABLE_STICKY_SENTINEL_BOTTOM}`,
-      );
-      const sentinelBottom = sentinelWrapperBottom.getDOMNode() as HTMLElement;
+      const sentinelBottom = screen.getByTestId('sticky-sentinel-bottom');
       tableWrapper?.appendChild(sentinelBottom);
       rafStub.flush();
       expect(sentinelBottom.dataset.isObserved).toBeDefined();

package/src/plugins/table/nodeviews/TableComponent.tsx

@@ -394,7 +394,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         data-layout={node.attrs.layout}
       >
         {stickyHeadersOptimization && (
-          <div className={ClassName.TABLE_STICKY_SENTINEL_TOP} />
+          <div
+            className={ClassName.TABLE_STICKY_SENTINEL_TOP}
+            data-testid="sticky-sentinel-top"
+          />
         )}
         {allowControls &&
           (!isLoading || initialRenderOptimization) &&
@@ -465,7 +468,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           </div>
         )}
         {stickyHeadersOptimization && (
-          <div className={ClassName.TABLE_STICKY_SENTINEL_BOTTOM} />
+          <div
+            className={ClassName.TABLE_STICKY_SENTINEL_BOTTOM}
+            data-testid="sticky-sentinel-bottom"
+          />
         )}
       </div>
     );

package/src/plugins/table/ui/FloatingDeleteButton/DeleteButton.tsx

@@ -2,7 +2,6 @@ import React, { SyntheticEvent } from 'react';
 
 import { WrappedComponentProps, injectIntl } from 'react-intl-next';
 
-// import { MessageDescriptor } from '../../../../types/i18n';
 import { MessageDescriptor } from 'react-intl-next';
 import { TableCssClassName as ClassName } from '../../types';
 
@@ -30,7 +29,7 @@ const DeleteButton = ({
   >
     <button
       type="button"
-      title={formatMessage(removeLabel, { 0: 1 })}
+      aria-label={formatMessage(removeLabel, { 0: 1 })}
       className={ClassName.CONTROLS_DELETE_BUTTON}
       onMouseDown={onClick}
       onMouseMove={(e) => e.preventDefault()}