docs(Testing): add information about mocking $vuetify in tests

packages/docs/src/data/pages/getting-started/UnitTesting.json

@@ -76,6 +76,39 @@
               "value": "js_testing_efficiency"
             }
           ]
+        },
+        {
+          "type": "section",
+          "children": [
+            {
+              "type": "heading",
+              "lang": "mockHeader"
+            },
+            {
+              "type": "text",
+              "lang": "mockText1"
+            },
+            {
+              "type": "markup",
+              "value": "js_testing_mock_vuetify"
+            },
+            {
+              "type": "text",
+              "lang": "mockText2"
+            },
+            {
+              "type": "markup",
+              "value": "js_testing_mock_vuetify_services"
+            },
+            {
+              "type": "text",
+              "lang": "mockText3"
+            },
+            {
+              "type": "text",
+              "lang": "mockList"
+            }
+          ]
         }
       ]
     },

packages/docs/src/lang/en/getting-started/UnitTesting.json

@@ -18,6 +18,18 @@
   "efficiencyHeader": "### Testing efficiency",
   "efficiencyText1": "When writing tests you will often find yourself repeating the same things over and over. In this case, it's beneficial to create helper functions to reduce the duplication for each individual test. Basically, [DRYing](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) up our code.",
   "efficiencyText2": "One of the most common duplicated code written in unit tests are the mount functions. This can easily be compacted into a reusable function for each run.",
+  "mockHeader": "### Mocking Vuetify",
+  "mockText1": "Many of Vuetify's components utilize the global `$vuetify` object to derive settings such as default text or breakpoint information. When testing these components, you will need to provide `vue-test-utils` with a mock object.",
+  "mockText2": "Keep in mind, you **only need to stub** the services that are being used. such as **lang** or **application**. You can also import these services manually.",
+  "mockText3": "A complete list of all services available are listed below:",
+  "mockList": [
+    "[application](https://github.com/vuetifyjs/vuetify/tree/master/packages/vuetify/src/services/application)",
+    "[breakpoint](https://github.com/vuetifyjs/vuetify/tree/master/packages/vuetify/src/services/breakpoint)",
+    "[goto](https://github.com/vuetifyjs/vuetify/tree/master/packages/vuetify/src/services/goto)",
+    "[icons](https://github.com/vuetifyjs/vuetify/tree/master/packages/vuetify/src/services/icons)",
+    "[lang](https://github.com/vuetifyjs/vuetify/tree/master/packages/vuetify/src/services/lang)",
+    "[theme](https://github.com/vuetifyjs/vuetify/tree/master/packages/vuetify/src/services/theme)"
+  ],
   "e2eHeader": "## E2E tests",
   "e2eText1": "Guide coming soon. If you would like to help contribute to this section, please contact a developer in our [community](https://community.vuetifyjs.com)."
 }

packages/docs/src/snippets/js/testing_mock_vuetify.txt

@@ -0,0 +1,42 @@
+// test/CustomAlert.spec.js
+
+// Libraries
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+
+// Components
+import CustomAlert from '@/components/CustomAlert'
+
+// Utilities
+import {
+  mount,
+  createLocalVue
+} from '@vue/test-utils'
+
+const localVue = createLocalVue()
+localVue.use(Vuetify)
+
+describe('CustomAlert.vue', () => {
+  let vuetify
+
+  beforeEach(() => {
+    vuetify = new Vuetify({
+      mocks: {
+        $vuetify: {
+          lang: {
+            t: (val: string) => val,
+          },
+        },
+      }
+    })
+  })
+
+  it('should have a custom title and match snapshot', () => {
+    const wrapper = mount(CustomAlert, {
+      localVue,
+      vuetify,
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

packages/docs/src/snippets/js/testing_mock_vuetify_services.txt

@@ -0,0 +1,42 @@
+// test/CustomNavigationDrawer.spec.js
+
+// Libraries
+import Vue from 'vue'
+import Vuetify from 'vuetify'
+import Breakpoint from 'vuetify/lib/services'
+
+// Components
+import CustomNavigationDrawer from '@/components/CustomNavigationDrawer'
+
+// Utilities
+import {
+  mount,
+  createLocalVue
+} from '@vue/test-utils'
+
+const localVue = createLocalVue()
+localVue.use(Vuetify)
+
+describe('CustomNavigationDrawer.vue', () => {
+  let vuetify
+  const opts = {}
+
+  beforeEach(() => {
+    vuetify = new Vuetify({
+      mocks: {
+        $vuetify: {
+          breakpoint: new Breakpoint(opts),
+        },
+      }
+    })
+  })
+
+  it('should have a custom title and match snapshot', () => {
+    const wrapper = mount(CustomNavigationDrawer, {
+      localVue,
+      vuetify,
+    })
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})