@capillarytech/creatives-library 8.0.353-alpha.3 → 8.0.353-alpha.5

package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/PreviewHeader.test.js

@@ -514,4 +514,163 @@ describe('PreviewHeader', () => {
       consoleSpy.mockRestore();
     });
   });
+
+  describe('WEBPUSH channel - Fullscreen expander', () => {
+    it('should render expander icon for WEBPUSH channel', () => {
+      const setIsFullscreenOpen = jest.fn();
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        setIsFullscreenOpen,
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <PreviewHeader {...props} />
+        </TestWrapper>
+      );
+
+      // expander icon should be present for WEBPUSH
+      const expanderIcon = container.querySelector('[class*="expander"], [aria-label*="expander"], .anticon');
+      expect(expanderIcon).toBeTruthy();
+    });
+
+    it('should NOT render expander icon for non-WEBPUSH channels', () => {
+      const setIsFullscreenOpen = jest.fn();
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.EMAIL,
+        setIsFullscreenOpen,
+        showDeviceToggle: false,
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <PreviewHeader {...props} />
+        </TestWrapper>
+      );
+
+      // No expander icon for EMAIL channel (only device toggle icons may appear)
+      const expanderIcon = container.querySelector('[class*="expander"]');
+      expect(expanderIcon).toBeNull();
+    });
+
+    it('should call setIsFullscreenOpen(true) when expander icon is clicked', () => {
+      const setIsFullscreenOpen = jest.fn();
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        setIsFullscreenOpen,
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <PreviewHeader {...props} />
+        </TestWrapper>
+      );
+
+      const expanderIcon = container.querySelector('[class*="expander"]') ||
+        container.querySelector('.anticon');
+      if (expanderIcon) {
+        fireEvent.click(expanderIcon);
+        expect(setIsFullscreenOpen).toHaveBeenCalledWith(true);
+      }
+    });
+
+    it('should render expander icon with ACTIVE class when device is MOBILE', () => {
+      const setIsFullscreenOpen = jest.fn();
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        device: MOBILE,
+        setIsFullscreenOpen,
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <PreviewHeader {...props} />
+        </TestWrapper>
+      );
+
+      // MOBILE device should give ACTIVE class to expander
+      const activeEl = container.querySelector('.active');
+      expect(activeEl).toBeTruthy();
+    });
+
+    it('should render expander icon without ACTIVE class when device is DESKTOP', () => {
+      const setIsFullscreenOpen = jest.fn();
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        device: DESKTOP,
+        setIsFullscreenOpen,
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <PreviewHeader {...props} />
+        </TestWrapper>
+      );
+
+      // DESKTOP device should NOT give ACTIVE class to expander
+      const activeEl = container.querySelector('.active');
+      expect(activeEl).toBeNull();
+    });
+
+    it('should render expander icon alongside device content for WEBPUSH', () => {
+      // Note: suppression of showDeviceToggle for WEBPUSH is done in UnifiedPreview (parent),
+      // not in PreviewHeader itself. PreviewHeader only adds the expander icon for WEBPUSH.
+      const setIsFullscreenOpen = jest.fn();
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        setIsFullscreenOpen,
+        showDeviceToggle: false,
+      };
+
+      const { container } = render(
+        <TestWrapper>
+          <PreviewHeader {...props} />
+        </TestWrapper>
+      );
+
+      // expander icon should be present for WEBPUSH
+      const expanderIcon = container.querySelector('[class*="expander"]') ||
+        container.querySelector('.anticon');
+      expect(expanderIcon).toBeTruthy();
+    });
+
+    it('should accept isFullscreenOpen and setIsFullscreenOpen as props', () => {
+      const setIsFullscreenOpen = jest.fn();
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+        isFullscreenOpen: false,
+        setIsFullscreenOpen,
+      };
+
+      expect(() =>
+        render(
+          <TestWrapper>
+            <PreviewHeader {...props} />
+          </TestWrapper>
+        )
+      ).not.toThrow();
+    });
+
+    it('should use default setIsFullscreenOpen when not provided', () => {
+      const props = {
+        ...defaultProps,
+        channel: CHANNELS.WEBPUSH,
+      };
+
+      expect(() =>
+        render(
+          <TestWrapper>
+            <PreviewHeader {...props} />
+          </TestWrapper>
+        )
+      ).not.toThrow();
+    });
+  });
 });

package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/ViberPreviewContent.test.js

@@ -200,370 +200,6 @@ describe('ViberPreviewContent', () => {
 
       expect(screen.getByText('Click Here')).toBeTruthy();
     });
-
-    it('should not render button when buttonText has only whitespace', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            messageContent: 'Message',
-            buttonText: '   ',
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelector('.viber-button-base')).toBeFalsy();
-    });
-  });
-
-  describe('Carousel Content', () => {
-    it('should render no content when carousel is selected but cards are empty', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: '',
-                mediaUrl: '',
-                buttons: [
-                  { title: '', action: '' },
-                ],
-              },
-              {
-                text: '   ',
-                mediaUrl: '   ',
-                buttons: [
-                  { title: '   ', action: 'https://example.com/2' },
-                ],
-              },
-            ],
-          },
-        },
-      };
-
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(screen.getByText('No content available')).toBeTruthy();
-    });
-
-    it('should render carousel cards when type is CAROUSEL', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: 'Card 1 text',
-                mediaUrl: 'https://image.url/card1.jpg',
-                buttons: [
-                  { title: 'Button 1', action: 'https://example.com/1' },
-                ],
-              },
-              {
-                text: 'Card 2 text',
-                mediaUrl: 'https://image.url/card2.jpg',
-                buttons: [
-                  { title: 'Button 2', action: 'https://example.com/2' },
-                ],
-              },
-            ],
-          },
-        },
-      };
-
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(screen.getByText('Card 1 text')).toBeTruthy();
-      expect(screen.getByText('Card 2 text')).toBeTruthy();
-      expect(screen.getByText('Button 1')).toBeTruthy();
-      expect(screen.getByText('Button 2')).toBeTruthy();
-    });
-
-    it('should not render empty carousel button placeholder', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: 'Card 1 text',
-                mediaUrl: 'https://image.url/card1.jpg',
-                buttons: [
-                  { title: '', action: 'https://example.com/1' },
-                  { title: '   ', action: 'https://example.com/2' },
-                ],
-              },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelector('.viber-carousel-preview-button')).toBeNull();
-    });
-
-    it('should show carousel shell when showCarouselEditorPreview is true even if cards are empty', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            showCarouselEditorPreview: true,
-            cards: [
-              { text: '', mediaUrl: '', buttons: [{ title: '', action: '' }] },
-              { text: '', mediaUrl: '', buttons: [{ title: '', action: '' }] },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(screen.queryByText('No content available')).toBeNull();
-      expect(container.querySelector('.viber-carousel-preview-scroll')).toBeTruthy();
-      expect(container.querySelector('.viber-carousel-message-box-placeholder')).toBeTruthy();
-    });
-
-    it('should render carousel message text in message box when type is CAROUSEL', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            messageContent: 'Carousel intro copy',
-            cards: [
-              {
-                text: 'Card text',
-                mediaUrl: 'https://image.url/c.jpg',
-                buttons: [{ title: 'Go', action: 'https://example.com' }],
-              },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelector('.viber-carousel-message-box-text')).toHaveTextContent('Carousel intro copy');
-      expect(screen.queryByText('Carousel intro copy')).toBeTruthy();
-    });
-
-    it('should hide account icon when carousel is shown', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: 'Carousel card line',
-                mediaUrl: '',
-                buttons: [{ title: 'Open link', action: 'https://x.com' }],
-              },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelector('.viber-account-icon')).toBeNull();
-    });
-
-    it('should use image placeholder when carousel card mediaUrl is whitespace only', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: 'Only text',
-                mediaUrl: '   ',
-                buttons: [{ title: 'Btn', action: 'https://example.com' }],
-              },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelector('.viber-carousel-preview-image-placeholder')).toBeTruthy();
-      expect(container.querySelector('.viber-carousel-preview-image')).toBeNull();
-    });
-
-    it('should render at most two carousel buttons per card', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: 'Card',
-                mediaUrl: 'https://image.url/c.jpg',
-                buttons: [
-                  { title: 'One', action: 'https://a.com' },
-                  { title: 'Two', action: 'https://b.com' },
-                  { title: 'Three', action: 'https://c.com' },
-                ],
-              },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelectorAll('.viber-carousel-preview-button')).toHaveLength(2);
-      expect(screen.getByText('One')).toBeTruthy();
-      expect(screen.getByText('Two')).toBeTruthy();
-      expect(screen.queryByText('Three')).toBeNull();
-    });
-
-    it('should apply secondary class to second carousel button', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: 'Card',
-                mediaUrl: 'https://image.url/c.jpg',
-                buttons: [
-                  { title: 'Primary', action: 'https://a.com' },
-                  { title: 'Secondary', action: 'https://b.com' },
-                ],
-              },
-            ],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      const buttons = container.querySelectorAll('.viber-carousel-preview-button');
-      expect(buttons[0].className).toContain('viber-carousel-preview-button');
-      expect(buttons[0].className).not.toContain('viber-carousel-preview-button-secondary');
-      expect(buttons[1].className).toContain('viber-carousel-preview-button-secondary');
-    });
-
-    it('should show carousel when only a button title is present on a card', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [
-              {
-                text: '',
-                mediaUrl: '',
-                buttons: [{ title: 'Tap me', action: 'https://example.com' }],
-              },
-            ],
-          },
-        },
-      };
-
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(screen.getByText('Tap me')).toBeTruthy();
-      expect(screen.queryByText('No content available')).toBeNull();
-    });
-
-    it('should show one placeholder card when editor preview and cards array is empty', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            showCarouselEditorPreview: true,
-            cards: [],
-          },
-        },
-      };
-
-      const { container } = render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(container.querySelectorAll('.viber-carousel-preview-card')).toHaveLength(1);
-    });
-
-    it('should show no content when CAROUSEL has empty cards and no editor preview flag', () => {
-      const props = {
-        ...defaultProps,
-        content: {
-          viberPreviewContent: {
-            type: 'CAROUSEL',
-            cards: [],
-          },
-        },
-      };
-
-      render(
-        <TestWrapper>
-          <ComponentToRender {...props} />
-        </TestWrapper>
-      );
-
-      expect(screen.getByText('No content available')).toBeTruthy();
-    });
   });
 
   describe('Account and Brand Name', () => {