add unit tests

Author: ncarbon

packages/compass-collection/src/components/mock-data-generator-modal/constants.ts

@@ -0,0 +1,57 @@
+import { expect } from 'chai';
+import React from 'react';
+import { render, screen } from '@mongodb-js/testing-library-compass';
+import Sinon from 'sinon';
+import MockDataGeneratorModal from './mock-data-generator-modal';
+import { MockDataGeneratorSteps } from './types.ts';
+
+describe('MockDataGeneratorModal', function () {
+  const sandbox = Sinon.createSandbox();
+  let setIsOpen: Sinon.SinonSpy;
+
+  beforeEach(function () {
+    setIsOpen = sandbox.spy();
+  });
+
+  afterEach(function () {
+    sandbox.restore();
+  });
+
+  const renderModal = () => {
+    return render(
+      <MockDataGeneratorModal isOpen={true} setIsOpen={setIsOpen} />
+    );
+  };
+
+  it('renders the modal when isOpen is true', function () {
+    renderModal();
+
+    expect(screen.getByTestId('generate-mock-data-modal')).to.exist;
+  });
+
+  it('calls setIsOpen(false) when the modal is closed', function () {
+    renderModal();
+
+    screen.getByLabelText('Close modal').click();
+
+    expect(setIsOpen.calledOnceWith(false)).to.be.true;
+  });
+
+  it('calls setIsOpen(false) when the cancel button is clicked', function () {
+    renderModal();
+
+    screen.getByText('Cancel').click();
+
+    expect(setIsOpen.calledOnceWith(false)).to.be.true;
+  });
+
+  it('renders the first step by default', function () {
+    renderModal();
+
+    expect(
+      screen.getByTestId(
+        `generate-mock-data-step-${MockDataGeneratorSteps.AI_DISCLAIMER}`
+      )
+    ).to.exist;
+  });
+});

packages/compass-collection/src/components/mock-data-generator-modal/mock-data-generator-modal.spec.tsx

@@ -1,17 +1,14 @@
 import React, { useState } from 'react';
 
-import { css } from '@mongodb-js/compass-components';
+import { css, ModalBody, ModalHeader } from '@mongodb-js/compass-components';
 
 import {
   Button,
   Modal,
-  ModalHeader,
-  ModalBody,
   ModalFooter,
   ButtonVariant,
 } from '@mongodb-js/compass-components';
 import { MockDataGeneratorSteps } from './types';
-import { DEFAULT_OUTPUT_DOCS_COUNT } from './constants';
 
 const footerStyles = css`
   flex-direction: row;
@@ -33,28 +30,15 @@ const MockDataGeneratorModal = ({ isOpen, setIsOpen }: Props) => {
   const [currentStep, setCurrentStep] = useState<MockDataGeneratorSteps>(
     MockDataGeneratorSteps.AI_DISCLAIMER
   );
-  const [rawSchema, setRawSchema] = useState<string | null>(null);
-  const [fakerSchema, setFakerSchema] = useState<string | null>(null);
-  const [outputDocsCount, setOutputDocsCount] = useState<number>(
-    DEFAULT_OUTPUT_DOCS_COUNT
-  );
-  const [validationRules, setValidationRules] = useState<string | null>(null);
-  const [sampleDoc, setSampleDoc] = useState<string | null>(null);
 
   const resetState = () => {
     setCurrentStep(MockDataGeneratorSteps.AI_DISCLAIMER);
-    setRawSchema(null);
-    setFakerSchema(null);
-    setOutputDocsCount(DEFAULT_OUTPUT_DOCS_COUNT);
-    setValidationRules(null);
-    setSampleDoc(null);
   };
 
   const onNext = () => {
     if (currentStep < MockDataGeneratorSteps.GENERATE_DATA) {
       setCurrentStep(currentStep + 1);
     } else {
-      // Final step, close the modal
       setIsOpen(false);
       resetState();
     }
@@ -78,16 +62,8 @@ const MockDataGeneratorModal = ({ isOpen, setIsOpen }: Props) => {
     >
       <ModalHeader title="Generate Mock Data" />
       <ModalBody>
-        {currentStep === MockDataGeneratorSteps.AI_DISCLAIMER && <div></div>}
-        {currentStep === MockDataGeneratorSteps.SCHEMA_CONFIRMATION && (
-          <div></div>
-        )}
-        {currentStep === MockDataGeneratorSteps.SCHEMA_EDITOR && <div></div>}
-        {currentStep === MockDataGeneratorSteps.DOCUMENT_COUNT && <div></div>}
-        {currentStep === MockDataGeneratorSteps.PREVIEW_DATA && <div></div>}
-        {currentStep === MockDataGeneratorSteps.GENERATE_DATA && <div></div>}
+        <div data-testid={`generate-mock-data-step-${currentStep}`} />
       </ModalBody>
-
       <ModalFooter className={footerStyles}>
         <Button onClick={onBack}>Back</Button>
         <div className={rightButtonsStyles}>