Merge branch 'add-custom-bridge-test-des-820'

5 files changed, 26 insertions, 6 deletions

diff --git a/gui/src/renderer/components/EditCustomBridge.tsx b/gui/src/renderer/components/EditCustomBridge.tsx
index 2692217ea0..7cc403aa6e 100644
--- a/gui/src/renderer/components/EditCustomBridge.tsx
+++ b/gui/src/renderer/components/EditCustomBridge.tsx
@@ -95,7 +95,11 @@ function CustomBridgeForm() {
                     <SmallButton key="cancel" onClick={hideDeleteDialog}>
                       {messages.gettext('Cancel')}
                     </SmallButton>,
-                    <SmallButton key="delete" color={SmallButtonColor.red} onClick={onDelete}>
+                    <SmallButton
+                      key="delete"
+                      color={SmallButtonColor.red}
+                      onClick={onDelete}
+                      data-testid="delete-confirm">
                       {messages.gettext('Delete')}
                     </SmallButton>,
                   ]}
diff --git a/gui/src/renderer/components/OpenVpnSettings.tsx b/gui/src/renderer/components/OpenVpnSettings.tsx
index dee1e64089..5013b158f8 100644
--- a/gui/src/renderer/components/OpenVpnSettings.tsx
+++ b/gui/src/renderer/components/OpenVpnSettings.tsx
@@ -269,6 +269,7 @@ function BridgeModeSelector() {
         label: messages.gettext('On'),
         value: 'on',
         disabled: tunnelProtocol !== 'openvpn' || transportProtocol === 'udp',
+        'data-testid': 'bridge-mode-on',
       },
       {
         label: messages.gettext('Off'),
@@ -367,7 +368,7 @@ function BridgeModeSelector() {
           <SmallButton key="cancel" onClick={hideConfirmationDialog}>
             {messages.gettext('Cancel')}
           </SmallButton>,
-          <SmallButton key="confirm" onClick={confirmBridgeState}>
+          <SmallButton key="confirm" onClick={confirmBridgeState} data-testid="enable-confirm">
             {messages.gettext('Enable')}
           </SmallButton>,
         ]}
diff --git a/gui/src/renderer/components/cell/Selector.tsx b/gui/src/renderer/components/cell/Selector.tsx
index e527017435..5e5d685a59 100644
--- a/gui/src/renderer/components/cell/Selector.tsx
+++ b/gui/src/renderer/components/cell/Selector.tsx
@@ -16,6 +16,8 @@ export interface SelectorItem<T> {
   label: string;
   value: T;
   disabled?: boolean;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  'data-testid'?: string;
 }
 
 // T represents the available values and U represent the value of "Automatic"/"Any" if there is one.
@@ -51,7 +53,8 @@ export default function Selector<T, U>(props: SelectorProps<T, U>) {
         isSelected={selected}
         disabled={props.disabled || item.disabled}
         forwardedRef={ref}
-        onSelect={props.onSelect}>
+        onSelect={props.onSelect}
+        data-testid={item['data-testid']}>
         {item.label}
       </SelectorCell>
     );
@@ -133,6 +136,8 @@ interface SelectorCellProps<T> {
   onSelect: (value: T) => void;
   children: React.ReactNode | Array<React.ReactNode>;
   forwardedRef?: React.Ref<HTMLButtonElement>;
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  'data-testid'?: string;
 }
 
 function SelectorCell<T>(props: SelectorCellProps<T>) {
@@ -150,7 +155,8 @@ function SelectorCell<T>(props: SelectorCellProps<T>) {
       disabled={props.disabled}
       role="option"
       aria-selected={props.isSelected}
-      aria-disabled={props.disabled}>
+      aria-disabled={props.disabled}
+      data-testid={props['data-testid']}>
       <StyledCellIcon
         $visible={props.isSelected}
         source="icon-tick"
diff --git a/gui/src/renderer/components/select-location/SpecialLocationList.tsx b/gui/src/renderer/components/select-location/SpecialLocationList.tsx
index 9579a6b4b5..a347638b0e 100644
--- a/gui/src/renderer/components/select-location/SpecialLocationList.tsx
+++ b/gui/src/renderer/components/select-location/SpecialLocationList.tsx
@@ -108,7 +108,8 @@ export function CustomBridgeLocationRow(
   const history = useHistory();
 
   const bridgeSettings = useSelector((state) => state.settings.bridgeSettings);
-  const icon = bridgeSettings.custom !== undefined ? 'icon-edit' : 'icon-add';
+  const bridgeConfigured = bridgeSettings.custom !== undefined;
+  const icon = bridgeConfigured ? 'icon-edit' : 'icon-add';
 
   const selectedRef = props.source.selected ? props.selectedElementRef : undefined;
   const background = getButtonColor(props.source.selected, 0, props.source.disabled);
@@ -135,7 +136,14 @@ export function CustomBridgeLocationRow(
           'A custom bridge server can be used to circumvent censorship when regular Mullvad bridge servers don’t work.',
         )}
       />
-      <StyledLocationRowIcon {...background} onClick={navigate}>
+      <StyledLocationRowIcon
+        {...background}
+        aria-label={
+          bridgeConfigured
+            ? messages.pgettext('accessibility', 'Edit custom bridge')
+            : messages.pgettext('accessibility', 'Add new custom bridge')
+        }
+        onClick={navigate}>
         <StyledSpecialLocationSideButton
           source={icon}
           width={18}
diff --git a/gui/src/renderer/components/select-location/select-location-hooks.ts b/gui/src/renderer/components/select-location/select-location-hooks.ts
index 08ed2dccf3..027185e416 100644
--- a/gui/src/renderer/components/select-location/select-location-hooks.ts
+++ b/gui/src/renderer/components/select-location/select-location-hooks.ts
@@ -121,6 +121,7 @@ export function useOnSelectBridgeLocation() {
         case SpecialBridgeLocationType.closestToExit:
           return setLocation(
             bridgeSettingsModifier((bridgeSettings) => {
+              bridgeSettings.type = 'normal';
               bridgeSettings.normal.location = 'any';
               return bridgeSettings;
             }),