Skip to content

Commit 341cdf8

Browse files
ncarbonncarbon
committed
address comments
1 parent 02d090c commit 341cdf8

File tree

4 files changed

+122
-29
lines changed

4 files changed

+122
-29
lines changed

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

Lines changed: 73 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,54 +3,113 @@ import React from 'react';
33
import { render, screen } from '@mongodb-js/testing-library-compass';
44
import Sinon from 'sinon';
55
import MockDataGeneratorModal from './mock-data-generator-modal';
6-
import { MockDataGeneratorSteps } from './types.ts';
6+
import { MockDataGeneratorStep } from './types';
77

8-
describe('MockDataGeneratorModal', function () {
8+
describe('MockDataGeneratorModal', () => {
99
const sandbox = Sinon.createSandbox();
1010
let setIsOpen: Sinon.SinonSpy;
1111

12-
beforeEach(function () {
12+
beforeEach(() => {
1313
setIsOpen = sandbox.spy();
1414
});
1515

16-
afterEach(function () {
16+
afterEach(() => {
1717
sandbox.restore();
1818
});
1919

20-
const renderModal = () => {
21-
return render(
22-
<MockDataGeneratorModal isOpen={true} setIsOpen={setIsOpen} />
23-
);
24-
};
20+
function renderModal({
21+
isOpen = true,
22+
currentStep = MockDataGeneratorStep.AI_DISCLAIMER,
23+
} = {}) {
24+
function MockDataGeneratorModalWrapper() {
25+
const [currentStepStateMock, setCurrentStepStateMock] =
26+
React.useState<MockDataGeneratorStep>(currentStep);
27+
return (
28+
<MockDataGeneratorModal
29+
isOpen={isOpen}
30+
setIsOpen={setIsOpen}
31+
currentStep={currentStepStateMock}
32+
setCurrentStep={(step) => {
33+
setCurrentStepStateMock(step);
34+
}}
35+
/>
36+
);
37+
}
38+
return render(<MockDataGeneratorModalWrapper />);
39+
}
2540

26-
it('renders the modal when isOpen is true', function () {
41+
it('renders the modal when isOpen is true', () => {
2742
renderModal();
2843

2944
expect(screen.getByTestId('generate-mock-data-modal')).to.exist;
3045
});
3146

32-
it('calls setIsOpen(false) when the modal is closed', function () {
47+
it('does not render the modal when isOpen is false', () => {
48+
renderModal({ isOpen: false });
49+
50+
expect(screen.queryByTestId('generate-mock-data-modal')).to.not.exist;
51+
});
52+
53+
it('renders the correct step when currentStep is set', () => {
54+
renderModal({ currentStep: MockDataGeneratorStep.SCHEMA_CONFIRMATION });
55+
56+
expect(
57+
screen.getByTestId(
58+
`generate-mock-data-step-${MockDataGeneratorStep.SCHEMA_CONFIRMATION}`
59+
)
60+
).to.exist;
61+
});
62+
63+
it('calls setIsOpen(false) when the modal is closed', () => {
3364
renderModal();
3465

3566
screen.getByLabelText('Close modal').click();
3667

3768
expect(setIsOpen.calledOnceWith(false)).to.be.true;
3869
});
3970

40-
it('calls setIsOpen(false) when the cancel button is clicked', function () {
71+
it('calls setIsOpen(false) when the cancel button is clicked', () => {
4172
renderModal();
4273

4374
screen.getByText('Cancel').click();
4475

4576
expect(setIsOpen.calledOnceWith(false)).to.be.true;
4677
});
4778

48-
it('renders the first step by default', function () {
79+
it('disables the Back button on the first step', () => {
80+
renderModal();
81+
82+
expect(
83+
screen.getByRole('button', { name: 'Back' }).getAttribute('aria-disabled')
84+
).to.equal('true');
85+
});
86+
87+
it('renders the next step button with the correct label on each step', () => {
88+
renderModal();
89+
90+
expect(screen.getByTestId('next-step-button')).to.have.text(
91+
'Use Natural Language'
92+
);
93+
screen.getByTestId('next-step-button').click();
94+
expect(screen.getByTestId('next-step-button')).to.have.text('Confirm');
95+
screen.getByTestId('next-step-button').click();
96+
expect(screen.getByTestId('next-step-button')).to.have.text('Next');
97+
screen.getByTestId('next-step-button').click();
98+
expect(screen.getByTestId('next-step-button')).to.have.text('Next');
99+
screen.getByTestId('next-step-button').click();
100+
expect(screen.getByTestId('next-step-button')).to.have.text(
101+
'Generate Script'
102+
);
103+
screen.getByTestId('next-step-button').click();
104+
expect(screen.getByTestId('next-step-button')).to.have.text('Done');
105+
});
106+
107+
it('renders the first step by default', () => {
49108
renderModal();
50109

51110
expect(
52111
screen.getByTestId(
53-
`generate-mock-data-step-${MockDataGeneratorSteps.AI_DISCLAIMER}`
112+
`generate-mock-data-step-${MockDataGeneratorStep.AI_DISCLAIMER}`
54113
)
55114
).to.exist;
56115
});

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

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import React from 'react';
22

33
import { css, ModalBody, ModalHeader } from '@mongodb-js/compass-components';
44

@@ -8,7 +8,8 @@ import {
88
ModalFooter,
99
ButtonVariant,
1010
} from '@mongodb-js/compass-components';
11-
import { MockDataGeneratorSteps } from './types';
11+
import { MockDataGeneratorStep } from './types';
12+
import { getNextStepButtonLabel } from './utils';
1213

1314
const footerStyles = css`
1415
flex-direction: row;
@@ -24,19 +25,22 @@ const rightButtonsStyles = css`
2425
interface Props {
2526
isOpen: boolean;
2627
setIsOpen: (isOpen: boolean) => void;
28+
currentStep: MockDataGeneratorStep;
29+
setCurrentStep: (step: MockDataGeneratorStep) => void;
2730
}
2831

29-
const MockDataGeneratorModal = ({ isOpen, setIsOpen }: Props) => {
30-
const [currentStep, setCurrentStep] = useState<MockDataGeneratorSteps>(
31-
MockDataGeneratorSteps.AI_DISCLAIMER
32-
);
33-
32+
const MockDataGeneratorModal = ({
33+
isOpen,
34+
setIsOpen,
35+
currentStep,
36+
setCurrentStep,
37+
}: Props) => {
3438
const resetState = () => {
35-
setCurrentStep(MockDataGeneratorSteps.AI_DISCLAIMER);
39+
setCurrentStep(MockDataGeneratorStep.AI_DISCLAIMER);
3640
};
3741

3842
const onNext = () => {
39-
if (currentStep < MockDataGeneratorSteps.GENERATE_DATA) {
43+
if (currentStep < MockDataGeneratorStep.GENERATE_DATA) {
4044
setCurrentStep(currentStep + 1);
4145
} else {
4246
setIsOpen(false);
@@ -45,31 +49,42 @@ const MockDataGeneratorModal = ({ isOpen, setIsOpen }: Props) => {
4549
};
4650

4751
const onBack = () => {
48-
if (currentStep > MockDataGeneratorSteps.AI_DISCLAIMER) {
52+
if (currentStep > MockDataGeneratorStep.AI_DISCLAIMER) {
4953
setCurrentStep(currentStep - 1);
5054
}
5155
};
5256

5357
const onCancel = () => {
5458
setIsOpen(false);
59+
resetState();
5560
};
5661

5762
return (
5863
<Modal
5964
open={isOpen}
60-
setOpen={() => setIsOpen(false)}
65+
setOpen={(open) => setIsOpen(open)}
6166
data-testid="generate-mock-data-modal"
6267
>
6368
<ModalHeader title="Generate Mock Data" />
6469
<ModalBody>
70+
{/* TODO: Render actual step content here based on currentStep. (CLOUDP-333851) */}
6571
<div data-testid={`generate-mock-data-step-${currentStep}`} />
6672
</ModalBody>
6773
<ModalFooter className={footerStyles}>
68-
<Button onClick={onBack}>Back</Button>
74+
<Button
75+
onClick={onBack}
76+
disabled={currentStep === MockDataGeneratorStep.AI_DISCLAIMER}
77+
>
78+
Back
79+
</Button>
6980
<div className={rightButtonsStyles}>
7081
<Button onClick={onCancel}>Cancel</Button>
71-
<Button variant={ButtonVariant.Primary} onClick={onNext}>
72-
Next
82+
<Button
83+
variant={ButtonVariant.Primary}
84+
onClick={onNext}
85+
data-testid="next-step-button"
86+
>
87+
{getNextStepButtonLabel(currentStep)}
7388
</Button>
7489
</div>
7590
</ModalFooter>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export enum MockDataGeneratorSteps {
1+
export enum MockDataGeneratorStep {
22
AI_DISCLAIMER = 1,
33
SCHEMA_CONFIRMATION = 2,
44
SCHEMA_EDITOR = 3,

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

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { MockDataGeneratorStep } from './types';
2+
3+
export const getNextStepButtonLabel = (step: MockDataGeneratorStep): string => {
4+
switch (step) {
5+
case MockDataGeneratorStep.AI_DISCLAIMER:
6+
return 'Use Natural Language';
7+
case MockDataGeneratorStep.SCHEMA_CONFIRMATION:
8+
return 'Confirm';
9+
case MockDataGeneratorStep.SCHEMA_EDITOR:
10+
case MockDataGeneratorStep.DOCUMENT_COUNT:
11+
return 'Next';
12+
case MockDataGeneratorStep.PREVIEW_DATA:
13+
return 'Generate Script';
14+
case MockDataGeneratorStep.GENERATE_DATA:
15+
return 'Done';
16+
default:
17+
return 'Next';
18+
}
19+
};

0 commit comments

Comments
 (0)