Add GUI test for API access methods

4 files changed, 20 insertions, 4 deletions

diff --git a/gui/src/renderer/components/ApiAccessMethods.tsx b/gui/src/renderer/components/ApiAccessMethods.tsx
index 0774fcc320..b5cffddc94 100644
--- a/gui/src/renderer/components/ApiAccessMethods.tsx
+++ b/gui/src/renderer/components/ApiAccessMethods.tsx
@@ -231,7 +231,7 @@ function ApiAccessMethod(props: ApiAccessMethodProps) {
   }, [props.method.id, props.inUse, setApiAccessMethod, testApiAccessMethod, history.push]);
 
   return (
-    <Cell.Row>
+    <Cell.Row data-testid="access-method">
       <Cell.LabelContainer>
         <StyledNameLabel>{props.method.name}</StyledNameLabel>
         {testing && (
diff --git a/gui/src/renderer/components/ContextMenu.tsx b/gui/src/renderer/components/ContextMenu.tsx
index f80b456d46..165c284eca 100644
--- a/gui/src/renderer/components/ContextMenu.tsx
+++ b/gui/src/renderer/components/ContextMenu.tsx
@@ -84,10 +84,18 @@ export function ContextMenuContainer(props: React.PropsWithChildren) {
   );
 }
 
+const StyledTrigger = styled.button({
+  borderWidth: 0,
+  padding: 0,
+  margin: 0,
+  cursor: 'default',
+  backgroundColor: 'transparent',
+});
+
 export function ContextMenuTrigger(props: React.PropsWithChildren) {
   const { toggleVisibility } = useContext(menuContext);
 
-  return <div onClick={toggleVisibility}>{props.children}</div>;
+  return <StyledTrigger onClick={toggleVisibility}>{props.children}</StyledTrigger>;
 }
 
 interface StyledMenuProps {
diff --git a/gui/src/renderer/components/EditApiAccessMethod.tsx b/gui/src/renderer/components/EditApiAccessMethod.tsx
index ecb633ae98..b5b3bd6d48 100644
--- a/gui/src/renderer/components/EditApiAccessMethod.tsx
+++ b/gui/src/renderer/components/EditApiAccessMethod.tsx
@@ -434,7 +434,13 @@ function EditShadowsocks(props: EditMethodProps<ShadowsocksAccessMethod>) {
       </SettingsRow>
 
       <SettingsRow label={messages.gettext('Cipher')}>
-        <SettingsSelect direction="up" defaultValue={cipher} onUpdate={setCipher} items={ciphers} />
+        <SettingsSelect
+          data-testid="ciphers"
+          direction="up"
+          defaultValue={cipher}
+          onUpdate={setCipher}
+          items={ciphers}
+        />
       </SettingsRow>
     </SettingsGroup>
   );
diff --git a/gui/src/renderer/components/cell/SettingsSelect.tsx b/gui/src/renderer/components/cell/SettingsSelect.tsx
index dd5f9b3b7e..4286cda1e2 100644
--- a/gui/src/renderer/components/cell/SettingsSelect.tsx
+++ b/gui/src/renderer/components/cell/SettingsSelect.tsx
@@ -87,6 +87,8 @@ interface SettingsSelectProps<T extends string> {
   items: Array<SettingsSelectItem<T>>;
   onUpdate: (value: T) => void;
   direction?: 'down' | 'up';
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  'data-testid'?: string;
 }
 
 export function SettingsSelect<T extends string>(props: SettingsSelectProps<T>) {
@@ -142,7 +144,7 @@ export function SettingsSelect<T extends string>(props: SettingsSelectProps<T>)
   return (
     <AriaInput>
       <StyledSelect onBlur={closeDropdown} onKeyDown={onKeyDown} role="listbox">
-        <StyledSelectedContainer onClick={toggleDropdown}>
+        <StyledSelectedContainer data-testid={props['data-testid']} onClick={toggleDropdown}>
           <StyledSelectedContainerInner>
             <StyledSelectedText>
               {props.items.find((item) => item.value === value)?.label ?? ''}