Merge pull request #65 from khoanguyen96/fix-deprecation-matchMedia-test

Fix deprecation notices and match media failure in tests

Author: cocoastorm

test/unit/jest.conf.js

@@ -1,6 +1,7 @@
 const path = require('path');
 
 module.exports = {
+  testURL: 'http://localhost',
   rootDir: path.resolve(__dirname, '../../'),
   moduleFileExtensions: [
     'js',

test/unit/setup.js

@@ -2,6 +2,10 @@ import Vue from 'vue';
 
 Vue.config.productionTip = false;
 
-global.jsdom.reconfigure({
-  url: 'http://localhost',
-});
+// polyfill matchMedia
+window.matchMedia = window.matchMedia ||
+  (() => ({
+    matches: false,
+    addListener: () => {},
+    removeListener: () => {},
+  }));

test/unit/specs/components/PayPalCheckout.spec.js

@@ -1,4 +1,4 @@
-import { createLocalVue, shallow } from '@vue/test-utils';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { createRenderer } from 'vue-server-renderer';
 import PayPalCheckout from '@/components/PayPalCheckout.vue';
 
@@ -40,58 +40,62 @@ function getProps() {
 }
 
 describe('PayPalCheckout.vue', () => {
-  const localVue = createLocalVue();
-  const checkout = shallow(PayPalCheckout, {
-    attachToDocument: true,
-    propsData: getProps(),
-    localVue,
+  let checkout;
+
+  beforeEach(() => {
+    const localVue = createLocalVue();
+    checkout = shallowMount(PayPalCheckout, {
+      attachToDocument: true,
+      propsData: getProps(),
+      localVue,
+    });
   });
 
-  it('should have the amount prop', () => {
+  test('should have the amount prop', () => {
     expect(checkout.props().amount).toEqual('30.00');
   });
 
-  it('should have the client prop with production and sandbox', () => {
+  test('should have the client prop with production and sandbox', () => {
     expect(checkout.vm.client).toEqual(credentials);
   });
 
-  it('should have the currency prop', () => {
+  test('should have the currency prop', () => {
     expect(checkout.vm).toEqual(expect.objectContaining({
       currency: expect.any(String),
     }));
     expect(checkout.vm.currency.length).toBeGreaterThan(2);
   });
 
-  it('should have the commit prop', () => {
+  test('should have the commit prop', () => {
     expect(checkout.props().commit).toBe(true);
   });
 
-  it('should have the env prop', () => {
+  test('should have the env prop', () => {
     expect(checkout.props().env).toBeTruthy();
   });
 
-  it('should have the invoiceNumber prop', () => {
+  test('should have the invoiceNumber prop', () => {
     expect(checkout.props().invoiceNumber).toEqual('201705051001');
   });
 
-  it('should have the items prop', () => {
+  test('should have the items prop', () => {
     expect(checkout.vm).toEqual(expect.objectContaining({
       items: expect.any(Array),
     }));
   });
 
   // TODO: renable after jsdom fixes css parsing
   describe('iframe rendering', () => {
-    it('div', () => {
+    test('div', () => {
       const div = checkout.find('div');
       expect(div.is('div')).toBe(true);
     });
 
-    it('has xcomponent class', () => {
+    test('has xcomponent class', () => {
       expect(checkout.contains('.xcomponent-visible')).toBe(true);
     });
 
-    it('has same HTML structure', () => {
+    test('has same HTML structure', () => {
       const renderer = createRenderer();
       renderer.renderToString(checkout.vm, (err, str) => {
         if (err) throw new Error(err);

test/unit/specs/components/SimpleMethods.spec.js

@@ -1,4 +1,4 @@
-import { createLocalVue, shallow } from '@vue/test-utils';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
 import PayPalCheckout from '@/components/PayPalCheckout.vue';
 
 const credentials = {
@@ -54,52 +54,56 @@ jest.mock('paypal-checkout', () => ({
 }));
 
 describe('Methods within PayPalCheckout.vue', () => {
-  const localVue = createLocalVue();
-  const checkout = shallow(PayPalCheckout, {
-    localVue,
-    attachToDocument: true,
-    propsData: getProps(),
+  let checkout;
+
+  beforeEach(() => {
+    const localVue = createLocalVue();
+    checkout = shallowMount(PayPalCheckout, {
+      localVue,
+      attachToDocument: true,
+      propsData: getProps(),
+    });
   });
 
   describe('Environment', () => {
-    it('env prop is true', () => {
+    test('env prop is true', () => {
       expect(checkout.props().env).toEqual('sandbox');
     });
   });
 
   describe('vue.payment()', () => {
-    it('has payment()', () => {
+    test('has payment()', () => {
       expect(checkout.vm).toEqual(expect.objectContaining({
         payment: expect.any(Function),
       }));
     });
 
-    it('returns a payment object', () => (
+    test('returns a payment object', () => (
       checkout.vm.payment().then((p) => {
         expect(p).toBeInstanceOf(Object);
       })
     ));
 
-    it('payment object has experience object', () => {
+    test('payment object has experience object', () => {
       checkout.vm.payment().then((p) => {
         expect(p.experience).toEqual(checkout.vm.experience);
       });
     });
 
-    it('payment object has transactions array', () => (
+    test('payment object has transactions array', () => (
       checkout.vm.payment().then((p) => {
         expect(p.payment).toEqual(expect.objectContaining({
           transactions: expect.any(Array),
         }));
       })));
 
-    it('payment object has one single transaction', () => (
+    test('payment object has one single transaction', () => (
       checkout.vm.payment().then((p) => {
         expect(p.payment.transactions.length).toBe(1);
       })
     ));
 
-    it('transaction has the right amount', () => (
+    test('transaction has the right amount', () => (
       checkout.vm.payment().then((p) => {
         const transaction = p.payment.transactions[0];
         expect(transaction.amount).toEqual(expect.objectContaining({
@@ -109,7 +113,7 @@ describe('Methods within PayPalCheckout.vue', () => {
       })
     ));
 
-    it('transaction has the right currency', () => (
+    test('transaction has the right currency', () => (
       checkout.vm.payment().then((p) => {
         const transaction = p.payment.transactions[0];
         expect(transaction.amount).toEqual(expect.objectContaining({
@@ -119,7 +123,7 @@ describe('Methods within PayPalCheckout.vue', () => {
       })
     ));
 
-    it('transaction has the right invoice number', () => (
+    test('transaction has the right invoice number', () => (
       checkout.vm.payment().then((p) => {
         const transaction = p.payment.transactions[0];
         expect(transaction).toEqual(expect.objectContaining({
@@ -129,7 +133,7 @@ describe('Methods within PayPalCheckout.vue', () => {
       })
     ));
 
-    it('transaction has a item_list', () => (
+    test('transaction has a item_list', () => (
       checkout.vm.payment().then((p) => {
         const transaction = p.payment.transactions[0];
         expect(transaction).toEqual(expect.objectContaining({
@@ -138,7 +142,7 @@ describe('Methods within PayPalCheckout.vue', () => {
       })
     ));
 
-    it('transaction has items array', () => (
+    test('transaction has items array', () => (
       checkout.vm.payment().then((p) => {
         const itemList = p.payment.transactions[0].item_list;
         expect(itemList).toEqual(expect.objectContaining({
@@ -150,16 +154,16 @@ describe('Methods within PayPalCheckout.vue', () => {
   });
 
   describe('action methods', () => {
-    it('has onAuthorize() and onCancel()', () => {
+    test('has onAuthorize() and onCancel()', () => {
       expect(checkout.vm).toEqual(expect.objectContaining({
         onAuthorize: expect.any(Function),
         onCancel: expect.any(Function),
       }));
     });
 
-    it('onAuthorize() returns true and not a promise if commit is false', () => {
-      const component = shallow(PayPalCheckout, {
-        localVue,
+    test('onAuthorize() returns true and not a promise if commit is false', () => {
+      const component = shallowMount(PayPalCheckout, {
+        localVue: createLocalVue(),
         attachToDocument: true,
         propsData: { ...getProps(), commit: false },
       });

test/unit/specs/util/additionalProps.spec.js

@@ -1,14 +1,14 @@
 import additionalProps from '@/util/additionalProps';
 
 describe('additionalProps.js', () => {
-  it('exports two functions', () => {
+  test('exports two functions', () => {
     expect(additionalProps).toEqual(expect.objectContaining({
       vmProps: expect.any(Function),
       getTypedProps: expect.any(Function),
     }));
   });
 
-  it('has the button props', () => {
+  test('has the button props', () => {
     const props = additionalProps.vmProps();
 
     expect(props).toEqual(expect.objectContaining({
@@ -39,7 +39,7 @@ describe('additionalProps.js', () => {
     }));
   });
 
-  it('has the payment(s) props', () => {
+  test('has the payment(s) props', () => {
     const props = additionalProps.vmProps();
 
     expect(props).toEqual(expect.objectContaining({
@@ -54,7 +54,7 @@ describe('additionalProps.js', () => {
     }));
   });
 
-  it('has the transaction props', () => {
+  test('has the transaction props', () => {
     const props = additionalProps.vmProps();
 
     expect(props).toEqual(expect.objectContaining({

test/unit/specs/util/defaultProps.spec.js

@@ -1,7 +1,7 @@
 import defaultProps from '@/util/defaultProps';
 
 describe('defaultProps.js', () => {
-  it('has the required props', () => {
+  test('has the required props', () => {
     const props = defaultProps();
 
     expect(props).toEqual(expect.objectContaining({
@@ -21,7 +21,7 @@ describe('defaultProps.js', () => {
     });
   });
 
-  it('has the optional props', () => {
+  test('has the optional props', () => {
     const props = defaultProps();
 
     expect(props).toEqual(expect.objectContaining({
@@ -40,7 +40,7 @@ describe('defaultProps.js', () => {
     });
   });
 
-  it('has the specific props', () => {
+  test('has the specific props', () => {
     const props = defaultProps();
 
     expect(props).toEqual(expect.objectContaining({

test/unit/specs/util/paypalProp.spec.js

@@ -2,7 +2,7 @@ import PayPalProp from '@/util/paypalProp';
 
 describe('paypalProp.js', () => {
   describe('new paypalProp()', () => {
-    it('construct with most options specified', () => {
+    test('construct with most options specified', () => {
       const paypal = new PayPalProp({
         name: 'some-name',
         paypalName: 'somePaypal',
@@ -16,7 +16,7 @@ describe('paypalProp.js', () => {
       }));
     });
 
-    it('construct with just name specified', () => {
+    test('construct with just name specified', () => {
       const paypal = new PayPalProp({ name: 'some-name' });
 
       expect(paypal).toEqual(expect.objectContaining({
@@ -27,7 +27,7 @@ describe('paypalProp.js', () => {
     });
   });
 
-  it('getVmProp()', () => {
+  test('getVmProp()', () => {
     const paypal = new PayPalProp({
       name: 'some-name',
       paypalName: 'somePaypal',
@@ -42,7 +42,7 @@ describe('paypalProp.js', () => {
     });
   });
 
-  it('change()', () => {
+  test('change()', () => {
     const paypal = new PayPalProp({
       name: 'some-name',
       paypalName: 'somePaypal',