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

test(snippet): add custom symbol and toast

Browse Source
This commit is contained in:
Augusto
2020-06-24 09:26:43 -03:00
committed by unix
parent bf8d6c04ab
commit eb7ca4fa7f
2 changed files with 72 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
components/snippet/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -58,6 +58,64 @@ exports[`Snippet should render correctly 1`] = `
</style></div>"
`;
exports[`Snippet should work with custom symbol 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: 0.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: 0.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 {

14
components/snippet/__tests__/index.test.tsx
View File

@@ -70,6 +70,20 @@ describe('Snippet', () => {
expect(wrapper.find('.copy').length).toBe(0)
})
it('should work with custom symbol', () => {
const wrapper = mount(<Snippet text={command} symbol={'>'} />)
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
it('should work with custom toast', () => {
document.execCommand = jest.fn()
const wrapper = mount(<Snippet text={command} toastText="Code copied!" toastType="secondary" />)
wrapper.find('.copy').simulate('click')
expect(document.execCommand).toHaveBeenCalled()
;(document.execCommand as jest.Mock).mockRestore()
})
afterAll(() => {
;(window.getSelection as jest.Mock).mockRestore()
;(document.createRange as jest.Mock).mockRestore()