added tests

rubydong · rubydong · commit 3cb7fcf5cfbf · 2025-04-21T13:44:06.000-04:00
diff --git a/packages/compass-indexes/src/components/create-index-form/index-flow-section.test.tsx b/packages/compass-indexes/src/components/create-index-form/index-flow-section.test.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen } from '@mongodb-js/testing-library-compass';
+import IndexFlowSection from './index-flow-section';
+import { expect } from 'chai';
+
+describe('IndexFlowSection', () => {
+  const renderComponent = (createIndexFieldsComponent?: JSX.Element) => {
+    render(
+      <IndexFlowSection
+        createIndexFieldsComponent={createIndexFieldsComponent ?? null}
+      />
+    );
+  };
+  it('renders the Input Index header', () => {
+    renderComponent();
+    expect(screen.getByText('Input Index')).to.exist;
+  });
+
+  it('renders the Code Equivalent toggle', () => {
+    renderComponent();
+    expect(screen.getByLabelText('Toggle Code Equivalent')).to.exist;
+  });
+
+  it('renders the Show me covered queries button', () => {
+    renderComponent();
+    expect(screen.getByText('Show me covered queries')).to.exist;
+  });
+
+  it('renders the Covered Queries header', () => {
+    renderComponent();
+    expect(screen.getByText('Covered Queries')).to.exist;
+  });
+
+  it('renders the provided createIndexFieldsComponent', () => {
+    const mockComponent = (
+      <div data-testid="mock-component">Mock Component</div>
+    );
+    renderComponent(mockComponent);
+    expect(screen.getByTestId('mock-component')).to.exist;
+  });
+
+  it('renders the covered queries examples', () => {
+    renderComponent();
+    expect(screen.getByTestId('index-flow-section-covered-queries-examples')).to
+      .exist;
+  });
+
+  it('renders the optimal query examples', () => {
+    renderComponent();
+    expect(screen.getByTestId('index-flow-section-optimal-query-examples')).to
+      .exist;
+  });
+
+  it('renders the Learn More link', () => {
+    renderComponent();
+    const link = screen.getByText('Learn More');
+    expect(link).to.exist;
+  });
+});
diff --git a/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx b/packages/compass-indexes/src/components/create-index-form/index-flow-section.tsx
@@ -67,11 +67,13 @@ const infoWithCircleIconStyles = css({
   marginLeft: spacing[200],
 });
 
+export type IndexFlowSectionProps = {
+  createIndexFieldsComponent: JSX.Element | null;
+};
+
 const IndexFlowSection = ({
   createIndexFieldsComponent,
-}: {
-  createIndexFieldsComponent: JSX.Element | null;
-}) => {
+}: IndexFlowSectionProps) => {
   return (
     <div>
       <div
@@ -130,6 +132,7 @@ const IndexFlowSection = ({
               <Icon
                 glyph="InfoWithCircle"
                 className={cx(infoWithCircleIconStyles, flexContainerStyles)}
+                data-testid="index-flow-section-covered-queries-tooltip"
               />
             </span>
           }
@@ -145,7 +148,11 @@ const IndexFlowSection = ({
 
       <div className={coveredQueriesCalloutStyles}>
         {/* Covered Queries, clean up with actual covered queries examples in CLOUDP-311782 */}
-        <Body baseFontSize={13} className={codeStyles}>
+        <Body
+          baseFontSize={13}
+          className={codeStyles}
+          data-testid="index-flow-section-covered-queries-examples"
+        >
           {`{ awards.wins:3 }`} <br />
           {`{ awards.wins:3, imdb.rating:5 }`} <br />
           {`{ awards.wins:3, imdb.rating:5, awards.nominations:8 }`} <br />
@@ -156,7 +163,11 @@ const IndexFlowSection = ({
             optimal for queries that have this pattern:
           </u>
           {/* Optimal queries, clean up with actual optimal queries in CLOUDP-311783 */}
-          <Body baseFontSize={13} className={codeStyles}>
+          <Body
+            baseFontSize={13}
+            className={codeStyles}
+            data-testid="index-flow-section-optimal-query-examples"
+          >
             {`{ awards.wins : 5, imdb.rating: {$gt : 5} }.sort({ awards.nominations : 1 }`}
           </Body>
         </p>
