Skip to content
This repository has been archived by the owner on Oct 6, 2023. It is now read-only.

Commit

Permalink
fix(ui): snapshot preview overflowing over editor
Browse files Browse the repository at this point in the history
  • Loading branch information
@Akryum
Akryum committed Mar 6, 2022
1 parent ef7e5b5 commit 58e69b3
Show file tree
Hide file tree
Showing 5 changed files with 331 additions and 9 deletions.
313 changes: 309 additions & 4 deletions examples/demo/src/__snapshots__/vue.spec.ts.snap
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
// Peeky snapshots v1.0

exports[`vue create vue app 1`] = `
<div data-v-app>
<div>
hello
</div>
<div>
hello
</div>
`;

Expand All @@ -18,4 +16,311 @@ exports[`vue create vue app demo 2`] = `

exports[`vue create vue app demo 3`] = `
"Meow3"
`;

exports[`vue big app 1`] = `
<div>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
6
</li>
<li>
7
</li>
<li>
8
</li>
<li>
9
</li>
<li>
10
</li>
<li>
11
</li>
<li>
12
</li>
<li>
13
</li>
<li>
14
</li>
<li>
15
</li>
<li>
16
</li>
<li>
17
</li>
<li>
18
</li>
<li>
19
</li>
<li>
20
</li>
<li>
21
</li>
<li>
22
</li>
<li>
23
</li>
<li>
24
</li>
<li>
25
</li>
<li>
26
</li>
<li>
27
</li>
<li>
28
</li>
<li>
29
</li>
<li>
30
</li>
<li>
31
</li>
<li>
32
</li>
<li>
33
</li>
<li>
34
</li>
<li>
35
</li>
<li>
36
</li>
<li>
37
</li>
<li>
38
</li>
<li>
39
</li>
<li>
40
</li>
<li>
41
</li>
<li>
42
</li>
<li>
43
</li>
<li>
44
</li>
<li>
45
</li>
<li>
46
</li>
<li>
47
</li>
<li>
48
</li>
<li>
49
</li>
<li>
50
</li>
<li>
51
</li>
<li>
52
</li>
<li>
53
</li>
<li>
54
</li>
<li>
55
</li>
<li>
56
</li>
<li>
57
</li>
<li>
58
</li>
<li>
59
</li>
<li>
60
</li>
<li>
61
</li>
<li>
62
</li>
<li>
63
</li>
<li>
64
</li>
<li>
65
</li>
<li>
66
</li>
<li>
67
</li>
<li>
68
</li>
<li>
69
</li>
<li>
70
</li>
<li>
71
</li>
<li>
72
</li>
<li>
73
</li>
<li>
74
</li>
<li>
75
</li>
<li>
76
</li>
<li>
77
</li>
<li>
78
</li>
<li>
79
</li>
<li>
80
</li>
<li>
81
</li>
<li>
82
</li>
<li>
83
</li>
<li>
84
</li>
<li>
85
</li>
<li>
86
</li>
<li>
87
</li>
<li>
88
</li>
<li>
89
</li>
<li>
90
</li>
<li>
91
</li>
<li>
92
</li>
<li>
93
</li>
<li>
94
</li>
<li>
95
</li>
<li>
96
</li>
<li>
97
</li>
<li>
98
</li>
<li>
99
</li>
<li>
100
</li>
</ul>
</div>
`;
19 changes: 18 additions & 1 deletion examples/demo/src/vue.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable vue/one-component-per-file */
/* @peeky {
runtimeEnv: 'dom'
} */
Expand All @@ -20,10 +21,26 @@ describe('vue', () => {
const el = document.createElement('div')
document.body.appendChild(el)
app.mount(el)
expect(document.body.innerHTML).toMatchSnapshot()
expect(el.innerHTML).toMatchSnapshot()
expect('Hello').toMatchSnapshot('demo')
expect('Meow').toMatchSnapshot('demo')
expect('Meow3').toMatchSnapshot('demo')
// expect(el.innerHTML).toBe('<div>hello</div>')
})

test('big app', () => {
const app = createApp({
data () {
return {
n: 100,
}
},
template: '<div><ul><li v-for="i in n">{{ i }}</li></ul></div>',
})
console.log(app)
const el = document.createElement('div')
// document.body.appendChild(el)
app.mount(el)
expect(el.innerHTML).toMatchSnapshot()
})
})
2 changes: 1 addition & 1 deletion packages/peeky-client/src/features/editor/CodeEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ onResize(el, () => {
<div class="flex flex-col">
<div
ref="el"
class="flex-1"
class="flex-1 overflow-hidden"
/>
</div>
</template>
2 changes: 1 addition & 1 deletion packages/peeky-client/src/features/editor/DiffEditor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ onResize(el, () => {

<div
ref="el"
class="flex-1"
class="flex-1 overflow-hidden"
/>
</div>
</template>
4 changes: 2 additions & 2 deletions packages/peeky-client/src/features/snapshot/SnapshotView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -199,12 +199,12 @@ const showPreview = computed(() => isHtml.value && isEnvDom.value)
v-if="snapshot.failed"
:actual="snapshot.newContent"
:expected="snapshot.content"
class="h-full"
class="h-full overflow-hidden"
/>
<CodeEditor
v-else
:code="!snapshot.failed && snapshot.newContent ? snapshot.newContent : snapshot.content"
class="h-full"
class="h-full overflow-hidden"
/>
</template>

Expand Down

0 comments on commit 58e69b3

Please sign in to comment.