added tests

Author: rubydong

packages/compass-indexes/src/components/create-index-form/create-index-form.spec.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@mongodb-js/testing-library-compass';
+import { CreateIndexForm } from './create-index-form';
+import type { Field } from '../../modules/create-index';
+import { expect } from 'chai';
+
+import sinon from 'sinon';
+
+describe('CreateIndexForm', () => {
+  let onTabClickSpy;
+
+  beforeEach(function () {
+    onTabClickSpy = sinon.spy();
+  });
+
+  afterEach(function () {
+    onTabClickSpy = null;
+  });
+
+  const renderComponent = ({
+    showIndexesGuidanceVariant,
+  }: {
+    showIndexesGuidanceVariant?: boolean;
+  }) => {
+    render(
+      <CreateIndexForm
+        namespace="testNamespace"
+        fields={
+          [
+            { name: 'field1', type: 'string' },
+            { name: 'field2', type: 'number' },
+          ] as Field[]
+        }
+        serverVersion="5.0.0"
+        currentTab="IndexFlow"
+        onSelectFieldNameClick={() => {}}
+        onSelectFieldTypeClick={() => {}}
+        onAddFieldClick={() => {}}
+        onRemoveFieldClick={() => {}}
+        onTabClick={onTabClickSpy}
+        showIndexesGuidanceVariant={showIndexesGuidanceVariant || false}
+      />
+    );
+  };
+
+  it('renders the create index form', () => {
+    renderComponent({});
+    expect(screen.getByTestId('create-index-form')).to.exist;
+  });
+
+  describe('when showIndexesGuidanceVariant is false', () => {
+    it('renders the RadioBoxGroup', () => {
+      renderComponent({});
+      expect(screen.queryByTestId('create-index-form-flows')).not.to.exist;
+    });
+  });
+
+  describe('when showIndexesGuidanceVariant is true', () => {
+    it('renders the RadioBoxGroup', () => {
+      renderComponent({ showIndexesGuidanceVariant: true });
+      expect(screen.getByTestId('create-index-form-flows')).to.exist;
+    });
+    it('calls onTabClick when a RadioBox is selected', () => {
+      renderComponent({ showIndexesGuidanceVariant: true });
+      const radioBox = screen.getByLabelText('Start with a Query');
+      fireEvent.click(radioBox);
+      expect(onTabClickSpy).to.be.calledWith('QueryFlow');
+    });
+  });
+});

packages/compass-indexes/src/components/create-index-form/create-index-form.tsx

@@ -35,7 +35,7 @@ const createIndexModalFlowsStyles = css({
   marginBottom: spacing[600],
 });
 
-type CreateIndexFormProps = {
+export type CreateIndexFormProps = {
   namespace: string;
   fields: Field[];
   serverVersion: string;