Merge pull request #225 from Quetzacoalt91/test-gmc-card

Avoid stories to impact each other & Add first unit tests for GMC card

_dev/.storybook/preview.js

@@ -42,6 +42,9 @@ import "!style-loader!css-loader?url=false!./assets/shame.css";
 // app.scss all the styles for the module
 import "!style-loader!css-loader!sass-loader!../src/assets/scss/app.scss";
 
+// Test utils
+import {cloneStore} from '@/../tests/store';
+
 // jest results file
 import results from '../.jest-test-results.json';
 
@@ -55,7 +58,6 @@ const message = require("./translations.json");
 Vue.use(VueI18n);
 Vue.use(Vuex);
 
-import store from "../src/store";
 addDecorator(() => ({
   template: "<story/>",
   i18n: new VueI18n({
@@ -85,7 +87,7 @@ addDecorator(() => ({
       immediate: true,
     },
   },
-  store,
+  store: new Vuex.Store(cloneStore()),
 }));
 
 addDecorator(

_dev/package.json

@@ -21,6 +21,7 @@
     "bootstrap": "^4.5.3",
     "bootstrap-vue": "^2.21.1",
     "debounce": "^1.2.1",
+    "lodash.clonedeep": "^4.5.0",
     "lodash.uniqby": "^4.7.0",
     "prestakit": "^1.2.2",
     "prestashop_accounts_vue_components": "^1.5.6",

_dev/src/components/merchant-center-account/merchant-center-account-card.spec.ts

@@ -0,0 +1,69 @@
+/**
+ * @jest-environment jsdom
+ */
+import Vuex from 'vuex';
+
+// Import this file first to init mock on window
+import {commonOptions, cloneStore} from '@/../tests/init';
+
+import {shallowMount} from '@vue/test-utils';
+import MerchantCenterAccountCard from '@/components/merchant-center-account/merchant-center-account-card.vue';
+import BadgeListRequirements from '@/components/commons/badge-list-requirements.vue';
+import BootstrapVue, {BAlert} from 'bootstrap-vue';
+import {
+  merchantCenterAccountNotConnected,
+  merchantCenterAccountConnected,
+} from '../../../.storybook/mock/merchant-center-account';
+
+describe('merchant-center-account-card.vue', () => {
+  it('does show almot nothing when it is not actived yet', () => {
+    const wrapper = shallowMount(MerchantCenterAccountCard, {
+      propsData: {
+        isEnabled: false,
+      },
+      ...commonOptions,
+      store: new Vuex.Store(cloneStore()),
+    });
+    wrapper.vm.$refs.mcaSelection = undefined;
+
+    // Check disabled state
+    expect(wrapper.find('.ps_gs-onboardingcard').classes('ps_gs-onboardingcard--disabled')).toBe(true);
+    expect(wrapper.findComponent(BadgeListRequirements)).toBeTruthy();
+    // Check existing GMC list, selected account details are not displayed
+    expect(wrapper.find('#mcaSelection').exists()).toBeFalsy();
+    expect(wrapper.findComponent(BAlert).exists()).toBeFalsy();
+  });
+
+  it('does show almost nothing when it is not actived yet', () => {
+    const wrapper = shallowMount(MerchantCenterAccountCard, {
+      propsData: {
+        isEnabled: false,
+      },
+      ...commonOptions,
+      store: new Vuex.Store(cloneStore()),
+    });
+
+    // Check disabled state
+    expect(wrapper.find('.ps_gs-onboardingcard').classes('ps_gs-onboardingcard--disabled')).toBe(true);
+    expect(wrapper.findComponent(BadgeListRequirements).exists()).toBeTruthy();
+    // Check existing GMC list, selected account details are not displayed
+    expect(wrapper.find('#mcaSelection').exists()).toBeFalsy();
+    expect(wrapper.findComponent(BAlert).exists()).toBeFalsy();
+  });
+
+  it('show the link to create an account when enabled', () => {
+    const wrapper = shallowMount(MerchantCenterAccountCard, {
+      propsData: {
+        isEnabled: true,
+      },
+      ...commonOptions,
+      store: new Vuex.Store(cloneStore()),
+    });
+
+    // Check enabled state
+    expect(wrapper.find('.ps_gs-onboardingcard').classes('ps_gs-onboardingcard--disabled')).toBe(false);
+    expect(wrapper.findComponent(BadgeListRequirements).exists()).toBeFalsy();
+    // Check button to create an account exists
+    expect(wrapper.find('.material-icons').text()).toBe('person_add');
+  });
+});

_dev/src/components/merchant-center-account/merchant-center-account-card.vue

@@ -433,6 +433,7 @@
 <script>
 import googleUrl from '@/assets/json/googleUrl.json';
 import uniqBy from 'lodash.uniqby';
+import VueShowdown from 'vue-showdown';
 import {
   WebsiteClaimErrorReason,
 } from '../../store/modules/accounts/state';
@@ -446,6 +447,7 @@ export default {
     MerchantCenterAccountPopinOverwriteClaim,
     BadgeListRequirements,
     MerchantCenterAccountPopinWebsiteRequirements,
+    VueShowdown,
   },
   data() {
     return {
@@ -629,7 +631,7 @@ export default {
       return isAdmin;
     },
     setFocusOnSelectMCA() {
-      if (this.$refs.mcaSelection) {
+      if (this.$refs.mcaSelection?.$refs?.toggle) {
         this.$refs.mcaSelection.$refs.toggle.focus();
       }
     },

_dev/src/views/landing-page.spec.ts

@@ -3,10 +3,10 @@
  */
 
 // Import this file first to init mock on window
+import {commonOptions} from '@/../tests/init';
 
 import {shallowMount} from '@vue/test-utils';
 import LandingPage from '@/views/landing-page.vue';
-import {commonOptions} from '@/../tests/init';
 
 describe('landing-page.vue', () => {
   it('shows all the onboarding details', () => {

_dev/stories/free-listing-card.stories.ts

@@ -34,17 +34,15 @@ export const Disabled:any = Template.bind({});
 Disabled.args = {
   isEnabled: false,
   beforeMount(this: any) {
-    this.$store.state.productFeed = productFeedIsConfigured;
+    this.$store.state.productFeed = Object.assign({}, productFeedIsConfigured);
   },
 }
 
 export const Enabled:any = Template.bind({});
-// TODO : why the card is not reseting when changing story
 Enabled.args = {
   isEnabled: true,
   beforeMount(this: any) {
-    this.$store.state.productFeed = productFeedIsConfigured;
-    this.$store.state.freeListing.errorAPI = false;
+    this.$store.state.productFeed = Object.assign({}, productFeedIsConfigured);
     this.$store.state.freeListing.status = true;
   },
 }
@@ -53,9 +51,7 @@ export const AlertEnableFreeListing:any = Template.bind({});
 AlertEnableFreeListing.args = {
   isEnabled: true,
   beforeMount(this: any) {
-    this.$store.state.productFeed = productFeedIsConfigured;
-    this.$store.state.freeListing.errorAPI = false;
-    this.$store.state.freeListing.status = false;
+    this.$store.state.productFeed = Object.assign({}, productFeedIsConfigured);
   },
 }
 
@@ -64,7 +60,7 @@ export const AlertCountryNotEligible:any = Template.bind({});
 AlertCountryNotEligible.args = {
   isEnabled: true,
   beforeMount(this: any) {
-    this.$store.state.productFeed = productFeedIsConfigured;
+    this.$store.state.productFeed = Object.assign({}, productFeedIsConfigured);
   },
 }
 
@@ -85,7 +81,7 @@ export const AlertCantEnableFreeListing:any = Template.bind({});
 AlertCantEnableFreeListing.args = {
   isEnabled: true,
   beforeMount(this: any) {
-    this.$store.state.productFeed = productFeedIsConfigured;
+    this.$store.state.productFeed = Object.assign({}, productFeedIsConfigured);
     this.$store.state.freeListing.errorAPI = true;
   },
 }

_dev/stories/free-listing-popin-disable.stories.ts

@@ -1,5 +1,5 @@
 import FreeListingPopinDisable from '../src/components/free-listing/free-listing-popin-disable.vue'
-import {contextPsAccountsNotConnected, contextPsAccountsConnectedAndValidated} from "../.storybook/mock/ps-accounts";
+import {contextPsAccountsConnectedAndValidated} from "../.storybook/mock/ps-accounts";
 
 export default {
   title: 'Free Listing/Popins/Disable',
@@ -15,7 +15,7 @@ const Template = (args, { argTypes }) => ({
     </div>
   `,
   beforeCreate(this: any) {
-    this.$store.state.accounts.contextPsAccounts = contextPsAccountsConnectedAndValidated;
+    this.$store.state.accounts.contextPsAccounts = Object.assign({}, contextPsAccountsConnectedAndValidated);
   },
 });
 

_dev/stories/free-listing-popin-enable.stories.ts

@@ -15,7 +15,7 @@ const Template = (args, { argTypes }) => ({
     </div>
   `,
   beforeCreate(this: any) {
-    this.$store.state.accounts.contextPsAccounts = contextPsAccountsConnectedAndValidated;
+    this.$store.state.accounts.contextPsAccounts = Object.assign({}, contextPsAccountsConnectedAndValidated);
   },
 });
 

_dev/stories/glass.stories.ts

@@ -17,7 +17,7 @@ const Template = (args, { argTypes }) => ({
     </div>
   `,
   beforeCreate(this: any) {
-    this.$store.state.accounts.contextPsAccounts = contextPsAccountsConnectedAndValidated;
+    this.$store.state.accounts.contextPsAccounts = Object.assign({}, contextPsAccountsConnectedAndValidated);
   },
 });
 

_dev/stories/google-account-card.stories.ts

@@ -56,23 +56,23 @@ NotConnectedAndNoAuthenticationUrlYet.args = {
 export const NotConnectedAndCanNotGetAuthenticationUrl:any = Template.bind({});
 NotConnectedAndCanNotGetAuthenticationUrl.args = {
   isEnabled: true,
-  user: googleAccountFailedToRetrieveAuthenticationUrl,
+  user: Object.assign({}, googleAccountFailedToRetrieveAuthenticationUrl),
 };
 
 export const NotConnected:any = Template.bind({});
 NotConnected.args = {
   isEnabled: true,
-  user: googleAccountNotConnectedButAuthenticationUrlOK,
+  user: Object.assign({}, googleAccountNotConnectedButAuthenticationUrlOK),
 };
 
 export const CouldNotConnect:any = Template.bind({});
 CouldNotConnect.args = {
   isEnabled: true,
-  user: googleAccountFailedToRetrieveToken,
+  user: Object.assign({}, googleAccountFailedToRetrieveToken),
 };
 
 export const Connected:any = Template.bind({});
 Connected.args = {
   isEnabled: true,
-  user: googleAccountConnected,
+  user: Object.assign({}, googleAccountConnected),
 };

_dev/stories/google-account-popin-disconnect.stories.ts

@@ -18,8 +18,8 @@ const Template = (args, { argTypes }) => ({
     </div>
   `,
   beforeCreate(this: any) {
-    this.$store.state.accounts.contextPsAccounts = contextPsAccountsConnectedAndValidated;
-    this.$store.state.accounts.googleAccount = googleAccountConnected;
+    this.$store.state.accounts.contextPsAccounts = Object.assign({}, contextPsAccountsConnectedAndValidated);
+    this.$store.state.accounts.googleAccount = Object.assign({}, googleAccountConnected);
   },
 });