Add vue section to docs

docs/vue-testing-library/intro.md

@@ -0,0 +1,138 @@
+---
+id: intro
+title: Introduction
+---
+
+[`vue-testing-library`][gh] is a lightweight adapter allowing
+`dom-testing-library` to be used to test [Vue](https://vuejs.org/) components
+built on top of `@vue/test-utils`.
+
+```
+npm install --save-dev vue vue-testing-library
+```
+
+- [vue-testing-library on GitHub][gh]
+
+## Usage
+
+```
+npm install --save-dev vue-testing-library
+ jest
+ vue-jest
+ babel-jest
+ babel-preset-env
+ babel-plugin-transform-runtime
+```
+
+```
+// package.json
+ "scripts": {
+ "test": "jest"
+ }
+
+ "jest": {
+ "moduleDirectories": [
+ "node_modules",
+ "src"
+ ],
+ "moduleFileExtensions": [
+ "js",
+ "vue"
+ ],
+ "testPathIgnorePatterns": [
+ "/node_modules/"
+ ],
+ "transform": {
+ "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
+ ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
+ }
+ }
+
+// .babelrc
+{
+ "presets": [
+ ["env", {
+ "modules": false,
+ "targets": {
+ "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+ }
+ }]
+ ],
+ "plugins": [
+ "transform-runtime"
+ ],
+ "env": {
+ "test": {
+ "presets": ["env"]
+ }
+ }
+}
+
+// src/TestComponent.vue
+<template>
+ <div>
+ <span data-testid="test1">Hello World</span>
+ </div>
+</template>
+
+// src/TestComponent.spec.js
+import 'jest-dom/extend-expect'
+import { render } from 'vue-testing-library'
+import TestComponent from './TestComponent'
+
+test('should render HelloWorld', () => {
+ const { queryByTestId } = render(TestComponent)
+ expect(queryByTestId('test1')).toHaveTextContent('Hello World')
+})
+```
+
+You can now use all of `dom-testing-library`'s `getBy`, `getAllBy`, `queryBy`
+and `queryAllBy` commands.
+[See `dom-testing-library` repo for reference](https://github.com/kentcdodds/dom-testing-library#usage)
+
+### render
+
+The `render` function takes up to 3 parameters and returns an object with some
+helper methods
+
+1. Component - the Vue component to be tested.
+2. RenderOptions - an object containing additional information to be passed to
+ @vue/test-utils mount. This can be:
+
+- store - The object definition of a Vuex store, if present `render` will
+ configure a Vuex store and pass to mount.
+- routes - A set of routes, if present render will configure VueRouter and pass
+ to mount. All additional render options are passed to the vue-test-utils mount
+ function in its options.
+
+3. configurationCb - A callback to be called passing the Vue instance when
+ created. This allows 3rd party plugins to be installed prior to mount.
+
+### fireEvent
+
+Lightweight wrapper around DOM element events and methods. Will call wait, so
+can be awaited to allow effects to propagate.
+
+### wait
+
+When in need to wait for non-deterministic periods of time you can use `wait`,
+to wait for your expectations to pass. The `wait` function is a small wrapper
+around the
+[`wait-for-expect`](https://github.com/TheBrainFamily/wait-for-expect) module.
+
+Waiting can be very important in Vue components, @vue/test-utils has succeeded
+in making the majority of updates happen synchronously however there are
+occasions when wait will allow the DOM to update. For example, see
+[`here`](https://github.com/dfcook/vue-testing-library/tree/master/tests/__tests__/validate-plugin.js)
+
+## Examples
+
+You'll find examples of testing with different libraries in
+[the test directory](https://github.com/dfcook/vue-testing-library/tree/master/tests/__tests__).
+Some included are:
+
+- [`vuex`](https://github.com/dfcook/vue-testing-library/tree/master/tests/__tests__/vuex.js)
+- [`vue-router`](https://github.com/dfcook/vue-testing-library/tree/master/tests/__tests__/vue-router.js)
+- [`vee-validate`](https://github.com/dfcook/vue-testing-library/tree/master/tests/__tests__/validate-plugin.js)
+
+[gh]: https://github.com/dfcook/vue-testing-library

website/pages/en/index.js

@@ -182,7 +182,7 @@ class Index extends React.Component {
  )
 
  const Ecosystem = () => (
- <Block layout="threeColumn" background={null}>
+ <Block layout="fourColumn" background={null}>
  {[
  {
  content: 'For testing React Components',
@@ -196,6 +196,12 @@ class Index extends React.Component {
  imageAlign: 'top',
  title: '[Cypress Testing Library](./cypress)',
  },
+ {
+ content: 'For testing Vue Components',
+ image: `${baseUrl}img/vue-400x400.png`,
+ imageAlign: 'top',
+ title: '[Vue Testing Library](./vue)',
+ },
  {
  content: 'Explore the ecosystem',
  image: `${baseUrl}img/construction-128x128.png`,

website/pages/en/vue.js

@@ -0,0 +1,159 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const React = require('react')
+
+const CompLibrary = require('../../core/CompLibrary.js')
+
+const MarkdownBlock = CompLibrary.MarkdownBlock /* Used to read markdown */
+const Container = CompLibrary.Container
+const GridBlock = CompLibrary.GridBlock
+
+class HomeSplash extends React.Component {
+ render() {
+ const { siteConfig, language = '' } = this.props
+ const { baseUrl, docsUrl } = siteConfig
+ const docsPart = `${docsUrl ? `${docsUrl}/` : ''}`
+ const langPart = `${language ? `${language}/` : ''}`
+ const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`
+
+ const SplashContainer = props => (
+ <div className="homeContainer">
+ <div className="homeSplashFade">
+ <div className="wrapper homeWrapper">{props.children}</div>
+ </div>
+ </div>
+ )
+
+ const Logo = props => (
+ <div className="projectLogo">
+ <img src={props.img_src} alt="Project Logo" />
+ </div>
+ )
+
+ const ProjectTitle = () => (
+ <div>
+ <h2 className="projectTitle">Vue Testing Library</h2>
+ <div className="projectTaglineWrapper">
+ <p className="projectTagline">
+ Simple and complete Vue DOM testing utilities that encourage good
+ testing practices
+ </p>
+ </div>
+ </div>
+ )
+
+ const PromoSection = props => (
+ <div className="section promoSection">
+ <div className="promoRow">
+ <div className="pluginRowBlock">{props.children}</div>
+ </div>
+ </div>
+ )
+
+ const Button = props => (
+ <div className="pluginWrapper buttonWrapper">
+ <a className="button" href={props.href} target={props.target}>
+ {props.children}
+ </a>
+ </div>
+ )
+
+ return (
+ <SplashContainer>
+ <Logo img_src={`${baseUrl}img/vue.png`} />
+ <div className="inner">
+ <ProjectTitle siteConfig={siteConfig} />
+ <PromoSection>
+ <Button href={docUrl('vue-testing-library/intro')}>
+ Read the Docs
+ </Button>
+ </PromoSection>
+ </div>
+ </SplashContainer>
+ )
+ }
+}
+
+class Index extends React.Component {
+ render() {
+ const { config: siteConfig, language = '' } = this.props
+ const { baseUrl } = siteConfig
+
+ const Block = props => (
+ <Container
+ padding={['bottom', 'top']}
+ id={props.id}
+ background={props.background}
+ >
+ <GridBlock
+ align={props.align || 'center'}
+ imageAlign={props.imageAlign || 'center'}
+ contents={props.children}
+ layout={props.layout}
+ />
+ </Container>
+ )
+
+ const FeatureCallout = () => (
+ <Container className="" background={'light'} padding={['top', 'bottom']}>
+ <div style={{ textAlign: 'center' }}>
+ <p>
+ <i>
+ The more your tests resemble the way your software is used, <br />
+ the more confidence they can give you.
+ </i>
+ </p>
+ <MarkdownBlock>
+ `npm install --save-dev vue-testing-library`
+ </MarkdownBlock>
+ </div>
+ </Container>
+ )
+
+ const Features = () => (
+ <React.Fragment>
+ <Block layout="threeColumn">
+ {[
+ {
+ content:
+ 'Tests only break when your app breaks, not implementation details',
+ image: `${baseUrl}img/wrench-128x128.png`,
+ imageAlign: 'top',
+ title: 'Write Maintainable Tests',
+ },
+ {
+ content: 'Interact with your app the same way as your users',
+ image: `${baseUrl}img/check-128x128.png`,
+ imageAlign: 'top',
+ title: 'Develop with Confidence',
+ },
+ {
+ content:
+ 'Built-in selectors use semantic HTML and ARIA roles to help you write inclusive code',
+ image: `${baseUrl}img/tada-128x128.png`,
+ imageAlign: 'top',
+ title: 'Accessible by Default',
+ },
+ ]}
+ </Block>
+ </React.Fragment>
+ )
+
+ return (
+ <div>
+ <HomeSplash siteConfig={siteConfig} language={language} />
+ <div className="mainContainer">
+ <FeatureCallout />
+ <Features />
+ </div>
+ </div>
+ )
+ }
+}
+
+module.exports = Index

website/sidebars.json

@@ -35,6 +35,11 @@
  "type": "subcategory",
  "label": "Cypress Testing Library",
  "ids": ["cypress-testing-library/intro"]
+ },
+ {
+ "type": "subcategory",
+ "label": "Vue Testing Library",
+ "ids": ["vue-testing-library/intro"]
  }
  ],
  "Ecosystem": ["ecosystem-user-event", "ecosystem-jest-dom"],