|
1 | | -import { mount } from '@vue/test-utils' |
2 | | -import TypeScript from './components/TypeScript.vue' |
| 1 | +const { createApp, h } = require('vue') |
3 | 2 | import { resolve } from 'path' |
4 | 3 | import { readFileSync } from 'fs' |
5 | | -import jestVue from 'vue-jest' |
6 | | -import RenderFunction from './components/RenderFunction.vue' |
7 | | -import Jade from './components/Jade.vue' |
8 | | -import FunctionalSFC from './components/FunctionalSFC.vue' |
9 | | -import Basic from './components/Basic.vue' |
| 4 | + |
10 | 5 | import BasicSrc from './components/BasicSrc.vue' |
11 | | -import { randomExport } from './components/NamedExport.vue' |
| 6 | +import Pug from './components/Pug.vue' |
12 | 7 | import Coffee from './components/Coffee.vue' |
| 8 | +import Basic from './components/Basic.vue' |
| 9 | +import TypeScript from './components/TypeScript.vue' |
| 10 | +import jestVue from '../../../' |
| 11 | +import RenderFunction from './components/RenderFunction.vue' |
| 12 | +import FunctionalSFC from './components/FunctionalSFC.vue' |
13 | 13 | import CoffeeScript from './components/CoffeeScript.vue' |
14 | 14 | import FunctionalSFCParent from './components/FunctionalSFCParent.vue' |
15 | 15 | import NoScript from './components/NoScript.vue' |
16 | | -import Pug from './components/Pug.vue' |
17 | 16 | import PugRelative from './components/PugRelativeExtends.vue' |
18 | | -import Jsx from './components/Jsx.vue' |
19 | | -import Constructor from './components/Constructor.vue' |
| 17 | +import { randomExport } from './components/NamedExport.vue' |
| 18 | +// TODO: JSX for Vue 3? TSX? |
| 19 | +// import Jsx from './components/Jsx.vue' |
| 20 | + |
| 21 | +function mount(Component, props, slots) { |
| 22 | + document.getElementsByTagName('html')[0].innerHTML = '' |
| 23 | + const el = document.createElement('div') |
| 24 | + el.id = 'app' |
| 25 | + document.body.appendChild(el) |
| 26 | + const Parent = { |
| 27 | + render() { |
| 28 | + return h(Component, props, slots) |
| 29 | + } |
| 30 | + } |
| 31 | + const app = createApp(Parent).mount(el) |
| 32 | +} |
20 | 33 |
|
21 | 34 | test('processes .vue files', () => { |
22 | | - const wrapper = mount(Basic) |
23 | | - expect(wrapper.vm.msg).toEqual('Welcome to Your Vue.js App') |
24 | | - wrapper.vm.toggleClass() |
| 35 | + mount(Basic) |
| 36 | + expect(document.querySelector('h1').textContent).toBe( |
| 37 | + 'Welcome to Your Vue.js App' |
| 38 | + ) |
25 | 39 | }) |
26 | 40 |
|
27 | 41 | test('processes .vue files with src attributes', () => { |
28 | | - const wrapper = mount(BasicSrc) |
29 | | - wrapper.vm.toggleClass() |
| 42 | + mount(BasicSrc) |
| 43 | + expect(document.querySelector('h1').textContent).toBe( |
| 44 | + 'Welcome to Your Vue.js App' |
| 45 | + ) |
30 | 46 | }) |
31 | 47 |
|
32 | 48 | test('handles named exports', () => { |
@@ -55,73 +71,61 @@ test('generates source maps using src attributes', () => { |
55 | 71 | expect(code).toMatchSnapshot() |
56 | 72 | }) |
57 | 73 |
|
58 | | -test('processes .vue file using jsx', () => { |
59 | | - const wrapper = mount(Jsx) |
60 | | - expect(wrapper.is('div')).toBeTruthy() |
61 | | -}) |
62 | | - |
63 | | -test('processes extended functions', () => { |
64 | | - const wrapper = mount(Constructor) |
65 | | - expect(wrapper.is('div')).toBeTruthy() |
66 | | -}) |
67 | | - |
68 | 74 | test('processes .vue file with lang set to coffee', () => { |
69 | | - const wrapper = mount(Coffee) |
70 | | - expect(wrapper.is('div')).toBeTruthy() |
| 75 | + mount(Coffee) |
| 76 | + expect(document.querySelector('h1').textContent).toBe('Coffee') |
71 | 77 | }) |
72 | 78 |
|
73 | 79 | test('processes .vue file with lang set to coffeescript', () => { |
74 | | - const wrapper = mount(CoffeeScript) |
75 | | - expect(wrapper.is('div')).toBeTruthy() |
| 80 | + mount(CoffeeScript) |
| 81 | + expect(document.querySelector('h1').textContent).toBe('CoffeeScript') |
76 | 82 | }) |
77 | 83 |
|
78 | | -test('processes .vue files with lang set to typescript', () => { |
79 | | - const wrapper = mount(TypeScript) |
80 | | - expect(wrapper.is('div')).toBeTruthy() |
| 84 | +test('processes SFC with no template', () => { |
| 85 | + const wrapper = mount( |
| 86 | + RenderFunction, |
| 87 | + {}, |
| 88 | + { default: () => h('div', { id: 'slot' }) } |
| 89 | + ) |
| 90 | + expect(document.querySelector('#slot')).toBeTruthy() |
81 | 91 | }) |
82 | 92 |
|
83 | | -test('processes functional components', () => { |
84 | | - const clickSpy = jest.fn() |
85 | | - const wrapper = mount(FunctionalSFC, { |
86 | | - context: { |
87 | | - props: { msg: { id: 1, title: 'foo' }, onClick: clickSpy } |
88 | | - } |
89 | | - }) |
90 | | - expect(wrapper.text().trim()).toBe('foo') |
91 | | - wrapper.trigger('click') |
92 | | - expect(clickSpy).toHaveBeenCalledWith(1) |
| 93 | +test('processes .vue files with lang set to typescript', () => { |
| 94 | + const wrapper = mount(TypeScript) |
| 95 | + expect(document.querySelector('#parent').textContent).toBe('Parent') |
| 96 | + expect(document.querySelector('#child').textContent).toBe('Child') |
93 | 97 | }) |
94 | 98 |
|
95 | | -test('processes SFC with functional template from parent', () => { |
96 | | - const wrapper = mount(FunctionalSFCParent) |
97 | | - expect(wrapper.text().trim()).toBe('foo') |
| 99 | +test('handles missing script block', () => { |
| 100 | + mount(NoScript) |
| 101 | + expect(document.querySelector('.footer').textContent).toBe("I'm footer!") |
98 | 102 | }) |
99 | 103 |
|
100 | | -test('handles missing script block', () => { |
101 | | - const wrapper = mount(NoScript) |
102 | | - expect(wrapper.contains('footer')) |
| 104 | +test('processes pug templates', () => { |
| 105 | + mount(Pug) |
| 106 | + expect(document.querySelector('.pug-base')).toBeTruthy() |
| 107 | + expect(document.querySelector('.pug-extended')).toBeTruthy() |
103 | 108 | }) |
104 | 109 |
|
105 | | -test('processes .vue file with jade template', () => { |
106 | | - const wrapper = mount(Jade) |
107 | | - expect(wrapper.is('div')).toBeTruthy() |
108 | | - expect(wrapper.classes()).toContain('jade') |
| 110 | +test('supports relative paths when extending templates from .pug files', () => { |
| 111 | + mount(PugRelative) |
| 112 | + expect(document.querySelector('.pug-relative-base')).toBeTruthy() |
109 | 113 | }) |
110 | 114 |
|
111 | | -test('processes pug templates', () => { |
112 | | - const wrapper = mount(Pug) |
113 | | - expect(wrapper.is('div')).toBeTruthy() |
114 | | - expect(wrapper.classes()).toContain('pug-base') |
115 | | - expect(wrapper.find('.pug-extended').exists()).toBeTruthy() |
| 115 | +// TODO: How do functional components work in Vue 3? |
| 116 | +xtest('processes functional components', () => { |
| 117 | + const clickSpy = jest.fn() |
| 118 | + mount(FunctionalSFC) |
116 | 119 | }) |
117 | 120 |
|
118 | | -test('supports relative paths when extending templates from .pug files', () => { |
119 | | - const wrapper = mount(PugRelative) |
120 | | - expect(wrapper.is('div')).toBeTruthy() |
121 | | - expect(wrapper.find('.pug-relative-base').exists()).toBeTruthy() |
| 121 | +// TODO: How do functional components work in Vue 3? |
| 122 | +xtest('processes SFC with functional template from parent', () => { |
| 123 | + mount(FunctionalSFCParent) |
| 124 | + expect(document.querySelector('div').textContent).toBe('foo') |
122 | 125 | }) |
123 | 126 |
|
124 | | -test('processes SFC with no template', () => { |
125 | | - const wrapper = mount(RenderFunction) |
126 | | - expect(wrapper.is('section')).toBe(true) |
| 127 | +// TODO: JSX in Vue 3? |
| 128 | +xtest('processes .vue file using jsx', () => { |
| 129 | + const wrapper = mount(Jsx) |
| 130 | + expect(document.querySelector('#jsx')).toBeTruthy() |
127 | 131 | }) |
0 commit comments