From 7cba232e4442fda5ff528add29f7e3cb5e2413ef Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Tue, 20 Aug 2024 20:05:04 -0600
Subject: [PATCH] fix tests

---
 playwright.config-local.ts                     |  2 +-
 src/views/ContactsView.vue                     | 17 ++++++++++++++---
 test-playwright/40-add-contact.spec.ts         |  4 ++--
 test-playwright/{testUtils.js => testUtils.ts} |  4 ++--
 4 files changed, 19 insertions(+), 8 deletions(-)
 rename test-playwright/{testUtils.js => testUtils.ts} (91%)

diff --git a/playwright.config-local.ts b/playwright.config-local.ts
index eb95e4416..511af5201 100644
--- a/playwright.config-local.ts
+++ b/playwright.config-local.ts
@@ -74,7 +74,7 @@ export default defineConfig({
 
   /* Configure global timeout; default is 30000 milliseconds */
   // the image upload will often not succeed at 5 seconds
-  timeout: 15000,
+  timeout: 20000,
 
   /* Run your local dev server before starting the tests */
   /**
diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue
index 524ddd0a6..a964371c8 100644
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -56,7 +56,7 @@
         />
         <button
           href=""
-          class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1 py-1 ml-2 rounded-md"
+          class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-2 px-1 py-1 rounded-md"
           :style="
             contactsSelected.length > 0
               ? 'background-image: linear-gradient(to bottom, #3b82f6, #1e40af);'
@@ -226,10 +226,21 @@
     </ul>
     <p v-else>There are no contacts.</p>
 
-    <div class="w-full text-left">
+    <div class="mt-2 w-full text-left">
+      <input
+        type="checkbox"
+        v-if="!showGiveNumbers"
+        :checked="contactsSelected.length === contacts.length"
+        @click="
+          contactsSelected.length === contacts.length
+            ? (contactsSelected = [])
+            : (contactsSelected = contacts.map((contact) => contact.did))
+        "
+        class="align-middle ml-2 h-6 w-6"
+      />
       <button
         href=""
-        class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1 py-1 rounded-md"
+        class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-2 px-1 py-1 rounded-md"
         :style="
           contactsSelected.length > 0
             ? 'background-image: linear-gradient(to bottom, #3b82f6, #1e40af);'
diff --git a/test-playwright/40-add-contact.spec.ts b/test-playwright/40-add-contact.spec.ts
index 37a7b2adb..c44c9ba71 100644
--- a/test-playwright/40-add-contact.spec.ts
+++ b/test-playwright/40-add-contact.spec.ts
@@ -39,7 +39,7 @@ test('Add contact, record gift, confirm gift', async ({ page }) => {
   await expect(page.locator('li.border-b')).toContainText('User #000');
 
   // Rename contact
-  await page.locator('li.border-b h2 > a[title="See more about this person"]').click();
+  await page.locator('li.border-b div div > a[title="See more about this person"]').click();
   await page.locator('h2 > button[title="Edit"]').click();
   await expect(page.locator('div.dialog-overlay > div.dialog').filter({ hasText: 'Edit Name' })).toBeVisible();
   await page.getByPlaceholder('Name', { exact: true }).fill(contactName);
@@ -83,4 +83,4 @@ test('Add contact, record gift, confirm gift', async ({ page }) => {
   // Refresh claim page, Confirm button should be hidden
   await page.reload();
   await expect(page.getByRole('button', { name: 'Confirm' })).toBeHidden();
-});
\ No newline at end of file
+});
diff --git a/test-playwright/testUtils.js b/test-playwright/testUtils.ts
similarity index 91%
rename from test-playwright/testUtils.js
rename to test-playwright/testUtils.ts
index 3cd2e5c4b..7d8d52c79 100644
--- a/test-playwright/testUtils.js
+++ b/test-playwright/testUtils.ts
@@ -1,6 +1,6 @@
-import { expect } from '@playwright/test';
+import { expect, Page } from '@playwright/test';
 
-export async function importUser(page, id) {
+export async function importUser(page: Page, id?: string): Promise<void> {
   let seedPhrase, userName, did;
 
   // Set seed phrase and DID based on user ID