fix: Log in button works on first click

src/core/components/AuthenticateButton/index.js

@@ -60,8 +60,14 @@ export class AuthenticateButtonBase extends React.Component {
     const buttonText = isAuthenticated ?
       logOutText || i18n.gettext('Log out') :
       logInText || i18n.gettext('Log in/Sign up');
+
+    // The `href` is required because a <button> element with a :hover effect
+    // and/or focus effect (that is not part of a form) that changes its
+    // appearance will transition to the hover state onClick when using a
+    // mobile browser. This is the cause of
+    // https://github.com/mozilla/addons-frontend/issues/1904
     return (
-      <Button onClick={this.onClick} {...otherProps}>
+      <Button onClick={this.onClick} href="#" {...otherProps}>
         {noIcon ? null : <Icon name="user-dark" />}
         {buttonText}
       </Button>

src/core/css/inc/mixins.scss

@@ -219,17 +219,8 @@ $default-arrow-margin: 3px;
     font-weight: 400;
   }
 
-  // This is required because a <button> element with a :hover effect
-  // that changes its appearance will transition to the hover state onClick
-  // when using a mobile browser.
-  // This is the cause of
-  // https://github.com/mozilla/addons-frontend/issues/1904
-  //
-  // For more info, see: https://css-tricks.com/annoying-mobile-double-tap-link-issue/#article-header-id-2
-  @media (pointer: fine) {
-    &:hover {
-      background: $background-hover;
-    }
+  &:hover {
+    background: $background-hover;
   }
 
   &:active,

tests/unit/amo/helpers.js

@@ -66,17 +66,30 @@ export const signedInApiState = Object.freeze({
   clientApp: 'firefox',
 });
 
-export function dispatchSignInActions({
+export function dispatchClientMetadata({
   store = createStore().store,
   clientApp = 'android',
-  authToken = userAuthToken(),
   lang = 'en-US',
   userAgent = sampleUserAgent,
 } = {}) {
-  store.dispatch(setAuthToken(authToken));
   store.dispatch(setClientApp(clientApp));
   store.dispatch(setLang(lang));
   store.dispatch(setUserAgent(userAgent));
+
+  return {
+    store,
+    state: store.getState(),
+  };
+}
+
+export function dispatchSignInActions({
+  authToken = userAuthToken(),
+  ...otherArgs
+} = {}) {
+  const { store } = dispatchClientMetadata(otherArgs);
+
+  store.dispatch(setAuthToken(authToken));
+
   return {
     store,
     state: store.getState(),

tests/unit/core/components/TestAuthenticateButton.js

@@ -4,7 +4,7 @@ import {
   Simulate, findRenderedComponentWithType, renderIntoDocument,
 } from 'react-addons-test-utils';
 import { findDOMNode } from 'react-dom';
-import { combineReducers, createStore as _createStore } from 'redux';
+import { Provider } from 'react-redux';
 
 import { setAuthToken } from 'core/actions';
 import * as api from 'core/api';
@@ -13,17 +13,24 @@ import {
   mapDispatchToProps,
   mapStateToProps,
 } from 'core/components/AuthenticateButton';
-import apiReducer from 'core/reducers/api';
+import {
+  dispatchClientMetadata,
+  dispatchSignInActions,
+} from 'tests/unit/amo/helpers';
 import { getFakeI18nInst, userAuthToken } from 'tests/unit/helpers';
 import Icon from 'ui/components/Icon';
 
-function createStore() {
-  return { store: _createStore(combineReducers({ api: apiReducer })) };
-}
 
 describe('<AuthenticateButton />', () => {
-  const renderTree = (props) => renderIntoDocument(
-    <AuthenticateButtonBase i18n={getFakeI18nInst()} {...props} />);
+  function renderTree(props) {
+    const { store } = dispatchSignInActions();
+
+    return findRenderedComponentWithType(renderIntoDocument(
+      <Provider store={store}>
+        <AuthenticateButtonBase i18n={getFakeI18nInst()} {...props} />
+      </Provider>
+    ), AuthenticateButtonBase);
+  }
 
   const render = (props) => findDOMNode(renderTree(props));
 
@@ -93,7 +100,7 @@ describe('<AuthenticateButton />', () => {
     };
     sinon.stub(config, 'get', (key) => _config[key]);
 
-    const { store } = createStore();
+    const { store } = dispatchSignInActions();
     store.dispatch(setAuthToken(userAuthToken({ user_id: 99 })));
     const apiConfig = { token: store.getState().api.token };
     expect(apiConfig.token).toBeTruthy();
@@ -107,7 +114,7 @@ describe('<AuthenticateButton />', () => {
   });
 
   it('pulls isAuthenticated from state', () => {
-    const { store } = createStore(combineReducers({ api }));
+    const { store } = dispatchClientMetadata();
     expect(mapStateToProps(store.getState()).isAuthenticated).toEqual(false);
     store.dispatch(setAuthToken(userAuthToken({ user_id: 123 })));
     expect(mapStateToProps(store.getState()).isAuthenticated).toEqual(true);