fix tests for create-index-actions.spec.tsx

Author: rubydong

packages/compass-indexes/src/components/create-index-actions/create-index-actions.spec.jsx renamed to packages/compass-indexes/src/components/create-index-actions/create-index-actions.spec.tsx

@@ -8,13 +8,16 @@ import {
   userEvent,
   within,
 } from '@mongodb-js/testing-library-compass';
+import { setupStore } from '../../../test/setup-store';
+import { Provider } from 'react-redux';
 
-import CreateIndexActions from '../create-index-actions';
+import CreateIndexActions from '.';
 
 describe('CreateIndexActions Component', function () {
   let clearErrorSpy;
   let onCreateIndexClickSpy;
   let closeCreateIndexModalSpy;
+  const store = setupStore();
 
   beforeEach(function () {
     clearErrorSpy = sinon.spy();
@@ -28,30 +31,29 @@ describe('CreateIndexActions Component', function () {
     closeCreateIndexModalSpy = null;
   });
 
-  it('renders a cancel button', function () {
+  const renderComponent = (error?: string) => {
     render(
-      <CreateIndexActions
-        error={null}
-        onErrorBannerCloseClick={clearErrorSpy}
-        onCreateIndexClick={onCreateIndexClickSpy}
-        onCancelCreateIndexClick={closeCreateIndexModalSpy}
-      />
+      <Provider store={store}>
+        <CreateIndexActions
+          error={error || null}
+          onErrorBannerCloseClick={clearErrorSpy}
+          onCreateIndexClick={onCreateIndexClickSpy}
+          onCancelCreateIndexClick={closeCreateIndexModalSpy}
+          showIndexesGuidanceVariant={false}
+        />
+      </Provider>
     );
+  };
+  it('renders a cancel button', function () {
+    renderComponent();
 
     const button = screen.getByTestId('create-index-actions-cancel-button');
     expect(button.textContent).to.be.equal('Cancel');
   });
 
   context('onCancel', function () {
     it('calls the closeCreateIndexModal function', function () {
-      render(
-        <CreateIndexActions
-          error={null}
-          onErrorBannerCloseClick={clearErrorSpy}
-          onCreateIndexClick={onCreateIndexClickSpy}
-          onCancelCreateIndexClick={closeCreateIndexModalSpy}
-        />
-      );
+      renderComponent();
 
       const button = screen.getByTestId('create-index-actions-cancel-button');
       userEvent.click(button);
@@ -61,14 +63,7 @@ describe('CreateIndexActions Component', function () {
 
   context('onConfirm', function () {
     it('calls the onCreateIndexClick function', function () {
-      render(
-        <CreateIndexActions
-          error={null}
-          onErrorBannerCloseClick={clearErrorSpy}
-          onCreateIndexClick={onCreateIndexClickSpy}
-          onCancelCreateIndexClick={closeCreateIndexModalSpy}
-        />
-      );
+      renderComponent();
 
       const button = screen.getByTestId(
         'create-index-actions-create-index-button'
@@ -79,15 +74,7 @@ describe('CreateIndexActions Component', function () {
   });
 
   it('renders a create index button', function () {
-    render(
-      <CreateIndexActions
-        error={null}
-        onErrorBannerCloseClick={clearErrorSpy}
-        onCreateIndexClick={onCreateIndexClickSpy}
-        onCancelCreateIndexClick={closeCreateIndexModalSpy}
-      />
-    );
-
+    renderComponent();
     const button = screen.getByTestId(
       'create-index-actions-create-index-button'
     );
@@ -96,14 +83,7 @@ describe('CreateIndexActions Component', function () {
 
   context('with error', function () {
     it('renders error banner', function () {
-      render(
-        <CreateIndexActions
-          error={'Some error happened!'}
-          onErrorBannerCloseClick={clearErrorSpy}
-          onCreateIndexClick={onCreateIndexClickSpy}
-          onCancelCreateIndexClick={closeCreateIndexModalSpy}
-        />
-      );
+      renderComponent('Some error happened!');
 
       const errorBanner = screen.getByTestId(
         'create-index-actions-error-banner-wrapper'
@@ -112,14 +92,7 @@ describe('CreateIndexActions Component', function () {
     });
 
     it('closes error banner', function () {
-      render(
-        <CreateIndexActions
-          error={'Some error happened!'}
-          onErrorBannerCloseClick={clearErrorSpy}
-          onCreateIndexClick={onCreateIndexClickSpy}
-          onCancelCreateIndexClick={closeCreateIndexModalSpy}
-        />
-      );
+      renderComponent('Some error happened!');
 
       const errorBanner = screen.getByTestId(
         'create-index-actions-error-banner-wrapper'
@@ -133,14 +106,7 @@ describe('CreateIndexActions Component', function () {
 
   context('without error', function () {
     it('does not render error banner', function () {
-      render(
-        <CreateIndexActions
-          error={null}
-          onErrorBannerCloseClick={clearErrorSpy}
-          onCreateIndexClick={onCreateIndexClickSpy}
-          onCancelCreateIndexClick={closeCreateIndexModalSpy}
-        />
-      );
+      renderComponent();
 
       const errorBanner = screen.queryByTestId(
         'create-index-actions-error-banner-wrapper'