Skip to content

Commit 049de99

Browse files
rahaugrahaug
authored
Vue School links (#1493)
* style: add sponsored link This is the same style used on vuejs.org * docs: add link to Testing Vue.js Components course * docs: add link to Installing Vue Test Utils lesson * docs: add link to Testing Vue.js Components course * docs: add link to Learn How to Test Vue.js Lifecycle Methods lesson * docs: add link to Traversing The DOM lesson * docs: add link to Test Vuex Store Injection lesson * docs: add link to The Wrapper Object lesson * refactor: better apperance on small screens
1 parent 3420a31 commit 049de99

File tree

9 files changed

+57
-1
lines changed

9 files changed

+57
-1
lines changed

‎docs/.vuepress/config.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,10 @@ module.exports = {
2222
}
2323
},
2424
serviceWorker: true,
25-
head: [['link', { rel: 'icon', href: '/favicon.png' }]],
25+
head: [
26+
['link', { rel: 'icon', href: '/favicon.png' }],
27+
['link', { rel: 'stylesheet', href: '/vueschool.css' }]
28+
],
2629
theme: 'vue',
2730
themeConfig: {
2831
algolia: {

‎docs/.vuepress/public/vueschool.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.vueschool {
2+
background-color: #e7ecf3;
3+
padding: 1em 1.25em;
4+
border-radius: 2px;
5+
color: #486491;
6+
position: relative;
7+
display: flex;
8+
}
9+
10+
.vueschool a {
11+
color: #486491 !important;
12+
position: relative;
13+
padding-left: 36px;
14+
}
15+
16+
.vueschool a:before {
17+
content: '';
18+
position: absolute;
19+
display: block;
20+
width: 30px;
21+
height: 30px;
22+
top: calc(50% - 15px);
23+
left: -4px;
24+
border-radius: 50%;
25+
background-color: #73abfe;
26+
}
27+
28+
.vueschool a:after {
29+
content: '';
30+
position: absolute;
31+
display: block;
32+
width: 0;
33+
height: 0;
34+
top: calc(50% - 5px);
35+
left: 8px;
36+
border-top: 5px solid transparent;
37+
border-bottom: 5px solid transparent;
38+
border-left: 8px solid #fff;
39+
}

‎docs/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
Vue Test Utils is the official unit testing utility library for Vue.js.
44

5+
<div class="vueschool"><a href="https://vueschool.io/courses/learn-how-to-test-vuejs-components?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to use Vue Test Utils to test Vue.js Components with Vue School">Learn how to test Vue.js components with Vue School</a></div>
6+
57
- [Guides](./guides/)
68
- [Getting Started](./guides/getting-started.md)
79
- [Common Tips](guides/common-tips.md)

‎docs/api/wrapper/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ Vue Test Utils is a wrapper based API.
44

55
A `Wrapper` is an object that contains a mounted component or vnode and methods to test the component or vnode.
66

7+
<div class="vueschool"><a href="https://vueschool.io/lessons/the-wrapper-object?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn about the Wrapper object in a FREE video lesson from Vue School">Learn about the Wrapper object in a FREE video lesson from Vue School</a></div>
8+
79
## Properties
810

911
### `vm`

‎docs/guides/common-tips.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ wrapper.vm // the mounted Vue instance
2929

3030
### Lifecycle Hooks
3131

32+
<div class="vueschool" style="margin-top:1em;"><a href="https://vueschool.io/lessons/learn-how-to-test-vuejs-lifecycle-methods?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to use Vue Test Utils to test Vue.js Lifecycle Hooks with Vue School">Learn how to test lifecycle methods and intervals with Vue School</a></div>
33+
3234
When using either the `mount` or `shallowMount` methods, you can expect your component to respond to all lifecycle events. However, it is important to note that `beforeDestroy` and `destroyed` _will not be triggered_ unless the component is manually destroyed using `Wrapper.destroy()`.
3335

3436
Additionally, the component will not be automatically destroyed at the end of each spec, and it is up to the user to stub or manually clean up tasks that will continue to run (`setInterval` or `setTimeout`, for example) before the end of each spec.

‎docs/guides/dom-events.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
## Testing Key, Mouse and other DOM events
22

3+
<div class="vueschool"><a href="https://vueschool.io/lessons/traversing-the-dom?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn to traverse and interact with the DOM with a free video lesson from Vue School">Learn to traverse and interact with the DOM with a free lesson on Vue School</a></div>
4+
35
### Trigger events
46

57
The `Wrapper` exposes a `trigger` method. It can be used to trigger DOM events.

‎docs/guides/getting-started.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
## Getting Started
22

3+
<div class="vueschool"><a href="https://vueschool.io/lessons/installing-vue-test-utils?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to get started with Vue Test Utils, Jest, and testing Vue Components with Vue School">Learn how to get started with Vue Test Utils, Jest, and testing Vue Components</a></div>
4+
35
### Setup
46

57
To get a quick taste of using Vue Test Utils, clone our demo repository with basic setup and install the dependencies:

‎docs/guides/testing-single-file-components-with-jest.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
55
Jest is a test runner developed by Facebook, aiming to deliver a battery-included unit testing solution. You can learn more about Jest on its [official documentation](https://jestjs.io/).
66

7+
<div class="vueschool"><a href="https://vueschool.io/courses/learn-how-to-test-vuejs-components?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to use Jest and Vue Test Utils to test Single File Components with Vue School">Learn how to use Jest to test Single File Components with Vue School</a></div>
8+
79
#### Setting up Jest
810

911
We will assume you are starting with a setup that already has webpack, vue-loader and Babel properly configured - e.g. the `webpack-simple` template scaffolded by `vue-cli`.

‎docs/guides/using-with-vuex.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
In this guide, we'll see how to test Vuex in components with Vue Test Utils, and how to approach testing a Vuex store.
44

5+
<div class="vueschool"><a href="https://vueschool.io/lessons/how-to-test-vuejs-component-with-vuex-store?friend=vuejs" target="_blank" rel="sponsored noopener" title="Learn how to test that a Vuex Store is injected into a component with a free video lesson on Vue School">Learn how to test that a Vuex Store is injected into a component with Vue School</a></div>
6+
57
## Testing Vuex in components
68

79
### Mocking Actions

0 commit comments

Comments
 (0)