add tests and exclude table view

Author: paula-stacho

packages/compass-crud/src/components/crud-toolbar.spec.tsx

@@ -71,6 +71,8 @@ describe('CrudToolbar Component', function () {
             onResetClicked={noop}
             onUpdateButtonClicked={noop}
             onDeleteButtonClicked={noop}
+            onExpandAllClicked={noop}
+            onCollapseAllClicked={noop}
             openExportFileDialog={noop}
             outdated={false}
             page={0}
@@ -368,6 +370,51 @@ describe('CrudToolbar Component', function () {
     });
   });
 
+  describe.only('expand controls', function () {
+    describe('table view', function () {
+      it('should be disabled', function () {
+        renderCrudToolbar({
+          activeDocumentView: 'Table',
+        });
+
+        expect(screen.getByTitle('Expand Controls')).to.have.attribute(
+          'aria-disabled',
+          'true'
+        );
+      });
+    });
+
+    describe('other views', function () {
+      it('should provide "Expand all documents"', function () {
+        const onExpandAllClicked = sinon.spy();
+        renderCrudToolbar({
+          activeDocumentView: 'JSON',
+          onExpandAllClicked,
+        });
+
+        userEvent.click(screen.getByTitle('Expand Controls'));
+        const expandAllBtn = screen.getByText('Expand all documents');
+        expect(expandAllBtn).to.be.visible;
+        userEvent.click(expandAllBtn);
+        expect(onExpandAllClicked).to.have.been.called;
+      });
+
+      it('should provide "Collapse all documents"', function () {
+        const onCollapseAllClicked = sinon.spy();
+        renderCrudToolbar({
+          activeDocumentView: 'JSON',
+          onCollapseAllClicked,
+        });
+
+        userEvent.click(screen.getByTitle('Expand Controls'));
+        const collapseAllBtn = screen.getByText('Collapse all documents');
+        expect(collapseAllBtn).to.be.visible;
+        userEvent.click(collapseAllBtn);
+        expect(onCollapseAllClicked).to.have.been.called;
+      });
+    });
+  });
+
   it('should not render the outdated message', function () {
     renderCrudToolbar();
 

packages/compass-crud/src/components/crud-toolbar.tsx

@@ -302,6 +302,7 @@ const CrudToolbar: React.FunctionComponent<CrudToolbarProps> = ({
           <ExpandControl
             onExpandAll={onExpandAllClicked}
             onCollapseAll={onCollapseAllClicked}
+            activeView={activeDocumentView}
           />
 
           <ViewSwitcher

packages/compass-crud/src/components/expand-control.tsx

@@ -1,12 +1,15 @@
 import { Button, Icon, Menu, MenuItem } from '@mongodb-js/compass-components';
 import React from 'react';
+import { type DocumentView } from '../stores/crud-store';
 
 interface ExpandControlProps {
+  activeView: DocumentView;
   onExpandAll: () => void;
   onCollapseAll: () => void;
 }
 
 const ExpandControl: React.FunctionComponent<ExpandControlProps> = ({
+  activeView,
   onExpandAll,
   onCollapseAll,
 }) => {
@@ -17,6 +20,7 @@ const ExpandControl: React.FunctionComponent<ExpandControlProps> = ({
           size="xsmall"
           aria-label="Expand Controls"
           title="Expand Controls"
+          disabled={activeView === 'Table'}
         >
           <Icon glyph="CaretDown" />
         </Button>