✨ About dialog initial implementation

Signed-off-by: Marc Nuri <[email protected]>

src/__tests__/electron.js

@@ -33,6 +33,7 @@ const mockBrowserWindowInstance = () => {
     setFullScreen: jest.fn(),
     webContents: {
       loadedUrl: '',
+      browserWindowInstance: () => instance,
       copy: jest.fn(),
       copyImageAt: jest.fn(),
       cut: jest.fn(),
@@ -68,6 +69,9 @@ const mockElectronInstance = ({...overriddenProps} = {}) => {
       getPath: jest.fn(),
       setPath: jest.fn()
     },
+    contextBridge: {
+      exposeInMainWorld: jest.fn()
+    },
     globalShortcut: {
       listeners: {},
       register: jest.fn((accelerator, callback) => {
@@ -87,6 +91,9 @@ const mockElectronInstance = ({...overriddenProps} = {}) => {
         delete instance.ipcMain.listeners[eventName];
       })
     },
+    ipcRenderer: {
+      send: jest.fn()
+    },
     nativeTheme: {},
     session: {
       fromPartition: jest.fn(() => ({
@@ -96,6 +103,7 @@ const mockElectronInstance = ({...overriddenProps} = {}) => {
     },
     ...overriddenProps
   };
+  instance.BrowserWindow.fromWebContents = jest.fn(webContents => webContents.browserWindowInstance());
   return instance;
 };
 

src/about/__tests__/about.browser.test.mjs

@@ -0,0 +1,49 @@
+/*
+   Copyright 2022 Marc Nuri San Felix
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+ */
+import {jest} from '@jest/globals';
+import {loadDOM} from '../../__tests__/index.mjs';
+import {fireEvent} from '@testing-library/dom';
+
+describe('About in Browser test suite', () => {
+  beforeEach(async () => {
+    jest.resetModules();
+    window.electron = {
+      close: jest.fn(),
+      versions: {electron: '1.33.7', chrome: '1337', node: '42', v8: '13.37'}
+    };
+    await loadDOM({meta: import.meta, path: ['..', 'index.html']});
+  });
+  test('close, click should close dialog', () => {
+    // When
+    fireEvent.click(document.querySelector('.top-app-bar .leading-navigation-icon'));
+    // Then
+    expect(window.electron.close).toHaveBeenCalledTimes(1);
+  });
+  test.each([
+    {label: 'Electron', expectedVersion: '1.33.7'},
+    {label: 'Chromium', expectedVersion: '1337'},
+    {label: 'Node', expectedVersion: '42'},
+    {label: 'V8', expectedVersion: '13.37'}
+  ])('Should display $label with version $expectedVersion', ({label, expectedVersion}) => {
+    const versions = Array.from(document.querySelectorAll('.about-content__version'))
+      .map(v => ({
+        label: v.querySelector('.version__component').textContent,
+        version: v.querySelector('.version__value').textContent
+      }));
+    expect(versions).toContainEqual({label, version: expectedVersion});
+  });
+});
+

src/about/__tests__/index.html.test.mjs

@@ -0,0 +1,33 @@
+/*
+   Copyright 2022 Marc Nuri San Felix
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+ */
+import {jest} from '@jest/globals';
+import {loadDOM} from '../../__tests__/index.mjs';
+
+describe('About index.html test suite', () => {
+  beforeEach(async () => {
+    jest.resetModules();
+    window.electron = {
+      close: jest.fn(),
+      versions: {}
+    };
+    await loadDOM({meta: import.meta, path: ['..', 'index.html']});
+  });
+  test('loads required styles', () => {
+    expect(Array.from(document.querySelectorAll('link[rel=stylesheet]'))
+      .map(link => link.getAttribute('href')))
+      .toEqual(['./about.browser.css']);
+  });
+});

src/about/__tests__/index.test.js

@@ -0,0 +1,67 @@
+/*
+   Copyright 2022 Marc Nuri San Felix
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+ */
+describe('About module test suite', () => {
+  let electron;
+  let sender;
+  let about;
+  beforeEach(() => {
+    jest.resetModules();
+    jest.mock('electron', () => require('../../__tests__').mockElectronInstance());
+    electron = require('electron');
+    sender = electron.browserWindowInstance.webContents;
+    about = require('../');
+  });
+  describe('openAboutDialog', () => {
+    describe('webPreferences', () => {
+      test('is sandboxed', () => {
+        // When
+        about.openAboutDialog({sender});
+        // Then
+        const BrowserView = electron.BrowserView;
+        expect(BrowserView).toHaveBeenCalledTimes(1);
+        expect(BrowserView).toHaveBeenCalledWith({
+          webPreferences: expect.objectContaining({sandbox: true, nodeIntegration: false})
+        });
+      });
+      test('has no node integration', () => {
+        // When
+        about.openAboutDialog({sender});
+        // Then
+        expect(electron.BrowserView).toHaveBeenCalledWith({
+          webPreferences: expect.objectContaining({nodeIntegration: false})
+        });
+      });
+      test('has context isolation', () => {
+        // When
+        about.openAboutDialog({sender});
+        // Then
+        expect(electron.BrowserView).toHaveBeenCalledWith({
+          webPreferences: expect.objectContaining({contextIsolation: true})
+        });
+      });
+    });
+    test('should open dialog and add event listeners', () => {
+      // When
+      about.openAboutDialog({sender: electron.browserWindowInstance.webContents});
+      // Then
+      expect(electron.browserViewInstance.webContents.loadURL).toHaveBeenCalledTimes(1);
+      expect(electron.browserViewInstance.webContents.loadURL)
+        .toHaveBeenCalledWith(expect.stringMatching(/.+?\/index.html$/)); // NOSONAR
+      expect(electron.browserViewInstance.webContents.on).toHaveBeenCalledWith('will-navigate', expect.any(Function));
+    });
+  });
+});
+

src/about/__tests__/preload.test.js

@@ -0,0 +1,53 @@
+/*
+   Copyright 2022 Marc Nuri San Felix
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+ */
+describe('About Module preload test suite', () => {
+  let electron;
+  beforeEach(() => {
+    jest.resetModules();
+    jest.mock('electron', () => require('../../__tests__').mockElectronInstance());
+    electron = require('electron');
+  });
+  describe('preload (just for coverage and sanity, see bundle tests)', () => {
+    beforeEach(() => {
+      global.APP_EVENTS = require('../../constants').APP_EVENTS;
+      require('../preload');
+    });
+    describe('creates an API', () => {
+      test('with entries', () => {
+        expect(electron.contextBridge.exposeInMainWorld).toHaveBeenCalledWith('electron', {
+          close: expect.toBeFunction(),
+          versions: expect.toBeObject()
+        });
+      });
+      test('with close function', () => {
+        const electronApi = electron.contextBridge.exposeInMainWorld.mock.calls[0][1];
+        electronApi.close();
+        expect(electron.ipcRenderer.send).toHaveBeenCalledWith('closeDialog');
+      });
+    });
+  });
+  describe('preload.bundle', () => {
+    beforeEach(() => {
+      require('../../../bundles/about.preload');
+    });
+    test('creates an API', () => {
+      expect(electron.contextBridge.exposeInMainWorld).toHaveBeenCalledWith('electron', {
+        close: expect.toBeFunction(),
+        versions: expect.toBeObject()
+      });
+    });
+  });
+});

src/about/about.browser.css

@@ -0,0 +1,40 @@
+/*
+   Copyright 2022 Marc Nuri San Felix
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+ */
+@import '../styles/main.css';
+
+:root {
+  overflow: auto;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+}
+
+.about-content {
+  padding: 16px;
+}
+.about-content .about-content__release {
+  margin: 8px 0;
+}
+.about-content .version__component {
+  font-weight: var(--md-ref-typeface-weight-medium);
+  margin-right: 8px;
+}
+.about-content .version__value {
+  font-family: monospace;
+  color: var(--md-sys-color-on-surface-variant);
+}

src/about/about.browser.mjs

@@ -0,0 +1,63 @@
+/*
+   Copyright 2022 Marc Nuri San Felix
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+ */
+import {ELECTRONIM_VERSION, html, render, Card, TopAppBar} from '../components/index.mjs';
+
+const {close, versions} = window.electron;
+
+const TWITTER_LINK = 'https://twitter.com/share?url=https://github.com/manusa/electronim&text=I%27m%20using%20ElectronIM%20as%20my%20communications%20center%20and%20I%20love%20it%2C%20you%20should%20try%20it%20out%20too%21';
+
+const getAppMenu = () => document.querySelector('.about-root');
+
+const Version = ({component, value}) => html`
+  <div class='about-content__version'>
+    <span class='version__component'>${component}</span>
+    <span class='version__value'>${value}</span>
+  </div>
+`;
+
+const About = () => html`
+  <${TopAppBar} icon='\uE5C4' iconClick=${close} headline='About ElectronIM'/>
+  <div class='about-content'>
+    <${Card} headline=${`ElectronIM ${ELECTRONIM_VERSION}`}>
+      <div class='about-content__release'>
+        <a href=${`https://github.com/manusa/electronim/releases/tag/v${ELECTRONIM_VERSION}`}>
+          Release Notes
+        </a> - <a href='https://github.com/manusa/electronim/blob/main/LICENSE'>
+          Apache License, Version 2.0
+        </a>
+      </div>
+      <div class='about-content__versions'>
+        <${Version} component='Electron' value=${versions.electron} />
+        <${Version} component='Chromium' value=${versions.chrome} />
+        <${Version} component='Node' value=${versions.node} />
+        <${Version} component='V8' value=${versions.v8} />
+      </div>
+      <${Card.Divider}/>
+      <div class='about_content__promotion'>
+        <p>
+          Do you enjoy using ElectronIM? Help us spread the word by <a href=${TWITTER_LINK}>
+          sharing</a> it with your friends!
+        </p>
+        <p>
+          A <a href='https://github.com/manusa/electronim'>GitHub star</a> also goes a long way to help us grow the
+          project!
+        </p>
+      </div>
+    </${Card}>
+  </div>
+`;
+
+render(html`<${About} />`, getAppMenu());

src/about/index.html

@@ -0,0 +1,29 @@
+<!--
+Copyright 2022 Marc Nuri San Felix
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<!DOCTYPE html>
+<html lang="en" class="electronim">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self';">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>ElectronIM About</title>
+    <link rel="stylesheet" type="text/css" href="./about.browser.css" />
+  </head>
+  <body>
+    <div class="about-root"></div>
+    <script src="./about.browser.mjs" type="module" ></script>
+  </body>
+</html>