From eb7ca4fa7fa29a2d20229fd6e27f3cc1811efde2 Mon Sep 17 00:00:00 2001
From: Augusto <augustoconti10@gmail.com>
Date: Wed, 24 Jun 2020 09:26:43 -0300
Subject: [PATCH] test(snippet): add custom symbol and toast

---
 .../__snapshots__/index.test.tsx.snap         | 58 +++++++++++++++++++
 components/snippet/__tests__/index.test.tsx   | 14 +++++
 2 files changed, 72 insertions(+)

diff --git a/components/snippet/__tests__/__snapshots__/index.test.tsx.snap b/components/snippet/__tests__/__snapshots__/index.test.tsx.snap
index 5a7ff70..fdd674a 100644
--- a/components/snippet/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/snippet/__tests__/__snapshots__/index.test.tsx.snap
@@ -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 {
diff --git a/components/snippet/__tests__/index.test.tsx b/components/snippet/__tests__/index.test.tsx
index 7751caa..d3e3066 100644
--- a/components/snippet/__tests__/index.test.tsx
+++ b/components/snippet/__tests__/index.test.tsx
@@ -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()