Feature/auto-prefix browser url if needed (#2016)

* [WIP] prefix browser url

* add prefixing of url and associated test

* add test for browserview component and snapshots

* remove pointless interim assignment

* give regex a name for semantic purposes

* remove unnecessary lambdas - v. minor but ?possibly cumulative penalty

* update tests call navigate in init element
move init element to cdm to *try* to move impure
fns from render

* fix lint error

Author: akinsho

browser/src/Services/Browser/BrowserView.tsx

@@ -77,6 +77,7 @@ export interface SneakInfoFromBrowser {
 
 export class BrowserView extends React.PureComponent<IBrowserViewProps, IBrowserViewState> {
     private _webviewElement: any
+    private _elem: HTMLElement
     private _disposables: IDisposable[] = []
 
     constructor(props: IBrowserViewProps) {
@@ -135,6 +136,7 @@ export class BrowserView extends React.PureComponent<IBrowserViewProps, IBrowser
         })
 
         this._disposables = this._disposables.concat([d1, d2, d3, d4, d5, d6])
+        this._initializeElement(this._elem)
     }
 
     public _triggerSneak(id: string): void {
@@ -156,18 +158,18 @@ export class BrowserView extends React.PureComponent<IBrowserViewProps, IBrowser
         return (
             <Column key={"test2"}>
                 <BrowserControlsWrapper>
-                    <BrowserButtonView icon={"chevron-left"} onClick={() => this._goBack()} />
-                    <BrowserButtonView icon={"chevron-right"} onClick={() => this._goForward()} />
-                    <BrowserButtonView icon={"undo"} onClick={() => this._reload()} />
+                    <BrowserButtonView icon={"chevron-left"} onClick={this._goBack} />
+                    <BrowserButtonView icon={"chevron-right"} onClick={this._goForward} />
+                    <BrowserButtonView icon={"undo"} onClick={this._reload} />
                     <AddressBarView
                         url={this.state.url}
                         onAddressChanged={url => this._navigate(url)}
                     />
-                    <BrowserButtonView icon={"bug"} onClick={() => this._openDebugger()} />
+                    <BrowserButtonView icon={"bug"} onClick={this._openDebugger} />
                 </BrowserControlsWrapper>
                 <BrowserViewWrapper>
                     <div
-                        ref={elem => this._initializeElement(elem)}
+                        ref={elem => (this._elem = elem)}
                         style={{
                             position: "absolute",
                             top: "0px",
@@ -182,51 +184,62 @@ export class BrowserView extends React.PureComponent<IBrowserViewProps, IBrowser
         )
     }
 
-    private _navigate(url: string): void {
+    public prefixUrl = (url: string) => {
+        // Regex Explainer - match at the beginning of the string ^
+        // brackets to match the selection not partial match like ://
+        // match http or https, then match ://
+        const hasValidProtocol = /^(https?:)\/\//i
+        if (url && !hasValidProtocol.test(url)) {
+            return `http://${url}`
+        }
+        return url
+    }
+
+    private _navigate = (url: string): void => {
         if (this._webviewElement) {
-            this._webviewElement.src = url
+            this._webviewElement.src = this.prefixUrl(url)
 
             this.setState({
                 url,
             })
         }
     }
 
-    private _goBack(): void {
+    private _goBack = (): void => {
         if (this._webviewElement) {
             this._webviewElement.goBack()
         }
     }
 
-    private _goForward(): void {
+    private _goForward = (): void => {
         if (this._webviewElement) {
             this._webviewElement.goForward()
         }
     }
 
-    private _openDebugger(): void {
+    private _openDebugger = (): void => {
         if (this._webviewElement) {
             this._webviewElement.openDevTools()
         }
     }
 
-    private _reload(): void {
+    private _reload = (): void => {
         if (this._webviewElement) {
             this._webviewElement.reload()
         }
     }
 
-    private _getZoomFactor(): number {
+    private _getZoomFactor = (): number => {
         return this.props.configuration.getValue("browser.zoomFactor", 1.0)
     }
 
-    private _initializeElement(elem: HTMLElement) {
+    private _initializeElement = (elem: HTMLElement) => {
         if (elem && !this._webviewElement) {
             const webviewElement = document.createElement("webview")
             webviewElement.preload = path.join(__dirname, "lib", "webview_preload", "index.js")
             elem.appendChild(webviewElement)
             this._webviewElement = webviewElement
-            this._webviewElement.src = this.props.initialUrl
+            this._navigate(this.props.initialUrl)
 
             this._webviewElement.addEventListener("dom-ready", () => {
                 this._webviewElement.setZoomFactor(this._getZoomFactor())

ui-tests/BrowserView.test.tsx

@@ -0,0 +1,50 @@
+import { shallow } from "enzyme"
+import { shallowToJson } from "enzyme-to-json"
+import * as React from "react"
+
+import { Event } from "oni-types"
+import {
+    BrowserView,
+    IBrowserViewProps,
+    IBrowserViewState,
+} from "../browser/src/Services/Browser/BrowserView"
+import { Configuration } from "../browser/src/Services/Configuration"
+
+const mockEvent = new Event<void>()
+
+// Using the disable life cycle methods here as the CDM calls sneak which is
+// an external dependency I'm not trying to test here
+
+describe("<BrowserView /> Tests", () => {
+    const component = (
+        <BrowserView
+            initialUrl={"test.com"}
+            configuration={{} as Configuration}
+            debug={mockEvent}
+            goBack={mockEvent}
+            goForward={mockEvent}
+            reload={mockEvent}
+        />
+    )
+    it("component to render correctly", () => {
+        const wrapper = shallow(component, { disableLifecycleMethods: true })
+        expect(wrapper).toBeDefined()
+    })
+    it('Should correctly prefix a url with "https" or "http" if needed', () => {
+        const wrapper = shallow(component, { disableLifecycleMethods: true })
+        // can be typed here but the _webviewComponent is expected - TS Error
+        const instance: any = wrapper.instance()
+        expect(instance.prefixUrl("apple.com")).toBe("http://apple.com")
+    })
+    it('Should NOT prefix a url with "https" or "http" if already present', () => {
+        const wrapper = shallow(component, { disableLifecycleMethods: true })
+        const instance: any = wrapper.instance()
+        // subtle difference here as the function always add https as a prefix not http
+        expect(instance.prefixUrl("https://www.apple.com")).toBe("https://www.apple.com")
+    })
+
+    it("Should match the recent snapshot - unless an intentional change has occurred ", () => {
+        const wrapper = shallow(component, { disableLifecycleMethods: true })
+        expect(shallowToJson(wrapper)).toMatchSnapshot()
+    })
+})

ui-tests/__snapshots__/BrowserView.test.tsx.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<BrowserView /> Tests Should match the recent snapshot - unless an intentional change has occurred  1`] = `
+<styled.div
+  key="test2"
+>
+  <styled.div>
+    <Component
+      icon="chevron-left"
+      onClick={[Function]}
+    />
+    <Component
+      icon="chevron-right"
+      onClick={[Function]}
+    />
+    <Component
+      icon="undo"
+      onClick={[Function]}
+    />
+    <AddressBarView
+      onAddressChanged={[Function]}
+      url="test.com"
+    />
+    <Component
+      icon="bug"
+      onClick={[Function]}
+    />
+  </styled.div>
+  <styled.div>
+    <div
+      key="test"
+      style={
+        Object {
+          "bottom": "0px",
+          "left": "0px",
+          "position": "absolute",
+          "right": "0px",
+          "top": "0px",
+        }
+      }
+    />
+  </styled.div>
+</styled.div>
+`;