From 1a4052d1a0dd56c1a99a16cc96ee6006dd5b63e3 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Sun, 18 Aug 2024 13:48:07 -0600
Subject: [PATCH] fix tests, add test for offer update

---
 src/components/GiftedDialog.vue         |  2 +-
 src/components/OfferDialog.vue          |  2 +-
 src/views/ClaimView.vue                 |  9 +++---
 src/views/NewEditProjectView.vue        |  2 ++
 src/views/OfferDetailsView.vue          |  3 +-
 test-playwright/50-record-offer.spec.ts | 39 +++++++++++++++++++++----
 6 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/src/components/GiftedDialog.vue b/src/components/GiftedDialog.vue
index 7b9b520ff..b23400d3d 100644
--- a/src/components/GiftedDialog.vue
+++ b/src/components/GiftedDialog.vue
@@ -55,7 +55,7 @@
             }"
             class="text-blue-500"
           >
-            Photo & Details ...
+            Photo & more options ...
           </router-link>
         </span>
       </div>
diff --git a/src/components/OfferDialog.vue b/src/components/OfferDialog.vue
index f20857120..0d7fab770 100644
--- a/src/components/OfferDialog.vue
+++ b/src/components/OfferDialog.vue
@@ -54,7 +54,7 @@
             }"
             class="text-blue-500"
           >
-            Conditions, expiration...
+            Conditions & more options...
           </router-link>
         </span>
       </div>
diff --git a/src/views/ClaimView.vue b/src/views/ClaimView.vue
index 7ec60b59f..8d28050ed 100644
--- a/src/views/ClaimView.vue
+++ b/src/views/ClaimView.vue
@@ -30,8 +30,9 @@
               "
               @click="onClickEditClaim"
               title="Edit"
+              data-testId="editClaimButton"
             >
-              <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1"></fa>
+              <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
             </button>
           </h2>
           <div class="text-sm">
@@ -50,11 +51,11 @@
               </button>
               <span v-show="showIdCopy">Copied ID</span>
             </div>
-            <div>
+            <div data-testId="description">
               <fa icon="message" class="fa-fw text-slate-400" />
               {{
-                veriClaim.claim?.description ||
-                veriClaim.claim?.itemOffered?.description
+                veriClaim.claim?.itemOffered?.description ||
+                veriClaim.claim?.description
               }}
             </div>
             <div>
diff --git a/src/views/NewEditProjectView.vue b/src/views/NewEditProjectView.vue
index 0e167e15e..c48613573 100644
--- a/src/views/NewEditProjectView.vue
+++ b/src/views/NewEditProjectView.vue
@@ -91,11 +91,13 @@
     <div class="flex mb-4 columns-3 w-full">
       <input
         v-model="startDateInput"
+        placeholder="Start Date"
         type="date"
         class="col-span-1 w-full rounded border border-slate-400 px-3 py-2"
       />
       <input
         :disabled="!startDateInput"
+        placeholder="Start Time"
         v-model="startTimeInput"
         type="time"
         class="col-span-1 w-full rounded border border-slate-400 ml-2 px-3 py-2"
diff --git a/src/views/OfferDetailsView.vue b/src/views/OfferDetailsView.vue
index a733d5d39..fc26305bb 100644
--- a/src/views/OfferDetailsView.vue
+++ b/src/views/OfferDetailsView.vue
@@ -36,6 +36,7 @@
       class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
       placeholder="What was offered"
       v-model="itemDescription"
+      data-testId="itemDescription"
     />
     <div class="flex flex-row justify-center">
       <span
@@ -54,6 +55,7 @@
         type="number"
         class="border border-r-0 border-slate-400 px-2 py-2 text-center w-20"
         v-model="amountInput"
+        data-testId="inputOfferAmount"
       />
       <div
         class="rounded-r border border-slate-400 bg-slate-200 px-4 py-2"
@@ -173,7 +175,6 @@
 </template>
 
 <script lang="ts">
-import { DateTime } from "luxon";
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
diff --git a/test-playwright/50-record-offer.spec.ts b/test-playwright/50-record-offer.spec.ts
index c3d5aacd0..671af2da3 100644
--- a/test-playwright/50-record-offer.spec.ts
+++ b/test-playwright/50-record-offer.spec.ts
@@ -6,7 +6,7 @@ test('Record an offer', async ({ page }) => {
   const randomString = Math.random().toString(36).substring(2, 8);
   // Standard title prefix
   const finalTitle = `Offering of ${randomString}`;
-  const randomNonZeroNumber = Math.floor(Math.random() * 999) + 1;
+  const randomNonZeroNumber = Math.floor(Math.random() * 998) + 1;
 
   // Create new ID for default user
   await importUser(page);
@@ -22,12 +22,41 @@ test('Record an offer', async ({ page }) => {
   await page.getByRole('button', { name: 'Sign & Send' }).click();
   await expect(page.getByText('That offer was recorded.')).toBeVisible();
 
-  // Refresh home view and check gift
+  // go to the offer and check the values
   await page.goto('./projects');
   await page.locator('li').filter({ hasText: finalTitle }).locator('a').first().click();
   await expect(page.getByRole('heading', { name: 'Verifiable Claim Details' })).toBeVisible();
   await expect(page.getByText(finalTitle, { exact: true })).toBeVisible();
-  const page1Promise = page.waitForEvent('popup');
+  const serverPagePromise = page.waitForEvent('popup');
   await page.getByRole('link', { name: 'View on the Public Server' }).click();
-  const page1 = await page1Promise;
-});
\ No newline at end of file
+  const serverPage = await serverPagePromise;
+  await serverPage.getByText(finalTitle);
+  await serverPage.getByText('did:none:HIDDEN');
+
+  // Now update that offer
+
+  // find the edit page and check the old values again
+  await page.goto('./projects');
+  await page.locator('li').filter({ hasText: finalTitle }).locator('a').first().click();
+  await page.getByTestId('editClaimButton').click();
+  await page.locator('heading', { hasText: 'What was offered' }).isVisible();
+  const itemDesc = await page.getByTestId('itemDescription');
+  await expect(itemDesc).toHaveValue(finalTitle);
+  const amount = await page.getByTestId('inputOfferAmount');
+  await expect(amount).toHaveValue(randomNonZeroNumber.toString());
+  // update the values
+  await itemDesc.fill('Updated ' + finalTitle);
+  await amount.fill(String(randomNonZeroNumber + 1));
+  await page.getByRole('button', { name: 'Sign & Send' }).click();
+
+  // go to the offer claim again and check the updated values
+  await page.goto('./projects');
+  await page.locator('li').filter({ hasText: finalTitle }).locator('a').first().click();
+  const newItemDesc = await page.getByTestId('description');
+  await expect(newItemDesc).toHaveText(finalTitle);
+
+  // go to edit page
+  await page.getByTestId('editClaimButton').click();
+  const newAmount = await page.getByTestId('inputOfferAmount');
+  await expect(newAmount).toHaveValue(randomNonZeroNumber.toString());
+});