Skip to content

Commit

Permalink
Turn checkout service into an Angular service
Browse files Browse the repository at this point in the history
  • Loading branch information
wrandall22 committed Jan 9, 2025
1 parent 0a13f23 commit 4464058
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 53 deletions.
5 changes: 3 additions & 2 deletions src/app/branded/branded-checkout.component.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import thankYouSummary from 'app/thankYou/summary/thankYouSummary.component'

import sessionService from 'common/services/session/session.service'
import orderService from 'common/services/api/order.service'
import * as checkoutService from 'common/services/checkoutHelpers/checkout.service'
import checkoutService from 'common/services/checkoutHelpers/checkout.service'
import brandedAnalyticsFactory from './analytics/branded-analytics.factory'

import 'common/lib/fakeLocalStorage'
Expand All @@ -24,7 +24,7 @@ const componentName = 'brandedCheckout'

class BrandedCheckoutController {
/* @ngInject */
constructor ($element, $window, analyticsFactory, brandedAnalyticsFactory, tsysService, sessionService, envService, orderService, $translate) {
constructor ($element, $window, analyticsFactory, brandedAnalyticsFactory, tsysService, sessionService, envService, orderService, checkoutService, $translate) {
this.$element = $element[0] // extract the DOM element from the jqLite wrapper
this.$window = $window
this.analyticsFactory = analyticsFactory
Expand Down Expand Up @@ -156,6 +156,7 @@ export default angular
thankYouSummary.name,
sessionService.name,
orderService.name,
checkoutService.name,
brandedAnalyticsFactory.name,
uibModal,
'environment',
Expand Down
7 changes: 4 additions & 3 deletions src/app/branded/branded-checkout.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,12 +51,13 @@ describe('branded checkout', () => {
onOrderFailed: jest.fn(),
},
)
$ctrl.checkoutService = {
initializeRecaptcha: jest.fn()
}
}))

describe('$onInit', () => {
beforeEach(() => {
jest.spyOn($ctrl.checkoutService, 'initializeRecaptcha').mockImplementation(() => {})
})

it('should set API Url if custom one is set', () => {
$ctrl.apiUrl = 'https://custom-api.cru.org'
$ctrl.$onInit()
Expand Down
5 changes: 3 additions & 2 deletions src/app/checkout/checkout.component.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import showErrors from 'common/filters/showErrors.filter'
import cartService from 'common/services/api/cart.service'
import orderService from 'common/services/api/order.service'
import designationsService from 'common/services/api/designations.service'
import * as checkoutService from 'common/services/checkoutHelpers/checkout.service'
import checkoutService from 'common/services/checkoutHelpers/checkout.service'

import sessionEnforcerService, { EnforcerCallbacks } from 'common/services/session/sessionEnforcer.service'
import { Roles, SignOutEvent } from 'common/services/session/session.service'
Expand All @@ -28,7 +28,7 @@ const componentName = 'checkout'

class CheckoutController {
/* @ngInject */
constructor ($window, $location, $rootScope, $log, cartService, envService, orderService, designationsService, sessionEnforcerService, analyticsFactory) {
constructor ($window, $location, $rootScope, $log, cartService, envService, orderService, designationsService, sessionEnforcerService, checkoutService, analyticsFactory) {
this.$log = $log
this.$window = $window
this.$location = $location
Expand Down Expand Up @@ -150,6 +150,7 @@ export default angular
orderService.name,
designationsService.name,
sessionEnforcerService.name,
checkoutService.name,
showErrors.name,
analyticsFactory.name
])
Expand Down
4 changes: 1 addition & 3 deletions src/app/checkout/checkout.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,6 @@ describe('checkout', function () {
search: ''
}, scrollTo: jest.fn() }
})
self.controller.checkoutService = {
initializeRecaptcha: jest.fn()
}
}))

it('to be defined', function () {
Expand All @@ -38,6 +35,7 @@ describe('checkout', function () {
jest.spyOn(self.controller, 'sessionEnforcerService').mockImplementation(() => {})
jest.spyOn(self.controller.$rootScope, '$on').mockImplementation(() => {})
jest.spyOn(self.controller, 'signedOut').mockImplementation(() => {})
jest.spyOn(self.controller.checkoutService, 'initializeRecaptcha').mockImplementation(() => {})
self.controller.$onInit()
})

Expand Down
28 changes: 22 additions & 6 deletions src/common/services/checkoutHelpers/checkout.service.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,24 @@
export function initializeRecaptcha () {
const script = this.$window.document.createElement('script')
script.src = `https://www.google.com/recaptcha/enterprise.js?render=${this.envService.read('recaptchaKey')}`
script.id = 'give-checkout-recaptcha'
if (!this.$window.document.getElementById(script.id)) {
this.$window.document.head.appendChild(script)
import angular from 'angular'

const serviceName = 'checkoutService'

class CheckoutService {
/* @ngInject */
constructor ($window, envService) {
this.$window = $window
this.envService = envService
}

initializeRecaptcha () {
const script = this.$window.document.createElement('script')
script.src = `https://www.google.com/recaptcha/enterprise.js?render=${this.envService.read('recaptchaKey')}`
script.id = 'give-checkout-recaptcha'
if (!this.$window.document.getElementById(script.id)) {
this.$window.document.head.appendChild(script)
}
}
}

export default angular
.module(serviceName, [])
.service(serviceName, CheckoutService)
87 changes: 50 additions & 37 deletions src/common/services/checkoutHelpers/checkout.service.spec.js
Original file line number Diff line number Diff line change
@@ -1,42 +1,55 @@
import * as checkoutService from './checkout.service'

describe('initializeRecaptcha()', () => {
const $ctrl = {
$window: {
document: document
},
envService: {
read: jest.fn()
}
}
const script = document.createElement('script')

beforeEach(() => {
script.src = 'https://www.google.com/recaptcha/enterprise.js?render=123'
script.id = 'test-script'
$ctrl.envService.read.mockReturnValue('123')
})
import angular from 'angular'
import 'angular-mocks'

afterEach(() => {
const foundScript = document.getElementById('give-checkout-recaptcha')
if (foundScript) {
document.head.removeChild(foundScript)
}
})
import module from './checkout.service'

it('should add a script even if one already exists', () => {
document.head.appendChild(script)
checkoutService.initializeRecaptcha.call($ctrl)
expect(document.getElementById('give-checkout-recaptcha')).not.toBeNull()
expect(document.getElementById('test-script')).not.toBeNull()
})
describe('checkout service', () => {
beforeEach(angular.mock.module(module.name))

beforeEach(angular.mock.module(($provide) => {
$provide.value('envService', {
read: () => '123'
})
}))

const self = {}
let script

beforeEach(inject((checkoutService, envService, $window) => {
self.checkoutService = checkoutService
self.envService = envService
self.$window = $window
self.$window.document = document

it('should only add this script once', () => {
script.id = 'give-checkout-recaptcha'
document.head.appendChild(script)
expect(document.getElementById('give-checkout-recaptcha')).not.toBeNull()
checkoutService.initializeRecaptcha.call($ctrl)
expect(document.querySelectorAll('#give-checkout-recaptcha')).toHaveLength(1)
script = self.$window.document.createElement('script')
}))

describe('initializeRecaptcha()', () => {
beforeEach(() => {
script.src = 'https://www.google.com/recaptcha/enterprise.js?render=123'
script.id = 'test-script'
})

afterEach(() => {
const foundScript = self.$window.document.getElementById('give-checkout-recaptcha')
if (foundScript) {
document.head.removeChild(foundScript)
}
})

it('should add a script even if one already exists', () => {
self.$window.document.head.appendChild(script)
self.checkoutService.initializeRecaptcha.call(self)
expect(document.getElementById('give-checkout-recaptcha')).not.toBeNull()
expect(document.getElementById('test-script')).not.toBeNull()
})

it('should only add this script once', () => {
script.id = 'give-checkout-recaptcha'
self.$window.document.head.appendChild(script)
expect(document.getElementById('give-checkout-recaptcha')).not.toBeNull()
self.checkoutService.initializeRecaptcha.call(self)
expect(document.querySelectorAll('#give-checkout-recaptcha')).toHaveLength(1)
})
})
})

0 comments on commit 4464058

Please sign in to comment.