From 8d1049f914317c16f2034c73c9cfb86b84a4361b Mon Sep 17 00:00:00 2001 From: Matt Mangan Date: Wed, 13 Dec 2023 16:50:38 -0500 Subject: [PATCH] fixed suggested items from code review. Added better component tests --- .../src/lib/components/form/Form.tsx | 5 ++- packages/design-system/src/lib/index.ts | 1 + .../RequiredFieldText/RequiredFieldText.tsx | 14 +------ .../SeparationLine/SeparationLine.module.scss | 4 ++ src/sections/dataset/Dataset.module.scss | 5 --- src/sections/dataset/Dataset.tsx | 3 +- src/views/create-dataset/CreateDataset.tsx | 42 +++---------------- .../create-dataset/CreateDataset.spec.tsx | 30 +++++++------ 8 files changed, 31 insertions(+), 73 deletions(-) create mode 100644 src/components/ui/SeparationLine/SeparationLine.module.scss diff --git a/packages/design-system/src/lib/components/form/Form.tsx b/packages/design-system/src/lib/components/form/Form.tsx index 162a9cb70..065f18657 100644 --- a/packages/design-system/src/lib/components/form/Form.tsx +++ b/packages/design-system/src/lib/components/form/Form.tsx @@ -5,13 +5,14 @@ import { FormGroupWithMultipleFields } from './form-group-multiple-fields/FormGr import { FormInputGroup } from './form-group/form-input-group/FormInputGroup' interface FormProps { + className?: string validated?: boolean onSubmit?: (event: FormEvent) => void } -function Form({ validated, onSubmit, children }: PropsWithChildren) { +function Form({ validated, onSubmit, children, className }: PropsWithChildren) { return ( - + {children} ) diff --git a/packages/design-system/src/lib/index.ts b/packages/design-system/src/lib/index.ts index 0fcae5a91..0badda8a0 100644 --- a/packages/design-system/src/lib/index.ts +++ b/packages/design-system/src/lib/index.ts @@ -23,3 +23,4 @@ export { Icon } from './components/icon/Icon' export { IconName } from './components/icon/IconName' export { Tooltip } from './components/tooltip/Tooltip' export { Pagination } from './components/pagination/Pagination' +export { RequiredInputSymbol } from './components/form/required-input-symbol/RequiredInputSymbol' diff --git a/src/components/Forms/RequiredFieldText/RequiredFieldText.tsx b/src/components/Forms/RequiredFieldText/RequiredFieldText.tsx index 4aced5b58..dc915a0be 100644 --- a/src/components/Forms/RequiredFieldText/RequiredFieldText.tsx +++ b/src/components/Forms/RequiredFieldText/RequiredFieldText.tsx @@ -1,3 +1,5 @@ +import { RequiredInputSymbol } from '@iqss/dataverse-design-system' + export function RequiredFieldText() { return (

@@ -6,15 +8,3 @@ export function RequiredFieldText() {

) } - -// TODO: Why can't I export this object from Storybook? -// Needed to duplicate it on the frontend to be able to use. - -const RequiredInputSymbol = () => { - return ( - - {' '} - * - - ) -} diff --git a/src/components/ui/SeparationLine/SeparationLine.module.scss b/src/components/ui/SeparationLine/SeparationLine.module.scss new file mode 100644 index 000000000..75a046a0b --- /dev/null +++ b/src/components/ui/SeparationLine/SeparationLine.module.scss @@ -0,0 +1,4 @@ +.separation-line { + margin: 1em 0; + border-bottom: 1px solid #dee2e6; +} \ No newline at end of file diff --git a/src/sections/dataset/Dataset.module.scss b/src/sections/dataset/Dataset.module.scss index 991d976ca..f094a2d4e 100644 --- a/src/sections/dataset/Dataset.module.scss +++ b/src/sections/dataset/Dataset.module.scss @@ -12,9 +12,4 @@ .tab-container { padding: 1em 0; -} - -.separation-line { - margin: 1em 0; - border-bottom: 1px solid #dee2e6; } \ No newline at end of file diff --git a/src/sections/dataset/Dataset.tsx b/src/sections/dataset/Dataset.tsx index 8095e0ae8..f00f5a3bd 100644 --- a/src/sections/dataset/Dataset.tsx +++ b/src/sections/dataset/Dataset.tsx @@ -16,6 +16,7 @@ import { useEffect } from 'react' import { DatasetAlerts } from './dataset-alerts/DatasetAlerts' import { useNotImplementedModal } from '../not-implemented/NotImplementedModalContext' import { NotImplementedModal } from '../not-implemented/NotImplementedModal' +import { SeparationLine } from '../../components/ui/SeparationLine/SeparationLine' interface DatasetProps { fileRepository: FileRepository @@ -92,7 +93,7 @@ export function Dataset({ fileRepository }: DatasetProps) { -
+ )} diff --git a/src/views/create-dataset/CreateDataset.tsx b/src/views/create-dataset/CreateDataset.tsx index 974921d38..36406f378 100644 --- a/src/views/create-dataset/CreateDataset.tsx +++ b/src/views/create-dataset/CreateDataset.tsx @@ -3,28 +3,16 @@ import { ChangeEvent, FormEvent } from 'react' import { Alert, Button, Col, Form, Row } from '@iqss/dataverse-design-system' import { useTranslation } from 'react-i18next' -// import { DatasetSkeleton } from '../../sections/dataset/DatasetSkeleton' -// import { useLoading } from '../../sections/loading/LoadingContext' import styles from '/src/sections/dataset/Dataset.module.scss' -// import { FormInputElement } from '@iqss/dataverse-design-system/src/lib/components/form/form-group/form-element/FormInput' import { SeparationLine } from '../../components/ui/SeparationLine/SeparationLine' import { RequiredFieldText } from '../../components/Forms/RequiredFieldText/RequiredFieldText' /* * TODO: - * Break out different components - * Find submit action source - * cleanup state objects and submit process - * show submitted info in console - * Loading state management + * out-of-scope: Find submit action source + * out-of-scope: Loading state management */ -// See comments about https://rjsf-team.github.io/react-jsonschema-form/ -// https://github.com/IQSS/dataverse-frontend/issues/231 - -// const [submitting, setSubmitting] = useState(false) -// const [submitStatus, setSubmitStatus] = useState(false) - interface CreateDatasetFormPresenterProps { formData: { createDatasetTitle: string } handleCreateDatasetFieldChange: (event: ChangeEvent) => void @@ -33,7 +21,6 @@ interface CreateDatasetFormPresenterProps { submitComplete: boolean } export default function CreateDatasetFormPresenter({ - // formData, handleCreateDatasetFieldChange, handleCreateDatasetSubmit, submitting, @@ -50,9 +37,9 @@ export default function CreateDatasetFormPresenter({

{t('pageTitle')}

-
+
-
+ {submitComplete &&
Form Submitted!
} @@ -72,26 +59,9 @@ export default function CreateDatasetFormPresenter({ - + {t('metadataTip.content')} - {/* SRC: https://github.com/IQSS/dataverse/blob/develop/src/main/webapp/dataset.xhtml */} - {/* */} - {/* Where is datasetSaveCommand() */} - {/* */} @@ -103,5 +73,3 @@ export default function CreateDatasetFormPresenter({ ) } - -// export default CreateDatasetFormPresenter diff --git a/tests/component/views/create-dataset/CreateDataset.spec.tsx b/tests/component/views/create-dataset/CreateDataset.spec.tsx index 26dc722f5..41e691f1c 100644 --- a/tests/component/views/create-dataset/CreateDataset.spec.tsx +++ b/tests/component/views/create-dataset/CreateDataset.spec.tsx @@ -1,24 +1,22 @@ import CreateDatasetContainer from '../../../../src/views/create-dataset/CreateDatasetContainer' describe('Form component', () => { - it('should render all form fields', () => { + beforeEach(() => { cy.customMount() - cy.get('[data-cy=datasetFormInputTitle]').should('be.visible') - cy.get('[data-cy=datasetFormSubmit]').should('be.visible') - cy.get('[data-cy=datasetFormCancel]').should('be.visible') }) + it('can submit a valid form', () => { + cy.findByText(/Create Dataset/i).should('exist') + cy.findByText(/Title/i).should('exist') - it('should submit the form with correct values', () => { - cy.customMount() - - cy.get('[data-cy=datasetFormInputTitle]').type('Test Dataset Title') - - cy.get('[data-cy=datasetFormSubmit]').click() - - // Wait for the form submission to complete (adjust the timeout as needed) - cy.wait(4000) - - // Assert that the form was successfully submitted - cy.contains('Form Submitted!') + cy.get('input[name="createDatasetTitle"]') + .should('exist') + .type('Test Dataset Title') + .should('have.attr', 'required', 'required') + .and('have.value', 'Test Dataset Title') + cy.findByText(/Save Dataset/i).should('exist') + cy.findByText(/Cancel/i).should('exist') + cy.log('Submit form') + cy.findByText(/Save Dataset/i).click() + cy.findByText('Form Submitted!', { timeout: 5000 }) }) })