forked from emotion-js/emotion
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
129 lines (114 loc) · 4.33 KB
/
index.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
// @flow
import { safeQuerySelector } from 'test-utils'
import { StyleSheet } from '@emotion/sheet'
const rule = 'html { color: hotpink; }'
const rule2 = '* { box-sizing: border-box; }'
let defaultOptions = {
key: '',
container: safeQuerySelector('head')
}
describe('StyleSheet', () => {
it('should be speedy by default in production', () => {
process.env.NODE_ENV = 'production'
const sheet = new StyleSheet(defaultOptions)
expect(sheet.isSpeedy).toBe(true)
process.env.NODE_ENV = 'test'
})
it('should not be speedy in a non-production environment by default', () => {
const sheet = new StyleSheet(defaultOptions)
expect(sheet.isSpeedy).toBe(false)
})
it('should remove its style elements from the document when flushed', () => {
const sheet = new StyleSheet(defaultOptions)
sheet.insert(rule)
expect(document.documentElement).toMatchSnapshot()
sheet.flush()
expect(document.documentElement).toMatchSnapshot()
})
it('should set the data-emotion attribute to the key option', () => {
const key = 'some-key'
const sheet = new StyleSheet({ ...defaultOptions, key })
sheet.insert(rule)
expect(document.documentElement).toMatchSnapshot()
expect(
// $FlowFixMe
document.querySelector('[data-emotion]').getAttribute('data-emotion')
).toBe(key)
sheet.flush()
})
it('should insert a rule into the DOM when not in speedy', () => {
const sheet = new StyleSheet(defaultOptions)
sheet.insert(rule)
expect(document.documentElement).toMatchSnapshot()
sheet.flush()
})
it('should insert a rule with insertRule when in speedy', () => {
const sheet = new StyleSheet({ ...defaultOptions, speedy: true })
sheet.insert(rule)
expect(document.documentElement).toMatchSnapshot()
expect(sheet.tags).toHaveLength(1)
// $FlowFixMe
expect(sheet.tags[0].sheet.cssRules).toMatchSnapshot()
sheet.flush()
})
it('should throw when inserting a bad rule in speedy mode', () => {
const sheet = new StyleSheet({ ...defaultOptions, speedy: true })
const oldConsoleWarn = console.warn
// $FlowFixMe
console.warn = jest.fn()
sheet.insert('.asdfasdf4###112121211{')
expect(console.warn).toHaveBeenCalledTimes(1)
expect((console.warn: any).mock.calls[0][0]).toBe(
'There was a problem inserting the following rule: ".asdfasdf4###112121211{"'
)
// $FlowFixMe
console.warn = oldConsoleWarn
sheet.flush()
})
it('should set the nonce option as an attribute to style elements', () => {
let nonce = 'some-nonce'
const sheet = new StyleSheet({ ...defaultOptions, nonce })
sheet.insert(rule)
expect(sheet.tags[0]).toBe(document.querySelector('[data-emotion]'))
expect(sheet.tags).toHaveLength(1)
expect(sheet.tags[0].getAttribute('nonce')).toBe(nonce)
sheet.flush()
})
it("should use the container option instead of document.head to insert style elements into if it's passed", () => {
const container = document.createElement('div')
// $FlowFixMe
document.body.appendChild(container)
const sheet = new StyleSheet({ ...defaultOptions, container })
expect(sheet.container).toBe(container)
sheet.insert(rule)
expect(document.documentElement).toMatchSnapshot()
expect(sheet.tags).toHaveLength(1)
expect(sheet.tags[0].parentNode).toBe(container)
sheet.flush()
// $FlowFixMe
document.body.removeChild(container)
})
it('should not throw an error when inserting a @import rule in speedy when a rule has already been inserted', () => {
const sheet = new StyleSheet({ ...defaultOptions, speedy: true })
sheet.insert('h1 {color:hotpink;}')
let importRule =
"@import url('https://fonts.googleapis.com/css?family=Merriweather');"
sheet.insert(importRule)
expect(sheet.tags).toHaveLength(1)
// $FlowFixMe
expect(sheet.tags[0].sheet.cssRules[0]).toBeInstanceOf(window.CSSImportRule)
sheet.flush()
})
it('should accept prepend option', () => {
const head = safeQuerySelector('head')
const otherStyle = document.createElement('style')
otherStyle.setAttribute('id', 'other')
head.appendChild(otherStyle)
const sheet = new StyleSheet({ ...defaultOptions, prepend: true })
sheet.insert(rule)
sheet.insert(rule2)
expect(document.documentElement).toMatchSnapshot()
sheet.flush()
head.removeChild(otherStyle)
})
})