@akinon/pz-theme 2.0.37-rc.0 → 2.0.38-beta.0

package/src/blocks/__tests__/share-block.test.tsx

@@ -0,0 +1,392 @@
+import React from 'react';
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
+import ShareBlock from '../share-block';
+import { ThemePageContextProvider } from '../../theme-page-context';
+
+const props = (
+  properties: Record<string, unknown> = {},
+  over: Record<string, unknown> = {}
+) =>
+  ({
+    block: {
+      id: 'b1',
+      type: 'share',
+      label: 'Share',
+      styles: {},
+      properties,
+      order: 0,
+      hidden: false
+    },
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    ...over
+  } as any);
+
+const PRODUCT = {
+  name: 'Striped Polo',
+  absolute_url: '/striped-polo',
+  image: '/media/polo.jpg'
+};
+
+const renderWithProduct = (
+  properties: Record<string, unknown> = {},
+  over: Record<string, unknown> = {}
+) =>
+  render(
+    <ThemePageContextProvider value={{ product: PRODUCT }}>
+      <ShareBlock {...props(properties, over)} />
+    </ThemePageContextProvider>
+  );
+
+const originalClipboard = Object.getOwnPropertyDescriptor(
+  window.navigator,
+  'clipboard'
+);
+
+const setClipboard = (value: unknown) => {
+  Object.defineProperty(window.navigator, 'clipboard', {
+    value,
+    configurable: true
+  });
+};
+
+afterEach(() => {
+  if (originalClipboard) {
+    Object.defineProperty(window.navigator, 'clipboard', originalClipboard);
+  } else {
+    delete (window.navigator as unknown as Record<string, unknown>).clipboard;
+  }
+  delete (window.navigator as unknown as Record<string, unknown>).share;
+});
+
+describe('ShareBlock', () => {
+  it('renders the inline icon row with the default networks', () => {
+    const { container } = renderWithProduct();
+
+    expect(container.querySelector('[data-share]')).not.toBeNull();
+    expect(container.querySelector('[data-share-trigger]')).toBeNull();
+    expect(
+      Array.from(container.querySelectorAll('[data-share-item]')).map((node) =>
+        node.getAttribute('data-share-item')
+      )
+    ).toEqual(['whatsapp', 'x', 'facebook', 'pinterest', 'email', 'copy']);
+  });
+
+  it('drops a network whose toggle is off', () => {
+    const { container } = renderWithProduct({ showFacebook: false });
+
+    expect(container.querySelector('[data-share-item="facebook"]')).toBeNull();
+  });
+
+  it('builds absolute, escaped share targets from the ambient product', async () => {
+    const { container } = renderWithProduct();
+
+    await waitFor(() => {
+      const facebook = container.querySelector(
+        '[data-share-item="facebook"]'
+      ) as HTMLAnchorElement;
+      expect(facebook.getAttribute('href')).toBe(
+        'https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Flocalhost%2Fstriped-polo'
+      );
+    });
+
+    const pinterest = container.querySelector(
+      '[data-share-item="pinterest"]'
+    ) as HTMLAnchorElement;
+    // Pinterest needs the product image, and every value is encoded.
+    expect(pinterest.getAttribute('href')).toContain(
+      'media=http%3A%2F%2Flocalhost%2Fmedia%2Fpolo.jpg'
+    );
+    expect(pinterest.getAttribute('href')).toContain(
+      'description=Striped%20Polo'
+    );
+
+    const email = container.querySelector(
+      '[data-share-item="email"]'
+    ) as HTMLAnchorElement;
+    expect(email.getAttribute('href')).toBe(
+      'mailto:?subject=Striped%20Polo&body=Striped%20Polo%20http%3A%2F%2Flocalhost%2Fstriped-polo'
+    );
+    // A mailto must not be torn out into a second tab.
+    expect(email.getAttribute('target')).toBeNull();
+  });
+
+  it('escapes a title that would otherwise break out of the query string', async () => {
+    const { container } = render(
+      <ThemePageContextProvider
+        value={{ product: { ...PRODUCT, name: 'Polo &top=1 #2' } }}
+      >
+        <ShareBlock {...props()} />
+      </ThemePageContextProvider>
+    );
+
+    await waitFor(() => {
+      const x = container.querySelector(
+        '[data-share-item="x"]'
+      ) as HTMLAnchorElement;
+      expect(x.getAttribute('href')).toContain('text=Polo%20%26top%3D1%20%232');
+    });
+  });
+
+  it('falls back to the current page URL when there is no product', async () => {
+    const { container } = render(<ShareBlock {...props()} />);
+
+    await waitFor(() => {
+      const facebook = container.querySelector(
+        '[data-share-item="facebook"]'
+      ) as HTMLAnchorElement;
+      expect(facebook.getAttribute('href')).toBe(
+        `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
+          window.location.href
+        )}`
+      );
+    });
+  });
+
+  it('hides the list behind a trigger in the trigger layout', () => {
+    const { container } = renderWithProduct({ layout: 'trigger' });
+
+    expect(container.querySelector('[data-share-list]')).toBeNull();
+
+    fireEvent.click(
+      container.querySelector('[data-share-trigger]') as HTMLElement
+    );
+
+    expect(container.querySelector('[data-share-list]')).not.toBeNull();
+    expect(
+      container
+        .querySelector('[data-share-trigger]')
+        ?.getAttribute('aria-expanded')
+    ).toBe('true');
+  });
+
+  describe('nativeShare gate', () => {
+    it('renders the plain inline row and never touches navigator by default', () => {
+      const share = jest.fn();
+      (window.navigator as unknown as Record<string, unknown>).share = share;
+
+      const { container } = renderWithProduct();
+
+      expect(container.querySelector('[data-share-trigger]')).toBeNull();
+      expect(container.querySelector('[data-share-list]')).not.toBeNull();
+      expect(share).not.toHaveBeenCalled();
+    });
+
+    it('calls navigator.share from the trigger once switched on', async () => {
+      const share = jest.fn().mockResolvedValue(undefined);
+      (window.navigator as unknown as Record<string, unknown>).share = share;
+
+      const { container } = renderWithProduct({ nativeShare: true });
+      const trigger = container.querySelector(
+        '[data-share-trigger]'
+      ) as HTMLElement;
+
+      await act(async () => {
+        fireEvent.click(trigger);
+      });
+
+      expect(share).toHaveBeenCalledWith(
+        expect.objectContaining({ title: 'Striped Polo' })
+      );
+      // The sheet handled it, so the icon row stays shut.
+      expect(container.querySelector('[data-share-list]')).toBeNull();
+    });
+
+    it('reveals the icon row when the browser has no native share', async () => {
+      const { container } = renderWithProduct({ nativeShare: true });
+
+      await act(async () => {
+        fireEvent.click(
+          container.querySelector('[data-share-trigger]') as HTMLElement
+        );
+      });
+
+      expect(container.querySelector('[data-share-list]')).not.toBeNull();
+    });
+
+    it('keeps the panel shut when the shopper dismisses the sheet', async () => {
+      const abort = Object.assign(new Error('cancelled'), {
+        name: 'AbortError'
+      });
+      (window.navigator as unknown as Record<string, unknown>).share = jest
+        .fn()
+        .mockRejectedValue(abort);
+
+      const { container } = renderWithProduct({ nativeShare: true });
+
+      await act(async () => {
+        fireEvent.click(
+          container.querySelector('[data-share-trigger]') as HTMLElement
+        );
+      });
+
+      expect(container.querySelector('[data-share-list]')).toBeNull();
+    });
+  });
+
+  describe('copy link', () => {
+    it('confirms with the authored text and clears it after the delay', async () => {
+      jest.useFakeTimers();
+      const writeText = jest.fn().mockResolvedValue(undefined);
+      setClipboard({ writeText });
+
+      const { container } = renderWithProduct({
+        copyConfirmLabel: 'Kopyalandı',
+        confirmDuration: 3
+      });
+
+      await act(async () => {
+        fireEvent.click(
+          container.querySelector('[data-share-item="copy"]') as HTMLElement
+        );
+      });
+
+      expect(writeText).toHaveBeenCalledWith('http://localhost/striped-polo');
+      expect(
+        container.querySelector('[data-share-feedback="copied"]')?.textContent
+      ).toBe('Kopyalandı');
+
+      await act(async () => {
+        jest.advanceTimersByTime(3000);
+      });
+
+      expect(container.querySelector('[data-share-feedback]')).toBeNull();
+      jest.useRealTimers();
+    });
+
+    it('offers a selectable input instead of pretending when there is no clipboard', async () => {
+      setClipboard(undefined);
+
+      const { container } = renderWithProduct({
+        copyFailLabel: 'Copy it yourself'
+      });
+
+      await act(async () => {
+        fireEvent.click(
+          container.querySelector('[data-share-item="copy"]') as HTMLElement
+        );
+      });
+
+      expect(
+        container.querySelector('[data-share-feedback="failed"]')?.textContent
+      ).toBe('Copy it yourself');
+      const input = container.querySelector(
+        '[data-share-fallback-input]'
+      ) as HTMLInputElement;
+      expect(input.value).toBe('http://localhost/striped-polo');
+    });
+
+    it('does the same when writeText rejects on a non-secure origin', async () => {
+      setClipboard({ writeText: jest.fn().mockRejectedValue(new Error('no')) });
+
+      const { container } = renderWithProduct();
+
+      await act(async () => {
+        fireEvent.click(
+          container.querySelector('[data-share-item="copy"]') as HTMLElement
+        );
+      });
+
+      expect(
+        container.querySelector('[data-share-fallback-input]')
+      ).not.toBeNull();
+    });
+
+    it('removes the option entirely when the author chose to hide it', async () => {
+      setClipboard(undefined);
+
+      const { container } = renderWithProduct({ copyFallback: 'hide' });
+
+      await waitFor(() => {
+        expect(container.querySelector('[data-share-item="copy"]')).toBeNull();
+      });
+    });
+  });
+
+  describe('designer', () => {
+    it('makes the links inert', () => {
+      const { container } = renderWithProduct({}, { isDesigner: true });
+      const facebook = container.querySelector(
+        '[data-share-item="facebook"]'
+      ) as HTMLAnchorElement;
+
+      expect(facebook.getAttribute('href')).toBe('#');
+      expect(facebook.getAttribute('target')).toBeNull();
+    });
+
+    it('writes nothing to the clipboard and starts no timer', async () => {
+      const writeText = jest.fn();
+      setClipboard({ writeText });
+
+      const { container } = renderWithProduct({}, { isDesigner: true });
+
+      await act(async () => {
+        fireEvent.click(
+          container.querySelector('[data-share-item="copy"]') as HTMLElement
+        );
+      });
+
+      expect(writeText).not.toHaveBeenCalled();
+      expect(container.querySelector('[data-share-feedback]')).toBeNull();
+    });
+
+    it('never opens the native sheet', async () => {
+      const share = jest.fn();
+      (window.navigator as unknown as Record<string, unknown>).share = share;
+
+      const { container } = renderWithProduct(
+        { nativeShare: true },
+        { isDesigner: true }
+      );
+
+      await act(async () => {
+        fireEvent.click(
+          container.querySelector('[data-share-trigger]') as HTMLElement
+        );
+      });
+
+      expect(share).not.toHaveBeenCalled();
+      expect(container.querySelector('[data-share-list]')).not.toBeNull();
+    });
+
+    it('shows a placeholder when every network is switched off', () => {
+      const { container } = renderWithProduct(
+        {
+          showWhatsapp: false,
+          showX: false,
+          showFacebook: false,
+          showPinterest: false,
+          showEmail: false,
+          showCopy: false,
+          emptyLabel: 'Nothing enabled'
+        },
+        { isDesigner: true }
+      );
+
+      expect(container.textContent).toContain('Nothing enabled');
+      expect(container.querySelector('[data-share]')).not.toBeNull();
+    });
+  });
+
+  it('names every visually distinct element as a part', () => {
+    const { container } = renderWithProduct({
+      layout: 'trigger',
+      showLabels: true
+    });
+
+    fireEvent.click(
+      container.querySelector('[data-share-trigger]') as HTMLElement
+    );
+
+    const parts = new Set(
+      Array.from(container.querySelectorAll('[data-part]')).map((node) =>
+        node.getAttribute('data-part')
+      )
+    );
+
+    ['root', 'trigger', 'list', 'item', 'icon', 'label'].forEach((part) =>
+      expect(parts.has(part)).toBe(true)
+    );
+  });
+});