Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit cd4deb8

Browse files
chore: Add directive test example (testing-library#120)
* Add directive folder to test path ignore patterns to jest config * Implement v-uppercase directive * Implement Directive example component * Implement directive test
1 parent 322f3a9 commit cd4deb8

File tree

4 files changed

+42
-0
lines changed

4 files changed

+42
-0
lines changed

‎jest.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,5 +17,6 @@ module.exports = merge(config, {
1717
testPathIgnorePatterns: [
1818
'<rootDir>/node_modules',
1919
'<rootDir>/src/__tests__/components',
20+
'<rootDir>/src/__tests__/directives',
2021
],
2122
})
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<div>
3+
<p v-uppercase="text" />
4+
</div>
5+
</template>
6+
7+
<script>
8+
export default {
9+
data() {
10+
return {
11+
text: 'example text',
12+
}
13+
},
14+
}
15+
</script>

‎src/__tests__/directive.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import {render} from '@testing-library/vue'
2+
import '@testing-library/jest-dom/extend-expect'
3+
import {uppercaseDirective} from './directives/uppercase-directive'
4+
import Directive from './components/Directive'
5+
6+
// We are about to test an easy vue directive, that we have implemented,
7+
// named v-uppercawse.
8+
test('Component with a custom directive', () => {
9+
// Do not forget to add the new custom directive to the render function as
10+
// the third parameter.
11+
const {queryByText} = render(Directive, {}, vue =>
12+
vue.directive('uppercase', uppercaseDirective),
13+
)
14+
15+
// Test that the text in lower case does not appear in the DOM
16+
expect(queryByText('example text')).not.toBeInTheDocument()
17+
18+
// Test that the text in upper case does appear in the DOM thanks to the directive
19+
expect(queryByText('EXAMPLE TEXT')).toBeInTheDocument()
20+
})
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// This function converts the received text passed to the
2+
// v-uppercase directive used in the Directive.vue component
3+
// to upper case and this is appended to the <p> element
4+
export function uppercaseDirective(el, binding) {
5+
el.innerHTML = binding.value.toUpperCase()
6+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /