Skip to content

Commit

Permalink
Added tests for Spinner component
Browse files Browse the repository at this point in the history
  • Loading branch information
fedebabrauskas committed Oct 23, 2019
1 parent d52ca0b commit 9c529a4
Show file tree
Hide file tree
Showing 4 changed files with 152 additions and 5 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"@storybook/react": "^5.2.4",
"@svgr/rollup": "^4.3.0",
"@testing-library/react": "^9.3.0",
"@testing-library/jest-dom": "^4.1.2",
"@types/jest": "^24.0.11",
"@types/node": "^12.11.1",
"@types/react": "^16.8.12",
Expand Down
4 changes: 2 additions & 2 deletions src/components/Spinner/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const StyledSvg = styled.svg`
animation-timing-function: linear;
`

const Spinner: FC<Props> = ({ thickness, size, speed, gap }) => {
const Spinner: FC<SpinnerProps> = ({ thickness, size, speed, gap }) => {
return (
<StyledSvg
height={`${getSize(size!)}rem`}
Expand Down Expand Up @@ -57,7 +57,7 @@ Spinner.defaultProps = {
gap: 'lg',
}

type Props = {
export type SpinnerProps = {
readonly speed?: Speed
readonly gap?: Measure
readonly thickness?: Measure
Expand Down
71 changes: 71 additions & 0 deletions src/components/Spinner/spinner.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import React from 'react'
import { render, cleanup } from '@testing-library/react'
import '@testing-library/jest-dom/extend-expect'

import Spinner, {
SpinnerProps,
getSize,
getThickness,
getGap,
getSpeed,
} from './index'
import { AdaptProvider } from '../'
import 'jest-styled-components'

afterEach(cleanup)

describe('Spinner component', () => {
const renderComponent = (customProps?: SpinnerProps) =>
render(
<AdaptProvider>
<Spinner {...customProps} />
</AdaptProvider>
)

const sizes: Measure[] = ['sm', 'md', 'lg', 'xl']
const speeds: Speed[] = ['fast', 'slow', 'normal']

it('should render without crashing', () => {
const { container } = renderComponent()
const firstChild = container.firstChild
expect(firstChild).toBeInTheDocument()
})

it('should render for all sizes', () => {
for (let size of sizes) {
const { container } = renderComponent({ size: size })
const firstChild = container.firstChild
const sizeValue = `${getSize(size)}rem`
expect(firstChild).toHaveAttribute('height', sizeValue)
expect(firstChild).toHaveAttribute('width', sizeValue)
}
})

it('should render for all thicknesses', () => {
for (let size of sizes) {
const { container } = renderComponent({ thickness: size })
const circleElement = container.querySelector('circle')
const thicknessValue = `${getThickness(size)}`
expect(circleElement).toHaveAttribute('stroke-width', thicknessValue)
const radiusValue = `${14 - getThickness(size) / 2}`
expect(circleElement).toHaveAttribute('r', radiusValue)
}
})

it('should render for all gaps', () => {
for (let size of sizes) {
const { container } = renderComponent({ gap: size })
const circleElement = container.querySelector('circle')
const gapValue = `${Math.PI * 2 * (11 - getGap(size))}`
expect(circleElement).toHaveAttribute('stroke-dasharray', gapValue)
}
})

it('should render for all speeds', () => {
for (let speed of speeds) {
const { container } = renderComponent({ speed: speed })
const firstChild = container.firstChild
expect(firstChild).toHaveStyle(`animation-duration: ${getSpeed(speed)}ms`)
}
})
})
81 changes: 78 additions & 3 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1174,7 +1174,7 @@
dependencies:
regenerator-runtime "^0.13.2"

"@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3":
"@babel/runtime@^7.1.2", "@babel/runtime@^7.3.4", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.6.3":
version "7.6.3"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.6.3.tgz#935122c74c73d2240cafd32ddb5fc2a6cd35cf1f"
integrity sha512-kq6anf9JGjW8Nt5rYfEuGRaEAaH1mkv3Bbu6rYvLOpPh/RusSJXuKPEAoZ7L7gybZkchE8+NV5g9vKF4AGAtsA==
Expand Down Expand Up @@ -2058,6 +2058,21 @@
pretty-format "^24.9.0"
wait-for-expect "^3.0.0"

"@testing-library/jest-dom@^4.1.2":
version "4.1.2"
resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-4.1.2.tgz#e523047191379abd67cf0896dfd93cabc7e33eab"
integrity sha512-fNf2rCfu0dBD4DmpzqR2ibsaFlFojrWI/EuU8LLqv73CzFIMvT2RMq88p5JVRe4DfeNj0mu0MQ5FTG4mQ0qFaA==
dependencies:
"@babel/runtime" "^7.5.1"
chalk "^2.4.1"
css "^2.2.3"
css.escape "^1.5.1"
jest-diff "^24.0.0"
jest-matcher-utils "^24.0.0"
lodash "^4.17.11"
pretty-format "^24.0.0"
redent "^3.0.0"

"@testing-library/react@^9.3.0":
version "9.3.0"
resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-9.3.0.tgz#1dabf46d1ea018a1c89acecc0e7b86859b34c0f8"
Expand Down Expand Up @@ -4515,7 +4530,12 @@ css-what@2.1, css-what@^2.1.2:
resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==

css@^2.2.4:
css.escape@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=

css@^2.2.3, css@^2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
Expand Down Expand Up @@ -4862,6 +4882,11 @@ diff-sequences@^24.3.0:
resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.3.0.tgz#0f20e8a1df1abddaf4d9c226680952e64118b975"
integrity sha512-xLqpez+Zj9GKSnPWS0WZw1igGocZ+uua8+y+5dDNTT934N3QuY1sp2LkHzwiaYQGz60hMq0pjAshdeXm5VUOEw==

diff-sequences@^24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
integrity sha512-Dj6Wk3tWyTE+Fo1rW8v0Xhwk80um6yFYKbuAxc9c3EZxIHFDYwbi34Uk42u1CdnIiVorvt4RmlSDjIPyzGC2ew==

diffie-hellman@^5.0.0:
version "5.0.3"
resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
Expand Down Expand Up @@ -6420,6 +6445,11 @@ indent-string@^3.0.0:
resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=

indent-string@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==

indexes-of@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/indexes-of/-/indexes-of-1.0.1.tgz#f30f716c8e2bd346c7b67d3df3915566a7c05607"
Expand Down Expand Up @@ -7085,6 +7115,16 @@ jest-config@^24.8.0:
pretty-format "^24.8.0"
realpath-native "^1.1.0"

jest-diff@^24.0.0, jest-diff@^24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
dependencies:
chalk "^2.0.1"
diff-sequences "^24.9.0"
jest-get-type "^24.9.0"
pretty-format "^24.9.0"

jest-diff@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.8.0.tgz#146435e7d1e3ffdf293d53ff97e193f1d1546172"
Expand Down Expand Up @@ -7141,6 +7181,11 @@ jest-get-type@^24.8.0:
resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.8.0.tgz#a7440de30b651f5a70ea3ed7ff073a32dfe646fc"
integrity sha512-RR4fo8jEmMD9zSz2nLbs2j0zvPpk/KCEz3a62jJWbd2ayNo0cb+KFRxPHVhE4ZmgGJEQp0fosmNz84IfqM8cMQ==

jest-get-type@^24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-24.9.0.tgz#1684a0c8a50f2e4901b6644ae861f579eed2ef0e"
integrity sha512-lUseMzAley4LhIcpSP9Jf+fTrQ4a1yHQwLNeeVa2cEmbCGeoZAtYPOIv8JaxLD/sUpKxetKGP+gsHl8f8TSj8Q==

jest-haste-map@^24.8.0:
version "24.8.1"
resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.8.1.tgz#f39cc1d2b1d907e014165b4bd5a957afcb992982"
Expand Down Expand Up @@ -7189,6 +7234,16 @@ jest-leak-detector@^24.8.0:
dependencies:
pretty-format "^24.8.0"

jest-matcher-utils@^24.0.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073"
integrity sha512-OZz2IXsu6eaiMAwe67c1T+5tUAtQyQx27/EMEkbFAGiw52tB9em+uGbzpcgYVpA8wl0hlxKPZxrly4CXU/GjHA==
dependencies:
chalk "^2.0.1"
jest-diff "^24.9.0"
jest-get-type "^24.9.0"
pretty-format "^24.9.0"

jest-matcher-utils@^24.8.0:
version "24.8.0"
resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.8.0.tgz#2bce42204c9af12bde46f83dc839efe8be832495"
Expand Down Expand Up @@ -8178,6 +8233,11 @@ min-document@^2.19.0:
dependencies:
dom-walk "^0.1.0"

min-indent@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.0.tgz#cfc45c37e9ec0d8f0a0ec3dd4ef7f7c3abe39256"
integrity sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY=

mini-css-extract-plugin@^0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-0.7.0.tgz#5ba8290fbb4179a43dd27cca444ba150bee743a0"
Expand Down Expand Up @@ -9661,7 +9721,7 @@ pretty-error@^2.1.1:
renderkid "^2.0.1"
utila "~0.4"

pretty-format@^24.3.0, pretty-format@^24.9.0:
pretty-format@^24.0.0, pretty-format@^24.3.0, pretty-format@^24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-24.9.0.tgz#12fac31b37019a4eea3c11aa9a959eb7628aa7c9"
integrity sha512-00ZMZUiHaJrNfk33guavqgvfJS30sLYf0f8+Srklv0AMPodGGHcoHgksZ3OThYnIvOd+8yMCn0YiEOogjlgsnA==
Expand Down Expand Up @@ -10276,6 +10336,14 @@ redent@^2.0.0:
indent-string "^3.0.0"
strip-indent "^2.0.0"

redent@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
dependencies:
indent-string "^4.0.0"
strip-indent "^3.0.0"

refractor@^2.4.1:
version "2.10.0"
resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.10.0.tgz#4cc7efc0028a87924a9b31d82d129dec831a287b"
Expand Down Expand Up @@ -11510,6 +11578,13 @@ strip-indent@^2.0.0:
resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=

strip-indent@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
dependencies:
min-indent "^1.0.0"

strip-json-comments@~2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
Expand Down

0 comments on commit 9c529a4

Please sign in to comment.