@capillarytech/creatives-library 8.0.242-alpha.0 → 8.0.242-alpha.10

package/v2Containers/WebPush/Create/preview/components/tests/AndroidMobileExpanded.test.js

@@ -1,512 +0,0 @@
-import React from 'react';
-import { shallowWithIntl, mountWithIntl } from '../../../../../../helpers/intl-enzym-test-helpers';
-import AndroidMobileExpanded from '../AndroidMobileExpanded';
-
-describe('AndroidMobileExpanded', () => {
-  const defaultProps = {
-    icon: 'https://example.com/chrome-icon.png',
-    selectedBrowser: 'Chrome',
-    notificationTitle: 'Test Notification Title',
-    notificationBody: 'Test notification body text that can be quite long and should be truncated after 4 lines',
-    displayUrl: 'example.com',
-    brandIcon: 'https://example.com/brand-icon.png',
-    shouldShowBrandIcon: false,
-    shouldShowBrandIconExpanded: false,
-    mediaImageUrl: '',
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('Basic Rendering', () => {
-    it('should render correctly with default props', () => {
-      const wrapper = shallowWithIntl(<AndroidMobileExpanded {...defaultProps} />);
-      expect(wrapper).toMatchSnapshot();
-    });
-
-    it('should render all required elements', () => {
-      const wrapper = mountWithIntl(<AndroidMobileExpanded {...defaultProps} />);
-      
-      // Browser icon container
-      expect(wrapper.find('.android-mobile-expanded-icon').exists()).toBe(true);
-      expect(wrapper.find('.notification-icon-container').exists()).toBe(true);
-      expect(wrapper.find('.notification-icon').exists()).toBe(true);
-      
-      // Wrapper container
-      expect(wrapper.find('.android-mobile-expanded-wrapper').exists()).toBe(true);
-      
-      // Top section
-      expect(wrapper.find('.android-mobile-expanded-top').exists()).toBe(true);
-      expect(wrapper.find('.android-mobile-expanded-top-content').exists()).toBe(true);
-      
-      // Header
-      expect(wrapper.find('.android-mobile-expanded-header').exists()).toBe(true);
-      expect(wrapper.find('.android-mobile-expanded-header-content').exists()).toBe(true);
-      expect(wrapper.find('.android-mobile-expanded-browser-name').exists()).toBe(true);
-      expect(wrapper.find('.android-mobile-expanded-domain-time').exists()).toBe(true);
-      expect(wrapper.find('.android-mobile-expanded-domain').exists()).toBe(true);
-      expect(wrapper.find('.android-mobile-expanded-time').exists()).toBe(true);
-      
-      // Title
-      expect(wrapper.find('.android-mobile-expanded-title').exists()).toBe(true);
-      
-      // Body
-      expect(wrapper.find('.android-mobile-expanded-body').exists()).toBe(true);
-      expect(wrapper.find('.android-mobile-expanded-body-text').exists()).toBe(true);
-      
-      // Arrow
-      expect(wrapper.find('.notification-action-arrow.android-mobile-expanded-arrow').exists()).toBe(true);
-    });
-
-    it('should render browser icon with correct src and alt', () => {
-      const wrapper = mountWithIntl(<AndroidMobileExpanded {...defaultProps} />);
-      const icon = wrapper.find('.notification-icon');
-      
-      expect(icon.exists()).toBe(true);
-      expect(icon.prop('src')).toBe(defaultProps.icon);
-      expect(icon.prop('alt')).toBe(defaultProps.selectedBrowser);
-    });
-
-    it('should render notification title', () => {
-      const wrapper = mountWithIntl(<AndroidMobileExpanded {...defaultProps} />);
-      const title = wrapper.find('.android-mobile-expanded-title');
-      
-      expect(title.exists()).toBe(true);
-      expect(title.text()).toBe(defaultProps.notificationTitle);
-    });
-
-    it('should render notification body', () => {
-      const wrapper = mountWithIntl(<AndroidMobileExpanded {...defaultProps} />);
-      const body = wrapper.find('.android-mobile-expanded-body-text');
-      
-      expect(body.exists()).toBe(true);
-      expect(body.text()).toBe(defaultProps.notificationBody);
-    });
-
-    it('should render display URL', () => {
-      const wrapper = mountWithIntl(<AndroidMobileExpanded {...defaultProps} />);
-      const domain = wrapper.find('.android-mobile-expanded-domain');
-      
-      expect(domain.exists()).toBe(true);
-      expect(domain.text()).toBe(defaultProps.displayUrl);
-    });
-
-    it('should render hardcoded time', () => {
-      const wrapper = mountWithIntl(<AndroidMobileExpanded {...defaultProps} />);
-      const time = wrapper.find('.android-mobile-expanded-time');
-      
-      expect(time.exists()).toBe(true);
-      expect(time.text()).toBe('2:29 PM');
-    });
-
-    it('should render arrow icon', () => {
-      const wrapper = mountWithIntl(<AndroidMobileExpanded {...defaultProps} />);
-      const arrow = wrapper.find('.notification-action-arrow.android-mobile-expanded-arrow');
-      
-      expect(arrow.exists()).toBe(true);
-      expect(arrow.text()).toBe('^');
-    });
-  });
-
-  describe('getBrowserDisplayName', () => {
-    it('should return "Chrome" for Chrome browser', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded {...defaultProps} selectedBrowser="Chrome" />
-      );
-      const browserName = wrapper.find('.android-mobile-expanded-browser-name');
-      
-      expect(browserName.text()).toBe('Chrome');
-    });
-
-    it('should return "Firefox" for Firefox browser', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded {...defaultProps} selectedBrowser="Firefox" />
-      );
-      const browserName = wrapper.find('.android-mobile-expanded-browser-name');
-      
-      expect(browserName.text()).toBe('Firefox');
-    });
-
-    it('should return "Edge" for Edge browser', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded {...defaultProps} selectedBrowser="Edge" />
-      );
-      const browserName = wrapper.find('.android-mobile-expanded-browser-name');
-      
-      expect(browserName.text()).toBe('Edge');
-    });
-
-    it('should return "Opera" for Opera browser', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded {...defaultProps} selectedBrowser="Opera" />
-      );
-      const browserName = wrapper.find('.android-mobile-expanded-browser-name');
-      
-      expect(browserName.text()).toBe('Opera');
-    });
-
-    it('should return the browser name as-is for unknown browsers', () => {
-      const unknownBrowser = 'Safari';
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded {...defaultProps} selectedBrowser={unknownBrowser} />
-      );
-      const browserName = wrapper.find('.android-mobile-expanded-browser-name');
-      
-      expect(browserName.text()).toBe(unknownBrowser);
-    });
-
-    it('should handle empty string browser name', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded {...defaultProps} selectedBrowser="" />
-      );
-      const browserName = wrapper.find('.android-mobile-expanded-browser-name');
-      
-      expect(browserName.text()).toBe('');
-    });
-
-    it('should handle case-sensitive browser names', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded {...defaultProps} selectedBrowser="chrome" />
-      );
-      const browserName = wrapper.find('.android-mobile-expanded-browser-name');
-      
-      // Should return as-is since "chrome" (lowercase) is not in the mapping
-      expect(browserName.text()).toBe('chrome');
-    });
-  });
-
-  describe('Brand Icon Display Logic', () => {
-    it('should show brand icon when shouldShowBrandIconExpanded is true and brandIcon exists', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded
-          {...defaultProps}
-          shouldShowBrandIconExpanded={true}
-          brandIcon="https://example.com/brand-icon.png"
-        />
-      );
-      
-      const brandIconContainer = wrapper.find('.notification-brand-icon-container.android-mobile-chrome-brand-icon');
-      expect(brandIconContainer.exists()).toBe(true);
-      
-      const brandIcon = wrapper.find('.notification-brand-icon');
-      expect(brandIcon.exists()).toBe(true);
-      expect(brandIcon.prop('src')).toBe('https://example.com/brand-icon.png');
-      expect(brandIcon.prop('alt')).toBe('Brand icon');
-    });
-
-    it('should show brand icon when shouldShowBrandIcon is true and brandIcon exists', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded
-          {...defaultProps}
-          shouldShowBrandIcon={true}
-          brandIcon="https://example.com/brand-icon.png"
-        />
-      );
-      
-      const brandIconContainer = wrapper.find('.notification-brand-icon-container.android-mobile-chrome-brand-icon');
-      expect(brandIconContainer.exists()).toBe(true);
-      
-      const brandIcon = wrapper.find('.notification-brand-icon');
-      expect(brandIcon.exists()).toBe(true);
-      expect(brandIcon.prop('src')).toBe('https://example.com/brand-icon.png');
-    });
-
-    it('should show brand icon when both shouldShowBrandIcon and shouldShowBrandIconExpanded are true', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded
-          {...defaultProps}
-          shouldShowBrandIcon={true}
-          shouldShowBrandIconExpanded={true}
-          brandIcon="https://example.com/brand-icon.png"
-        />
-      );
-      
-      const brandIconContainer = wrapper.find('.notification-brand-icon-container.android-mobile-chrome-brand-icon');
-      expect(brandIconContainer.exists()).toBe(true);
-    });
-
-    it('should not show brand icon when both shouldShowBrandIcon and shouldShowBrandIconExpanded are false', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded
-          {...defaultProps}
-          shouldShowBrandIcon={false}
-          shouldShowBrandIconExpanded={false}
-          brandIcon="https://example.com/brand-icon.png"
-        />
-      );
-      
-      const brandIconContainer = wrapper.find('.notification-brand-icon-container.android-mobile-chrome-brand-icon');
-      expect(brandIconContainer.exists()).toBe(false);
-    });
-
-    it('should not show brand icon when brandIcon is not provided, even if shouldShowBrandIconExpanded is true', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded
-          {...defaultProps}
-          shouldShowBrandIconExpanded={true}
-          brandIcon=""
-        />
-      );
-      
-      const brandIconContainer = wrapper.find('.notification-brand-icon-container.android-mobile-chrome-brand-icon');
-      expect(brandIconContainer.exists()).toBe(false);
-    });
-
-    it('should not show brand icon when brandIcon is not provided, even if shouldShowBrandIcon is true', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded
-          {...defaultProps}
-          shouldShowBrandIcon={true}
-          brandIcon={null}
-        />
-      );
-      
-      const brandIconContainer = wrapper.find('.notification-brand-icon-container.android-mobile-chrome-brand-icon');
-      expect(brandIconContainer.exists()).toBe(false);
-    });
-
-    it('should not show brand icon when brandIcon is undefined', () => {
-      const propsWithoutBrandIcon = { ...defaultProps };
-      delete propsWithoutBrandIcon.brandIcon;
-      
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded
-          {...propsWithoutBrandIcon}
-          shouldShowBrandIcon={true}
-          shouldShowBrandIconExpanded={true}
-        />
-      );
-      
-      const brandIconContainer = wrapper.find('.notification-brand-icon-container.android-mobile-chrome-brand-icon');
-      expect(brandIconContainer.exists()).toBe(false);
-    });
-
-    it('should handle shouldShowBrandIconExpanded taking precedence when both flags are set', () => {
-      // When shouldShowBrandIconExpanded is true, it should show (OR logic)
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded
-          {...defaultProps}
-          shouldShowBrandIcon={false}
-          shouldShowBrandIconExpanded={true}
-          brandIcon="https://example.com/brand-icon.png"
-        />
-      );
-      
-      const brandIconContainer = wrapper.find('.notification-brand-icon-container.android-mobile-chrome-brand-icon');
-      expect(brandIconContainer.exists()).toBe(true);
-    });
-  });
-
-  describe('Media Image Display', () => {
-    it('should render media image when mediaImageUrl is provided', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded
-          {...defaultProps}
-          mediaImageUrl="https://example.com/media-image.jpg"
-        />
-      );
-      
-      const mediaContainer = wrapper.find('.android-mobile-expanded-media');
-      expect(mediaContainer.exists()).toBe(true);
-      
-      const mediaImage = wrapper.find('.android-mobile-expanded-media-image');
-      expect(mediaImage.exists()).toBe(true);
-      expect(mediaImage.prop('src')).toBe('https://example.com/media-image.jpg');
-      expect(mediaImage.prop('alt')).toBe('Notification media');
-    });
-
-    it('should not render media image when mediaImageUrl is empty string', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded
-          {...defaultProps}
-          mediaImageUrl=""
-        />
-      );
-      
-      const mediaContainer = wrapper.find('.android-mobile-expanded-media');
-      expect(mediaContainer.exists()).toBe(false);
-    });
-
-    it('should not render media image when mediaImageUrl is not provided', () => {
-      const propsWithoutMedia = { ...defaultProps };
-      delete propsWithoutMedia.mediaImageUrl;
-      
-      const wrapper = mountWithIntl(<AndroidMobileExpanded {...propsWithoutMedia} />);
-      
-      const mediaContainer = wrapper.find('.android-mobile-expanded-media');
-      expect(mediaContainer.exists()).toBe(false);
-    });
-
-    it('should not render media image when mediaImageUrl is null', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded
-          {...defaultProps}
-          mediaImageUrl={null}
-        />
-      );
-      
-      const mediaContainer = wrapper.find('.android-mobile-expanded-media');
-      expect(mediaContainer.exists()).toBe(false);
-    });
-
-    it('should not render media image when mediaImageUrl is undefined', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded
-          {...defaultProps}
-          mediaImageUrl={undefined}
-        />
-      );
-      
-      const mediaContainer = wrapper.find('.android-mobile-expanded-media');
-      expect(mediaContainer.exists()).toBe(false);
-    });
-  });
-
-  describe('Edge Cases and Optional Props', () => {
-    it('should handle empty notification title', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded {...defaultProps} notificationTitle="" />
-      );
-      const title = wrapper.find('.android-mobile-expanded-title');
-      
-      expect(title.exists()).toBe(true);
-      expect(title.text()).toBe('');
-    });
-
-    it('should handle empty notification body', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded {...defaultProps} notificationBody="" />
-      );
-      const body = wrapper.find('.android-mobile-expanded-body-text');
-      
-      expect(body.exists()).toBe(true);
-      expect(body.text()).toBe('');
-    });
-
-    it('should handle empty display URL', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded {...defaultProps} displayUrl="" />
-      );
-      const domain = wrapper.find('.android-mobile-expanded-domain');
-      
-      expect(domain.exists()).toBe(true);
-      expect(domain.text()).toBe('');
-    });
-
-    it('should handle very long notification title', () => {
-      const longTitle = 'A'.repeat(200);
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded {...defaultProps} notificationTitle={longTitle} />
-      );
-      const title = wrapper.find('.android-mobile-expanded-title');
-      
-      expect(title.exists()).toBe(true);
-      expect(title.text()).toBe(longTitle);
-    });
-
-    it('should handle very long notification body', () => {
-      const longBody = 'B'.repeat(500);
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded {...defaultProps} notificationBody={longBody} />
-      );
-      const body = wrapper.find('.android-mobile-expanded-body-text');
-      
-      expect(body.exists()).toBe(true);
-      expect(body.text()).toBe(longBody);
-    });
-
-    it('should handle missing optional props gracefully', () => {
-      const minimalProps = {
-        icon: 'https://example.com/icon.png',
-        selectedBrowser: 'Chrome',
-      };
-      
-      const wrapper = mountWithIntl(<AndroidMobileExpanded {...minimalProps} />);
-      
-      // Should still render all structural elements
-      expect(wrapper.find('.android-mobile-expanded-wrapper').exists()).toBe(true);
-      expect(wrapper.find('.android-mobile-expanded-title').exists()).toBe(true);
-      expect(wrapper.find('.android-mobile-expanded-body-text').exists()).toBe(true);
-    });
-  });
-
-  describe('Component Structure', () => {
-    it('should have correct DOM hierarchy', () => {
-      const wrapper = mountWithIntl(<AndroidMobileExpanded {...defaultProps} />);
-      
-      // Icon should be sibling to wrapper
-      const icon = wrapper.find('.android-mobile-expanded-icon');
-      const wrapperDiv = wrapper.find('.android-mobile-expanded-wrapper');
-      const arrow = wrapper.find('.notification-action-arrow.android-mobile-expanded-arrow');
-      
-      expect(icon.exists()).toBe(true);
-      expect(wrapperDiv.exists()).toBe(true);
-      expect(arrow.exists()).toBe(true);
-      
-      // Top section should contain header and title
-      const topSection = wrapper.find('.android-mobile-expanded-top');
-      expect(topSection.find('.android-mobile-expanded-header').exists()).toBe(true);
-      expect(topSection.find('.android-mobile-expanded-title').exists()).toBe(true);
-      
-      // Body should contain body text
-      const bodySection = wrapper.find('.android-mobile-expanded-body');
-      expect(bodySection.find('.android-mobile-expanded-body-text').exists()).toBe(true);
-    });
-
-    it('should render brand icon in correct location when shown', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded
-          {...defaultProps}
-          shouldShowBrandIconExpanded={true}
-          brandIcon="https://example.com/brand-icon.png"
-        />
-      );
-      
-      // Brand icon should be in the top section
-      const topSection = wrapper.find('.android-mobile-expanded-top');
-      const brandIconContainer = topSection.find('.notification-brand-icon-container.android-mobile-chrome-brand-icon');
-      
-      expect(brandIconContainer.exists()).toBe(true);
-    });
-
-    it('should render media image in body section when provided', () => {
-      const wrapper = mountWithIntl(
-        <AndroidMobileExpanded
-          {...defaultProps}
-          mediaImageUrl="https://example.com/media.jpg"
-        />
-      );
-      
-      // Media should be in the body section
-      const bodySection = wrapper.find('.android-mobile-expanded-body');
-      const mediaContainer = bodySection.find('.android-mobile-expanded-media');
-      
-      expect(mediaContainer.exists()).toBe(true);
-    });
-  });
-
-  describe('PropTypes Validation', () => {
-    it('should require icon prop', () => {
-      const propsWithoutIcon = { ...defaultProps };
-      delete propsWithoutIcon.icon;
-      
-      // PropTypes validation happens at runtime, but we can verify the component handles missing props
-      // In a real scenario, this would be caught by PropTypes in development mode
-      expect(() => {
-        mountWithIntl(<AndroidMobileExpanded {...propsWithoutIcon} />);
-      }).not.toThrow();
-    });
-
-    it('should require selectedBrowser prop', () => {
-      const propsWithoutBrowser = { ...defaultProps };
-      delete propsWithoutBrowser.selectedBrowser;
-      
-      // Component should still render, but PropTypes would warn in development
-      expect(() => {
-        mountWithIntl(<AndroidMobileExpanded {...propsWithoutBrowser} />);
-      }).not.toThrow();
-    });
-  });
-});
-

package/v2Containers/WebPush/Create/preview/components/tests/__snapshots__/AndroidMobileExpanded.test.js.snap

@@ -1,77 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AndroidMobileExpanded Basic Rendering should render correctly with default props 1`] = `
-<Fragment>
-  <div
-    className="android-mobile-expanded-icon"
-  >
-    <div
-      className="notification-icon-container"
-    >
-      <img
-        alt="Chrome"
-        className="notification-icon"
-        src="https://example.com/chrome-icon.png"
-      />
-    </div>
-  </div>
-  <div
-    className="android-mobile-expanded-wrapper"
-  >
-    <div
-      className="android-mobile-expanded-top"
-    >
-      <div
-        className="android-mobile-expanded-top-content"
-      >
-        <div
-          className="android-mobile-expanded-header"
-        >
-          <div
-            className="android-mobile-expanded-header-content"
-          >
-            <span
-              className="android-mobile-expanded-browser-name"
-            >
-              Chrome
-            </span>
-            <span
-              className="android-mobile-expanded-domain-time"
-            >
-              <span
-                className="android-mobile-expanded-domain"
-              >
-                example.com
-              </span>
-              <span
-                className="android-mobile-expanded-time"
-              >
-                2:29 PM
-              </span>
-            </span>
-          </div>
-        </div>
-        <div
-          className="android-mobile-expanded-title"
-        >
-          Test Notification Title
-        </div>
-      </div>
-    </div>
-    <div
-      className="android-mobile-expanded-body"
-    >
-      <div
-        className="android-mobile-expanded-body-text"
-      >
-        Test notification body text that can be quite long and should be truncated after 4 lines
-      </div>
-    </div>
-  </div>
-  <div
-    className="notification-action-arrow android-mobile-expanded-arrow"
-  >
-    ^
-  </div>
-</Fragment>
-`;