Add tests; correct doge URI protocol; add data-attributes;

dogeorg · Feb 28, 2024 · 7d7ef11 · 7d7ef11
1 parent 5b03e94
commit 7d7ef11
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 15 deletions.
diff --git a/src/components/doge-qr/demo/index.html b/src/components/doge-qr/demo/index.html
@@ -56,8 +56,10 @@ <h2>Purpose</h2>
           <div class="box">
             <div class="qr-wrapper">
               <doge-qr
-                address="D69rsxrHpzF6sutcYD31A5rVtcWsdm35tX"
-                theme="such-doge">
+                address="D89DhnsgKncmN12RejxudfU8AwXp3946q1"
+                theme="such-doge"
+                amount=5
+                >
               </doge-qr>
             </div>
             <span>Such Doge</span>
@@ -66,8 +68,9 @@ <h2>Purpose</h2>
           <div class="box">
             <div class="qr-wrapper">
               <doge-qr
-                address="D69rsxrHpzF6sutcYD31A5rVtcWsdm35tX"
-                theme="so-coin">
+                address="D89DhnsgKncmN12RejxudfU8AwXp3946q1"
+                theme="so-coin"
+                amount=5>
               </doge-qr>
             </div>
             <span>So Coin</span>
@@ -81,8 +84,9 @@ <h2 class="customise-label">Very customize</h2>
           <div class="box">
             <div class="qr-wrapper">
               <doge-qr
-                address="D69rsxrHpzF6sutcYD31A5rVtcWsdm35tX"
-                theme="much-dev">
+                address="D89DhnsgKncmN12RejxudfU8AwXp3946q1"
+                theme="much-dev"
+                amount=5>
               </doge-qr>
             </div>
             <span>Much Dev</span>
@@ -91,8 +95,9 @@ <h2 class="customise-label">Very customize</h2>
           <div class="box">
             <div class="qr-wrapper">
               <doge-qr
-                address="D69rsxrHpzF6sutcYD31A5rVtcWsdm35tX"
-                theme="very-community">
+                address="D89DhnsgKncmN12RejxudfU8AwXp3946q1"
+                theme="very-community"
+                amount=5>
               </doge-qr>
             </div>
             <span>Very Community</span>
@@ -101,9 +106,10 @@ <h2 class="customise-label">Very customize</h2>
           <div class="box">
             <div class="qr-wrapper">
               <doge-qr
-                address="D69rsxrHpzF6sutcYD31A5rVtcWsdm35tX"
+                address="D89DhnsgKncmN12RejxudfU8AwXp3946q1"
                 fill="#bbb, #ccc"
-                img="dance.gif">
+                img="dance.gif"
+                amount=5>
               </doge-qr>
             </div>
             <span>Such wow!</span>
@@ -139,7 +145,7 @@ <h2>Usage</h2>
         </div>
 
         <p>
-          3. Test your QR code is working before sharing it with others. It should lead you to a URL formatted like so: <a class="yellow mono small" href="dogecoin://D89DhnsgKncmN12RejxudfU8AwXp3946q1?amount=100">dogecoin://D89DhnsgKncmN12RejxudfU8AwXp3946q1?amount=100</a>
+          3. Test your QR code is working before sharing it with others. It should lead you to a URL formatted like so: <a class="yellow mono small" href="dogecoin:D89DhnsgKncmN12RejxudfU8AwXp3946q1?amount=100">dogecoin:D89DhnsgKncmN12RejxudfU8AwXp3946q1?amount=100</a>
         </p>
       </section>
 

diff --git a/src/components/doge-qr/doge-qr.js b/src/components/doge-qr/doge-qr.js
@@ -107,7 +107,7 @@ export class DogeQR extends LitElement {
     if (!this.address) {
       return "Address not provided."
     }
-    return `dogecoin://${this.address}${this.appendAmount()}`
+    return `dogecoin:${this.address}${this.appendAmount()}`
   }
 
   appendAmount() {
@@ -125,8 +125,8 @@ export class DogeQR extends LitElement {
 				data: this.generateQrValue(),
         imageOptions: {
           crossOrigin: "anonymous",
-          hideBackgroundDots: false,
-          imageSize: 0.5,
+          hideBackgroundDots: true,
+          imageSize: 0.4,
           margin: 0
         },
         ...this.applyTheme(),
@@ -146,7 +146,7 @@ export class DogeQR extends LitElement {
 
 	render() {
 		return html`
-			<div class="qr-container">
+			<div class="qr-container" data-qr-value="${this.generateQrValue()}">
 				<div id="qrCanvas"></div>
 			</div>`;
 	}

diff --git a/src/components/doge-qr/test.html b/src/components/doge-qr/test.html
@@ -8,6 +8,24 @@
       runTests(async () => {
         describe("DogeQR", () => {
 
+          it('produces a correctly formatted dogecoin URI when given an address', async () => {
+            const el = await fixture(html`
+              <doge-qr address="foobar"></doge-qr>
+            `);
+            const expectedValue = 'dogecoin:foobar'
+            const div = el.shadowRoot.querySelector('.qr-container');
+            expect(div.getAttribute('data-qr-value')).to.equal(expectedValue);
+          })
+
+          it('produces a correctly formatted dogecoin URI when given an address and amount', async () => {
+            const el = await fixture(html`
+              <doge-qr address="foobar" amount=50></doge-qr>
+            `);
+            const expectedValue = 'dogecoin:foobar?amount=50'
+            const div = el.shadowRoot.querySelector('.qr-container');
+            expect(div.getAttribute('data-qr-value')).to.equal(expectedValue);
+          })
+
           it('displays an SVG when an address is provided', async () => {
             const el = await fixture(html`
               <doge-qr address="foo"></doge-qr>