Merge branch 'main' of github.com:usebruno/bruno

package.json

@@ -18,6 +18,7 @@
   "scripts": {
     "dev:web": "npm run dev --workspace=packages/bruno-app",
     "build:web": "npm run build --workspace=packages/bruno-app",
+    "prettier:web":"npm run prettier --workspace=packages/bruno-app",
     "dev:electron": "npm run dev --workspace=packages/bruno-electron",
     "build:chrome-extension": "./scripts/build-chrome-extension.sh",
     "build:electron": "./scripts/build-electron.sh",

packages/bruno-app/src/components/RequestPane/QueryUrl/HttpMethodSelector/index.js

@@ -10,7 +10,7 @@ const HttpMethodSelector = ({ method, onMethodSelect }) => {
   const Icon = forwardRef((props, ref) => {
     return (
       <div ref={ref} className="flex w-full items-center pl-3 py-1 select-none uppercase">
-        <div className="flex-grow font-medium">{method}</div>
+        <div className="flex-grow font-medium" id="create-new-request-method">{method}</div>
         <div>
           <IconCaretDown className="caret ml-2 mr-2" size={14} strokeWidth={2} />
         </div>

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

@@ -119,7 +119,7 @@ const RequestTabs = () => {
                   </div>
                 </li>
               ) : null}
-              <li className="select-none short-tab" onClick={createNewTab}>
+              <li className="select-none short-tab" id="create-new-tab" onClick={createNewTab}>
                 <div className="flex items-center">
                   <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 16 16">
                     <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />

packages/bruno-app/src/components/Welcome/StyledWrapper.js

@@ -11,13 +11,14 @@ const StyledWrapper = styled.div`
   }
 
   .collection-options {
+    cursor: pointer;
+
     svg {
       position: relative;
       top: -1px;
     }
 
     .label {
-      cursor: pointer;
       &:hover {
         text-decoration: underline;
       }

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

@@ -65,15 +65,15 @@ const Welcome = () => {
 
       <div className="uppercase font-semibold heading mt-10">Collections</div>
       <div className="mt-4 flex items-center collection-options select-none">
-        <div className="flex items-center">
+        <div className="flex items-center" onClick={() => setCreateCollectionModalOpen(true)}>
           <IconPlus size={18} strokeWidth={2} />
-          <span className="label ml-2" id="create-collection" onClick={() => setCreateCollectionModalOpen(true)}>
+          <span className="label ml-2" id="create-collection">
             Create Collection
           </span>
         </div>
-        <div className="flex items-center ml-6">
+        <div className="flex items-center ml-6" onClick={() => setAddCollectionToWSModalOpen(true)}>
           <IconFiles size={18} strokeWidth={2} />
-          <span className="label ml-2" id="add-collection" onClick={() => setAddCollectionToWSModalOpen(true)}>
+          <span className="label ml-2" id="add-collection">
             Add Collection to Workspace
           </span>
         </div>

readme.md

@@ -48,7 +48,7 @@ Woof! If you like project, hit that ⭐ button !!
 
 ### Stay in touch 🌐
 [Twitter](https://twitter.com/use_bruno) <br />
-[Website](https://www.usebruno.com)
+[Website](https://www.usebruno.com) <br />
 [Discord](https://discord.com/invite/KgcZUncpjq)
 
 ### License 📄

tests/home.spec.js

@@ -1,6 +1,6 @@
 const { test, expect } = require('@playwright/test');
-const { faker } = require('@faker-js/faker');
 const { HomePage } = require('../tests/pages/home.page');
+import * as faker from './utils/data-faker';
 
 test.describe('bruno e2e test', () => {
   let homePage;
@@ -13,9 +13,22 @@ test.describe('bruno e2e test', () => {
     await expect(page).toHaveTitle(/bruno/);
   });
 
+  test('user should be able to create new collection & new request', async () => {
+    await homePage.createNewCollection(faker.randomWords);
+    await expect(homePage.createNewCollectionSuccessToast).toBeVisible();
+
+    // using fake data to simulate negative case
+    await homePage.createNewRequest(faker.randomVerb, faker.randomHttpMethod, faker.randomUrl);
+    await expect(homePage.networkErrorToast).toBeVisible();
+
+    // using real data to simulate positive case
+    await homePage.createNewRequest('Single User', 'GET', 'https://reqres.in/api/users/2');
+    await expect(homePage.statusRequestSuccess).toBeVisible();
+  });
+
   test('user should be able to load & use sample collection', async () => {
     await homePage.loadSampleCollection();
-    await expect(homePage.loadSampleCollectionToastSuccess).toBeVisible();
+    await expect(homePage.loadSampleCollectionSuccessToast).toBeVisible();
 
     await homePage.getUsers();
     await expect(homePage.statusRequestSuccess).toBeVisible();
@@ -33,9 +46,4 @@ test.describe('bruno e2e test', () => {
     await expect(homePage.statusRequestSuccess).toBeVisible();
   });
 
-  test('user should be able to create new collection', async () => {
-    await homePage.createCollection(faker.random.words());
-    await expect(homePage.createCollectionToastSuccess).toBeVisible();
-  })
-
 });

tests/pages/home.page.js

@@ -9,7 +9,7 @@ exports.HomePage = class HomePage {
     this.loadSampleCollectionSelector = page.locator('#load-sample-collection');
 
     // sample collection
-    this.loadSampleCollectionToastSuccess = page.getByText('Sample Collection loaded successfully');
+    this.loadSampleCollectionSuccessToast = page.getByText('Sample Collection loaded successfully');
     this.sampeCollectionSelector = page.locator('#sidebar-collection-name');
     this.getUsersSelector = page.getByText('Users');
     this.getSingleUserSelector = page.getByText('Single User');
@@ -26,7 +26,12 @@ exports.HomePage = class HomePage {
     // create collection
     this.collectionNameField = page.locator('#collection-name');
     this.submitButton = page.locator(`button[type='submit']`);
-    this.createCollectionToastSuccess = page.getByText('Collection created');
+    this.createNewCollectionSuccessToast = page.getByText('Collection created');
+    this.createNewTab = page.locator('#create-new-tab');
+    this.requestNameField = page.locator('input[name="requestName"]');
+    this.methodName = page.locator('#create-new-request-method').first();
+    this.requestUrlField = page.locator('#request-url');
+    this.networkErrorToast = page.getByText('Network Error');
   }
 
   async open() {
@@ -63,9 +68,19 @@ exports.HomePage = class HomePage {
     await this.sendRequestButton.click();
   }
 
-  async createCollection(collectionName) {
+  async createNewCollection(collectionName) {
     await this.createCollectionSelector.click();
     await this.collectionNameField.fill(collectionName);
     await this.submitButton.click();
   }
+
+  async createNewRequest(name, method, endpoint) {
+    await this.createNewTab.click();
+    await this.requestNameField.fill(name);
+    await this.methodName.click();
+    await this.page.click(`text=${method}`);
+    await this.requestUrlField.fill(endpoint);
+    await this.submitButton.click();
+    await this.sendRequestButton.click();
+  }
 }

tests/utils/data-faker.js

@@ -0,0 +1,6 @@
+const { faker } = require('@faker-js/faker');
+
+export let randomWords = faker.random.words();
+export let randomVerb = faker.hacker.verb();
+export let randomHttpMethod = faker.internet.httpMethod();
+export let randomUrl = faker.internet.url();