Fix directive example

Author: afontcu

src/__tests__/directive.js

@@ -1,20 +1,18 @@
-test.todo('Your test suite must contain at least one test.')
+import {render} from '@testing-library/vue'
+import '@testing-library/jest-dom'
+import {uppercaseDirective} from './directives/uppercase-directive'
+import ComponentUsingDirective from './components/Directive'
 
-// import {render} from '@testing-library/vue'
-// import '@testing-library/jest-dom'
-// import {uppercaseDirective} from './directives/uppercase-directive'
-// import Directive from './components/Directive'
+test('Component with a custom directive', () => {
+  const {queryByText, getByText} = render(ComponentUsingDirective, {
+    global: {
+      directives: {uppercase: uppercaseDirective},
+    },
+  })
 
-// test('Component with a custom directive', () => {
-//   // Do not forget to add the new custom directive to the render function as
-//   // the third parameter.
-//   const {queryByText, getByText} = render(Directive, {}, vue =>
-//     vue.directive('uppercase', uppercaseDirective),
-//   )
+  // Test that the text in lower case does not appear in the DOM
+  expect(queryByText('example text')).not.toBeInTheDocument()
 
-//   // Test that the text in lower case does not appear in the DOM
-//   expect(queryByText('example text')).not.toBeInTheDocument()
-
-//   // Test that the text in upper case does appear in the DOM thanks to the directive
-//   expect(getByText('EXAMPLE TEXT')).toBeInTheDocument()
-// })
+  // Test that the text in upper case does appear in the DOM thanks to the directive
+  expect(getByText('EXAMPLE TEXT')).toBeInTheDocument()
+})

src/__tests__/directives/uppercase-directive.js

@@ -1,6 +1,6 @@
-// This function converts the received text passed to the
-// v-uppercase directive used in the Directive.vue component
-// to upper case and this is appended to the <p> element
-export function uppercaseDirective(el, binding) {
-  el.innerHTML = binding.value.toUpperCase()
+// This directive converts any text into its uppercase version
+export const uppercaseDirective = {
+  beforeMount(el, binding) {
+    el.innerHTML = binding.value.toUpperCase()
+  },
 }