feat: Create New Request e2e test (#52)

* add selector ID
* add createNewRequest flow
* selector update

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" />

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();