Commit abc572b

edufarreafontcu

authored and

committed

docs: Add visibility example (testing-library#95)

* Create collapsible component * Create collapsed elements visibility test * Add why we can use getByText explanation

1 parent 66e5913 commit abc572bCopy full SHA for abc572b

File tree

+51

-0

lines changed

+51

-0

lines changed

Lines changed: 23 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,23 @@`
	`1`	`+<template>`
	`2`	`+ <div>`
	`3`	`+ <button @click="handleClick">Click me</button>`
	`4`	`+ <div v-show="displayElement">`
	`5`	`+ <p>Text</p>`
	`6`	`+ </div>`
	`7`	`+ </div>`
	`8`	`+</template>`
	`9`	`+`
	`10`	`+<script>`
	`11`	`+export default {`
	`12`	`+ data() {`
	`13`	`+ return {`
	`14`	`+ displayElement: false,`
	`15`	`+ }`
	`16`	`+ },`
	`17`	`+ methods: {`
	`18`	`+ handleClick(e) {`
	`19`	`+ this.displayElement = !this.displayElement`
	`20`	`+ },`
	`21`	`+ },`
	`22`	`+}`
	`23`	`+</script>`

Lines changed: 28 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,28 @@`
	`1`	`+import {render, fireEvent} from '@testing-library/vue'`
	`2`	`+import '@testing-library/jest-dom/extend-expect'`
	`3`	`+import Collapsible from './components/Collapsible'`
	`4`	`+`
	`5`	+// Using the query `getByText` here is completely right because
	`6`	+// we use `v-show` in the component, which means that the element
	`7`	+// will be rendered but not visible, whereas if we use `v-if` instead
	`8`	+// we should use the `queryByText` and expect it to be `null` because
	`9`	`+// the element won't be rendered`
	`10`	`+test('Collapsible component', async () => {`
	`11`	`+ const {getByText} = render(Collapsible)`
	`12`	`+`
	`13`	`+ // Check that text element is not initially visible.`
	`14`	`+ expect(getByText('Text')).not.toBeVisible()`
	`15`	`+`
	`16`	`+ // Click button in order to display the collapsed text element`
	`17`	`+ const button = getByText('Click me')`
	`18`	`+ await fireEvent.click(button)`
	`19`	`+`
	`20`	`+ // Check that text element is visible`
	`21`	`+ expect(getByText('Text')).toBeVisible()`
	`22`	`+`
	`23`	`+ // Click button to hide the visible text element`
	`24`	`+ await fireEvent.click(button)`
	`25`	`+`
	`26`	`+ // Check that text element is not visible again`
	`27`	`+ expect(getByText('Text')).not.toBeVisible()`
	`28`	`+})`

Comments

(0)