WellNuo/__tests__/web-pages/unsupported-browser.test.ts

/**
 * Tests for unsupported-browser.html page
 * This tests the browser detection logic that runs in the page
 */

import { describe, it, expect } from '@jest/globals';

// Mock browser detection functions (these are in the HTML inline script)
function detectBrowser(userAgent: string, platform: string): { name: string; version: string } {
  let name = 'Unknown';
  let version = '0';

  // Chrome
  if (/Chrome\/(\d+)/.test(userAgent) && !/Edg/.test(userAgent) && !/OPR/.test(userAgent)) {
    name = 'Chrome';
    const match = userAgent.match(/Chrome\/(\d+)/);
    version = match ? match[1] : '0';
  }
  // Edge
  else if (/Edg\/(\d+)/.test(userAgent)) {
    name = 'Edge';
    const match = userAgent.match(/Edg\/(\d+)/);
    version = match ? match[1] : '0';
  }
  // Opera
  else if (/OPR\/(\d+)/.test(userAgent)) {
    name = 'Opera';
    const match = userAgent.match(/OPR\/(\d+)/);
    version = match ? match[1] : '0';
  }
  // Safari
  else if (/Safari\/(\d+)/.test(userAgent) && !/Chrome/.test(userAgent)) {
    name = 'Safari';
    const match = userAgent.match(/Version\/(\d+)/);
    version = match ? match[1] : '0';
  }
  // Firefox
  else if (/Firefox\/(\d+)/.test(userAgent)) {
    name = 'Firefox';
    const match = userAgent.match(/Firefox\/(\d+)/);
    version = match ? match[1] : '0';
  }

  return { name, version };
}

function detectPlatformFromUA(userAgent: string, platform: string): string {
  if (/Win/.test(platform)) return 'Windows';
  if (/Mac/.test(platform)) return 'macOS';
  if (/iPhone|iPad|iPod/.test(userAgent)) return 'iOS';
  if (/Android/.test(userAgent)) return 'Android';
  if (/Linux/.test(platform)) return 'Linux';
  return 'Unknown';
}

function getUnsupportedMessage(browserInfo: {
  name: string;
  platform: string;
  hasWebBluetooth: boolean;
}): string {
  const { name, platform, hasWebBluetooth } = browserInfo;

  if (platform === 'iOS') {
    return 'Web Bluetooth is not supported on iOS due to system limitations. Please use a desktop browser or download our mobile app.';
  }

  if (name === 'Safari') {
    return 'Safari does not support Web Bluetooth API. Please use Chrome, Edge, or Opera instead.';
  }

  if (name === 'Firefox') {
    return 'Firefox does not support Web Bluetooth API due to privacy concerns. Please use Chrome, Edge, or Opera instead.';
  }

  if (!hasWebBluetooth) {
    return 'Your browser does not support Web Bluetooth API. Please update to a newer version or try Chrome, Edge, or Opera.';
  }

  return 'Your browser version may be outdated. Please update to the latest version or try Chrome, Edge, or Opera.';
}

describe('Unsupported Browser Page - Browser Detection', () => {
  describe('detectBrowser', () => {
    it('should detect Chrome correctly', () => {
      const userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36';
      const result = detectBrowser(userAgent, 'Win32');
      expect(result.name).toBe('Chrome');
      expect(result.version).toBe('120');
    });

    it('should detect Edge correctly', () => {
      const userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0';
      const result = detectBrowser(userAgent, 'Win32');
      expect(result.name).toBe('Edge');
      expect(result.version).toBe('120');
    });

    it('should detect Opera correctly', () => {
      const userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 OPR/106.0.0.0';
      const result = detectBrowser(userAgent, 'Win32');
      expect(result.name).toBe('Opera');
      expect(result.version).toBe('106');
    });

    it('should detect Safari correctly', () => {
      const userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15';
      const result = detectBrowser(userAgent, 'MacIntel');
      expect(result.name).toBe('Safari');
      expect(result.version).toBe('17');
    });

    it('should detect Firefox correctly', () => {
      const userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:121.0) Gecko/20100101 Firefox/121.0';
      const result = detectBrowser(userAgent, 'Win32');
      expect(result.name).toBe('Firefox');
      expect(result.version).toBe('121');
    });

    it('should return Unknown for unrecognized browser', () => {
      const userAgent = 'Some Unknown Browser/1.0';
      const result = detectBrowser(userAgent, 'Win32');
      expect(result.name).toBe('Unknown');
      expect(result.version).toBe('0');
    });
  });

  describe('detectPlatformFromUA', () => {
    it('should detect Windows correctly', () => {
      const userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)';
      const platform = 'Win32';
      const result = detectPlatformFromUA(userAgent, platform);
      expect(result).toBe('Windows');
    });

    it('should detect macOS correctly', () => {
      const userAgent = 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)';
      const platform = 'MacIntel';
      const result = detectPlatformFromUA(userAgent, platform);
      expect(result).toBe('macOS');
    });

    it('should detect iOS correctly', () => {
      const userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X)';
      const platform = 'iPhone';
      const result = detectPlatformFromUA(userAgent, platform);
      expect(result).toBe('iOS');
    });

    it('should detect Android correctly', () => {
      const userAgent = 'Mozilla/5.0 (Linux; Android 13)';
      const platform = 'Linux';
      const result = detectPlatformFromUA(userAgent, platform);
      expect(result).toBe('Android');
    });

    it('should detect Linux correctly', () => {
      const userAgent = 'Mozilla/5.0 (X11; Linux x86_64)';
      const platform = 'Linux x86_64';
      const result = detectPlatformFromUA(userAgent, platform);
      expect(result).toBe('Linux');
    });
  });

  describe('getUnsupportedMessage', () => {
    it('should return iOS-specific message for iOS platform', () => {
      const browserInfo = {
        name: 'Safari',
        platform: 'iOS',
        hasWebBluetooth: false,
      };
      const message = getUnsupportedMessage(browserInfo);
      expect(message).toContain('iOS');
      expect(message).toContain('system limitations');
      expect(message).toContain('mobile app');
    });

    it('should return Safari-specific message', () => {
      const browserInfo = {
        name: 'Safari',
        platform: 'macOS',
        hasWebBluetooth: false,
      };
      const message = getUnsupportedMessage(browserInfo);
      expect(message).toContain('Safari');
      expect(message).toContain('does not support');
      expect(message).toContain('Chrome, Edge, or Opera');
    });

    it('should return Firefox-specific message', () => {
      const browserInfo = {
        name: 'Firefox',
        platform: 'Windows',
        hasWebBluetooth: false,
      };
      const message = getUnsupportedMessage(browserInfo);
      expect(message).toContain('Firefox');
      expect(message).toContain('privacy concerns');
      expect(message).toContain('Chrome, Edge, or Opera');
    });

    it('should return no Web Bluetooth message when API is not available', () => {
      const browserInfo = {
        name: 'Chrome',
        platform: 'Windows',
        hasWebBluetooth: false,
      };
      const message = getUnsupportedMessage(browserInfo);
      expect(message).toContain('does not support Web Bluetooth');
      expect(message).toContain('update');
    });

    it('should return generic outdated message for other cases', () => {
      const browserInfo = {
        name: 'Chrome',
        platform: 'Windows',
        hasWebBluetooth: true,
      };
      const message = getUnsupportedMessage(browserInfo);
      expect(message).toContain('outdated');
      expect(message).toContain('Chrome, Edge, or Opera');
    });
  });
});

describe('Unsupported Browser Page - Content', () => {
  it('should have correct recommended browsers', () => {
    const recommendedBrowsers = [
      {
        name: 'Google Chrome',
        minVersion: '70',
        downloadUrl: 'https://www.google.com/chrome/',
      },
      {
        name: 'Microsoft Edge',
        minVersion: '79',
        downloadUrl: 'https://www.microsoft.com/edge',
      },
      {
        name: 'Opera',
        minVersion: '57',
        downloadUrl: 'https://www.opera.com/',
      },
    ];

    expect(recommendedBrowsers).toHaveLength(3);
    expect(recommendedBrowsers[0].name).toBe('Google Chrome');
    expect(recommendedBrowsers[0].minVersion).toBe('70');
    expect(recommendedBrowsers[1].name).toBe('Microsoft Edge');
    expect(recommendedBrowsers[1].minVersion).toBe('79');
    expect(recommendedBrowsers[2].name).toBe('Opera');
    expect(recommendedBrowsers[2].minVersion).toBe('57');
  });
});