added unit tests for create-index-modal-header

rubydong · rubydong · commit 07c902dcaf32 · 2025-04-15T12:12:40.000-04:00
diff --git a/packages/compass-indexes/src/components/create-index-modal/create-index-modal-header.spec.tsx b/packages/compass-indexes/src/components/create-index-modal/create-index-modal-header.spec.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { render, screen } from '@mongodb-js/testing-library-compass';
+import CreateIndexModalHeader from './create-index-modal-header';
+import { expect } from 'chai';
+
+describe('CreateIndexModalHeader', () => {
+  it('renders the modal title', () => {
+    render(<CreateIndexModalHeader />);
+    const title = screen.getByTestId('create-index-modal-header-title');
+
+    expect(title.textContent).to.be.equal('Create Index');
+  });
+
+  it('renders the subtitle text', () => {
+    render(<CreateIndexModalHeader />);
+    const subtitle = screen.getByTestId('create-index-modal-header-subtitle');
+    expect(subtitle).to.exist;
+  });
+
+  it('renders the link to the Index Strategies Documentation', () => {
+    render(<CreateIndexModalHeader />);
+    const link = screen.getByRole('link', {
+      name: /Index Strategies Documentation/i,
+    });
+    expect(link).to.exist;
+  });
+});
diff --git a/packages/compass-indexes/src/components/create-index-modal/create-index-modal-header.tsx b/packages/compass-indexes/src/components/create-index-modal/create-index-modal-header.tsx
@@ -17,11 +17,12 @@ const headerStyle = css({
 const CreateIndexModalHeader = () => {
   return (
     <div className={cx(headerStyle)}>
-      <H3 data-testid="modal-title" id="modal-title">
-        Create Index
-      </H3>
+      <H3 data-testid="create-index-modal-header-title">Create Index</H3>
 
-      <Body style={{ color: palette.gray.dark1 }}>
+      <Body
+        data-testid="create-index-modal-header-subtitle"
+        style={{ color: palette.gray.dark1 }}
+      >
         The best indexes for your application should consider a number of
         factors, such as your data model, and the queries you use most often. To
         learn more about indexing best practices, read the{' '}
diff --git a/packages/compass-indexes/src/components/create-index-modal/create-index-modal.tsx b/packages/compass-indexes/src/components/create-index-modal/create-index-modal.tsx
@@ -5,8 +5,6 @@ import {
   ModalFooter,
   ModalHeader,
   ModalBody,
-  Link,
-  palette,
 } from '@mongodb-js/compass-components';
 import {
   fieldAdded,
