Show punycode URL in homepage

Fix #4747

Auditors: @bbondy

Test Plan: covered by automated test

js/about/preferences.js

@@ -27,6 +27,7 @@ const SortableTable = require('../components/sortableTable')
 const Button = require('../components/button')
 const searchProviders = require('../data/searchProviders')
 const moment = require('moment')
+const punycode = require('punycode')
 
 const adblock = appConfig.resourceNames.ADBLOCK
 const cookieblock = appConfig.resourceNames.COOKIEBLOCK
@@ -613,7 +614,10 @@ class GeneralTab extends ImmutableComponent {
         <option data-l10n-id={lc} value={lc} />
       )
     })
-    const homepageValue = getSetting(settings.HOMEPAGE, this.props.settings)
+    var homepageValue = getSetting(settings.HOMEPAGE, this.props.settings)
+    if (typeof homepageValue === 'string') {
+      homepageValue = punycode.toASCII(homepageValue)
+    }
     const homepage = homepageValue && homepageValue.trim()
     const disableShowHomeButton = !homepage || !homepage.length
     const defaultLanguage = this.props.languageCodes.find((lang) => lang.includes(navigator.language)) || 'en-US'
@@ -638,7 +642,7 @@ class GeneralTab extends ImmutableComponent {
         <SettingItem dataL10nId='myHomepage'>
           <input spellCheck='false'
             data-l10n-id='homepageInput'
-            value={getSetting(settings.HOMEPAGE, this.props.settings)}
+            value={homepageValue}
             onChange={changeSetting.bind(null, this.onChangeSetting, settings.HOMEPAGE)} />
         </SettingItem>
         <SettingCheckbox dataL10nId='showHomeButton' prefKey={settings.SHOW_HOME_BUTTON}

test/about/preferencesTest.js

@@ -0,0 +1,36 @@
+/* global describe, it, beforeEach */
+
+const Brave = require('../lib/brave')
+const {urlInput, homepageInput} = require('../lib/selectors')
+
+const prefsUrl = 'about:preferences'
+
+function * setup (client) {
+  yield client
+    .waitForUrl(Brave.newTabUrl)
+    .waitForBrowserWindow()
+    .waitForVisible(urlInput)
+}
+
+describe('General Panel', function () {
+  describe('homepage', function () {
+    Brave.beforeEach(this)
+    beforeEach(function * () {
+      yield setup(this.app.client)
+    })
+
+    it('homepage displays punycode', function * () {
+      yield this.app.client
+        .tabByIndex(0)
+        .loadUrl(prefsUrl)
+        .waitForVisible(homepageInput)
+        .click(homepageInput)
+        .keys('а')
+        .waitUntil(function () {
+          return this.getValue(homepageInput).then((val) => {
+            return val === 'https://www.brave.xn--com-7cd'
+          })
+        })
+    })
+  })
+})

test/lib/selectors.js

@@ -50,6 +50,7 @@ module.exports = {
   securityTab: '[data-l10n-id="security"]',
   paymentsTab: '[data-l10n-id="payments"]',
   saveButton: '[data-l10n-id="save"]',
+  homepageInput: '[data-l10n-id="homepageInput"]',
   walletSwitch: '.enablePaymentsSwitch .switchBackground',
   addFundsButton: '.addFunds',
   fundsSelectBox: '#fundsSelectBox',