-
Notifications
You must be signed in to change notification settings - Fork 21
/
index.ts
153 lines (139 loc) · 3.51 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
import {
checkMountModeEnabled,
cleanupStyles,
injectStylesBeforeElement,
polyfillFetchIfNeeded,
} from './utils'
const rootId = 'cypress-root'
/**
* Additional styles to inject into the document.
* A component might need 3rd party libraries from CDN,
* local CSS files and custom styles.
*/
export interface StyleOptions {
/**
* Creates <link href="..." /> element for each stylesheet
* @alias stylesheet
*/
stylesheets: string | string[]
/**
* Creates <link href="..." /> element for each stylesheet
* @alias stylesheets
*/
stylesheet: string | string[]
/**
* Creates <style>...</style> element and inserts given CSS.
* @alias styles
*/
style: string | string[]
/**
* Creates <style>...</style> element for each given CSS text.
* @alias style
*/
styles: string | string[]
/**
* Loads each file and creates a <style>...</style> element
* with the loaded CSS
* @alias cssFile
*/
cssFiles: string | string[]
/**
* Single CSS file to load into a <style></style> element
* @alias cssFile
*/
cssFile: string | string[]
/**
* HTML to surround the component with. Component itself
* will replace DIV with id "here".
*/
html: string
}
/**
* Options to pass to the component's constructor
*
* @export
* @interface ComponentOptions
* @example
* mount(HelloWorld, { props: {name: 'World'} })
*/
export interface ComponentOptions {
callbacks?: {
[key: string]: Function
}
/**
* List of props to pass to the component's constructor
*
* @memberof ComponentOptions
* @example
* mount(HelloWorld, { props: {name: 'World'} })
*/
props?: {
[key: string]: any
}
}
interface SvelteComponentOptions {
target: Element
}
interface SvelteComponent {
$$: {
callbacks: {
[key: string]: Function[]
}
}
}
interface SvelteComponentConstructor {
new (options: SvelteComponentOptions): SvelteComponent
}
export function mount(
Component: SvelteComponentConstructor,
options: ComponentOptions = {},
styleOptions: Partial<StyleOptions> = {},
) {
options = options || {}
checkMountModeEnabled()
return cy.then(() => {
// @ts-ignore
const document = cy.state('document')
cleanupStyles(document)
let el = document.getElementById(rootId)
if (el) {
while (el.firstChild) {
el.removeChild(el.firstChild)
}
} else {
el = document.createElement('div')
el.setAttribute('id', rootId)
document.getElementsByTagName('body')[0].prepend(el)
}
return injectStylesBeforeElement(styleOptions, document, el).then(() => {
// by default we mount the component into the created element
let target = el
if (styleOptions && styleOptions.html) {
el.innerHTML = styleOptions.html
target = document.getElementById('here')
if (!target) {
console.error('mount has HTML with DIV with ID "here"')
console.error(styleOptions.html)
throw new Error(
'Could not find element with ID "here" in the HTML passed',
)
}
}
const allOptions = Object.assign({}, options, {
target,
})
const component = new Component(allOptions)
if (options.callbacks) {
// write message callbacks
Object.keys(options.callbacks).forEach((message) => {
component.$$.callbacks[message] = [options.callbacks![message]]
})
}
return cy.wrap(component)
})
})
}
beforeEach(() => {
polyfillFetchIfNeeded()
})
export default mount