feat: add browser support validation to the docs

pitsby.config.cjs

@@ -4,11 +4,14 @@ module.exports = {
   ],
   scripts: [
     { src: './src/doc.importmap.js', type: 'importmap', inline: true },
+    { src: './src/browser-support.js', type: 'module' },
     { src: './src/index.js', type: 'module' }
   ],
   other: [
     './src/images/logo-web-components.svg',
     './src/components/id-generator.js',
+    './src/services/browser.js',
+    './src/services/window.js',
     './node_modules/uuid/dist/esm-browser/v4.js',
     './node_modules/uuid/dist/esm-browser/native.js',
     './node_modules/uuid/dist/esm-browser/rng.js',

project.json

@@ -2,7 +2,7 @@
   "source": {
     "root": "src",
     "tests": {
-      "files": ["src/**/*.js", "!src/doc.importmap.js"]
+      "files": ["src/**/*.js", "!src/doc.importmap.js", "!src/browser-support.js"]
     }
   }
 }

src/browser-support.js

@@ -0,0 +1,3 @@
+import * as browserService from './services/browser.js';
+
+browserService.init();

src/services/browser.js

@@ -0,0 +1,11 @@
+import windowService from './window.js';
+
+const NO_SUPPORT_MSG = 'This browser may have no support for all the features required to run this website. Please, use Chrome or Firefox.';
+
+export const init = () => {
+  if (!isBrowserAgent('chrome') && !isBrowserAgent('firefox')) window.alert(NO_SUPPORT_MSG);
+};
+
+function isBrowserAgent(agentName){
+  return windowService.getUserAgent().toLowerCase().includes(agentName);
+}

src/services/browser.test.js

@@ -0,0 +1,24 @@
+import windowService from './window';
+import * as browserService from './browser';
+
+describe('Browser Service', () => {
+  beforeEach(() => {
+    window.alert = jest.fn();
+  });
+
+  it('should alert that Safari doesn\'t fully support the docs', () => {
+    mockUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15');
+    browserService.init();
+    expect(window.alert).toHaveBeenCalledWith('This browser may have no support for all the features required to run this website. Please, use Chrome or Firefox.');
+  });
+
+  it('should not alert missing support if browser is other than Safari', () => {
+    mockUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36');
+    browserService.init();
+    expect(window.alert).not.toHaveBeenCalled();
+  });
+
+  function mockUserAgent(userAgent){
+    windowService.getUserAgent = jest.fn(() => userAgent);
+  }
+});

src/services/testing.js

@@ -14,5 +14,6 @@ export function render(html){
 }
 
 export function teardown(){
-  document.body.firstChild.remove();
+  const { firstChild } = document.body;
+  firstChild && firstChild.remove();
 }

src/services/window.js

@@ -0,0 +1,5 @@
+const _public = {};
+
+_public.getUserAgent = () => window.navigator.userAgent;
+
+export default _public;

src/services/window.test.js

@@ -0,0 +1,7 @@
+import windowService from './window';
+
+describe('Window Service', () => {
+  it('should get user agent', () => {
+    expect(windowService.getUserAgent()).toEqual(window.navigator.userAgent);
+  });
+});