Merge branch 'fix-test-races'

4 files changed, 33 insertions, 26 deletions

diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index afdda1d401..87d1d1440d 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -780,6 +780,9 @@ export default class AppRenderer {
 
         switch (this.loginState) {
           case 'none':
+            reduxAccount.loggedIn(accountToken, device);
+            this.resetNavigation();
+            break;
           case 'logging in':
             reduxAccount.loggedIn(accountToken, device);
 
@@ -793,10 +796,6 @@ export default class AppRenderer {
             reduxAccount.accountCreated(accountToken, device, new Date().toISOString());
             break;
         }
-
-        if (this.loginState !== 'logging in' && this.loginState !== 'creating account') {
-          this.resetNavigation();
-        }
         break;
       }
       case 'logged out':
diff --git a/gui/src/renderer/components/AppRouter.tsx b/gui/src/renderer/components/AppRouter.tsx
index bd2ae6e53f..e31066337a 100644
--- a/gui/src/renderer/components/AppRouter.tsx
+++ b/gui/src/renderer/components/AppRouter.tsx
@@ -59,7 +59,7 @@ export default function AppRouter() {
   return (
     <Focus ref={focusRef}>
       <TransitionContainer onTransitionEnd={onNavigation} {...transition}>
-        <TransitionView viewId={currentLocation.key || ''}>
+        <TransitionView viewId={currentLocation.key || ''} routePath={history.location.pathname}>
           <Switch key={currentLocation.key} location={currentLocation}>
             <Route exact path={RoutePath.launch} component={Launch} />
             <Route exact path={RoutePath.login} component={LoginPage} />
diff --git a/gui/src/renderer/components/TransitionContainer.tsx b/gui/src/renderer/components/TransitionContainer.tsx
index 1587cce024..45e46c37e0 100644
--- a/gui/src/renderer/components/TransitionContainer.tsx
+++ b/gui/src/renderer/components/TransitionContainer.tsx
@@ -6,6 +6,7 @@ import { WillExit } from '../lib/will-exit';
 
 interface ITransitioningViewProps {
   viewId: string;
+  routePath: string;
   children?: React.ReactNode;
 }
 
@@ -47,25 +48,28 @@ export const StyledTransitionContainer = styled.div(
   }),
 );
 
-export const StyledTransitionContent = styled.div({}, (props: { transition?: IItemStyle }) => {
-  const x = `${props.transition?.x ?? 0}%`;
-  const y = `${props.transition?.y ?? 0}%`;
-  const duration = props.transition?.duration ?? 450;
+export const StyledTransitionContent = styled.div.attrs({ 'data-testid': 'transition-content' })(
+  {},
+  (props: { transition?: IItemStyle }) => {
+    const x = `${props.transition?.x ?? 0}%`;
+    const y = `${props.transition?.y ?? 0}%`;
+    const duration = props.transition?.duration ?? 450;
 
-  return {
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
-    bottom: 0,
-    zIndex: props.transition?.inFront ? 1 : 0,
-    willChange: 'transform',
-    transform: `translate3d(${x}, ${y}, 0)`,
-    transition: `transform ${duration}ms ease-in-out`,
-  };
-});
+    return {
+      display: 'flex',
+      flexDirection: 'column',
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      zIndex: props.transition?.inFront ? 1 : 0,
+      willChange: 'transform',
+      transform: `translate3d(${x}, ${y}, 0)`,
+      transition: `transform ${duration}ms ease-in-out`,
+    };
+  },
+);
 
 export const StyledTransitionView = styled.div({
   display: 'flex',
@@ -77,7 +81,11 @@ export const StyledTransitionView = styled.div({
 
 export class TransitionView extends React.Component<ITransitioningViewProps> {
   public render() {
-    return <StyledTransitionView>{this.props.children}</StyledTransitionView>;
+    return (
+      <StyledTransitionView data-testid={this.props.routePath}>
+        {this.props.children}
+      </StyledTransitionView>
+    );
   }
 }
 
diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx
index c9fd568a3f..7d12888081 100644
--- a/gui/src/renderer/components/TunnelControl.tsx
+++ b/gui/src/renderer/components/TunnelControl.tsx
@@ -221,7 +221,7 @@ export default class TunnelControl extends React.Component<ITunnelControlProps>
     const city = this.props.city === undefined ? '' : relayLocations.gettext(this.props.city);
     return (
       <LocationRow>
-        <StyledMarquee data-test-id="city">{city}</StyledMarquee>
+        <StyledMarquee data-testid="city">{city}</StyledMarquee>
       </LocationRow>
     );
   }
@@ -231,7 +231,7 @@ export default class TunnelControl extends React.Component<ITunnelControlProps>
       this.props.country === undefined ? '' : relayLocations.gettext(this.props.country);
     return (
       <LocationRow>
-        <StyledMarquee data-test-id="country">{country}</StyledMarquee>
+        <StyledMarquee data-testid="country">{country}</StyledMarquee>
       </LocationRow>
     );
   }