Testing in Vue ------------ ``` Write lots of tests so people will afraid to delete yout code ``` ![alt text](https://raw.githubusercontent.com/aelbore/aria-test/master/Test.png) ## Why need test? * Get an error if we break code * Save time (don't need to test manually) - It speeds up development because you don’t have to test everything manually after every change. * Integrate into build workflow * Improve your code ## Different kind of Test * Unit Test - Fully isolated testing one function * Integration Test - Test with dependencies ## Getting Started ``` mkdir vue-app cd vue-app npm init -y npm i --save-dev vue@3.0.0-beta.9 @vue/compiler-sfc@b3.0.0-beta.14 vite ``` ## Create Vue App * Create `src` folder * Create `./src/App.vue` ```vue ``` * Create `./src/HelloWorld.vue` ```vue ``` * Create entry file `main.js` ```javascript import {createApp} from 'vue' import App from './src/App.vue' createApp(App).mount('#app') ``` * Create html file `index.html` ```html ⚡️ Vite + TDD

⚡️ Vite Component Test Starter

``` * Add or Update `scripts` in `package.json` - `serve` run your vue app into dev mode ```json "scripts": { "serve": "vite" }, ``` ## Add unit test your app * Install dependencies ``` npm i --save-dev @vue/test-utils@2.0.0-alpha.6 aria-vue aria-mocha puppeteer ``` * Add test - create `./test/App.spec.js` ```javascript import {mount} from '@vue/test-utils' import App from '../src/App.vue' describe('App.spec.js', () => { it('test button counter increments', async () => { const wrapper = mount(App, { attachTo: '#root' }) const buttonCounterEl = wrapper.findByTestId('button-counter') expect(buttonCounterEl.textContent).to.equal('0') await wrapper.find('button').trigger('click') expect(buttonCounterEl.textContent).to.equal('1') }) }) ``` - create `./test/HelloWorld.spec.js` ```javascript import {mount} from '@vue/test-utils' import HelloWorld from '../src/HelloWorld.vue' describe('HelloWorld.spec.js', () => { it('renders', async () => { const wrapper = mount(HelloWorld, { attachTo: '#root' }) expect(wrapper.html()).to.contain('Hello') }) }) ``` - create `./test/plugins.js` this will execute/run before test or spec files ```javascript import { config } from '@vue/test-utils' const DataTestIdPlugin = (wrapper) => { function findByTestId(selector) { const dataSelector = `[data-testid='${selector}']` const element = wrapper.element.querySelector(dataSelector) if (element) { return element } return null } return { findByTestId } } config.plugins.VueWrapper.install(DataTestIdPlugin) ``` * Add or Update `scripts` in `package.json` ```json "scripts": { "serve": "vite", "test": "aria-vue -w -H --script ./test/plugins.js" }, ``` * Run the test (everytime source or test files change it will run the tests with `-w` option) ``` npm test ```