From 90a29918d0752f3369992852c0bccbbb72546f93 Mon Sep 17 00:00:00 2001
From: depa panjie purnama <depa.article@gmail.com>
Date: Wed, 26 Oct 2022 23:29:37 +0700
Subject: [PATCH] feat: Create Collection e2e test (#50)

* add selector IDs
* add Create Collection e2e test
---
 .../components/RequestPane/QueryUrl/index.js  |  2 +-
 .../Sidebar/Collections/Collection/index.js   |  2 +-
 .../bruno-app/src/components/Welcome/index.js |  8 +++---
 tests/home.spec.js                            |  6 +++++
 tests/pages/home.page.js                      | 27 ++++++++++++++++---
 5 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
index 3fe81acd7..4c8bd24d0 100644
--- a/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
+++ b/packages/bruno-app/src/components/RequestPane/QueryUrl/index.js
@@ -49,7 +49,7 @@ const QueryUrl = ({ item, collection, handleRun }) => {
           spellCheck="false"
           onChange={(event) => onUrlChange(event.target.value)}
         />
-        <div className="flex items-center h-full mr-2 cursor-pointer" onClick={handleRun}>
+        <div className="flex items-center h-full mr-2 cursor-pointer" id="send-request" onClick={handleRun}>
           <SendIcon color={theme.requestTabPanel.url.icon} width={22}/>
         </div>
       </div>
diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js
index eec8ff4ea..37fc85132 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js
+++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js
@@ -82,7 +82,7 @@ const Collection = ({ collection, searchText }) => {
       <div className="flex py-1 collection-name items-center">
         <div className="flex flex-grow items-center" onClick={handleClick}>
           <IconChevronRight size={16} strokeWidth={2} className={iconClassName} style={{ width: 16, color: 'rgb(160 160 160)' }} />
-          <div className="ml-1">{collection.name}</div>
+          <div className="ml-1" id="sidebar-collection-name">{collection.name}</div>
         </div>
         <div className="collection-actions">
           <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement="bottom-start">
diff --git a/packages/bruno-app/src/components/Welcome/index.js b/packages/bruno-app/src/components/Welcome/index.js
index b893684e8..09801843a 100644
--- a/packages/bruno-app/src/components/Welcome/index.js
+++ b/packages/bruno-app/src/components/Welcome/index.js
@@ -73,23 +73,23 @@ const Welcome = () => {
       <div className="mt-4 flex items-center collection-options select-none">
         <div className="flex items-center">
           <IconPlus size={18} strokeWidth={2} />
-          <span className="label ml-2" onClick={() => setCreateCollectionModalOpen(true)}>
+          <span className="label ml-2" id="create-collection" onClick={() => setCreateCollectionModalOpen(true)}>
             Create Collection
           </span>
         </div>
         <div className="flex items-center ml-6">
           <IconFiles size={18} strokeWidth={2} />
-          <span className="label ml-2" onClick={() => setAddCollectionToWSModalOpen(true)}>
+          <span className="label ml-2" id="add-collection" onClick={() => setAddCollectionToWSModalOpen(true)}>
             Add Collection to Workspace
           </span>
         </div>
         <div className="flex items-center ml-6" onClick={handleImportCollection}>
           <IconUpload size={18} strokeWidth={2} />
-          <span className="label ml-2">Import Collection</span>
+          <span className="label ml-2" id="import-collection">Import Collection</span>
         </div>
         <div className="flex items-center ml-6" onClick={handleImportSampleCollection}>
           <IconPlayerPlay size={18} strokeWidth={2} />
-          <span className="label ml-2">Load Sample Collection</span>
+          <span className="label ml-2" id="load-sample-collection">Load Sample Collection</span>
         </div>
       </div>
 
diff --git a/tests/home.spec.js b/tests/home.spec.js
index 7509e62b7..de85ae11a 100644
--- a/tests/home.spec.js
+++ b/tests/home.spec.js
@@ -14,6 +14,7 @@ test.describe('bruno e2e test', () => {
 
   test('user should be able to load & use sample collection', async () => {
     await homePage.loadSampleCollection();
+    await expect(homePage.loadSampleCollectionToastSuccess).toBeVisible();
 
     await homePage.getUsers();
     await expect(homePage.statusRequestSuccess).toBeVisible();
@@ -31,4 +32,9 @@ test.describe('bruno e2e test', () => {
     await expect(homePage.statusRequestSuccess).toBeVisible();
   });
 
+  test('user should be able to create new collection', async () => {
+    await homePage.createCollection('test');
+    await expect(homePage.createCollectionToastSuccess).toBeVisible();
+  })
+
 });
diff --git a/tests/pages/home.page.js b/tests/pages/home.page.js
index abcfc9df4..c0357cb16 100644
--- a/tests/pages/home.page.js
+++ b/tests/pages/home.page.js
@@ -1,17 +1,32 @@
 exports.HomePage = class HomePage {
   constructor(page) {
     this.page = page;
-    this.loadSampleCollectionSelector = page.getByText('Load Sample Collection');
-    this.sampeCollectionSelector = page.getByText('sample-collection');
+    
+    // welcome
+    this.createCollectionSelector = page.locator('#create-collection');
+    this.addCollectionSelector = page.locator('#add-collection');
+    this.importCollectionSelector = page.locator('#import-collection');
+    this.loadSampleCollectionSelector = page.locator('#load-sample-collection');
+
+    // sample collection
+    this.loadSampleCollectionToastSuccess = page.getByText('Sample Collection loaded successfully');
+    this.sampeCollectionSelector = page.locator('#sidebar-collection-name');
     this.getUsersSelector = page.getByText('Users');
     this.getSingleUserSelector = page.getByText('Single User');
     this.getUserNotFoundSelector = page.getByText('User Not Found');
     this.postCreateSelector = page.getByText('Create');
     this.putUpdateSelector = page.getByText('Update');
-    this.sendRequestButton = page.locator('div:nth-child(2) > .flex > svg');
+
+    // request panel
+    this.sendRequestButton = page.locator('#send-request');
     this.statusRequestSuccess = page.getByText('200 OK');
     this.statusRequestNotFound = page.getByText('404 Not Found');
     this.statusRequestCreated = page.getByText('201 Created');
+    
+    // create collection
+    this.collectionNameField = page.locator('#collection-name');
+    this.submitButton = page.locator(`button[type='submit']`);
+    this.createCollectionToastSuccess = page.getByText('Collection created');
   }
 
   async open() {
@@ -47,4 +62,10 @@ exports.HomePage = class HomePage {
     await this.putUpdateSelector.click();
     await this.sendRequestButton.click();
   }
+
+  async createCollection(collectionName) {
+    await this.createCollectionSelector.click();
+    await this.collectionNameField.fill(collectionName);
+    await this.submitButton.click();
+  }
 }