From 30b39d9ceb5d0d5f6ed01176494370e7db9f8c13 Mon Sep 17 00:00:00 2001
From: Eduard Farre Puig <edu.farrep@gmail.com>
Date: Fri, 21 Feb 2020 17:06:48 +0100
Subject: [PATCH 1/4] Add directive folder to test path ignore patterns to jest
 config

---
 jest.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/jest.config.js b/jest.config.js
index 87a68a78..c68ee838 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -17,5 +17,6 @@ module.exports = merge(config, {
   testPathIgnorePatterns: [
     '<rootDir>/node_modules',
     '<rootDir>/src/__tests__/components',
+    '<rootDir>/src/__tests__/directives',
   ],
 })

From 0eab15aec589745dba775079722db82056649638 Mon Sep 17 00:00:00 2001
From: Eduard Farre Puig <edu.farrep@gmail.com>
Date: Fri, 21 Feb 2020 17:27:50 +0100
Subject: [PATCH 2/4] Implement v-uppercase directive

---
 src/__tests__/directives/uppercase-directive.js | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 src/__tests__/directives/uppercase-directive.js

diff --git a/src/__tests__/directives/uppercase-directive.js b/src/__tests__/directives/uppercase-directive.js
new file mode 100644
index 00000000..1c95eee2
--- /dev/null
+++ b/src/__tests__/directives/uppercase-directive.js
@@ -0,0 +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()
+}

From cf85d1f82d8d727b4638bcb4e8dabaa14dfff8a5 Mon Sep 17 00:00:00 2001
From: Eduard Farre Puig <edu.farrep@gmail.com>
Date: Fri, 21 Feb 2020 17:28:22 +0100
Subject: [PATCH 3/4] Implement Directive example component

---
 src/__tests__/components/Directive.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 src/__tests__/components/Directive.vue

diff --git a/src/__tests__/components/Directive.vue b/src/__tests__/components/Directive.vue
new file mode 100644
index 00000000..679cd032
--- /dev/null
+++ b/src/__tests__/components/Directive.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <p v-uppercase="text" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      text: 'example text',
+    }
+  },
+}
+</script>

From e015089cdeca4667058aa851431c20e0c4b0d9bb Mon Sep 17 00:00:00 2001
From: Eduard Farre Puig <edu.farrep@gmail.com>
Date: Fri, 21 Feb 2020 17:29:06 +0100
Subject: [PATCH 4/4] Implement directive test

---
 src/__tests__/directive.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/__tests__/directive.js

diff --git a/src/__tests__/directive.js b/src/__tests__/directive.js
new file mode 100644
index 00000000..44f45d95
--- /dev/null
+++ b/src/__tests__/directive.js
@@ -0,0 +1,20 @@
+import {render} from '@testing-library/vue'
+import '@testing-library/jest-dom/extend-expect'
+import {uppercaseDirective} from './directives/uppercase-directive'
+import Directive from './components/Directive'
+
+// We are about to test an easy vue directive, that we have implemented,
+// named v-uppercawse.
+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} = 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 upper case does appear in the DOM thanks to the directive
+  expect(queryByText('EXAMPLE TEXT')).toBeInTheDocument()
+})