Merge pull request #31 from adyen-examples/22-copy-on-click

Copy text on click

data/giftcards.json

@@ -1,25 +1,25 @@
 [
     {
         "cardnumber" : "6036280000000000000",
-        "code" : "ANY",
+        "code" : "100",
         "type" : "Givex",
         "logo" : "givex"
     },
     {
         "cardnumber" : "6364530000000000",
-        "code" : "ANY",
+        "code" : "100",
         "type" : "Generic",
         "logo" : "giftcard"
     },
     {
         "cardnumber" : "6006490000000000",
-        "code" : "ANY",
+        "code" : "100",
         "type" : "SVS",
         "logo" : "svs"
     },
     {
         "cardnumber" : "7777182708544835",
-        "code" : "ANY",
+        "code" : "100",
         "type" : "Fiserv",
         "logo" : "giftcard"
     }    

e2e/package.json

@@ -8,6 +8,6 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "@playwright/test": "^1.35.1"
+    "@playwright/test": "^1.40.0"
   }
 }

e2e/tests/test-extension.spec.ts

@@ -2,38 +2,110 @@ import { test, expect } from './fixtures';
 
 // verify filter
 test('filter', async ({ page, extensionId }) => {
-  await page.goto(`chrome-extension://${extensionId}/panel.html`);
+    await page.goto(`chrome-extension://${extensionId}/panel.html`);
+
+    // use filter
+    await expect(page.locator('text="Filter:"')).toBeVisible();
+    await page.locator('input').pressSequentially('Mastercard', { delay: 100 });
 
-  await expect(page.locator('text="Filter:"')).toBeVisible();
+    // Mastercard visible
+    await expect(page.locator('text="2222 4000 7000 0005"')).toBeVisible();
+    // Maestro not visible
+    await expect(page.locator('text="6771 7980 2100 0008"')).not.toBeVisible();
+    // IBAN not visible
+    await expect(page.locator('text="NL36TEST0236169114"')).not.toBeVisible();
+});
 
-  await page.locator('input[id="search"]').type("Mastercard");
-  // Mastercard visible
-  await expect(page.locator('text="2222 4000 7000 0005"')).toBeVisible();
-  // Maestro not visible
-  await expect(page.locator('text="6771 7980 2100 0008"')).not.toBeVisible();
+// verify favourites message
+test('fav', async ({ page, extensionId }) => {
+    await page.goto(`chrome-extension://${extensionId}/panel.html`);
 
+    await expect(page.locator('text="Add favourites if you like :-)"')).toBeVisible();
 });
 
-// verify copy card number to clipboard
-test('copy', async ({ page, extensionId }) => {
+// verify copy card to clipboard
+test('copy card details', async ({ page, extensionId }) => {
+    await page.goto(`chrome-extension://${extensionId}/panel.html`);
+
+    // card number
+    let cardnumber = page.locator('text="4871 0499 9999 9910"');
+    await expect(cardnumber).toBeVisible();
+    await cardnumber.click();
+
+    let clipboard = await page.evaluate("navigator.clipboard.readText()");
+    expect(clipboard).toContain("4871 0499 9999 9910");
+
+    // cvc
+    let cvc = page.locator('text="7373"').first();
+    await expect(cvc).toBeVisible();
+    await cvc.click();
+
+    clipboard = await page.evaluate("navigator.clipboard.readText()");
+    expect(clipboard).toContain("7373");
+});
+
+// verify copy IBAN to clipboard
+test('copy IBAN details', async ({ page, extensionId }) => {
+    await page.goto(`chrome-extension://${extensionId}/panel.html`);
+
+    // IBAN
+    let iban = page.locator('text="IT60X0542811101000000123456"');
+    await expect(iban).toBeVisible();
+    await iban.click();
+
+    let clipboard = await page.evaluate("navigator.clipboard.readText()");
+    expect(clipboard).toContain("IT60X0542811101000000123456");
+
+    // name
+    let name = page.locator('text="A. Pacini"');
+    await expect(name).toBeVisible();
+    await name.click();
 
+    clipboard = await page.evaluate("navigator.clipboard.readText()");
+    expect(clipboard).toContain("A. Pacini");
+
+});
+
+// verify copy Giftcard to clipboard
+test('copy Giftcard details', async ({ page, extensionId }) => {
     await page.goto(`chrome-extension://${extensionId}/panel.html`);
-  
-    const firstRow = await page.$('tr');
-    if(firstRow == null) {
-        throw new Error("firstRow not found");
-    }
-
-    const copyLink = await firstRow.$(`a.copyLinkClick`);
-    if(copyLink == null) {
-        throw new Error("copyLink not found");
-    }
-
-    await copyLink.click(); 
-
-    // clipboard includes first card number
-    const clipboardText = await page.evaluate(() => navigator.clipboard.readText());
-    expect(clipboardText).toBe("3700 0000 0000 002");
-  
+
+    // card number
+    let cardnumber = page.locator('text="6036280000000000000"');
+    await expect(cardnumber).toBeVisible();
+    await cardnumber.click();
+
+    let clipboard = await page.evaluate("navigator.clipboard.readText()");
+    expect(clipboard).toContain("6036280000000000000");
+
+    // code
+    let code = page.locator('text="100"').first();
+    await expect(code).toBeVisible();
+    await code.click();
+
+    clipboard = await page.evaluate("navigator.clipboard.readText()");
+    expect(clipboard).toContain("100");
+
 });
 
+// verify make favourite
+test('make favourite', async ({ page, extensionId }) => {
+
+    await page.goto(`chrome-extension://${extensionId}/panel.html`);
+    // empty favs message is visible
+    await expect(page.locator('text="Add favourites if you like :-)"')).toBeVisible();
+
+    // pin card in favs
+    await page.click("[id='4871_0499_9999_9910']");
+    await page.waitForTimeout(1000);
+
+    // empty favs message is hidden
+    await expect(page.locator('text="Add favourites if you like :-)"')).not.toBeVisible();
+
+    // unpin card from favs
+    await page.click("[id='4871_0499_9999_9910']");
+    await page.waitForTimeout(1000);
+
+    // empty favs message is visible
+    await expect(page.locator('text="Add favourites if you like :-)"')).toBeVisible();
+});

panel.css

@@ -3,12 +3,17 @@ body {
   font-family: Verdana, Geneva, sans-serif;
   font-size: 12px;
   font-weight: 100;
+  margin: 4px;
 }
 
 .hidden {
   display: none;
 }
 
+.visible {
+  display: inline-block;
+}
+
 a {
   color: #06f;
   cursor: pointer;
@@ -19,18 +24,14 @@ a {
   text-align: center;
 }
 
-.hidden {
-  display: none;
-}
-
 .cardnumbers {
   border-collapse: collapse;
   width: 100%;
   font-size: 12px;
 }
 
 .cardnumbers td {
-  padding: 4px;
+  padding: 3px;
   border-bottom: 1pt solid #33b964;
 }
 
@@ -178,3 +179,30 @@ a {
   background-size: 30px 30px; 
   min-width: 30px;
 }
+
+.copyable:hover {
+  cursor: pointer;
+  position: relative;
+}
+
+
+.divFavouritesContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;  
+}
+
+header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: #fff;
+  color: black;
+  padding: 10px;
+  text-align: center;
+}
+
+main {
+  margin-top: 25px; 
+}

panel.html

@@ -5,10 +5,13 @@
     <script src="third-party/jquery-3.7.0.min.js"></script>
   </head>
   <body>
-    <p>All our Test card numbers on <a href="https://docs.adyen.com/development-resources/testing/test-card-numbers" target="_blank">Adyen docs</a></p>
-    <div>Filter: <input id="search" autocomplete="off"/></div>
-    <div id="cards">
-    </div>
+    <header id="header"></header>
+    <main class="content">
+      <div><p>All our Test card numbers on <a href="https://docs.adyen.com/development-resources/testing/test-card-numbers" target="_blank">Adyen docs</a></p></div>
+      <div>Filter: <input id="search" autocomplete="off"/></div>
+      <div id="cards">
+      </div>
+    </main>
     <script src="panel.js"></script>
   </body>
 </html>