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 + +