├── .eslintrc.cjs
├── .gitignore
├── .prettierrc.json
├── .vscode
└── extensions.json
├── README.md
├── index.html
├── package.json
├── public
└── favicon.ico
├── src
├── App.test.js
├── App.vue
├── assets
│ ├── base.css
│ ├── logo.svg
│ └── main.css
├── components
│ ├── NotificationToast.vue
│ ├── PostCard.vue
│ └── __tests__
│ │ ├── NotificationToast.test.js
│ │ ├── PostCard.test.js
│ │ └── __snapshots__
│ │ ├── NotificationToast.test.js.snap
│ │ └── PostCard.test.js.snap
└── main.js
├── vite.config.js
├── vitest.config.js
└── yarn.lock
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | /* eslint-env node */
2 | require('@rushstack/eslint-patch/modern-module-resolution')
3 |
4 | module.exports = {
5 | root: true,
6 | 'extends': [
7 | 'plugin:vue/vue3-essential',
8 | 'eslint:recommended',
9 | '@vue/eslint-config-prettier/skip-formatting'
10 | ],
11 | parserOptions: {
12 | ecmaVersion: 'latest'
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 |
17 | /cypress/videos/
18 | /cypress/screenshots/
19 |
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 |
--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://json.schemastore.org/prettierrc",
3 | "semi": false,
4 | "tabWidth": 2,
5 | "singleQuote": true,
6 | "printWidth": 100,
7 | "trailingComma": "none"
8 | }
--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3 | }
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Quicktests with Vitest
2 |
3 | Look at the [Vitest documentation](https://vitest.dev/) to learn more
4 |
5 | ## Setup
6 |
7 | Make sure to install the dependencies:
8 |
9 | ```bash
10 | # yarn
11 | yarn install
12 |
13 | # npm
14 | npm install
15 | ```
16 |
17 | ### Run Unit Tests with [Vitest](https://vitest.dev/)
18 |
19 | ```sh
20 | yarn test:unit
21 | ```
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Quicktests with Vitest
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "quicktest-with-vitest",
3 | "version": "0.0.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "vite",
7 | "build": "vite build",
8 | "preview": "vite preview",
9 | "test": "vitest",
10 | "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
11 | "format": "prettier --write src/"
12 | },
13 | "dependencies": {
14 | "axios": "^1.4.0",
15 | "vue": "^3.2.47"
16 | },
17 | "devDependencies": {
18 | "@rushstack/eslint-patch": "^1.2.0",
19 | "@vitejs/plugin-vue": "^4.0.0",
20 | "@vitest/coverage-v8": "^0.34.1",
21 | "@vitest/ui": "^0.34.1",
22 | "@vue/eslint-config-prettier": "^8.0.0",
23 | "@vue/test-utils": "^2.3.0",
24 | "eslint": "^8.34.0",
25 | "eslint-plugin-vue": "^9.9.0",
26 | "jsdom": "^22.1.0",
27 | "prettier": "^3.0.0",
28 | "vite": "^4.1.4",
29 | "vitest": "^0.34.1"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Pop/quicktests-with-vitest/fe7095a8506467e533a15afe317ab6d94b6afbeb/public/favicon.ico
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-undef */
2 | import { mount, flushPromises } from '@vue/test-utils'
3 | import axios from 'axios'
4 |
5 | import App from './App.vue'
6 |
7 | const mockPost = {
8 | userId: 1, //this is necessary for the API call
9 | id: 1,
10 | title: 'Test Post',
11 | body: 'test body...'
12 | }
13 |
14 | describe('Posts App', () => {
15 | test('user can create a new post', async () => {
16 | vi.spyOn(axios, 'post').mockResolvedValueOnce({ data: mockPost })
17 |
18 | const wrapper = mount(App)
19 |
20 | //fill in the input fields
21 | await wrapper.find('[data-testid="title-input"]').setValue(mockPost.title)
22 | await wrapper.find('[data-testid="body-input"]').setValue(mockPost.body)
23 |
24 | //submit the form
25 | await wrapper.find('[data-testid="post-form"]').trigger('submit')
26 |
27 | expect(wrapper.find('[type="submit"]').html()).toContain('Creating...')
28 |
29 | await flushPromises()
30 |
31 | // assert that the created post is displayed on screen
32 | expect(wrapper.html()).toContain(mockPost.title)
33 | expect(wrapper.html()).toContain(mockPost.body)
34 | })
35 |
36 | // second group of tests
37 | describe('user gets notified', () => {
38 | test('when attempting to create a post with incomplete fields', async () => {
39 | const wrapper = mount(App)
40 |
41 | //try to submit the form with empty fields
42 | await wrapper.find('[data-testid="post-form"]').trigger('submit')
43 |
44 | expect(wrapper.html()).toContain('Please input post title')
45 |
46 | //click the close button
47 | await wrapper.find('[data-testid="close-notification"]').trigger('click')
48 |
49 | // assert that the error message is no longer on screen
50 | expect(wrapper.html()).not.toContain('Please input post title')
51 |
52 | await wrapper.find('[data-testid="title-input"]').setValue(mockPost.title)
53 |
54 | await wrapper.find('[data-testid="post-form"]').trigger('submit')
55 |
56 | //assert that a new error prompting user for post body is diplayed
57 | expect(wrapper.html()).toContain('Please input post body')
58 | })
59 |
60 | test('when creating a new post fails', async () => {
61 | vi.spyOn(axios, 'post').mockRejectedValueOnce(new Error('Error occurred'))
62 |
63 | const wrapper = mount(App)
64 |
65 | await wrapper.find('[data-testid="title-input"]').setValue(mockPost.title)
66 | await wrapper.find('[data-testid="body-input"]').setValue(mockPost.body)
67 |
68 | await wrapper.find('[data-testid="post-form"]').trigger('submit')
69 |
70 | expect(wrapper.find('[type="submit"]').html()).toContain('Creating...')
71 |
72 | await flushPromises()
73 |
74 | expect(wrapper.html()).toContain('Error occurred')
75 | })
76 | })
77 | })
78 |
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
19 |
20 |
21 |
76 |
77 |
--------------------------------------------------------------------------------
/src/assets/base.css:
--------------------------------------------------------------------------------
1 | /* color palette from */
2 | :root {
3 | --vt-c-white: #ffffff;
4 | --vt-c-white-soft: #f8f8f8;
5 | --vt-c-white-mute: #f2f2f2;
6 |
7 | --vt-c-black: #181818;
8 | --vt-c-black-soft: #222222;
9 | --vt-c-black-mute: #282828;
10 |
11 | --vt-c-indigo: #2c3e50;
12 |
13 | --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
14 | --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
15 | --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
16 | --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
17 |
18 | --vt-c-text-light-1: var(--vt-c-indigo);
19 | --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
20 | --vt-c-text-dark-1: var(--vt-c-white);
21 | --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
22 | }
23 |
24 | /* semantic color variables for this project */
25 | :root {
26 | --color-background: var(--vt-c-white);
27 | --color-background-soft: var(--vt-c-white-soft);
28 | --color-background-mute: var(--vt-c-white-mute);
29 |
30 | --color-border: var(--vt-c-divider-light-2);
31 | --color-border-hover: var(--vt-c-divider-light-1);
32 |
33 | --color-heading: var(--vt-c-text-light-1);
34 | --color-text: var(--vt-c-text-light-1);
35 |
36 | --section-gap: 160px;
37 | }
38 |
39 | @media (prefers-color-scheme: dark) {
40 | :root {
41 | --color-background: var(--vt-c-black);
42 | --color-background-soft: var(--vt-c-black-soft);
43 | --color-background-mute: var(--vt-c-black-mute);
44 |
45 | --color-border: var(--vt-c-divider-dark-2);
46 | --color-border-hover: var(--vt-c-divider-dark-1);
47 |
48 | --color-heading: var(--vt-c-text-dark-1);
49 | --color-text: var(--vt-c-text-dark-2);
50 | }
51 | }
52 |
53 | *,
54 | *::before,
55 | *::after {
56 | box-sizing: border-box;
57 | margin: 0;
58 | position: relative;
59 | font-weight: normal;
60 | }
61 |
62 | body {
63 | color: var(--color-text);
64 | background: var(--color-background);
65 | transition: color 0.5s, background-color 0.5s;
66 | line-height: 1.6;
67 | font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
68 | Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
69 | font-size: 15px;
70 | text-rendering: optimizeLegibility;
71 | -webkit-font-smoothing: antialiased;
72 | -moz-osx-font-smoothing: grayscale;
73 | }
74 |
--------------------------------------------------------------------------------
/src/assets/logo.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/src/assets/main.css:
--------------------------------------------------------------------------------
1 | @import './base.css';
2 |
3 | #app {
4 | width: 100%;
5 | padding: 2rem;
6 | font-weight: normal;
7 | }
8 |
9 | a,
10 | .green {
11 | text-decoration: none;
12 | color: hsla(160, 100%, 37%, 1);
13 | transition: 0.4s;
14 | }
15 |
16 | @media (hover: hover) {
17 | a:hover {
18 | background-color: hsla(160, 100%, 37%, 0.2);
19 | }
20 | }
21 |
22 | @media (min-width: 1024px) {
23 | body {
24 | display: flex;
25 | place-items: center;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/NotificationToast.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 | {{ message }}
11 |
12 |
16 |
3 |
{{ title }}
4 |
{{ body }}
5 |
5 |
Test Post
6 |
test post body...
7 |