Add E2E tests for advanced checkout (#110)

* Add E2E tests for advanced checkout

* Remove "Complete your purchase"-check

* Add .DS_Store to .gitignore

---------

Co-authored-by: kwokhe <[email protected]>

.gitignore

@@ -1,7 +1,9 @@
+**/.DS_Store
+
 .vs/
 node_modules/
 test-results/
 playwright-report/
 
 .env
-.idea
+.idea

tests/advanced-checkout/card.spec.js → tests/advanced-checkout/v5/card.spec.js

@@ -1,6 +1,6 @@
 // @ts-check
 const { test, expect } = require('@playwright/test');
-const utilities = require('../utilities');
+const utilities = require('../../utilities');
 
 test('Card', async ({ page }) => {
     await page.goto('/');

tests/advanced-checkout/dropin-card.spec.js → tests/advanced-checkout/v5/dropin-card.spec.js

@@ -1,6 +1,6 @@
 // @ts-check
 const { test, expect } = require('@playwright/test');
-const utilities = require('../utilities');
+const utilities = require('../../utilities');
 
 test('Dropin Card', async ({ page }) => {
     await page.goto('/');

tests/advanced-checkout/webhook.spec.js → tests/advanced-checkout/v5/webhook.spec.js

@@ -1,6 +1,6 @@
 // @ts-check
 const { test, expect } = require('@playwright/test');
-const utilities = require('../utilities');
+const utilities = require('../../utilities');
 
 // test webhook is successfully delivered
 test('Webhook Notification', async ({ request }) => {

tests/advanced-checkout/v6/card.spec.js

@@ -0,0 +1,33 @@
+// @ts-check
+const { test, expect } = require('@playwright/test');
+const utilities = require('../../utilities');
+
+test('Card', async ({ page }) => {
+    await page.goto('/');
+
+    await expect(page).toHaveTitle(/Checkout Demo Advanced/);
+    await expect(page.locator('text="Select a demo"')).toBeVisible();
+
+    // Select "Card"
+    await page.getByRole('link', { name: 'Card', exact: true }).click();
+    await expect(page.locator('text="Cart"')).toBeVisible();
+
+    // Click "Continue to checkout"
+    await page.getByRole('link', { name: 'Continue to checkout' }).click();
+
+    // Wait for load event
+    await page.waitForLoadState('load');
+
+    // Assert that "Card number" is visible within iframe
+    await expect(page.locator('text="Card number"')).toBeVisible();
+
+    // Fill card details
+    await utilities.fillComponentCardDetailsV6(page);
+
+    // Click "Pay" button
+    const payButton = page.locator('.adyen-checkout__button__text >> visible=true');
+    await expect(payButton).toBeVisible();
+    await payButton.click();
+
+    await expect(page.locator('text="Return Home"')).toBeVisible();
+});

tests/advanced-checkout/v6/dropin-card.spec.js

@@ -0,0 +1,40 @@
+// @ts-check
+const { test, expect } = require('@playwright/test');
+const utilities = require('../../utilities');
+
+test('Dropin Card', async ({ page }) => {
+    await page.goto('/');
+
+    await expect(page).toHaveTitle(/Checkout Demo Advanced/);
+    await expect(page.locator('text="Select a demo"')).toBeVisible();
+
+    // Select "Drop-in"
+    await page.getByRole('link', { name: 'Drop-in' }).click();
+    await expect(page.locator('text="Cart"')).toBeVisible();
+
+    // Click "Continue to checkout"
+    await page.getByRole('link', { name: 'Continue to checkout' }).click();
+
+    // Wait for load event
+    await page.waitForLoadState('load');
+
+    // Assert that "Credit or debit card" is visible
+    await expect(page.locator('text="Credit or debit card"')).toBeVisible();
+
+    // Click "Credit or debit card"
+    const radioButton = await page.getByRole('radio', { name: 'Credit or debit card' });
+    await radioButton.click();
+
+    // Wait for load event
+    await page.waitForLoadState('load');
+
+    // Fill card details
+    await utilities.fillDropinCardDetailsV6(page);
+
+    // Click "Pay" button
+    const payButton = page.locator('.adyen-checkout__button__text >> visible=true');
+    await expect(payButton).toBeVisible();
+    await payButton.click();
+
+    await expect(page.locator('text="Return Home"')).toBeVisible();
+});

tests/advanced-checkout/v6/googlepay.spec.js

@@ -0,0 +1,21 @@
+// @ts-check
+const { test, expect } = require('@playwright/test');
+
+test('GooglePay', async ({ page }) => {
+    await page.goto('/');
+
+    await expect(page).toHaveTitle(/Checkout Demo/);
+    await expect(page.locator('text="Select a demo"')).toBeVisible();
+
+    // Select "Google Pay"
+    await page.getByRole('link', { name: 'Google Pay' }).click();
+    await expect(page.locator('text="Cart"')).toBeVisible();
+
+    // Click "Continue to checkout"
+    await page.getByRole('link', { name: 'Continue to checkout' }).click();
+
+    // Check Google Pay button is visible
+    const googlePayButton = await page.locator('button[aria-label="Buy with GPay"]');
+    await expect(googlePayButton).toBeVisible();
+
+});

tests/advanced-checkout/v6/ideal.spec.js

@@ -0,0 +1,36 @@
+// @ts-check
+const { test, expect } = require('@playwright/test');
+
+// test for iDEAL2
+test('iDEAL', async ({ page }) => {
+    await page.goto('/');
+
+    await expect(page).toHaveTitle(/Checkout Demo Advanced/);
+    await expect(page.locator('text="Select a demo"')).toBeVisible();
+
+    // Select "iDEAL"
+    await page.getByRole('link', { name: 'iDEAL' }).click();
+    await expect(page.locator('text="Cart"')).toBeVisible();
+
+    // Click "Continue to checkout"
+    await page.getByRole('link', { name: 'Continue to checkout' }).click();
+
+    // Click "Continue to iDEAL"
+    await page.getByRole('button', { name: 'Continue to iDEAL' }).click();
+    await expect(page.locator('text="Scan with your banking app to pay"')).toBeVisible();
+
+    // Click "Select your bank"
+    await page.getByRole('button', { name: 'Select your bank' }).click();
+
+    // Click "TESTNL2A"
+    await page.getByRole('button', { name: 'TESTNL2A' }).click();
+    await expect(page.locator('text="Which test simulation to run?"')).toBeVisible();
+
+    // Click "Success"
+    await page.getByRole('button', { name: 'Success' }).click();
+
+    // Click "Continue"  
+    await page.getByRole('link', { name: 'Return Home' }).click();
+
+});
+

tests/advanced-checkout/v6/klarna-paynow.spec.js

@@ -0,0 +1,20 @@
+// @ts-check
+const { test, expect } = require('@playwright/test');
+
+test('Klarna Pay Now', async ({ page }) => {
+    await page.goto('/');
+
+    await expect(page).toHaveTitle(/Checkout Demo Advanced/);
+    await expect(page.locator('text="Select a demo"')).toBeVisible();
+
+    // Select "Klarna Pay Now"
+    await page.getByRole('link', { name: 'Klarna - Pay now' }).click();
+    await expect(page.locator('text="Cart"')).toBeVisible();
+
+    // Click "Continue to checkout"
+    await page.getByRole('link', { name: 'Continue to checkout' }).click();
+    await expect(page.locator('text="Continue to Pay now with Klarna."')).toBeVisible();
+
+    // Click "Continue to Klarna"    
+    await page.locator('text="Continue to Pay now with Klarna."').click();
+});

tests/advanced-checkout/v6/webhook-failure.spec.js

@@ -0,0 +1,42 @@
+// @ts-check
+const { test, expect } = require('@playwright/test');
+
+// test webhook is rejected (invalid HMAC signature)
+test('Webhook Notification', async ({ request }) => {
+    const notifications = await request.post(`/api/webhooks/notifications`, {
+        data: {
+            "live": "false",
+            "notificationItems":[
+                {
+                    "NotificationRequestItem":{
+                        "additionalData":{
+                            "hmacSignature":"INVALID_HMAC_SIGNATURE"
+                        },
+                        "eventCode":"AUTHORISATION",
+                        "success":"true",
+                        "eventDate":"2019-06-28T18:03:50+01:00",
+                        "merchantAccountCode":"YOUR_MERCHANT_ACCOUNT",
+                        "pspReference": "7914073381342284",
+                        "merchantReference": "YOUR_REFERENCE",
+                        "amount": {
+                            "value":24999,
+                            "currency":"EUR"
+                        }
+                    }
+                }
+            ]
+        }
+    });
+
+    /// Verify notification is not accepted (invalid HMAC)
+
+    // Status code not 404 (verify webhook is found)
+    expect(notifications.status()).not.toEqual(404);
+
+    // Status code not 200 (verify webhook does not accept the notification ie HMAC invalid)
+    expect(notifications.status()).not.toEqual(200);
+
+    // Body response does not contain [accepted]
+    notifications.text()
+        .then(value => {expect(value).not.toEqual("[accepted]");} );
+});

tests/advanced-checkout/v6/webhook.spec.js

@@ -0,0 +1,56 @@
+// @ts-check
+const { test, expect } = require('@playwright/test');
+const utilities = require('../../utilities');
+
+// test webhook is successfully delivered
+test('Webhook Notification', async ({ request }) => {
+
+    var notificationRequestItem = {
+        "eventCode":"AUTHORISATION",
+        "success":"true",
+        "eventDate":"2019-06-28T18:03:50+01:00",
+        "merchantAccountCode":"YOUR_MERCHANT_ACCOUNT",
+        "pspReference": "7914073381342284",
+        "merchantReference": "YOUR_REFERENCE",
+        "amount": {
+            "value":1130,
+            "currency":"EUR"
+        }
+    };
+
+    // calculate signature from payload
+    const hmacSignature = await utilities.calculateHmacSignature(notificationRequestItem);
+    // add hmacSignature to 'additionalData'
+    notificationRequestItem["additionalData"] = {"hmacSignature" : ""+hmacSignature+""}
+
+    // POST webhook
+    const notifications = await request.post(`/api/webhooks/notifications`, {
+        data: {
+            "live": "false",
+            "notificationItems":[
+                {
+                    "NotificationRequestItem": notificationRequestItem    
+                }           
+            ]
+        }
+    });
+
+    var notifications_status = notifications.status();
+
+    if (notifications_status === 202) {
+        // Verify status code 202
+        expect(notifications.status()).toEqual(202);
+
+        // Verify empty response body
+        notifications.text()
+            .then(value => { expect(value).toEqual(""); });
+    } else {
+        // Verify legacy webhook acknowledgment (status code 200)
+        expect(notifications.status()).toEqual(200);
+
+        // Verify legacy webhook acknowledgment (response body `[accepted]`)
+        notifications.text()
+            .then(value => { expect(value).toEqual("[accepted]"); });
+    }
+});
+