Add test for ensuring country is set

3 files changed, 34 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>
     );
   }
diff --git a/gui/test/e2e/daemon/location.spec.ts b/gui/test/e2e/daemon/location.spec.ts
new file mode 100644
index 0000000000..15a86abb37
--- /dev/null
+++ b/gui/test/e2e/daemon/location.spec.ts
@@ -0,0 +1,26 @@
+import { expect, test } from '@playwright/test';
+import { Page } from 'playwright';
+
+import { GetByTestId } from '../utils';
+import { startAppWithDaemon } from './daemon-utils';
+
+let page: Page;
+let getByTestId: GetByTestId;
+
+test.beforeAll(async () => {
+  ({ page, getByTestId } = await startAppWithDaemon());
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test('App should have a country', async () => {
+  const countryLabel = getByTestId('country');
+  await expect(countryLabel).not.toBeEmpty();
+
+  const cityLabel = getByTestId('city');
+  const noCityLabel = await cityLabel.count() === 0;
+  expect(noCityLabel).toBeTruthy();
+});
+