Add test for ensuring country is set

2 files changed, 8 insertions, 6 deletions

diff --git a/gui/src/renderer/components/Marquee.tsx b/gui/src/renderer/components/Marquee.tsx
index ed5999c279..5175fdc4a0 100644
--- a/gui/src/renderer/components/Marquee.tsx
+++ b/gui/src/renderer/components/Marquee.tsx
@@ -22,7 +22,7 @@ interface IMarqueeProps {
   children?: React.ReactNode;
 }
 
-interface IMarqueeState {
+interface IMarqueeState extends React.HTMLAttributes<HTMLSpanElement> {
   alignRight: boolean;
   // uniqueKey is used to force the Text component to remount to achieve the initial position of the
   // text without using a transition.
@@ -60,16 +60,18 @@ export default class Marquee extends React.Component<IMarqueeProps, IMarqueeStat
   }
 
   public render() {
+    const { children, ...otherProps } = this.props;
+
     return (
       <Container>
         <Text
           key={this.state.uniqueKey}
           ref={this.textRef}
-          className={this.props.className}
           overflow={this.calculateOverflow()}
           alignRight={this.state.alignRight}
-          onTransitionEnd={this.scheduleToggleAlignRight}>
-          {this.props.children}
+          onTransitionEnd={this.scheduleToggleAlignRight}
+          {...otherProps}>
+          {children}
         </Text>
       </Container>
     );
diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx
index 4d210ed2c2..0e282d88aa 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>{city}</StyledMarquee>
+        <StyledMarquee data-test-id="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>{country}</StyledMarquee>
+        <StyledMarquee data-test-id="country">{country}</StyledMarquee>
       </LocationRow>
     );
   }