-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
### Changes made Explain what you made to present the following solution on this pull request. --- ### My pull request is for - [ ] A bugfix - [x] A new component - [ ] An existing component update ### Also, it complies with the following - In case of a `new component` - [x] A folder with its name on `src/components/molecules` - [x] A `index.tsx` file where the component will be coded - [x] New and/or updated interfaces, types, tuples and enums for the component - [x] A `index.test.ts` file for its units tests and create the needed to reach at least 90% of code coverage - [x] A `index.stories.tsx` file for storybook stories and add at least 2 stories for different scenarios --- ### Screenshots `In case of have differences between old and new functionality, please provide a 'Before vs After' comparrison in order to show in a graphic way your contribution`
- Loading branch information
Showing
9 changed files
with
2,072 additions
and
2,501 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| { | ||
| "testing": { | ||
| "basicTestId": "test-modal-active", | ||
| "backgroundTestId": "test-modal-background", | ||
| "closeTestId": "test-modal-close", | ||
| "testChildren": "Hello There" | ||
| }, | ||
| "storybook": { | ||
| "testButtonList": [ | ||
| { | ||
| "text": "Hello", | ||
| "color": "is-info" | ||
| }, | ||
| { | ||
| "text": "There", | ||
| "color": "is-success" | ||
| }, | ||
| { | ||
| "text": "General", | ||
| "color": "is-warning" | ||
| }, | ||
| { | ||
| "text": "Kenoby", | ||
| "color": "is-danger" | ||
| } | ||
| ], | ||
| "testImageSrc": "https://bulma.io/images/placeholders/256x256.png", | ||
| "parameters": { | ||
| "componentSubtitle": "Here goes component's subtitle, a base idea about what it does", | ||
| "docs": { | ||
| "description": { | ||
| "component": "Here goes component's technical description, mostly based on Bulma's documentation." | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import React, { useState } from 'react' | ||
| import { StoryFn, Meta } from '@storybook/react' | ||
| // COMPONENTS | ||
| import Modal from '.' | ||
| import ButtonGroup from '../ButtonGroup' | ||
| import { Button, Image } from '../../atoms' | ||
| // TYPES & INTERFACES | ||
| import { ButtonProps } from '../../../interfaces/atomProps' | ||
| // MOCKS | ||
| import { storybook } from './index.mocks.json' | ||
|
|
||
| export default { | ||
| title: 'Molecules/Modal', | ||
| component: Modal | ||
| } as Meta<typeof Modal> | ||
|
|
||
| const Template: StoryFn<typeof Modal> = args => { | ||
| const [modalIsOpen, setModalIsOpen] = useState<boolean>(false) | ||
| return ( | ||
| <> | ||
| <Button | ||
| text='Click here to open the modal' | ||
| onClick={() => setModalIsOpen(!modalIsOpen)} | ||
| /> | ||
| {modalIsOpen && ( | ||
| <Modal | ||
| {...{ | ||
| ...args, | ||
| onCloseClick: () => setModalIsOpen(!modalIsOpen) | ||
| }} | ||
| /> | ||
| )} | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export const BasicExample = Template.bind({}) | ||
|
|
||
| export const ImageExample = Template.bind({}) | ||
| ImageExample.args = { | ||
| children: <Image src={storybook.testImageSrc} /> | ||
| } | ||
|
|
||
| export const ButtonGroupExample = Template.bind({}) | ||
| ButtonGroupExample.args = { | ||
| children: ( | ||
| <ButtonGroup buttonList={storybook.testButtonList as ButtonProps[]} /> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import React from 'react' | ||
| import { render, screen } from '@testing-library/react' | ||
| import userEvent from '@testing-library/user-event' | ||
| import '@testing-library/jest-dom' | ||
| // COMPONENTS | ||
| import Modal from '.' | ||
| // TYPES & INTERFACES | ||
| // MOCKS | ||
| import { testing } from './index.mocks.json' | ||
|
|
||
| describe('Modal', () => { | ||
| const { basicTestId, testChildren, backgroundTestId, closeTestId } = testing | ||
|
|
||
| test('Should render the component', () => { | ||
| render(<Modal>{testChildren}</Modal>) | ||
| const testModal = screen.getByTestId(basicTestId) | ||
|
|
||
| expect(testModal).toBeInTheDocument() | ||
| }) | ||
|
|
||
| test('Should not render the component if has no children', () => { | ||
| render(<Modal />) | ||
| expect(() => screen.getByTestId(basicTestId)).toThrow() | ||
| }) | ||
|
|
||
| test('Should render the modal and close it when I click its close button', async () => { | ||
| const clickeableCloseConfig = { | ||
| children: testChildren, | ||
| onCloseClick: jest.fn() | ||
| } | ||
|
|
||
| render(<Modal {...clickeableCloseConfig} />) | ||
| const closeModalButton = screen.getByTestId(closeTestId) | ||
|
|
||
| expect(closeModalButton).toBeInTheDocument() | ||
| await userEvent.click(closeModalButton) | ||
|
|
||
| expect(clickeableCloseConfig.onCloseClick).toHaveBeenCalled() | ||
| expect(() => screen.getByTestId(basicTestId)).toThrow() | ||
| }) | ||
|
|
||
| test('Should render the modal and close it when I select its background', async () => { | ||
| const clickeableCloseConfig = { | ||
| children: testChildren, | ||
| onCloseClick: jest.fn() | ||
| } | ||
|
|
||
| render(<Modal {...clickeableCloseConfig} />) | ||
| const backgroundModal = screen.getByTestId(backgroundTestId) | ||
|
|
||
| expect(backgroundModal).toBeInTheDocument() | ||
| await userEvent.click(backgroundModal) | ||
|
|
||
| expect(clickeableCloseConfig.onCloseClick).toHaveBeenCalled() | ||
| expect(() => screen.getByTestId(basicTestId)).toThrow() | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| import React, { useState } from 'react' | ||
| // COMPONENTS | ||
| // TYPES & INTERFACES | ||
| import { ModalProps } from '../../../interfaces/moleculeProps' | ||
| // PARSERS | ||
| import { parseClasses, parseTestId } from '../../../functions/parsers' | ||
|
|
||
| const Modal: React.FC<ModalProps> = ({ | ||
| testId = null, | ||
| containerTestId = null, | ||
| cssClasses = null, | ||
| containerCssClasses = null, | ||
| style = null, | ||
| containerStyle = null, | ||
| children = null, | ||
| onCloseClick = null | ||
| }) => { | ||
| const [modalIsOpen, setModalIsOpen] = useState<boolean>(true) | ||
| const modalContainerClasses = parseClasses([ | ||
| 'modal', | ||
| 'is-active', | ||
| containerCssClasses | ||
| ]) | ||
| const modalContainerTestId = | ||
| containerTestId ?? | ||
| parseTestId({ tag: 'modal', parsedClasses: modalContainerClasses }) | ||
| const modalClasses = parseClasses(['modal-content', cssClasses]) | ||
| const modalTestId = | ||
| testId ?? parseTestId({ tag: 'modal-content', parsedClasses: modalClasses }) | ||
|
|
||
| const handleCloseClick = () => { | ||
| if (onCloseClick) onCloseClick() | ||
| setModalIsOpen(false) | ||
| } | ||
|
|
||
| return ( | ||
| children && | ||
| modalIsOpen && ( | ||
| <section | ||
| data-testid={modalContainerTestId} | ||
| className={modalContainerClasses} | ||
| style={containerStyle ?? undefined} | ||
| > | ||
| <section | ||
| data-testid={'test-modal-background'} | ||
| className='modal-background' | ||
| aria-hidden='true' | ||
| onClick={handleCloseClick} | ||
| ></section> | ||
| <section | ||
| data-testid={modalTestId} | ||
| className={modalClasses} | ||
| style={style ?? undefined} | ||
| > | ||
| {children} | ||
| </section> | ||
| <button | ||
| data-testid={'test-modal-close'} | ||
| className='modal-close is-large' | ||
| aria-label='close' | ||
| onClick={handleCloseClick} | ||
| ></button> | ||
| </section> | ||
| ) | ||
| ) | ||
| } | ||
|
|
||
| export default Modal |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters