@atlaskit/editor-plugin-table 0.0.8 → 0.0.9

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 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/version.json

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

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/version.json

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

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/version.json

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

package/package.json

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

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>
     );