From 1b0d584817b8bcb15490225265e12c13e70f6703 Mon Sep 17 00:00:00 2001
From: Isa Herico Velasco <7840857+iisa@users.noreply.github.com>
Date: Fri, 3 Jan 2025 15:37:31 -0800
Subject: [PATCH] main unit test

---
 demo/index.html                    |   6 --
 src/monthly-giving-circle.ts       |   5 +-
 test/monthly-giving-circle.test.ts | 122 ++++++++++++++++++++++++++---
 3 files changed, 114 insertions(+), 19 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 34833e8..3695d1b 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -38,7 +38,6 @@
   <div class="dev-tools">
     <div id="options">
       <button id="toggle-receipts">Toggle receipts</button>
-      <button id="clear-updates">Clear updates</button>
 
       <p id="interaction-status-area" style="min-height: 20px;margin: 10px;"></p>
     </div>
@@ -136,11 +135,6 @@
 
       showReceipts = true;
     });
-    document.getElementById('clear-updates').addEventListener('click', async () => {
-      updateNotices = [];
-      mgcComponent.updates = updateNotices;
-      await mgcComponent.updateComplete;
-    });
   </script>
 </body>
 </html>
diff --git a/src/monthly-giving-circle.ts b/src/monthly-giving-circle.ts
index 42b1e27..44974ad 100644
--- a/src/monthly-giving-circle.ts
+++ b/src/monthly-giving-circle.ts
@@ -22,7 +22,9 @@ export class MonthlyGivingCircle extends LitElement {
 
   @property({ type: Array }) updates: anUpdate[] = [];
 
-  @property({ type: String }) viewToDisplay: 'welcome' | 'receipts' = 'welcome';
+  @property({ type: String, reflect: true }) viewToDisplay:
+    | 'welcome'
+    | 'receipts' = 'welcome';
 
   protected createRenderRoot() {
     return this;
@@ -68,6 +70,7 @@ export class MonthlyGivingCircle extends LitElement {
           <span slot="action">
             <iaux-button-style class="link">
               <button
+                class="close-receipts"
                 @click=${(event: Event) => {
                   const btn = event.target as HTMLButtonElement;
                   btn.disabled = true;
diff --git a/test/monthly-giving-circle.test.ts b/test/monthly-giving-circle.test.ts
index f10b1dc..eb64ba3 100644
--- a/test/monthly-giving-circle.test.ts
+++ b/test/monthly-giving-circle.test.ts
@@ -11,23 +11,121 @@ describe('IauxMonthlyGivingCircle', () => {
       html`<iaux-monthly-giving-circle></iaux-monthly-giving-circle>`
     );
 
+    expect(el.viewToDisplay).to.equal('welcome');
+
     const titleEl = el.querySelector('iaux-mgc-title');
     expect(titleEl).to.not.be.null;
-    console.log('*****', titleEl);
-
-    expect(titleEl?.getAttribute('titlestyle')).to.equal('heartz');
+    expect(titleEl!.getAttribute('titlestyle')).to.equal('heart');
+    expect(titleEl!.children.length).to.equal(2);
+    expect((titleEl!.children[0] as HTMLElement).innerText).to.equal(
+      'Monthly Giving Circle'
+    );
 
-    // const welcomeEl = el.querySelector('iaux-mgc-welcome');
-    // expect(welcomeEl).to.not.be.null;
+    const welcomeEl = el.querySelector('iaux-mgc-welcome');
+    const joinLink = welcomeEl!.shadowRoot?.querySelector(
+      'a.join-mgc'
+    ) as HTMLAnchorElement;
+    expect(joinLink).to.not.be.null;
+    expect(joinLink.href).to.equal(
+      'https://archive.org/donate/?amt=5&contrib_type=monthly&origin=iawww-usrsttng'
+    );
   });
 
-  it('displays receipt button when receipts are available', async () => {
-    const el = await fixture<MonthlyGivingCircle>(
-      html`<iaux-monthly-giving-circle
-        .receipts=${[]}
-      ></iaux-monthly-giving-circle>`
-    );
+  describe('Receipts', () => {
+    it('Displays receipts CTA when receipts are available', async () => {
+      const el = await fixture<MonthlyGivingCircle>(
+        html`<iaux-monthly-giving-circle
+          .receipts=${[
+            {
+              amount: 9999.99,
+              date: '2020-09-01',
+              donor: 'John Doe',
+              paymentMethod: 'Credit Card',
+              status: 'Completed',
+              id: 'foo-id-1',
+            },
+          ]}
+        ></iaux-monthly-giving-circle>`
+      );
+
+      const titleEl = el.querySelector('iaux-mgc-title');
+      const receiptsButton = titleEl!.querySelector('button');
+      expect(receiptsButton).to.exist;
+      expect(receiptsButton!.innerText).to.equal(
+        'View recent donation history'
+      );
+
+      el.receipts = [];
+      await el.updateComplete;
+
+      const newTitleEl = el.querySelector('iaux-mgc-title');
+      expect(newTitleEl).to.exist;
+
+      const newReceiptsButton = newTitleEl!.querySelector('button');
+      expect(newReceiptsButton).to.not.exist;
+    });
+
+    it('Display receipts table when receipts CTA is clicked', async () => {
+      const el = await fixture<MonthlyGivingCircle>(
+        html`<iaux-monthly-giving-circle
+          .receipts=${[
+            {
+              amount: 9999.99,
+              date: '2020-09-01',
+              donor: 'John Doe',
+              paymentMethod: 'Credit Card',
+              status: 'Completed',
+              id: 'foo-id-1',
+            },
+          ]}
+        ></iaux-monthly-giving-circle>`
+      );
+
+      const titleEl = el.querySelector('iaux-mgc-title');
+      const receiptsButton = titleEl!.querySelector('button');
+      expect(receiptsButton).to.exist;
+      receiptsButton!.click();
+
+      await el.updateComplete;
+
+      expect(el.viewToDisplay).to.equal('receipts');
+
+      const welcomeEl = el.querySelector('iaux-mgc-welcome');
+      expect(welcomeEl).to.not.exist;
+
+      // shows proper title
+      const titleEl2 = el.querySelector('iaux-mgc-title');
+      expect(titleEl2).to.exist;
+      expect(titleEl2!.getAttribute('titlestyle')).to.equal('default');
+      const titleValueEl = titleEl2?.querySelector(
+        'span[slot="title"]'
+      ) as HTMLSpanElement;
+      expect(titleValueEl).to.exist;
+      expect(titleValueEl.innerText).to.equal('Recent donations');
+
+      // shows back button
+      const backButton = titleEl2?.querySelector(
+        'button.close-receipts'
+      ) as HTMLButtonElement;
+      expect(backButton!.innerText).to.equal('Back to account settings');
+
+      // shows receipts element
+      const receiptsEl = el.querySelector('iaux-mgc-receipts');
+      expect(receiptsEl).to.exist;
+
+      // goes back to welcome page if back button is clicked
+      backButton!.click();
+      await el.updateComplete;
+
+      expect(el.viewToDisplay).to.equal('welcome');
 
-    expect(el.querySelector('iaux-mgc-welcome')).to.not.be.null;
+      const titleEl3 = el.querySelector('iaux-mgc-title');
+      expect(titleEl3).to.exist;
+      expect(titleEl3!.getAttribute('titlestyle')).to.equal('heart');
+      const welcomeTitle = titleEl3?.querySelector(
+        'span[slot="title"]'
+      ) as HTMLSpanElement;
+      expect(welcomeTitle.innerText).to.equal('Monthly Giving Circle');
+    });
   });
 });