fix tests, add test for offer update

src/components/GiftedDialog.vue

@@ -55,7 +55,7 @@
             }"
             class="text-blue-500"
           >
-            Photo & Details ...
+            Photo & more options ...
           </router-link>
         </span>
       </div>

src/components/OfferDialog.vue

@@ -54,7 +54,7 @@
             }"
             class="text-blue-500"
           >
-            Conditions, expiration...
+            Conditions & more options...
           </router-link>
         </span>
       </div>

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>

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"

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

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