Typescript (Change title-bar from className to id ) (ELECTRON-748) (#647)

* ELECTRON-748 - Change title-bar from className to id
Fix linter issues

* ELECTRON-748 - Fix unit tests cases

config/titleBarStyles.css

@@ -12,7 +12,7 @@ Typically you'll want to set background-image: url(""); and background-size: cov
 ```
 
 */
-.title-bar {
+#title-bar {
     display: flex;
     position: fixed;
     background: rgba(74,74,74,1);
@@ -150,4 +150,4 @@ Typically you'll want to set content: url("") and adjust the width property
     width: 100%;
     z-index: 3000;
     bottom: 0;
-}
+}

spec/__snapshots__/windowsTitleBar.spec.ts.snap

@@ -2,7 +2,7 @@
 
 exports[`windows title bar should render correctly 1`] = `
 <div
-  className="title-bar"
+  id="title-bar"
   onDoubleClick={[Function]}
   style={
     Object {

spec/appCacheHandler.spec.ts

@@ -9,6 +9,15 @@ jest.mock('fs', () => ({
         unlinkSync: jest.fn(),
 }));
 
+jest.mock('../src/common/logger', () => {
+    return {
+        logger: {
+            error: jest.fn(),
+            info: jest.fn(),
+        },
+    };
+});
+
 describe('app cache handler', () => {
     const cachePathExpected = path.join(app.getPath('userData'), 'CacheCheck');
 

spec/appMenu.spec.ts

@@ -121,7 +121,7 @@ describe('app menu', () => {
     describe('`popupMenu`', () => {
         it('should fail when `appMenu.menu` is null', () => {
             const spy = jest.spyOn(logger, 'error');
-            const expectedValue = 'app-menu: tried popup menu, but failed menu not defined';
+            const expectedValue = 'app-menu: tried popup menu, but failed, menu not defined';
             appMenu.menu = null;
             appMenu.popupMenu();
             expect(spy).toBeCalledWith(expectedValue);

src/app/app-cache-handler.ts

@@ -1,7 +1,8 @@
 import { app, session } from 'electron';
 import * as fs from 'fs';
 import * as path from 'path';
-import {logger} from "../common/logger";
+
+import { logger } from '../common/logger';
 
 // Cache check file path
 const cacheCheckFilePath: string = path.join(app.getPath('userData'), 'CacheCheck');

src/app/child-window-handler.ts

@@ -4,6 +4,7 @@ import { parse as parseQuerystring } from 'querystring';
 import { format, parse, Url } from 'url';
 import { isDevEnv, isWindowsOS } from '../common/env';
 import { i18n } from '../common/i18n';
+import { logger } from '../common/logger';
 import { getGuid } from '../common/utils';
 import { config } from './config-handler';
 import { monitorWindowActions, removeWindowEventListener } from './window-actions';
@@ -14,7 +15,6 @@ import {
     injectStyles,
     preventWindowNavigation,
 } from './window-utils';
-import {logger} from "../common/logger";
 
 const DEFAULT_POP_OUT_WIDTH = 300;
 const DEFAULT_POP_OUT_HEIGHT = 600;
@@ -183,7 +183,7 @@ export const handleChildWindow = (webContents: WebContents): void => {
                 }
             });
         } else {
-            logger.info(`child-window-handler: new window url is ${newWinUrl} which is not of the same host, 
+            logger.info(`child-window-handler: new window url is ${newWinUrl} which is not of the same host,
             so opening it in the default browser!`);
             event.preventDefault();
             windowHandler.openUrlInDefaultBrowser(newWinUrl);

src/renderer/components/windows-title-bar.tsx

@@ -69,7 +69,7 @@ export default class WindowsTitleBar extends React.Component<{}, IState> {
         const style = { display: isFullScreen ? 'none' : 'flex' };
 
         return (
-            <div className='title-bar'
+            <div id='title-bar'
                 onDoubleClick={this.state.isMaximized ? this.eventHandlers.onUnmaximize : this.eventHandlers.onMaximize}
                 style={style}
             >

src/renderer/styles/title-bar.less

@@ -4,7 +4,7 @@
 @color_2: white;
 @background_color_1: rgba(51, 51, 51, 1);
 
-.title-bar {
+#title-bar {
   display: flex;
   position: fixed;
   background: rgba(74, 74, 74, 1);