update dependencies and fix ts errors

packages/sitecore-jss-vue/package.json

@@ -24,25 +24,26 @@
     "url": "https://github.com/sitecore/jss/issues"
   },
   "devDependencies": {
-    "@types/jest": "^23.3.5",
-    "@types/url-parse": "^1.4.1",
-    "@vue/test-utils": "^1.0.0-beta.25",
-    "del-cli": "^1.1.0",
-    "jest": "^23.6.0",
-    "jest-serializer-html": "^5.0.0",
-    "ts-jest": "23.1.3",
-    "tslint": "^5.11.0",
-    "typescript": "^3.1.3",
-    "url-parse": "^1.4.3",
-    "vue": "^2.5.17",
-    "vue-class-component": "^6.3.2",
-    "vue-jest": "^3.0.0",
-    "vue-property-decorator": "^7.2.0",
-    "vue-server-renderer": "^2.5.17",
-    "vue-template-compiler": "^2.5.17"
+    "@types/jest": "^24.0.18",
+    "@types/url-parse": "^1.4.3",
+    "@vue/test-utils": "^1.0.0-beta.29",
+    "babel-core": "^6.26.3",
+    "del-cli": "^3.0.0",
+    "jest": "^24.9.0",
+    "jest-serializer-html": "^7.0.0",
+    "ts-jest": "24.1.0",
+    "tslint": "^5.20.0",
+    "typescript": "^3.6.3",
+    "url-parse": "^1.4.7",
+    "vue": "^2.6.10",
+    "vue-class-component": "^7.1.0",
+    "vue-jest": "^3.0.5",
+    "vue-property-decorator": "^8.2.2",
+    "vue-server-renderer": "^2.6.10",
+    "vue-template-compiler": "^2.6.10"
   },
   "peerDependencies": {
-    "vue": "^2.5.17"
+    "vue": "^2.6.10"
   },
   "dependencies": {
     "@sitecore-jss/sitecore-jss": "^12.0.0"

packages/sitecore-jss-vue/src/components/Date.test.ts

@@ -2,7 +2,7 @@
 import { mount } from '@vue/test-utils';
 
 import DateSlotSfc from '../test/components/sfc/SampleScopedSlotDateField.vue';
-import { DateField } from './Date';
+import { DateField, FormatterFunction } from './Date';
 
 describe('<Date />', () => {
   it('should render nothing with missing field', () => {
@@ -41,7 +41,12 @@ describe('<Date />', () => {
   });
 
   it('should render formatted value with formatter', () => {
-    const props = { field: { value: 'value' }, formatter: (val) => 'rendered val' };
+    const formatter: FormatterFunction = () => 'rendered val'
+    const props = { 
+      field: { value: 'value' },
+      formatter
+    };
+
     const rendered = mount(DateField, {
       context: { props },
     }).find('span');

packages/sitecore-jss-vue/src/components/Image.test.ts

@@ -113,7 +113,7 @@ describe('<Image />', () => {
   });
 
   it('should render no <img /> when media prop is empty', () => {
-    const props = {
+    const props: { media: null } = {
       media: null,
     };
     // Need to mock console.error as Vue will log an error for the missing "field" prop

packages/sitecore-jss-vue/src/components/Link.test.ts

@@ -16,7 +16,7 @@ describe('<Link />', () => {
   });
 
   it('should render nothing with missing editable and value', () => {
-    const props = {
+    const props: { field: null } = {
       field: null,
     };
     // Need to mock console.error as Vue will log an error for the null "field" prop

packages/sitecore-jss-vue/src/components/Placeholder.test.ts

@@ -1,5 +1,7 @@
 /* eslint-disable no-unused-expressions */
 
+import { CreateElement, RenderContext } from 'vue'
+
 import { Placeholder } from './Placeholder';
 import { SitecoreContext } from './SitecoreContext';
 
@@ -12,8 +14,9 @@ import { devData } from '../test/data/dev-data';
 import { lsDataEeOff } from '../test/data/LS-data-EE-off';
 import { lsDataEeOn } from '../test/data/LS-data-EE-on';
 
-import { config, mount } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 
+// import { config } from '@vue/test-utils'
 // config.logModifiedComponents = false;
 
 const testComponents: any = {
@@ -31,7 +34,7 @@ const testComponents: any = {
       params: { type: Object, default: () => ({}) },
     },
 
-    render(createElement, context) {
+    render(createElement: CreateElement, context: RenderContext) {
       const { props } = context;
       const { rendering, ...otherProps } = props;
       const arbitraryProp = { value: 'magical', withFunction: () => 'indeed' };
@@ -67,7 +70,7 @@ const testComponents: any = {
       arbitrary: { type: Object, default: () => ({}) },
     },
 
-    render(createElement, context) {
+    render(createElement: CreateElement, context: RenderContext) {
       const { props } = context;
       return createElement('div', { class: 'download-callout-mock' }, [
         `message: ${props.fields.message ? props.fields.message.value : 'no message'}`,
@@ -83,19 +86,19 @@ const testComponents: any = {
   Jumbotron: {
     functional: true,
 
-    render(createElement) {
+    render(createElement: CreateElement) {
       return createElement('div', { class: 'jumbotron-mock' });
     },
   },
   ErrorThrowingComponent: {
     render() {
-      const blah = null;
+      const blah: any = null;
       return blah.nonExistantProperty;
     },
   },
 };
 
-const componentFactory = (componentName) => {
+const componentFactory = (componentName: string) => {
   const components = new Map();
   components.set('Home', testComponents.Home);
   components.set('SfcHome', testComponents.sfc.Home);
@@ -113,11 +116,11 @@ describe('<Placeholder />', () => {
     { label: 'LayoutService data - EE on', data: lsDataEeOn },
   ];
 
-  testData.forEach((dataSet, index) => {
+  testData.forEach(dataSet => {
     describe(`with ${dataSet.label}`, () => {
       it('should render a placeholder with given key', () => {
         const phData: any = dataSet.data.sitecore.route.placeholders.main;
-        const component = phData.find((c) => c.componentName);
+        const component = phData.find((c: any) => c.componentName);
         const phKey = 'page-content';
 
         // tslint:disable-next-line:no-shadowed-variable
@@ -140,7 +143,7 @@ describe('<Placeholder />', () => {
         const phKey = 'main';
 
         const testComponent = {
-          render(createElement) {
+          render(createElement: CreateElement) {
             return createElement(
               SitecoreContext,
               {
@@ -171,7 +174,7 @@ describe('<Placeholder />', () => {
         const phKey = 'main';
 
         const testComponent = {
-          render(createElement) {
+          render(createElement: CreateElement) {
             return createElement(SitecoreContext, { props: { componentFactory } }, [
               createElement(Placeholder, { props: { name: phKey, rendering: component } }),
             ]);
@@ -188,7 +191,7 @@ describe('<Placeholder />', () => {
         const phKey = 'main';
 
         const testComponent = {
-          render(createElement) {
+          render(createElement: CreateElement) {
             return createElement(SitecoreContext, { props: { componentFactory } }, [
               createElement(SampleScopedSlotPlaceholder, {
                 props: { name: phKey, rendering: component },
@@ -205,9 +208,9 @@ describe('<Placeholder />', () => {
   });
 
   describe('missing component', () => {
-    let errorSpy;
-    let warnSpy;
-    let logSpy;
+    let errorSpy: jest.SpyInstance;
+    let warnSpy: jest.SpyInstance;
+    let logSpy: jest.SpyInstance;
 
     const route = {
       placeholders: {
@@ -234,7 +237,7 @@ describe('<Placeholder />', () => {
 
     it('should render default missing component for unknown components', () => {
       const testComponent = {
-        render(createElement) {
+        render(createElement: CreateElement) {
           return createElement(Placeholder, {
             props: {
               name: 'main',
@@ -254,13 +257,13 @@ describe('<Placeholder />', () => {
 
     it('should render specific missing component for unknown components', () => {
       const missingComponent = {
-        render(createElement) {
+        render(createElement: CreateElement) {
           return createElement('div', {}, 'this is a custom missing component');
         },
       };
 
       const testComponent = {
-        render(createElement) {
+        render(createElement: CreateElement) {
           return createElement(Placeholder, {
             props: {
               name: 'main',
@@ -315,7 +318,7 @@ describe('<Placeholder />', () => {
     };
 
     const testComponent = {
-      render(createElement) {
+      render(createElement: CreateElement) {
         return createElement(SampleScopedSlotPlaceholderEmpty, {
           props: {
             componentFactory,
@@ -346,13 +349,13 @@ describe('<Placeholder />', () => {
     it('should render custom error component if provided', () => {
       const errorComponent = {
         props: { error: { type: Error } },
-        render(createElement) {
+        render(createElement: CreateElement) {
           return createElement('div', {}, 'this is a custom error component');
         },
       };
 
       const testComponent = {
-        render(createElement) {
+        render(createElement: CreateElement) {
           return createElement(Placeholder, {
             props: { name: 'main', rendering: route, componentFactory, errorComponent },
           });
@@ -366,7 +369,7 @@ describe('<Placeholder />', () => {
 
     it('should render default error component if no custom error component provided', () => {
       const testComponent = {
-        render(createElement) {
+        render(createElement: CreateElement) {
           return createElement(Placeholder, {
             props: { name: 'main', rendering: route, componentFactory },
           });

packages/sitecore-jss-vue/src/components/RichText.test.ts

@@ -15,7 +15,7 @@ describe('<RichText />', () => {
   });
 
   it('should render nothing with missing editable and value', () => {
-    const props = {
+    const props: { field: null } = {
       field: null,
     };
     // Need to mock console.error as Vue will log an error for the null "field" prop

packages/sitecore-jss-vue/src/components/Text.test.ts

@@ -16,7 +16,7 @@ describe('<Text />', () => {
   });
 
   it('should render nothing with missing editable and value', () => {
-    const props = { field: null };
+    const props: { field: null } = { field: null };
     // Need to mock console.error as Vue will log an error for the null "field" prop
     // that is marked as an Object.
     const errorSpy = jest.spyOn(console, 'error');

packages/sitecore-jss-vue/src/components/__snapshots__/MissingComponent.test.ts.snap

@@ -1,14 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<MissingComponent /> should render 1`] = `
-
-<div style="outline: 5px solid orange; padding: 10px; color: white; max-width: 500px;">
+<div style="background: darkorange; outline: 5px solid orange; padding: 10px; color: white; max-width: 500px;">
   <h2>
     missing
   </h2>
   <p>
     JSS component is missing Vue implementation. See the developer console for more information.
   </p>
 </div>
-
 `;