-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Get notification button from personalisation API
Introduce JS that calls our personalisation API on page load. If the user is authenticated, and already subscribed to email notifications on the current page, the account-api serves the "Already subscribed" version of the button HTML.
- Loading branch information
1 parent
e615972
commit f5873c2
Showing
7 changed files
with
173 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
44 changes: 44 additions & 0 deletions
44
...ets/javascripts/govuk_publishing_components/components/single-page-notification-button.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| /* global XMLHttpRequest */ | ||
| window.GOVUK = window.GOVUK || {} | ||
| window.GOVUK.Modules = window.GOVUK.Modules || {}; | ||
|
|
||
| (function (Modules) { | ||
| function SinglePageNotificationButton ($module) { | ||
| this.$module = $module | ||
| this.basePath = this.$module.querySelector('input[name="base_path"]').value | ||
| this.personalisationEndpoint = '/api/personalisation/check-email-subscription?base_path=' + this.basePath | ||
| } | ||
|
|
||
| SinglePageNotificationButton.prototype.init = function () { | ||
| var xhr = new XMLHttpRequest() | ||
| xhr.open('GET', this.personalisationEndpoint, true) | ||
|
|
||
| xhr.onreadystatechange = function () { | ||
| if (xhr.readyState === 4 && xhr.status === 200) { | ||
| var responseText = xhr.responseText | ||
| // if response text exists and is JSON parse-able, parse the response and get the button html | ||
| if (responseText && this.responseIsJSON(responseText)) { | ||
| var newButton = JSON.parse(responseText).button_html | ||
| var html = document.createElement('div') | ||
| html.innerHTML = newButton | ||
| // test that the html returned contains the button component; if yes, swap the button for the updated version | ||
| var responseHasButton = html.querySelector('form.gem-c-single-page-notification-button') | ||
| if (responseHasButton) { | ||
| this.$module.outerHTML = newButton | ||
| } | ||
| } | ||
| } | ||
| }.bind(this) | ||
| xhr.send() | ||
| } | ||
|
|
||
| SinglePageNotificationButton.prototype.responseIsJSON = function (string) { | ||
| try { | ||
| JSON.parse(string) | ||
| } catch (e) { | ||
| return false | ||
| } | ||
| return true | ||
| } | ||
| Modules.SinglePageNotificationButton = SinglePageNotificationButton | ||
| })(window.GOVUK.Modules) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
88 changes: 88 additions & 0 deletions
88
spec/javascripts/components/single-page-notification-button-spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| /* eslint-env jasmine */ | ||
| /* global GOVUK */ | ||
|
|
||
| describe('Single page notification component', function () { | ||
| var FIXTURE | ||
|
|
||
| beforeEach(function () { | ||
| FIXTURE = | ||
| '<form class="gem-c-single-page-notification-button old-button-for-test" action="/email/subscriptions/single-page/new" method="POST" data-module="single-page-notification-button">' + | ||
| '<input type="hidden" name="base_path" value="/current-page-path">' + | ||
| '<button class="gem-c-single-page-notification-button__submit" type="submit">Get emails about this page</button>' + | ||
| '</form>' | ||
| window.setFixtures(FIXTURE) | ||
| jasmine.Ajax.install() | ||
| }) | ||
|
|
||
| afterEach(function () { | ||
| jasmine.Ajax.uninstall() | ||
| }) | ||
|
|
||
| it('calls the personalisation API on load', function () { | ||
| initButton() | ||
| var request = jasmine.Ajax.requests.mostRecent() | ||
| expect(request.url).toBe('/api/personalisation/check-email-subscription?base_path=/current-page-path') | ||
| expect(request.method).toBe('GET') | ||
| }) | ||
|
|
||
| it('replaces the button when the API returns button html', function () { | ||
| initButton() | ||
|
|
||
| jasmine.Ajax.requests.mostRecent().respondWith({ | ||
| status: 200, | ||
| contentType: 'application/json', | ||
| responseText: '{\n "base_path": "/current-page-path",\n "active": true,\n "button_html": "<form class=\\"gem-c-single-page-notification-button new-button-for-test\\" action=\\"/email/subscriptions/single-page/new\\" method=\\"POST\\">\\n <input type=\\"hidden\\" name=\\"base_path\\" value=\\"/current-page-path\\">\\n <button class=\\"gem-c-single-page-notification-button__submit\\" type=\\"submit\\">Stop getting emails about this page\\n</button>\\n</form>"\n}' | ||
| }) | ||
|
|
||
| var form = document.querySelector('form.gem-c-single-page-notification-button.new-button-for-test') | ||
| expect(form).toHaveText('Stop getting emails about this page') | ||
| }) | ||
|
|
||
| it('should remain unchanged if the response is not JSON', function () { | ||
| var responseText = 'I am not JSON, actually' | ||
| initButton() | ||
|
|
||
| jasmine.Ajax.requests.mostRecent().respondWith({ | ||
| status: 200, | ||
| contentType: 'application/json', | ||
| responseText: responseText | ||
| }) | ||
|
|
||
| var form = document.querySelector('form.gem-c-single-page-notification-button.old-button-for-test') | ||
| expect(form).toHaveText('Get emails about this page') | ||
| expect(GOVUK.Modules.SinglePageNotificationButton.prototype.responseIsJSON(responseText)).toBe(false) | ||
| }) | ||
|
|
||
| it('should remain unchanged if response text is empty', function () { | ||
| var responseText = '' | ||
| initButton() | ||
|
|
||
| jasmine.Ajax.requests.mostRecent().respondWith({ | ||
| status: 200, | ||
| contentType: 'application/json', | ||
| responseText: responseText | ||
| }) | ||
|
|
||
| var form = document.querySelector('form.gem-c-single-page-notification-button.old-button-for-test') | ||
| expect(form).toHaveText('Get emails about this page') | ||
| expect(GOVUK.Modules.SinglePageNotificationButton.prototype.responseIsJSON(responseText)).toBe(false) | ||
| }) | ||
|
|
||
| it('should remain unchanged if the endpoint fails', function () { | ||
| initButton() | ||
|
|
||
| jasmine.Ajax.requests.mostRecent().respondWith({ | ||
| status: 500, | ||
| contentType: 'text/plain', | ||
| responseText: '' | ||
| }) | ||
|
|
||
| var form = document.querySelector('form.gem-c-single-page-notification-button.old-button-for-test') | ||
| expect(form).toHaveText('Get emails about this page') | ||
| }) | ||
|
|
||
| function initButton () { | ||
| var element = document.querySelector('[data-module=single-page-notification-button]') | ||
| new GOVUK.Modules.SinglePageNotificationButton(element).init() | ||
| } | ||
| }) |