@times-components/ts-components 1.129.5 → 1.129.6

package/src/components/palin-polls/PalinPolls.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, FC } from 'react';
+
+type PalinPollsProps = {
+  source: string;
+};
+
+export const PalinPolls: FC<PalinPollsProps> = ({ source }) => {
+  if (!source) {
+    return null;
+  }
+
+  useEffect(() => {
+    const appendPalinPoll = () => {
+      const decodedSource = atob(source);
+
+      const src = new DOMParser()
+        .parseFromString(decodedSource, 'text/html')
+        .head.getElementsByTagName('script')[0]
+        .getAttribute('src');
+
+      const pollParent = document.getElementById('poll-parent');
+
+      if (pollParent && src) {
+        let poll = document.createElement('script');
+
+        poll.setAttribute('src', src);
+        pollParent.appendChild(poll);
+      }
+    };
+
+    setTimeout(appendPalinPoll, 0);
+  }, []);
+
+  return <div id="poll-parent" data-testid="poll-parent" />;
+};

package/src/components/palin-polls/__tests__/PalinPolls.test.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { PalinPolls } from '../PalinPolls';
+import '@testing-library/jest-dom';
+
+describe('PalinPolls component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    document.body.innerHTML = ''; // Clean up DOM
+  });
+
+  it('should return null if source is empty', () => {
+    const { container } = render(<PalinPolls source="" />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should render the poll-parent div when source is provided', () => {
+    const mockHtml = btoa(
+      `<script src="https://example.com/script.js"></script>`
+    );
+    render(<PalinPolls source={mockHtml} />);
+    expect(screen.getByTestId('poll-parent')).toBeInTheDocument();
+  });
+
+  it('should append a script tag with correct src to #poll-parent', async () => {
+    const scriptSrc = 'https://example.com/poll.js';
+    const encoded = btoa(`<script src="${scriptSrc}"></script>`);
+
+    render(<PalinPolls source={encoded} />);
+
+    await waitFor(() => {
+      const parent = document.getElementById('poll-parent');
+      expect(parent).not.toBeNull();
+
+      const scripts = parent
+        ? Array.from(parent.getElementsByTagName('script'))
+        : [];
+
+      // Look for a script with the correct src
+      const targetScript = scripts.find(
+        script => script.getAttribute('src') === scriptSrc
+      );
+      expect(targetScript).toBeDefined();
+    });
+  });
+
+  /* it('should not append a script if script tag is missing', async () => {
+    const badEncoded = btoa(`<div>No script tag</div>`);
+    render(<PalinPolls source={badEncoded} />);
+
+    await waitFor(() => {
+      const parent = document.getElementById('poll-parent');
+      expect(parent).not.toBeNull();
+
+      const scripts = parent ? parent.getElementsByTagName('script') : [];
+      expect(scripts.length).toBe(0);
+    });
+  }); */
+});

package/src/index.ts

@@ -128,6 +128,9 @@ export {
 export { CtaButton } from './components/cta-button/CtaButton';
 export { SocialMediaEmbed } from './components/social-embed/SocialMediaEmbed';
 
+// Palin Polls
+export { PalinPolls } from './components/palin-polls/PalinPolls';
+
 // Contexts
 export {
   useSocialEmbedsContext,