This repository was archived by the owner on Oct 19, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathhyper_react_integration_spec.rb
More file actions
388 lines (382 loc) Β· 16.9 KB
/
hyper_react_integration_spec.rb
File metadata and controls
388 lines (382 loc) Β· 16.9 KB
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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
require 'spec_helper'
# rubocop:disable Metrics/BlockLength
describe 'React Integration', js: true do
it "The hyper-component gem can use Hyperloop::Component to create components" do
mount "TestComp" do
class TestComp < Hyperloop::Component
render(DIV) { 'hello'}
end
end
expect(page).to have_content('hello')
expect_evaluate_ruby("React::Component.instance_variable_get('@deprecation_messages')").to be_nil
end
it "The hyper-component gem can use Hyperloop::Component::Mixin to create components" do
mount "TestComp" do
class TestComp
include Hyperloop::Component::Mixin
render(DIV) { 'hello'}
end
end
expect(page).to have_content('hello')
expect_evaluate_ruby("React::Component.instance_variable_get('@deprecation_messages')").to be_nil
end
it "The hyper-component gem can use the deprecated React::Component::Base class to create components" do
mount "TestComp" do
class TestComp < React::Component::Base
render(DIV) { 'hello'}
end
end
expect(page).to have_content('hello')
expect_evaluate_ruby("React::Component.instance_variable_get('@deprecation_messages')").to eq(
["Warning: Deprecated feature used in TestComp. The class name React::Component::Base has been deprecated. Use Hyperloop::Component instead."]
)
end
it "The hyper-component gem can use Hyperloop::Component::Mixin to create components" do
mount "TestComp" do
class TestComp
include React::Component
render(DIV) { 'hello'}
end
end
expect(page).to have_content('hello')
expect_evaluate_ruby("React::Component.instance_variable_get('@deprecation_messages')").to eq(
["Warning: Deprecated feature used in TestComp. The module name React::Component has been deprecated. Use Hyperloop::Component::Mixin instead."]
)
end
it "The hyper-component gem can use hyper-store state syntax" do
mount "TestComp" do
class TestComp < Hyperloop::Component
before_mount do
mutate.foo 'hello'
end
render(DIV) do
state.foo
end
end
end
expect(page).to have_content('hello')
expect_evaluate_ruby("React::Component.instance_variable_get('@deprecation_messages')").to be_nil
end
it "and it can still use the deprecated mutate syntax" do
mount "TestComp" do
class TestComp < Hyperloop::Component
before_mount do
state.foo! 'hello'
end
render(DIV) do
state.foo
end
end
end
expect(page).to have_content('hello')
expect_evaluate_ruby("React::Component.instance_variable_get('@deprecation_messages')").to eq(
["Warning: Deprecated feature used in TestComp. The mutator 'state.foo!' has been deprecated. Use 'mutate.foo' instead."]
)
end
it "can use the hyper-store syntax to declare component states" do
mount "TestComp" do
class TestComp < Hyperloop::Component
state foo: 'hello'
render(DIV) do
" foo = #{state.foo}"
end
end
end
expect(page).to have_content('hello')
expect_evaluate_ruby("React::Component.instance_variable_get('@deprecation_messages')").to be_nil
end
it "can use the hyper-store syntax to declare component states and use deprecated mutate syntax" do
mount "TestComp" do
class TestComp < Hyperloop::Component
state foo: true
after_mount do
state.foo! 'hello' if state.foo
end
render(DIV) do
state.foo
end
end
end
expect(page).to have_content('hello')
end
it "can still use the deprecated syntax to declare component states" do
mount "TestComp" do
class TestComp < Hyperloop::Component
define_state foo: 'hello'
render(DIV) do
state.foo
end
end
end
expect(page).to have_content('hello')
expect_evaluate_ruby("React::Component.instance_variable_get('@deprecation_messages')").to eq(
["Warning: Deprecated feature used in TestComp. 'define_state' is deprecated. Use the 'state' macro to declare states."]
)
end
it "can use the hyper-store syntax to declare class states" do
mount "TestComp" do
class TestComp < Hyperloop::Component
state foo: 'hello', scope: :class, reader: true
render(DIV) do
TestComp.foo
end
end
end
expect(page).to have_content('hello')
expect_evaluate_ruby("React::Component.instance_variable_get('@deprecation_messages')").to be_nil
end
it "can still use the deprecated syntax to declare component states" do
mount "TestComp" do
class TestComp < Hyperloop::Component
export_state foo: 'hello'
render(DIV) do
TestComp.foo
end
end
end
expect(page).to have_content('hello')
expect_evaluate_ruby("React::Component.instance_variable_get('@deprecation_messages')").to eq(
["Warning: Deprecated feature used in TestComp. 'export_state' is deprecated. Use the 'state' macro to declare states."]
)
end
it 'defines component spec methods' do
mount "Foo" do
class Foo
include React::Component
def render
"initial_state = #{initial_state}"
end
end
end
expect(page).to have_content('initial_state = ')
end
it 'allows block for life cycle callback' do
mount "Foo" do
class Foo < React::Component::Base
before_mount do
set_state({ foo: "bar" })
end
render(DIV) do
state[:foo]
end
end
end
expect(page).to have_content('bar')
end
it 'allows kernal method names like "format" to be used as state variable names' do
mount 'Foo' do
class Foo < React::Component::Base
before_mount do
mutate.format 'hello'
end
render(DIV) do
state.format
end
end
end
expect(page).to have_content('hello')
end
# failures due to React::State::ALWAYS_UPDATE_STATE_AFTER_RENDER = true
# these tests are all synchronous and fail if we don't react to state change during the rendering cycle.
# 1) React::Component New style setter & getter allows kernal method names like "format" to be used as state variable names
# Failure/Error: Unable to find matching line from backtrace
# expected 'Foo' with params '{}' to render '<div>yes</div>', but '<div></div>' was rendered.
# # $$handle_matcher@http://localhost:9999/assets/opal/rspec/sprockets_runner.js:36030:203
# #
# # Showing full backtrace because every line was filtered out.
# # See docs for RSpec::Configuration#backtrace_exclusion_patterns and
# # RSpec::Configuration#backtrace_inclusion_patterns for more information.
#
# 2) React::Component New style setter & getter returns an observer with the bang method and no arguments
# Failure/Error: Unable to find matching line from backtrace
# expected 'Foo' with params '{}' to render '<div>React::Observable</div>', but '<div></div>' was rendered.
# # $$handle_matcher@http://localhost:9999/assets/opal/rspec/sprockets_runner.js:36030:203
# #
# # Showing full backtrace because every line was filtered out.
# # See docs for RSpec::Configuration#backtrace_exclusion_patterns and
# # RSpec::Configuration#backtrace_inclusion_patterns for more information.
#
# 3) React::Component New style setter & getter returns the current value of a state when written
# Failure/Error: Unable to find matching line from backtrace
# expected 'Foo' with params '{}' to render '<div>bar</div>', but '<div></div>' was rendered.
# # $$handle_matcher@http://localhost:9999/assets/opal/rspec/sprockets_runner.js:36030:203
# #
# # Showing full backtrace because every line was filtered out.
# # See docs for RSpec::Configuration#backtrace_exclusion_patterns and
# # RSpec::Configuration#backtrace_inclusion_patterns for more information.
#
# 4) React::Component New style setter & getter can access an explicitly defined state`
# Failure/Error: Unable to find matching line from backtrace
# NoMethodError:
# undefined method `after' for React::State
# # $$set_state@http://localhost:9999/assets/opal/rspec/sprockets_runner.js:110492:294
# # [native code]
# #
# # Showing full backtrace because every line was filtered out.
# # See docs for RSpec::Configuration#backtrace_exclusion_patterns and
# # RSpec::Configuration#backtrace_inclusion_patterns for more information.
#
# 5) React::Component State setter & getter defines setter using `define_state`
# Failure/Error: Unable to find matching line from backtrace
# NoMethodError:
# undefined method `after' for React::State
# # $$set_state@http://localhost:9999/assets/opal/rspec/sprockets_runner.js:110492:294
# # [native code]
# #
# # Showing full backtrace because every line was filtered out.
# # See docs for RSpec::Configuration#backtrace_exclusion_patterns and
# # RSpec::Configuration#backtrace_inclusion_patterns for more information.
#
# 6) React::Component State setter & getter defines init state by passing a block to `define_state`
# Failure/Error: Unable to find matching line from backtrace
# NoMethodError:
# undefined method `after' for React::State
# # $$set_state@http://localhost:9999/assets/opal/rspec/sprockets_runner.js:110492:294
# # [native code]
# #
# # Showing full backtrace because every line was filtered out.
# # See docs for RSpec::Configuration#backtrace_exclusion_patterns and
# # RSpec::Configuration#backtrace_inclusion_patterns for more information.
#
# 7) React::Component State setter & getter defines getter using `define_state`
# Failure/Error: Unable to find matching line from backtrace
# NoMethodError:
# undefined method `after' for React::State
# # $$set_state@http://localhost:9999/assets/opal/rspec/sprockets_runner.js:110492:294
# # [native code]
# #
# # Showing full backtrace because every line was filtered out.
# # See docs for RSpec::Configuration#backtrace_exclusion_patterns and
# # RSpec::Configuration#backtrace_inclusion_patterns for more information.
#
# 8) React::Component State setter & getter defines multiple state accessors by passing array to `define_state`
# Failure/Error: Unable to find matching line from backtrace
# NoMethodError:
# undefined method `after' for React::State
# # $$set_state@http://localhost:9999/assets/opal/rspec/sprockets_runner.js:110492:294
# # [native code]
# #
# # Showing full backtrace because every line was filtered out.
# # See docs for RSpec::Configuration#backtrace_exclusion_patterns and
# # RSpec::Configuration#backtrace_inclusion_patterns for more information.
#
# 9) React::Component State setter & getter invokes `define_state` multiple times to define states
# Failure/Error: Unable to find matching line from backtrace
# NoMethodError:
# undefined method `after' for React::State
# # $$set_state@http://localhost:9999/assets/opal/rspec/sprockets_runner.js:110492:294
# # [native code]
# #
# # Showing full backtrace because every line was filtered out.
# # See docs for RSpec::Configuration#backtrace_exclusion_patterns and
# # RSpec::Configuration#backtrace_inclusion_patterns for more information.
#
# 10) React::Component State setter & getter can initialize multiple state variables with a block
# Failure/Error: Unable to find matching line from backtrace
# NoMethodError:
# undefined method `after' for React::State
# # $$set_state@http://localhost:9999/assets/opal/rspec/sprockets_runner.js:110492:294
# # [native code]
# #
# # Showing full backtrace because every line was filtered out.
# # See docs for RSpec::Configuration#backtrace_exclusion_patterns and
# # RSpec::Configuration#backtrace_inclusion_patterns for more information.
#
# 11) React::Component State setter & getter can mix multiple state variables with initializers and a block
# Failure/Error: Unable to find matching line from backtrace
# NoMethodError:
# undefined method `after' for React::State
# # $$set_state@http://localhost:9999/assets/opal/rspec/sprockets_runner.js:110492:294
# # [native code]
# #
# # Showing full backtrace because every line was filtered out.
# # See docs for RSpec::Configuration#backtrace_exclusion_patterns and
# # RSpec::Configuration#backtrace_inclusion_patterns for more information.
#
# 12) React::Component State setter & getter gets state in render method
# Failure/Error: Unable to find matching line from backtrace
# NoMethodError:
# undefined method `after' for React::State
# # $$set_state@http://localhost:9999/assets/opal/rspec/sprockets_runner.js:110492:294
# # [native code]
# #
# # Showing full backtrace because every line was filtered out.
# # See docs for RSpec::Configuration#backtrace_exclusion_patterns and
# # RSpec::Configuration#backtrace_inclusion_patterns for more information.
#
# 13) React::Component State setter & getter transforms state getter to Ruby object
# Failure/Error: Unable to find matching line from backtrace
# NoMethodError:
# undefined method `after' for React::State
# # $$set_state@http://localhost:9999/assets/opal/rspec/sprockets_runner.js:110492:294
# # [native code]
# #
# # Showing full backtrace because every line was filtered out.
# # See docs for RSpec::Configuration#backtrace_exclusion_patterns and
# # RSpec::Configuration#backtrace_inclusion_patterns for more information.
#
# 14) React::Component Event handling works in render method
# Failure/Error: Unable to find matching line from backtrace
# NoMethodError:
# undefined method `after' for React::State
# # $$set_state@http://localhost:9999/assets/opal/rspec/sprockets_runner.js:110492:294
# # [native code]
# #
# # Showing full backtrace because every line was filtered out.
# # See docs for RSpec::Configuration#backtrace_exclusion_patterns and
# # RSpec::Configuration#backtrace_inclusion_patterns for more information.
#
# 15) React::Observable allows to set value on Observable
# Failure/Error: Unable to find matching line from backtrace
# Exception:
# null is not an object (evaluating 'instance.$dom_node().innerHTML')
# #
# # Showing full backtrace because every line was filtered out.
# # See docs for RSpec::Configuration#backtrace_exclusion_patterns and
# # RSpec::Configuration#backtrace_inclusion_patterns for more information.
#
# 16) React::State can create dynamically initialized exported states
# Failure/Error: Unable to find matching line from backtrace
# NoMethodError:
# undefined method `after' for React::State
# # $$set_state@http://localhost:9999/assets/opal/rspec/sprockets_runner.js:110492:294
# #
# # Showing full backtrace because every line was filtered out.
# # See docs for RSpec::Configuration#backtrace_exclusion_patterns and
# # RSpec::Configuration#backtrace_inclusion_patterns for more information.
#
# 17) React::State ignores state updates during rendering
# Failure/Error: Unable to find matching line from backtrace
#
# expected: "<span>Boom</span>"
# got: ""
#
# (compared using ==)
# # $$handle_matcher@http://localhost:9999/assets/opal/rspec/sprockets_runner.js:36030:203
# #
# # Showing full backtrace because every line was filtered out.
# # See docs for RSpec::Configuration#backtrace_exclusion_patterns and
# # RSpec::Configuration#backtrace_inclusion_patterns for more information.
#
# 18) Adding state to a component (second tutorial example) produces the correct result
# Failure/Error: Unable to find matching line from backtrace
# NoMethodError:
# undefined method `after' for React::State
# # $$set_state@http://localhost:9999/assets/opal/rspec/sprockets_runner.js:110492:294
# # [native code]
# #
# # Showing full backtrace because every line was filtered out.
# # See docs for RSpec::Configuration#backtrace_exclusion_patterns and
# # RSpec::Configuration#backtrace_inclusion_patterns for more information.
#
# 19) Adding state to a component (second tutorial example) renders to the document
# Failure/Error: Unable to find matching line from backtrace
# NoMethodError:
# undefined method `after' for React::State
# # $$set_state@http://localhost:9999/assets/opal/rspec/sprockets_runner.js:110492:294
# # [native code]
# #
# # Showing full backtrace because every line was filtered out.
# # See docs for RSpec::Configuration#backtrace_exclusion_patterns and
# # RSpec::Configuration#backtrace_inclusion_patterns for more information.
end