Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat #65 - Form Component #67

Merged
merged 12 commits into from
Aug 27, 2020
Merged

feat #65 - Form Component #67

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
19a397a
feat #65 - Form Component
Aug 25, 2020
a7969c7
feat #65 - Update hooks for form and Input exports
Aug 25, 2020
1b83e44
feat #65 - Add argTypes to fix Form stories
Aug 25, 2020
6196914
feat #65 - Fix infinite calls with react hooks
Aug 25, 2020
76626f8
feat #65 - Update Typescript types
Aug 26, 2020
395c879
feat #65 - Update failing tests
Aug 26, 2020
dc2ce57
feat #65 - Abstract out loading state from button
Aug 26, 2020
5802487
feat #65 - Fix lint errors
Aug 26, 2020
1b04e9c
feat #65 - Update failing snapshots
Aug 26, 2020
10e1820
feat #65 - Update button prop to be consistent and update tests
Aug 26, 2020
077964f
feat #65 - Update form test, allow user to customize skeleton dimensi…
Aug 27, 2020
64e171b
feat #65 - Write tests for custom skeleton dimension props
Aug 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 12 additions & 7 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"directory": "@dassana-io/web-components"
},
"dependencies": {
"@ant-design/icons": "^4.2.2",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
Expand All @@ -21,6 +22,7 @@
"classnames": "^2.2.6",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hook-form": "^6.5.0",
"react-jss": "^10.4.0",
"react-scripts": "^3.4.3",
"typescript": "^3.9.7"
Expand Down Expand Up @@ -77,7 +79,7 @@
"chromatic": "^5.1.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint-plugin-react": "^7.20.5",
"eslint-plugin-react": "^7.20.6",
"normalize.css": "^8.0.1",
"react-test-renderer": "^16.13.1",
"rollup": "^2.26.4",
Expand Down
175 changes: 133 additions & 42 deletions src/__snapshots__/storybook.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,56 @@ exports[`Storyshots Button Google 1`] = `
</button>
`;

exports[`Storyshots Button Pending 1`] = `
<button
className="ant-btn ant-btn-default"
disabled={true}
onClick={[Function]}
type="button"
>
<span
style={
Object {
"paddingRight": 8,
}
}
>
<div
className="ant-spin ant-spin-spinning"
>
<span
aria-label="loading"
className="anticon anticon-loading ant-spin-dot"
role="img"
style={
Object {
"fontSize": 16,
}
}
>
<svg
aria-hidden="true"
className="anticon-spin"
data-icon="loading"
fill="currentColor"
focusable="false"
height="1em"
viewBox="0 0 1024 1024"
width="1em"
>
<path
d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
/>
</svg>
</span>
</div>
</span>
<span>
Pending
</span>
</button>
`;

exports[`Storyshots Button Primary 1`] = `
<button
className="ant-btn ant-btn-primary"
Expand All @@ -85,6 +135,71 @@ exports[`Storyshots Button Primary Disabled 1`] = `
</button>
`;

exports[`Storyshots Form Default 1`] = `
<form
onSubmit={[Function]}
>
<div
className="container-0-2-2"
>
<div>
<div
className="container-0-2-3 required-0-2-4"
>
First Name
</div>
<div
className="container-0-2-5 container-d0-0-2-8"
>
<input
className="ant-input"
disabled={false}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
placeholder=""
type="text"
value="First Name"
/>
</div>
</div>
<div>
<div
className="container-0-2-3"
>
Last Name
</div>
<div
className="container-0-2-5 container-d1-0-2-9"
>
<input
className="ant-input"
disabled={false}
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
placeholder=""
type="text"
value=""
/>
</div>
</div>
<button
className="ant-btn ant-btn-default"
disabled={false}
onClick={[Function]}
type="button"
>
<span>
Submit
</span>
</button>
</div>
</form>
`;

exports[`Storyshots Icon Custom 1`] = `
<img
alt="https://dummyimage.com/600x400/000/fff&text=Dassana"
Expand All @@ -101,15 +216,10 @@ exports[`Storyshots Icon Predefined 1`] = `
/>
`;

exports[`Storyshots InputField Default 1`] = `
exports[`Storyshots Input Default 1`] = `
<div
className="container-0-2-2 container-d0-0-2-7"
className="container-0-2-5 container-d2-0-2-10"
>
<div
className="label-0-2-5"
>
Field Label
</div>
<input
className="ant-input"
disabled={false}
Expand All @@ -124,17 +234,12 @@ exports[`Storyshots InputField Default 1`] = `
</div>
`;

exports[`Storyshots InputField Error 1`] = `
exports[`Storyshots Input Error 1`] = `
<div
className="container-0-2-2 container-d4-0-2-14"
className="container-0-2-5 container-d6-0-2-16"
>
<div
className="label-0-2-5"
>
Field Label
</div>
<input
className="ant-input error-0-2-3"
className="ant-input error-0-2-6"
disabled={false}
onBlur={[Function]}
onChange={[Function]}
Expand All @@ -147,15 +252,10 @@ exports[`Storyshots InputField Error 1`] = `
</div>
`;

exports[`Storyshots InputField Full Width 1`] = `
exports[`Storyshots Input Full Width 1`] = `
<div
className="container-0-2-2 container-d3-0-2-13"
className="container-0-2-5 container-d5-0-2-15"
>
<div
className="label-0-2-5"
>
Field Label
</div>
<input
className="ant-input"
disabled={false}
Expand All @@ -170,24 +270,15 @@ exports[`Storyshots InputField Full Width 1`] = `
</div>
`;

exports[`Storyshots InputField Loading 1`] = `
exports[`Storyshots Input Loading 1`] = `
<div
className="container-0-2-2 container-d2-0-2-9"
className="container-0-2-5 container-d4-0-2-12"
>
<div
className="label-0-2-5"
>
<span
className="container-0-2-10 container-d0-0-2-11"
>

</span>
</div>
<div
className="input-0-2-4"
className="input-0-2-7"
>
<span
className="container-0-2-10 container-d1-0-2-12"
className="container-0-2-13 container-d0-0-2-14"
>

</span>
Expand Down Expand Up @@ -231,7 +322,7 @@ exports[`Storyshots Link Href 1`] = `

exports[`Storyshots Skeleton Circle 1`] = `
<span
className="container-0-2-10 container-d3-0-2-16"
className="container-0-2-13 container-d2-0-2-18"
>

</span>
Expand All @@ -240,27 +331,27 @@ exports[`Storyshots Skeleton Circle 1`] = `
exports[`Storyshots Skeleton Count 1`] = `
Array [
<span
className="container-0-2-10 container-d4-0-2-17"
className="container-0-2-13 container-d3-0-2-19"
>

</span>,
<span
className="container-0-2-10 container-d4-0-2-17"
className="container-0-2-13 container-d3-0-2-19"
>

</span>,
<span
className="container-0-2-10 container-d4-0-2-17"
className="container-0-2-13 container-d3-0-2-19"
>

</span>,
<span
className="container-0-2-10 container-d4-0-2-17"
className="container-0-2-13 container-d3-0-2-19"
>

</span>,
<span
className="container-0-2-10 container-d4-0-2-17"
className="container-0-2-13 container-d3-0-2-19"
>

</span>,
Expand All @@ -269,7 +360,7 @@ Array [

exports[`Storyshots Skeleton Default 1`] = `
<span
className="container-0-2-10 container-d2-0-2-15"
className="container-0-2-13 container-d1-0-2-17"
>

</span>
Expand Down
3 changes: 3 additions & 0 deletions src/components/Button/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ Default.args = { children: 'Default' }
export const Disabled = Template.bind({})
Disabled.args = { children: 'Disabled', disabled: true }

export const Pending = Template.bind({})
Pending.args = { children: 'Pending', pending: true }

nancy-dassana marked this conversation as resolved.
Show resolved Hide resolved
export const Primary = Template.bind({})
Primary.args = { children: 'Primary', primary: true }

Expand Down
33 changes: 32 additions & 1 deletion src/components/Button/Button.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Button as AntDButton } from 'antd'
import React from 'react'
import Skeleton from '../Skeleton'
import { Button as AntDButton, Spin } from 'antd'
import Button, { ButtonProps } from '.'
import { shallow, ShallowWrapper } from 'enzyme'

Expand Down Expand Up @@ -35,6 +36,18 @@ describe('Button', () => {
})
})

describe('loading', () => {
it('renders a skeleton', () => {
wrapper = shallow(
<Button loading onClick={mockClick}>
Test
</Button>
)

expect(wrapper.find(Skeleton)).toHaveLength(1)
})
nancy-dassana marked this conversation as resolved.
Show resolved Hide resolved
})

describe('Disabled Button', () => {
it('has correct prop "disabled" and correct class "disabled"', () => {
wrapper = shallow(
Expand All @@ -45,3 +58,21 @@ describe('Disabled Button', () => {
expect(wrapper.props().disabled).toBeTruthy()
})
})

describe('Pending Button', () => {
nancy-dassana marked this conversation as resolved.
Show resolved Hide resolved
beforeEach(() => {
wrapper = shallow(
<Button onClick={mockClick} pending>
Test
</Button>
)
})

it('renders a Spin component', () => {
expect(wrapper.find(Spin)).toHaveLength(1)
})

it('automatically disables the button', () => {
expect(wrapper.find(AntDButton).props().disabled).toBeTruthy()
})
})
Loading