Added e2e test for email and sms opt-in checkboxes

Added sms and email opt-in e2e tests for sitegen
Moved global variables to module
Added unit test for subscriptions
Refactored order confirmation unit test
Setup mock for KlaviyoSubscribeProfilesService
Refactor Site and LocalServiceRegistry Mocks
Completed subscriber tests

Author: emarty-maze

test/src/tests/e2e/sfra/checkout/checkout-tests.spec.js

@@ -54,18 +54,34 @@ test.describe('Test Klaviyo add to cart event', () => {
     })
 })
 
-test.describe('Test Klaviyo order confirmation event', () => {
-    test('Complete purchase and verify event data', async ({ page }) => {
-        const resultMsg = 'Klaviyo Service Result:'
+test.describe('Test Klaviyo sms signup', () => {
+    test('Verify sms checkbox present and selectable', async ({ page }) => {
         email = await checkoutPage.generateEmail()
         testData.email = email
         await checkoutPage.productPage.getProduct()
         await checkoutPage.productPage.addToCart()
         await checkoutPage.startCheckout()
         await checkoutPage.enterGuestEmail(email)
+        await checkoutPage.selectSMS()
         await checkoutPage.fillShippingForm(testData)
         await checkoutPage.fillPaymentForm(paymentData)
         await page.waitForTimeout(3000)
         expect(await page.innerText('h1.page-title')).toBe('Thank You')
     })
-})
+})
+
+test.describe('Test Klaviyo email signup', () => {
+    test('Verify email checkbox present and selectable', async ({ page }) => {
+        email = await checkoutPage.generateEmail()
+        testData.email = email
+        await checkoutPage.productPage.getProduct()
+        await checkoutPage.productPage.addToCart()
+        await checkoutPage.startCheckout()
+        await checkoutPage.enterGuestEmail(email)
+        await checkoutPage.selectEmail()
+        await checkoutPage.fillShippingForm(testData)
+        await checkoutPage.fillPaymentForm(paymentData)
+        await page.waitForTimeout(3000)
+        expect(await page.innerText('h1.page-title')).toBe('Thank You')
+    })
+})

test/src/tests/e2e/sfra/page-objects/checkout.js

@@ -78,4 +78,16 @@ exports.CheckoutPage = class CheckoutPage extends BasePage {
         await this.placeOrderLocator.click()
         await this.page.waitForLoadState('networkidle')
     }
-}
+
+    async selectSMS() {
+        const boxes = await this.page.locator('#KLSmsSubscribe')
+        await boxes.first().click()
+        expect(boxes.first()).toBeChecked()
+    }
+
+    async selectEmail() {
+        const boxes = await this.page.locator('#KLEmailSubscribe')
+        await boxes.first().click()
+        expect(boxes.first()).toBeChecked()
+    }
+}

test/src/tests/e2e/sfra/product/product-tests.spec.js

@@ -1,6 +1,11 @@
 import { test, expect } from '@playwright/test'
 import { ProductPage } from '../page-objects/product.js'
 import { getLatestMetricData } from '../../../../utils/v3-api-helper.mjs'
+import * as dotenv from 'dotenv'
+
+dotenv.config()
+
+const { KLAVIYO_SFRA_PRIVATE_KEY } = process.env
 
 let testData = {
     firstName: 'Product',
@@ -46,13 +51,17 @@ test.describe('Test Klaviyo viewed category event', () => {
 
 test.describe('Test successful integration with Klaviyo', () => {
     test('Verify Viewed Product metric in Klaviyo sandbox', async ({ page }) => {
+        const apiParams = {
+            method: 'GET',
+            apiKey: KLAVIYO_SFRA_PRIVATE_KEY
+        }
         email = await productPage.generateEmail()
         testData.email = email
         await productPage.accountPage.gotoAccountLogin()
         await productPage.accountPage.fillRegistrationForm(testData)
         expect(await page.innerText('h1.page-title')).toBe('Dashboard')
         await productPage.getProduct()
-        const metrics = await getLatestMetricData()
+        const metrics = await getLatestMetricData(apiParams)
         const metricName = metrics.attributes.name
         expect(metricName).toBe('Viewed Product')
     })

test/src/tests/e2e/sitegen/checkout/checkout-tests.spec.js

@@ -39,4 +39,38 @@ test.describe('Test Klaviyo add to cart event', () => {
         await checkoutPage.productPage.addToCart()
         expect(logData[0].success).toBe(true)
     })
-})
+})
+
+test.describe('Test Klaviyo sms signup', () => {
+    test('Verify sms checkbox present and selectable', async ({ page }) => {
+        email = await checkoutPage.generateEmail()
+        testData.email = email
+        await checkoutPage.productPage.getProduct()
+        await checkoutPage.productPage.addToCart()
+        await checkoutPage.startCheckout()
+        await checkoutPage.checkoutAsGuest()
+        await checkoutPage.fillShippingForm(testData)
+        await checkoutPage.selectSMS()
+        await checkoutPage.fillBillingForm(email)
+        await checkoutPage.fillPaymentForm(paymentData)
+        await page.waitForTimeout(3000)
+        expect(await checkoutPage.orderSuccessMessage.innerText().valueOf()).toBe('Thank you for your order.')
+    })
+})
+
+test.describe('Test Klaviyo email signup', () => {
+    test('Verify email checkbox present and selectable', async ({ page }) => {
+        email = await checkoutPage.generateEmail()
+        testData.email = email
+        await checkoutPage.productPage.getProduct()
+        await checkoutPage.productPage.addToCart()
+        await checkoutPage.startCheckout()
+        await checkoutPage.checkoutAsGuest()
+        await checkoutPage.fillShippingForm(testData)
+        await checkoutPage.selectEmail()
+        await checkoutPage.fillBillingForm(email)
+        await checkoutPage.fillPaymentForm(paymentData)
+        await page.waitForTimeout(3000)
+        expect(await checkoutPage.orderSuccessMessage.innerText().valueOf()).toBe('Thank you for your order.')
+    })
+})

test/src/tests/e2e/sitegen/page-objects/checkout.js

@@ -14,8 +14,6 @@ exports.CheckoutPage = class CheckoutPage extends BasePage {
         this.productPage = new ProductPage(page, isMobile)
         this.accountPage = new AccountPage(page, isMobile)
 
-        this.guestCheckoutBtn = 'dwfrm_login_unregistered'
-
         // Shipping form
         this.shippingFnameLocator = page.locator('#dwfrm_singleshipping_shippingAddress_addressFields_firstName')
         this.shippingLnameLocator = page.locator('#dwfrm_singleshipping_shippingAddress_addressFields_lastName')
@@ -51,6 +49,10 @@ exports.CheckoutPage = class CheckoutPage extends BasePage {
         await this.guestCheckoutSubmit.click()
     }
 
+    async checkoutAsGuest() {
+        await this.page.locator('button[value="Checkout as Guest"]').click()
+    }
+
     async fillShippingForm(data) {
         await this.shippingFnameLocator.fill(data.firstName)
         await this.shippingLnameLocator.fill(data.lastName)
@@ -63,13 +65,12 @@ exports.CheckoutPage = class CheckoutPage extends BasePage {
         await this.stateLocator.selectOption({ value: data.state })
         await this.phoneLocator.fill(data.phone)
         await this.sameAsLocator.click()
-        // await this.submitShippingLocator.click()
         await this.page.getByRole('button', { name: 'Continue to Billing >' }).click()
     }
 
-    async fillBillingForm(data) {
+    async fillBillingForm(email) {
         await this.billingEmailLocator.isVisible()
-        await this.billingEmailLocator.fill(data.email)
+        await this.billingEmailLocator.fill(email)
     }
 
     async fillPaymentForm(data) {
@@ -88,4 +89,16 @@ exports.CheckoutPage = class CheckoutPage extends BasePage {
         await this.page.getByRole('button', { name: 'Place Order' }).click()
         await this.page.waitForLoadState('networkidle')
     }
-}
+
+    async selectSMS() {
+        const boxes = await this.page.locator('#KLSmsSubscribe')
+        await boxes.first().click()
+        expect(boxes.first()).toBeChecked()
+    }
+
+    async selectEmail() {
+        const boxes = await this.page.locator('#KLEmailSubscribe')
+        await boxes.first().click()
+        expect(boxes.first()).toBeChecked()
+    }
+}

test/src/tests/mocks/dw.svc.LocalServiceRegistry.js

@@ -1,22 +1,57 @@
-const sinon = require('sinon');
+const Service = require('./util/service')
+const responseDataMock = require('./util/responseDataMock')
 
-const KlaviyoEventService = {
+getResponse = (requestBody) => {
+    let phone
+    let response = {}
+    const dataObj = requestBody.data.attributes.subscriptions[0]
+    phone = dataObj.phone_number
 
-    call: sinon.stub(),
-    createRequest: sinon.stub(),
-    parseResponse: sinon.stub(),
-    getRequestLogMessage: sinon.stub(),
-    getResponseLogMessage: sinon.stub(),
+    // Case 1: Subscribe request is made to Klaviyo to the email channel, including both email and phone number. Response is successful (202)
+    if (dataObj.email && phone) {
+        response.statusCode = 202,
+        response.errorText = null,
+        response.statusMessage = 'success',
+        response.text = responseDataMock.subscribeSuccessMock
+    // Case 1: Subscribe request is made to Klaviyo to the email channel, including both email and phone_number is null. Response is successful (202)
+    } else if (dataObj.email && phone === null) {
+        response.statusCode = 202,
+        response.errorText = null,
+        response.statusMessage = 'success',
+        response.text = responseDataMock.subscribeSuccessMock
+    // Case 2: Subscribe request is made to Klaviyo to the email channel, including both email and phone number. Response is not successful (400) and response contains an error message indicating phone number was invalid:
+    } else if (dataObj.email && phone === undefined) {
+        response.statusCode = 400,
+        response.errorText = 'The phone number provided either does not exist or is ineligible to receive SMS',
+        response.statusMessage = 'error',
+        response.text = responseDataMock.invalidPhoneErrorMock
+    // Case 3: Subscribe request is made to Klaviyo to the email channel, including both email and phone number. Response is not not successful (400) and response does not contain an error message indicating phone number was invalid:
+    } else {
+        response.statusCode = 400,
+        response.errorText = 'Some other error occurred',
+        response.statusMessage = 'error',
+        response.text = responseDataMock.otherErrorMock
+    }
+
+    return response
+}
 
-    createService(svc) {
+class ServiceRegistry {
+    createService(serviceId, fn) {
+        const svc = new Service(serviceId)
         return {
-            svc,
-            call: this.call.returns({
-                status: 'OK'
-            }),
-            createRequest: this.createRequest
+            call: (requestBody) => {
+                fn.createRequest(svc, requestBody)
+                const response = getResponse(requestBody)
+                const parsedResponse = fn.parseResponse(svc, response)
+
+                fn.getRequestLogMessage(requestBody)
+                fn.getResponseLogMessage(response)
+
+                return parsedResponse
+            },
         }
     }
 }
 
-module.exports = KlaviyoEventService
+module.exports = new ServiceRegistry

test/src/tests/mocks/dw.system.Site.js

@@ -1,6 +1,8 @@
 let mockPreferences = {
     klaviyo_api_key: 'ababababababababab',
-    klaviyo_sendEventsAsSFCC: 'demandware'
+    klaviyo_sendEventsAsSFCC: 'demandware',
+    klaviyo_email_list_id: 'AbAbs',
+    klaviyo_sms_list_id: 'UuDdLr'
 }
 
 const preferences = {}
@@ -14,7 +16,6 @@ const Site = {
             if (Object.prototype.hasOwnProperty.call(mockPreferences, key)) {
                 return mockPreferences[key];
         }
-
             return preferences[key]
         }
     },
@@ -42,7 +43,3 @@ const restore = () => {
 module.exports = Site
 module.exports.setMockPreferenceValue = setMockPreferenceValue
 module.exports.restore = restore
-
-Object.defineProperty(module.exports, 'preferences', {
-    get: () => Object.assign({}, preferences, mockPreferences)
-})

test/src/tests/mocks/util/Service.js

@@ -0,0 +1,38 @@
+const getServiceData = ((id) => {
+    if (id === 'KlaviyoSubscribeProfilesService') {
+        return {
+            id: id
+        }
+    } else if ('KlaviyoEventService') {
+        return {
+            id: id
+        }
+    }
+})
+
+class Service {
+    constructor(id, method) {
+        this.ID = id
+        this.headers = {}
+        this.args = {}
+        this.configuration = getServiceData(id)
+    }
+
+    addHeader(name, value) {
+        this.headers[name] = value
+    }
+
+    setRequestMethod(method) {
+        this.method = method
+    }
+
+    setURL(url) {
+        this.url = url
+    }
+
+    addParam(name, value) {
+        this.args[name] = value
+    }
+}
+
+module.exports = Service

test/src/tests/mocks/util/globalMocks.js

@@ -0,0 +1,40 @@
+const globalMocks = () => {
+
+    global.session = {
+        getCurrency: function() {
+            return {
+                getCurrencyCode: function() {
+                    return 'USD'
+                }
+            }
+        },
+        custom: {
+            KLEmailSubscribe: true,
+            KLSmsSubscribe: true
+        }
+    }
+
+    global.dw = {
+        util: {
+            StringUtils: {
+                formatMoney: function () {
+                    return '$9.99'
+                },
+                formatCalendar: function () {
+                    return '2022-22-02'
+                }
+            },
+            Calendar: function() {
+                return '2022-22-02'
+            }
+        },
+        value: {
+            Money: function() {
+                return '$9.00'
+            }
+        },
+    }
+
+}
+
+module.exports = globalMocks