diff --git a/packages/embed-components/src/QuickEmbed/QuickEmbed.spec.tsx b/packages/embed-components/src/QuickEmbed/QuickEmbed.spec.tsx
index 6ed6e0cc0..21ccc84a7 100644
--- a/packages/embed-components/src/QuickEmbed/QuickEmbed.spec.tsx
+++ b/packages/embed-components/src/QuickEmbed/QuickEmbed.spec.tsx
@@ -50,6 +50,8 @@ describe('QuickEmbed', () => {
...overrides,
})
const onClose = jest.fn()
+ const onCopy = jest.fn()
+ document.execCommand = jest.fn()
beforeEach(() => {
jest.spyOn(window, 'location', 'get').mockReturnValue({
@@ -69,7 +71,7 @@ describe('QuickEmbed', () => {
})
it('renders', () => {
- renderWithTheme()
+ renderWithTheme()
expect(
screen.getByRole('heading', { name: 'Get embed URL' })
@@ -103,7 +105,7 @@ describe('QuickEmbed', () => {
href: 'https://example.com/looks/42',
pathname: '/looks/42',
} as Location)
- renderWithTheme()
+ renderWithTheme()
expect(
screen.getByRole('heading', { name: 'Get embed URL' })
@@ -124,7 +126,7 @@ describe('QuickEmbed', () => {
;(useThemesStoreState as jest.Mock).mockReturnValue(
getMockStoreState({ selectedTheme: customTheme1 })
)
- renderWithTheme()
+ renderWithTheme()
expect(
screen.getByRole('heading', { name: 'Get embed URL' })
@@ -153,4 +155,34 @@ describe('QuickEmbed', () => {
)
})
})
+
+ it('close button function triggers on click', async () => {
+ renderWithTheme()
+ const closeBtn = screen.getByRole('button', { name: 'Close' })
+
+ expect(closeBtn).toBeInTheDocument()
+ await userEvent.click(closeBtn)
+
+ expect(onClose).toHaveBeenCalled()
+ })
+
+ it('onCopy not called when not passed in', async () => {
+ renderWithTheme()
+ const copyBtn = screen.getByRole('button', { name: 'Copy Link' })
+
+ expect(copyBtn).toBeInTheDocument()
+ await userEvent.click(copyBtn)
+
+ expect(onCopy).not.toHaveBeenCalled()
+ })
+
+ it('copy button function triggers on click', async () => {
+ renderWithTheme()
+ const copyBtn = screen.getByRole('button', { name: 'Copy Link' })
+
+ expect(copyBtn).toBeInTheDocument()
+ await userEvent.click(copyBtn)
+
+ expect(onCopy).toHaveBeenCalled()
+ })
})
diff --git a/packages/embed-components/src/QuickEmbed/QuickEmbed.tsx b/packages/embed-components/src/QuickEmbed/QuickEmbed.tsx
index aba4704e4..6c44a880a 100644
--- a/packages/embed-components/src/QuickEmbed/QuickEmbed.tsx
+++ b/packages/embed-components/src/QuickEmbed/QuickEmbed.tsx
@@ -43,16 +43,28 @@ import { EmbedUrl } from '@looker/embed-services'
import { useThemesStoreState, SelectTheme, useThemeActions } from '../Theme'
interface QuickEmbedProps {
+ /** A function triggered when close button is clicked. */
onClose: () => void
+ /**
+ * An optional callback triggered when the copy button is clicked.
+ * The copy to clipboard action is already handled
+ */
+ onCopy?: () => void
}
-export const QuickEmbed = ({ onClose }: QuickEmbedProps) => {
+export const QuickEmbed = ({ onClose, onCopy }: QuickEmbedProps) => {
const service = new EmbedUrl()
const [toggleValue, setToggle] = useState(false)
const [embedUrl, setEmbedUrl] = useState(service.embedUrl(false))
const { selectedTheme } = useThemesStoreState()
const { selectThemeAction } = useThemeActions()
+ const handleCopy = () => {
+ if (onCopy) {
+ onCopy()
+ }
+ }
+
const handleToggle = () => {
const newToggleValue = !toggleValue
if (newToggleValue) {
@@ -108,9 +120,11 @@ export const QuickEmbed = ({ onClose }: QuickEmbedProps) => {
-
- }>Copy Link
-
+
+
+ }>Copy Link
+
+