forked from alpinejs/alpine
-
Notifications
You must be signed in to change notification settings - Fork 2
/
utils.js
136 lines (97 loc) · 4.46 KB
/
utils.js
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
// This is an invisible template tag for enabling syntax highlighting
// of any string in most editors.
export function html(strings) {
return strings.raw[0]
}
export let test = function (name, template, callback, handleExpectedErrors = false) {
it(name, () => {
injectHtmlAndBootAlpine(cy, template, callback, undefined, handleExpectedErrors)
})
}
test.only = (name, template, callback, handleExpectedErrors = false) => {
it.only(name, () => {
injectHtmlAndBootAlpine(cy, template, callback, undefined, handleExpectedErrors)
})
}
test.retry = (count) => (name, template, callback, handleExpectedErrors = false) => {
it(name, {
retries: {
// During "cypress run"
runMode: count - 1,
// During "cypress open"
openMode: count - 1,
}
}, () => {
injectHtmlAndBootAlpine(cy, template, callback, undefined, handleExpectedErrors)
})
}
test.csp = (name, template, callback, handleExpectedErrors = false) => {
it(name, () => {
injectHtmlAndBootAlpine(cy, template, callback, __dirname+'/spec-csp.html', handleExpectedErrors)
})
}
function injectHtmlAndBootAlpine(cy, templateAndPotentiallyScripts, callback, page, handleExpectedErrors = false) {
let [template, scripts] = Array.isArray(templateAndPotentiallyScripts)
? templateAndPotentiallyScripts
: [templateAndPotentiallyScripts]
cy.visit(page || __dirname+'/spec.html')
if( handleExpectedErrors ) {
cy.on( 'uncaught:exception', ( error ) => {
if( error.el === undefined && error.expression === undefined ) {
console.warn( 'Expected all errors originating from Alpine to have el and expression. Letting cypress fail the test.', error )
return true
}
return false
} );
}
cy.get('#root').then(([el]) => {
el.innerHTML = template
el.evalScripts(scripts)
cy.get('[alpine-is-ready]', { timeout: 5000 }).should('be.visible');
// We can't just simply reload a page from a test, because we need to
// re-inject all the templates and such. This is a helper to allow
// a test-subject method to perform a redirect all on their own.
let reload = () => {
cy.reload()
cy.get('#root').then(([el]) => {
el.innerHTML = template
el.evalScripts(scripts)
cy.get('[alpine-is-ready]', { timeout: 5000 }).should('be.visible');
})
}
cy.window().then(window => {
callback(cy, reload, window, window.document)
})
})
}
export let haveData = (key, value) => ([ el ]) => expect(root(el)._x_dataStack[0][key]).to.equal(value)
export let haveFocus = () => el => expect(el).to.have.focus
export let notHaveFocus = () => el => expect(el).not.to.be.focused
export let haveAttribute = (name, value) => el => expect(el).to.have.attr(name, value)
export let notHaveAttribute = (name, value) => el => expect(el).not.to.have.attr(name, value)
export let haveText = text => el => expect(el).to.have.text(text)
export let notHaveText = text => el => expect(el).not.to.have.text(text)
export let haveHtml = html => el => expect(el).to.have.html(html)
export let beChecked = () => el => expect(el).to.be.checked
export let notBeChecked = () => el => expect(el).not.to.be.checked
export let beVisible = () => el => expect(el).to.be.visible
export let notBeVisible = () => el => expect(el).not.to.be.visible
export let beHidden = () => el => expect(el).to.be.hidden
export let haveClasses = classes => el => classes.forEach(aClass => expect(el).to.have.class(aClass))
export let notHaveClasses = classes => el => classes.forEach(aClass => expect(el).not.to.have.class(aClass))
export let haveValue = value => el => expect(el).to.have.value(value)
export let haveLength = length => el => expect(el).to.have.length(length)
export let beEqualTo = value => el => expect(el).to.eq(value)
export let notHaveComputedStyle = (name, value) => el => {
const win = el[0].ownerDocument.defaultView
expect(win.getComputedStyle(el[0]).getPropertyValue(name)).not.to.eq(value)
}
export let haveComputedStyle = (name, value) => el => {
const win = el[0].ownerDocument.defaultView
expect(win.getComputedStyle(el[0]).getPropertyValue(name)).to.eq(value)
}
export function root(el) {
if (el._x_dataStack) return el
if (! el.parentElement) return
return closestRoot(el.parentElement)
}