mirror of
https://github.com/zhigang1992/react.git
synced 2026-02-10 09:03:57 +08:00
test(snippet): add testcase
This commit is contained in:
unix
337
components/snippet/__tests__/__snapshots__/index.test.tsx.snap
Normal file
337
components/snippet/__tests__/__snapshots__/index.test.tsx.snap
Normal file
@@ -0,0 +1,337 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Snippet should render correctly 1`] = `
|
||||
"<div class=\\"snippet \\"><pre>yarn add @zeit-ui/react</pre><div class=\\"copy\\"><svg viewBox=\\"0 0 24 24\\" width=\\"22\\" height=\\"22\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentcolor;\\"><path d=\\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\\"></path></svg></div><style>
|
||||
.snippet {
|
||||
position: relative;
|
||||
width: initial;
|
||||
max-width: 100%;
|
||||
padding: 8pt;
|
||||
padding-right: calc(2 * 16pt);
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: #000;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
|
||||
pre::before {
|
||||
content: \\"$ \\";
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
pre :global(*) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.copy {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -2px;
|
||||
transform: translateY(50%);
|
||||
background-color: #fff;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: calc(2 * 16pt);
|
||||
color: inherit;
|
||||
transition: opacity 0.2s ease 0s;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.copy:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
</style></div>"
|
||||
`;
|
||||
|
||||
exports[`Snippet should work with different styles 1`] = `
|
||||
"<div><div class=\\"snippet \\"><pre>yarn add @zeit-ui/react</pre><div class=\\"copy\\"><svg viewBox=\\"0 0 24 24\\" width=\\"22\\" height=\\"22\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentcolor;\\"><path d=\\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\\"></path></svg></div><style>
|
||||
.snippet {
|
||||
position: relative;
|
||||
width: initial;
|
||||
max-width: 100%;
|
||||
padding: 8pt;
|
||||
padding-right: calc(2 * 16pt);
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: #000;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
|
||||
pre::before {
|
||||
content: \\"$ \\";
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
pre :global(*) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.copy {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -2px;
|
||||
transform: translateY(50%);
|
||||
background-color: #fff;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: calc(2 * 16pt);
|
||||
color: inherit;
|
||||
transition: opacity 0.2s ease 0s;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.copy:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
</style></div><div class=\\"snippet \\"><pre>yarn add @zeit-ui/react</pre><div class=\\"copy\\"><svg viewBox=\\"0 0 24 24\\" width=\\"22\\" height=\\"22\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentcolor;\\"><path d=\\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\\"></path></svg></div><style>
|
||||
.snippet {
|
||||
position: relative;
|
||||
width: 20%;
|
||||
max-width: 100%;
|
||||
padding: 8pt;
|
||||
padding-right: calc(2 * 16pt);
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: #000;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
|
||||
pre::before {
|
||||
content: \\"$ \\";
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
pre :global(*) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.copy {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -2px;
|
||||
transform: translateY(50%);
|
||||
background-color: #fff;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: calc(2 * 16pt);
|
||||
color: inherit;
|
||||
transition: opacity 0.2s ease 0s;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.copy:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
</style></div><div class=\\"snippet \\"><pre>yarn add @zeit-ui/react</pre><div class=\\"copy\\"><svg viewBox=\\"0 0 24 24\\" width=\\"22\\" height=\\"22\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentcolor;\\"><path d=\\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\\"></path></svg></div><style>
|
||||
.snippet {
|
||||
position: relative;
|
||||
width: initial;
|
||||
max-width: 100%;
|
||||
padding: 8pt;
|
||||
padding-right: calc(2 * 16pt);
|
||||
color: #666;
|
||||
background-color: #fff;
|
||||
border: 1px solid #666;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: #666;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
|
||||
pre::before {
|
||||
content: \\"$ \\";
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
pre :global(*) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.copy {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -2px;
|
||||
transform: translateY(50%);
|
||||
background-color: #fff;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: calc(2 * 16pt);
|
||||
color: inherit;
|
||||
transition: opacity 0.2s ease 0s;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.copy:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
</style></div><div class=\\"snippet \\"><pre>yarn add @zeit-ui/react</pre><div class=\\"copy\\"><svg viewBox=\\"0 0 24 24\\" width=\\"22\\" height=\\"22\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentcolor;\\"><path d=\\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\\"></path></svg></div><style>
|
||||
.snippet {
|
||||
position: relative;
|
||||
width: initial;
|
||||
max-width: 100%;
|
||||
padding: 8pt;
|
||||
padding-right: calc(2 * 16pt);
|
||||
color: #fff;
|
||||
background-color: #0070f3;
|
||||
border: 1px solid #0070f3;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
|
||||
pre::before {
|
||||
content: \\"$ \\";
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
pre :global(*) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.copy {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -2px;
|
||||
transform: translateY(50%);
|
||||
background-color: #0070f3;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: calc(2 * 16pt);
|
||||
color: inherit;
|
||||
transition: opacity 0.2s ease 0s;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.copy:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
</style></div></div>"
|
||||
`;
|
||||
|
||||
exports[`Snippet should work with multi-line 1`] = `
|
||||
"<div class=\\"snippet \\"><pre>cd project</pre><pre>now</pre><div class=\\"copy\\"><svg viewBox=\\"0 0 24 24\\" width=\\"22\\" height=\\"22\\" stroke=\\"currentColor\\" stroke-width=\\"1.5\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" fill=\\"none\\" shape-rendering=\\"geometricPrecision\\" style=\\"color: currentcolor;\\"><path d=\\"M8 17.929H6c-1.105 0-2-.912-2-2.036V5.036C4 3.91 4.895 3 6 3h8c1.105 0 2 .911 2 2.036v1.866m-6 .17h8c1.105 0 2 .91 2 2.035v10.857C20 21.09 19.105 22 18 22h-8c-1.105 0-2-.911-2-2.036V9.107c0-1.124.895-2.036 2-2.036z\\"></path></svg></div><style>
|
||||
.snippet {
|
||||
position: relative;
|
||||
width: initial;
|
||||
max-width: 100%;
|
||||
padding: 8pt;
|
||||
padding-right: calc(2 * 16pt);
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
border: 1px solid #eaeaea;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
color: #000;
|
||||
font-size: .8125rem;
|
||||
}
|
||||
|
||||
pre::before {
|
||||
content: \\"$ \\";
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
pre :global(*) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.copy {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: -2px;
|
||||
transform: translateY(50%);
|
||||
background-color: #fff;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: calc(2 * 16pt);
|
||||
color: inherit;
|
||||
transition: opacity 0.2s ease 0s;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.copy:hover {
|
||||
opacity: .7;
|
||||
}
|
||||
</style></div>"
|
||||
`;
|
||||
79
components/snippet/__tests__/index.test.tsx
Normal file
79
components/snippet/__tests__/index.test.tsx
Normal file
@@ -0,0 +1,79 @@
|
||||
import React from 'react'
|
||||
import { mount } from 'enzyme'
|
||||
import { Snippet } from 'components'
|
||||
|
||||
const command = 'yarn add @zeit-ui/react'
|
||||
const multiLine = ['cd project', 'now']
|
||||
|
||||
describe('Snippet', () => {
|
||||
beforeAll(() => {
|
||||
window.getSelection = jest.fn()
|
||||
.mockImplementation(() => ({
|
||||
removeAllRanges: jest.fn(),
|
||||
addRange: jest.fn(),
|
||||
}))
|
||||
document.createRange = jest.fn()
|
||||
.mockImplementation(() => ({
|
||||
selectNode: jest.fn(),
|
||||
}))
|
||||
})
|
||||
|
||||
it('should render correctly', () => {
|
||||
const wrapper = mount(<Snippet text={command} />)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('should work with multi-line', () => {
|
||||
const wrapper = mount(<Snippet text={multiLine} />)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('should work with different styles', () => {
|
||||
const wrapper = mount(
|
||||
<div>
|
||||
<Snippet text={command} filled />
|
||||
<Snippet text={command} width="20%" />
|
||||
<Snippet text={command} type="secondary" />
|
||||
<Snippet text={command} type="success" filled />
|
||||
</div>
|
||||
)
|
||||
expect(wrapper.html()).toMatchSnapshot()
|
||||
expect(() => wrapper.unmount()).not.toThrow()
|
||||
})
|
||||
|
||||
it('text should be copied', () => {
|
||||
document.execCommand = jest.fn()
|
||||
const wrapper = mount(<Snippet text={command} />)
|
||||
wrapper.find('.copy').simulate('click')
|
||||
expect(document.execCommand).toHaveBeenCalled()
|
||||
;(document.execCommand as jest.Mock).mockRestore()
|
||||
})
|
||||
|
||||
it('multi-line commands should be copied', () => {
|
||||
document.execCommand = jest.fn()
|
||||
const wrapper = mount(<Snippet text={multiLine} />)
|
||||
wrapper.find('.copy').simulate('click')
|
||||
expect(document.execCommand).toHaveBeenCalled()
|
||||
;(document.execCommand as jest.Mock).mockRestore()
|
||||
})
|
||||
|
||||
it('child commands should be copied', () => {
|
||||
document.execCommand = jest.fn()
|
||||
const wrapper = mount(<Snippet>{command}</Snippet>)
|
||||
wrapper.find('.copy').simulate('click')
|
||||
expect(document.execCommand).toHaveBeenCalled()
|
||||
;(document.execCommand as jest.Mock).mockRestore()
|
||||
})
|
||||
|
||||
it('should disable copy function', () => {
|
||||
const wrapper = mount(<Snippet text={command} copy="prevent" />)
|
||||
expect(wrapper.find('.copy').length).toBe(0)
|
||||
})
|
||||
|
||||
afterAll(() => {
|
||||
(window.getSelection as jest.Mock).mockRestore()
|
||||
;(document.createRange as jest.Mock).mockRestore()
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user