add: tests for grpc requests

feat: add common selectors to locator.ts

fix: add dataTestId prop

update locator

Author: sanish-bruno

packages/bruno-app/src/components/Accordion/index.js

@@ -4,7 +4,7 @@ import { AccordionItem, AccordionHeader, AccordionContent } from './styledWrappe
 
 const AccordionContext = createContext();
 
-const Accordion = ({ children, defaultIndex }) => {
+const Accordion = ({ children, defaultIndex, dataTestId }) => {
   const [openIndex, setOpenIndex] = useState(defaultIndex);
 
   const toggleItem = (index) => {
@@ -13,7 +13,7 @@ const Accordion = ({ children, defaultIndex }) => {
 
   return (
     <AccordionContext.Provider value={{ openIndex, toggleItem }}>
-      <div>{children}</div>
+      <div data-testid={dataTestId}>{children}</div>
     </AccordionContext.Provider>
   );
 };

packages/bruno-app/src/components/RequestPane/GrpcBody/index.js

@@ -187,6 +187,7 @@ const SingleGrpcMessage = ({ message, item, collection, index, methodType, isCol
                 onClick={onSend}
                 disabled={!isConnectionActive}
                 className={`p-1 rounded ${isConnectionActive ? 'hover:bg-zinc-200 dark:hover:bg-zinc-600' : 'opacity-50 cursor-not-allowed'} transition-colors`}
+                data-testid={`grpc-send-message-${index}`}
               >
                 <IconSend
                   size={16}
@@ -300,6 +301,7 @@ const GrpcBody = ({ item, collection, handleRun }) => {
       <div
         ref={messagesContainerRef}
         id="grpc-messages-container"
+        data-testid="grpc-messages-container"
         className={`flex-1 ${body.grpc.length === 1 || !canClientSendMultipleMessages ? 'h-full' : 'overflow-y-auto'} ${canClientSendMultipleMessages && 'pb-16'}`}
       >
         {body.grpc
@@ -326,6 +328,7 @@ const GrpcBody = ({ item, collection, handleRun }) => {
             <button
               onClick={addNewMessage}
               className="add-message-btn flex items-center justify-center gap-2 py-2 px-4 rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-700 hover:bg-neutral-200 dark:hover:bg-neutral-600 transition-colors shadow-md"
+              data-testid="grpc-add-message-button"
             >
               <IconPlus size={16} strokeWidth={1.5} className="text-neutral-700 dark:text-neutral-300" />
               <span className="font-medium text-sm text-neutral-700 dark:text-neutral-300">Add Message</span>

packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/MethodDropdown/index.js

@@ -73,7 +73,7 @@ const MethodDropdown = ({
 
   const MethodsDropdownIcon = forwardRef((props, ref) => {
     return (
-      <div ref={ref} className="flex items-center justify-center ml-2 cursor-pointer select-none">
+      <div ref={ref} className="flex items-center justify-center ml-2 cursor-pointer select-none" data-testid="grpc-method-dropdown-trigger">
         {selectedGrpcMethod && <div className="mr-2">{getIconForMethodType(selectedGrpcMethod.type)}</div>}
         <span className="text-xs">
           {selectedGrpcMethod ? (

packages/bruno-app/src/components/RequestPane/GrpcQueryUrl/index.js

@@ -389,19 +389,21 @@ const GrpcQueryUrl = ({ item, collection, handleRun }) => {
 
           {isConnectionActive && isStreamingMethod && (
             <div className="connection-controls relative flex items-center h-full gap-3">
-              <div className="infotip" onClick={handleCancelConnection}>
+              <div className="infotip" onClick={handleCancelConnection} data-testid="grpc-cancel-connection-button">
                 <IconX color={theme.requestTabs.icon.color} strokeWidth={1.5} size={22} className="cursor-pointer" />
                 <span className="infotip-text text-xs">Cancel</span>
               </div>
 
-            {isClientStreamingMethod && <div onClick={handleEndConnection}>
-                <IconCheck
-                  color={theme.colors.text.green}
-                  strokeWidth={2}
-                  size={22}
-                  className="cursor-pointer"
-                />
-              </div>}
+              {isClientStreamingMethod && (
+                <div onClick={handleEndConnection} data-testid="grpc-end-connection-button">
+                  <IconCheck
+                    color={theme.colors.text.green}
+                    strokeWidth={2}
+                    size={22}
+                    className="cursor-pointer"
+                  />
+                </div>
+              )}
             </div>
           )}
 

packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/GrpcQueryResult/index.js

@@ -61,13 +61,13 @@ const GrpcQueryResult = ({ item, collection }) => {
   }
 
   return (
-    <StyledWrapper className="w-full h-full relative flex flex-col mt-2">
+    <StyledWrapper className="w-full h-full relative flex flex-col mt-2" data-testid="grpc-response-content">
       {hasError && showErrorMessage && <GrpcError error={errorMessage} onClose={() => setShowErrorMessage(false)} />}
       {hasResponses && (
-        <div className={`overflow-y-auto ${responsesList.length === 1 ? 'flex-1' : ''}`}>
+        <div className={`overflow-y-auto ${responsesList.length === 1 ? 'flex-1' : ''}`} data-testid="grpc-responses-container">
           {responsesList.length === 1 ? (
             // Single message - render directly without accordion
-            <div className="h-full">
+            <div className="h-full" data-testid="grpc-single-response">
               <CodeEditor
                 collection={collection}
                 font={get(preferences, 'font.codeFont', 'default')}
@@ -80,13 +80,13 @@ const GrpcQueryResult = ({ item, collection }) => {
             </div>
           ) : (
             // Multiple messages - use accordion
-            <Accordion defaultIndex={0}>
+            <Accordion defaultIndex={0} dataTestId="grpc-responses-accordion">
               {reversedResponsesList.map((response, index) => {
                 // Calculate the original response number (for display purposes)
                 const originalIndex = responsesList.length - index - 1;
 
                 return (
-                  <Accordion.Item key={originalIndex} index={index}>
+                  <Accordion.Item key={originalIndex} index={index} data-testid={`grpc-response-item-${originalIndex}`}>
                     <Accordion.Header index={index} style={{ padding: '8px 12px', minHeight: '40px' }}>
                       <div className="flex justify-between w-full">
                         <div className="font-medium">

packages/bruno-app/src/components/ResponsePane/GrpcResponsePane/index.js

@@ -108,7 +108,7 @@ const GrpcResponsePane = ({ item, collection }) => {
 
   return (
     <StyledWrapper className="flex flex-col h-full relative">
-      <div className="flex flex-wrap items-center pl-3 pr-4 tabs" role="tablist">
+      <div className="flex flex-wrap items-center pl-3 pr-4 tabs" role="tablist" data-testid="grpc-response-tabs">
         {tabConfig.map((tab) => (
           <Tab
             key={tab.name}

packages/bruno-app/src/components/Tab/index.js

@@ -11,10 +11,11 @@ const Tab = ({ name, label, isActive, onClick, count = 0, className = '', ...pro
       className={tabClassName} 
       role="tab" 
       onClick={() => onClick(name)}
+      data-testid={`tab-${name}`}
       {...props}
     >
       {label}
-      {count > 0 && <sup className="ml-1 font-medium">{count}</sup>}
+      {count > 0 && <sup className="ml-1 font-medium" data-testid={`tab-${name}-count`}>{count}</sup>}
     </div>
   );
 };

tests/grpc/make-request/collection/HelloService/BidiHello.bru

@@ -0,0 +1,31 @@
+meta {
+  name: BidiHello
+  type: grpc
+  seq: 4
+}
+
+grpc {
+  url: {{host}}
+  method: /hello.HelloService/BidiHello
+  body: grpc
+  auth: inherit
+  methodType: bidi-streaming
+}
+
+body:grpc {
+  name: message 1
+  content: '''
+    {
+      "greeting": "cuius"
+    }
+  '''
+}
+
+body:grpc {
+  name: message 2
+  content: '''
+    {
+      "greeting": "adfectus"
+    }
+  '''
+}

tests/grpc/make-request/collection/HelloService/LotOfGreetings.bru

@@ -0,0 +1,31 @@
+meta {
+  name: LotOfGreetings
+  type: grpc
+  seq: 3
+}
+
+grpc {
+  url: {{host}}
+  method: /hello.HelloService/LotsOfGreetings
+  body: grpc
+  auth: inherit
+  methodType: client-streaming
+}
+
+body:grpc {
+  name: message 1
+  content: '''
+    {
+      "greeting": "sortitus"
+    }
+  '''
+}
+
+body:grpc {
+  name: message 2
+  content: '''
+    {
+      "greeting": "porro"
+    }
+  '''
+}

tests/grpc/make-request/collection/HelloService/LotOfReplies.bru

@@ -0,0 +1,22 @@
+meta {
+  name: LotOfReplies
+  type: grpc
+  seq: 2
+}
+
+grpc {
+  url: {{host}}
+  method: /hello.HelloService/LotsOfReplies
+  body: grpc
+  auth: inherit
+  methodType: server-streaming
+}
+
+body:grpc {
+  name: message 1
+  content: '''
+    {
+      "greeting": "suadeo"
+    }
+  '''
+}