Skip to content

Commit

Permalink
f-account-info@v0.19.0 - Wired up save action to store method (#1749)
Browse files Browse the repository at this point in the history 
* f-account-info - Wired up the template save action to the vuex save method + reduced the layer by moving the analytics to the template as only a single method

* f-account-info - Fix up test

* f-account-info - Review tweak

Co-authored-by: billy.oliver <billy.oliver@just-eat.com>
  • Loading branch information
@oliversweb
oliversweb and billy.oliver authored Mar 16, 2022
1 parent 3a7c72b commit 2ec1a85
Show file tree
Hide file tree
Showing 9 changed files with 145 additions and 126 deletions.
8 changes: 8 additions & 0 deletions packages/components/pages/f-account-info/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,14 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).


v0.19.0
------------------------------
*March 15, 2022*

### Changed
- Wired up the Template save action to the Vuex store save method


v0.18.0
------------------------------
*March 4, 2022*
Expand Down
4 changes: 2 additions & 2 deletions packages/components/pages/f-account-info/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@justeat/f-account-info",
"description": "Fozzie Account Info - The account information page",
"version": "0.18.0",
"version": "0.19.0",
"main": "dist/f-account-info.umd.min.js",
"maxBundleSize": "100kB",
"files": [
Expand Down Expand Up @@ -65,7 +65,7 @@
"@justeat/f-card-with-content": "1.0.0",
"@justeat/f-error-message": "1.1.0",
"@justeat/f-form-field": "4.5.0",
"@justeat/f-link": "2.3.0",
"@justeat/f-link": "2.3.0",
"@justeat/f-wdio-utils": "0.6.0",
"@samhammer/vue-cli-plugin-stylelint": "2.1.0",
"@vue/cli-plugin-babel": "4.5.15",
Expand Down
38 changes: 30 additions & 8 deletions packages/components/pages/f-account-info/src/components/AccountInfo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,6 @@ import AccountInfoValidationMixin from './AccountInfoValidationMixin.vue';
import tenantConfigs from '../tenants';
import ConsumerApi from '../services/providers/Consumer.api';
import fAccountInfoModule from '../store/accountInfo.module';
import AccountInfoAnalyticsService from '../services/analytics';
import {
EVENT_SPINNER_STOP_LOADING
Expand Down Expand Up @@ -280,7 +279,6 @@ export default {
cookies: this.$cookies,
baseUrl: this.smartGatewayBaseUrl
}),
accountInfoAnalyticsService: new AccountInfoAnalyticsService(this.$gtm),
tenantConfigs,
isFormSubmitting: false,
hasFormUpdate: false,
Expand Down Expand Up @@ -316,7 +314,8 @@ export default {
methods: {
...mapActions('fAccountInfoModule', [
'loadConsumerDetails',
'editConsumerDetails'
'editConsumerDetails',
'saveConsumerDetails'
]),
/**
Expand All @@ -330,8 +329,9 @@ export default {
/**
* Gets the form data (from the api) and assigns it to State
* then lowers the hasFormUpdate flag as the form data is currently clean
* then stops the on-screen spinner from showing
* then lowers the hasFormUpdate + hasAddressBeenUpdated flag
* as the form data is currently clean then stops the on-screen
* spinner from showing
*
* If an error occurs then this is logged and the Template is
* informed that it is in a state of error.
Expand All @@ -341,6 +341,7 @@ export default {
await this.loadConsumerDetails({ api: this.consumerApi, authToken: this.authToken });
this.$log.info('Consumer details fetched successfully', ['account-pages', 'account-info']);
this.hasFormUpdate = false;
this.hasAddressBeenUpdated = false;
} catch (error) {
this.$log.error('Error fetching consumer details', error, ['account-pages', 'account-info']);
this.handleErrorState(new AccountInfoError(error.message, error?.response?.status));
Expand All @@ -351,7 +352,7 @@ export default {
}
},
onFormSubmit () {
async onFormSubmit () {
if (this.isFormInvalid()) {
this.logValidationFailure();
return;
Expand All @@ -364,10 +365,10 @@ export default {
this.setSubmittingState(true);
try {
// TODO - to be added with next ticket
await this.saveConsumerDetails({ api: this.consumerApi, authToken: this.authToken });
this.$log.info('Consumer details saved successfully', ['account-pages', 'account-info']);
this.hasFormUpdate = false;
this.accountInfoAnalyticsService.trackFormSubmission(this.hasAddressBeenUpdated);
this.analyticsTrackFormSubmission(this.hasAddressBeenUpdated);
this.hasAddressBeenUpdated = false;
} catch (error) {
this.$log.error('Error saving consumer details', error, ['account-pages', 'account-info']);
Expand Down Expand Up @@ -398,6 +399,27 @@ export default {
if (isAddressField) {
this.hasAddressBeenUpdated = true;
}
},
/**
* Pushes `form` event to the dataLayer with correct data
*/
analyticsTrackFormSubmission (hasAddressBeenUpdated) {
this.$gtm.pushEvent({
event: 'trackEvent',
category: 'account',
action: 'save_accountinfo_changes',
label: 'submit'
});
if (hasAddressBeenUpdated) {
this.$gtm.pushEvent({
event: 'trackEvent',
category: 'my account',
action: 'account info',
label: 'address change intent'
});
}
}
}
};
Expand Down
138 changes: 96 additions & 42 deletions packages/components/pages/f-account-info/src/components/_tests/AccountInfo.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import Vuex from 'vuex';
import { shallowMount } from '@vue/test-utils';
import AccountInfo from '../AccountInfo.vue';
// eslint-disable-next-line no-unused-vars
import AccountInfoAnalyticsService from '../../services/analytics';
import AccountInfoValidationMixin from '../AccountInfoValidationMixin.vue';

import {
Expand All @@ -16,21 +14,21 @@ import {
let wrapper;
let cookiesSpy;
let httpSpy;
let pushEventSpy;
let sutMocks;
let sutProps;
let dataDefaults;
let initialiseSpy;

jest.mock('../../services/analytics.js');

const logMocks = {
info: jest.fn(),
error: jest.fn()
};

const storeActions = {
loadConsumerDetails: jest.fn(),
editConsumerDetails: jest.fn()
editConsumerDetails: jest.fn(),
saveConsumerDetails: jest.fn()
};

const storeState = consumerStateModel;
Expand Down Expand Up @@ -80,13 +78,17 @@ describe('AccountInfo', () => {
});
cookiesSpy = jest.fn();
httpSpy = jest.fn();
pushEventSpy = jest.fn();
sutMocks = {
$parent: {
$emit: jest.fn()
},
$http: httpSpy,
$cookies: cookiesSpy,
$log: logMocks
$log: logMocks,
$gtm: {
pushEvent: pushEventSpy
}
};
sutProps = {
authToken: token,
Expand Down Expand Up @@ -172,6 +174,7 @@ describe('AccountInfo', () => {
it('should set shouldShowErrorPage flag to true if an error occurs', async () => {
// Arrange & Act
const errorActions = {
...storeActions,
loadConsumerDetails: jest.fn().mockImplementationOnce(() => {
throw new Error('some-error');
})
Expand Down Expand Up @@ -204,6 +207,7 @@ describe('AccountInfo', () => {
it('should log an error if loading preferences throws an error', async () => {
// Arrange
const errorActions = {
...storeActions,
loadConsumerDetails: jest.fn().mockImplementationOnce(() => {
throw new Error('some-error');
})
Expand All @@ -223,38 +227,6 @@ describe('AccountInfo', () => {
});

describe('`methods`', () => {
describe('`onFormSubmit`', () => {
describe('form is valid', () => {
it('address has not changed', async () => {
// Arrange
wrapper = await mountAccountInfo();
await wrapper.setData({ hasAddressBeenUpdated: false, hasFormUpdate: true });

jest.spyOn(wrapper.vm, 'isFormInvalid').mockImplementation(() => false);

// Act
wrapper.vm.onFormSubmit();

// Assert
expect(wrapper.vm.accountInfoAnalyticsService.trackFormSubmission).toHaveBeenCalledWith(false);
});

it('address has changed', async () => {
// Arrange
wrapper = await mountAccountInfo();
await wrapper.setData({ hasAddressBeenUpdated: true, hasFormUpdate: true });

jest.spyOn(wrapper.vm, 'isFormInvalid').mockImplementation(() => false);

// Act
wrapper.vm.onFormSubmit();

// Assert
expect(wrapper.vm.accountInfoAnalyticsService.trackFormSubmission).toHaveBeenCalledWith(true);
});
});
});

describe('`onEditConsumer`', () => {
describe('when editing the form', () => {
it.each([
Expand Down Expand Up @@ -334,6 +306,21 @@ describe('AccountInfo', () => {
});

describe('onFormSubmit ::', () => {
it('should call the save action with the correct parameters', async () => {
// Arrange
wrapper = await mountAccountInfo();
await wrapper.setData({ hasFormUpdate: true });

// Act
await wrapper.vm.onFormSubmit();

// Assert
expect(storeActions.saveConsumerDetails).toHaveBeenCalledWith(expect.any(Object), {
api: wrapper.vm.$data.consumerApi,
authToken: token
});
});

it('should log an info log', async () => {
// Act
wrapper = await mountAccountInfo();
Expand All @@ -349,13 +336,80 @@ describe('AccountInfo', () => {
);
});

// to be added in a future pr
it.skip('should set shouldShowErrorPage flag to true if an error occurs', async () => {
it('should set shouldShowErrorPage flag to true if an error occurs', async () => {
// Arrange & Act
const errorActions = {
...storeActions,
saveConsumerDetails: jest.fn().mockImplementationOnce(() => {
throw new Error('some-error');
})
};
wrapper = await mountAccountInfo({ actions: errorActions });
await wrapper.setData({ hasFormUpdate: true });

// Act
await wrapper.vm.onFormSubmit();

// Assert
expect(wrapper.vm.shouldShowErrorPage).toEqual(true);
});

it('should not call the save action if no changes', async () => {
// Arrange & Act
wrapper = await mountAccountInfo();
await wrapper.setData({ hasFormUpdate: false });

// Act
await wrapper.vm.onFormSubmit();

// Assert
expect(storeActions.saveConsumerDetails).not.toHaveBeenCalledWith();
});

it('should set shouldShowErrorPage flag to true if an error occurs', async () => {
// Arrange & Act
const errorActions = {
...storeActions,
saveConsumerDetails: jest.fn().mockImplementationOnce(() => {
throw new Error('some-error');
})
};
wrapper = await mountAccountInfo({ actions: errorActions });
await wrapper.setData({ hasFormUpdate: true });

// Act
await wrapper.vm.onFormSubmit();

// Assert
expect(wrapper.vm.shouldShowErrorPage).toEqual(true);
});

// to be added in a future pr
it.skip('should not call the save action if no changes', async () => {
describe('publishing analytics', () => {
describe('form is valid', () => {
it('address has not changed', async () => {
// Arrange
wrapper = await mountAccountInfo();
await wrapper.setData({ hasAddressBeenUpdated: false, hasFormUpdate: true });

// Act
await wrapper.vm.onFormSubmit();

// Assert
expect(pushEventSpy).toMatchSnapshot();
});

it('address has changed', async () => {
// Arrange
wrapper = await mountAccountInfo();
await wrapper.setData({ hasAddressBeenUpdated: true, hasFormUpdate: true });

// Act
await wrapper.vm.onFormSubmit();

// Assert
expect(pushEventSpy).toMatchSnapshot();
});
});
});
});
});
Expand Down
4 changes: 2 additions & 2 deletions ...ests/__snapshots__/analytics.test.js.snap → ...ts/__snapshots__/AccountInfo.test.js.snap
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Analytics trackFormSubmission :: address has been updated should push submit and address changed events 1`] = `
exports[`AccountInfo \`methods\` onFormSubmit :: publishing analytics form is valid address has changed 1`] = `
[MockFunction] {
"calls": Array [
Array [
Expand Down Expand Up @@ -33,7 +33,7 @@ exports[`Analytics trackFormSubmission :: address has been updated should push s
}
`;

exports[`Analytics trackFormSubmission :: address has not been updated should push submit event only 1`] = `
exports[`AccountInfo \`methods\` onFormSubmit :: publishing analytics form is valid address has not changed 1`] = `
[MockFunction] {
"calls": Array [
Array [
Expand Down
Loading

0 comments on commit 2ec1a85

Please sign in to comment.