kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-04-29 04:35:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(link): add testcase

Browse Source
This commit is contained in:
unix
2020-04-21 12:38:08 +08:00
parent 9979894b64
commit 1e24f03c6c
2 changed files with 161 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
components/link/__tests__/__snapshots__/index.test.tsx.snap Normal file
View File

@@ -0,0 +1,124 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Link should render correctly 1`] = `
"<div><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">link<svg viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" class=\\"icon\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path><style>
.icon {
margin: 0 5px;
display: inline-flex;
align-self: center;
}
</style></svg><style>
.link {
display: inline-flex;
align-items: baseline;
line-height: inherit;
color: inherit;
text-decoration: none;
padding: calc(0 * .8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
}
.link:hover, .link:active, .link:focus {
text-decoration: none;
}
.link:hover {
background-color: unset;
}
</style></a><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">link<svg viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: rgb(0, 112, 243);\\" class=\\"icon\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path><style>
.icon {
margin: 0 5px;
display: inline-flex;
align-self: center;
}
</style></svg><style>
.link {
display: inline-flex;
align-items: baseline;
line-height: inherit;
color: #0070f3;
text-decoration: none;
padding: calc(0 * .8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
}
.link:hover, .link:active, .link:focus {
text-decoration: none;
}
.link:hover {
background-color: unset;
}
</style></a><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">link<style>
.link {
display: inline-flex;
align-items: baseline;
line-height: inherit;
color: inherit;
text-decoration: none;
padding: calc(0 * .8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
}
.link:hover, .link:active, .link:focus {
text-decoration: none;
}
.link:hover {
background-color: unset;
}
</style></a><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">link<svg viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" class=\\"icon\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path><style>
.icon {
margin: 0 5px;
display: inline-flex;
align-self: center;
}
</style></svg><style>
.link {
display: inline-flex;
align-items: baseline;
line-height: inherit;
color: inherit;
text-decoration: none;
padding: calc(0 * .8) calc(0 * 1.7);
border-radius: 0;
width: fit-content;
}
.link:hover, .link:active, .link:focus {
text-decoration: underline;
}
.link:hover {
background-color: unset;
}
</style></a><a class=\\"link \\" href=\\"https://react.zeit-ui.co\\">link<svg viewBox=\\"0 0 24 24\\" width=\\"1em\\" height=\\"1em\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: rgb(0, 112, 243);\\" class=\\"icon\\"><path d=\\"M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6\\"></path><path d=\\"M15 3h6v6\\"></path><path d=\\"M10 14L21 3\\"></path><style>
.icon {
margin: 0 5px;
display: inline-flex;
align-self: center;
}
</style></svg><style>
.link {
display: inline-flex;
align-items: baseline;
line-height: inherit;
color: #0070f3;
text-decoration: none;
padding: calc(4pt * .8) calc(4pt * 1.7);
border-radius: 5px;
width: fit-content;
}
.link:hover, .link:active, .link:focus {
text-decoration: none;
}
.link:hover {
background-color: #0076ff1a;
}
</style></a></div>"
`;

37
components/link/__tests__/index.test.tsx Normal file
View File

@@ -0,0 +1,37 @@
import React from 'react'
import { mount } from 'enzyme'
import { Link } from 'components'
describe('Link', () => {
it('should render correctly', () => {
const wrapper = mount(
<div>
<Link href="https://react.zeit-ui.co">link</Link>
<Link href="https://react.zeit-ui.co" color>link</Link>
<Link href="https://react.zeit-ui.co" pure>link</Link>
<Link href="https://react.zeit-ui.co" underline>link</Link>
<Link href="https://react.zeit-ui.co" block>link</Link>
</div>
)
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
it('should be no errors when href missing', () => {
const errorSpy = jest.spyOn(console, 'error')
const wrapper = mount(<Link />)
expect(errorSpy).not.toHaveBeenCalled()
expect(() => wrapper.unmount()).not.toThrow()
errorSpy.mockRestore()
})
it('should forward ref', () => {
let ref = React.createRef<HTMLAnchorElement>()
const errorSpy = jest.spyOn(console, 'error')
const wrapper = mount(<Link ref={ref} />)
expect(errorSpy).not.toHaveBeenCalled()
expect(ref.current).not.toBeNull()
expect(() => wrapper.unmount()).not.toThrow()
})
})