Skip to content

Commit c8d5899

Browse files
author
Brian Vaughn
committed
Fixed inline bundling problem and added more fixture tests
1 parent 70dfb61 commit c8d5899

14 files changed

+476
-237
lines changed

fixtures/tracking/index.html

Lines changed: 33 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,34 @@
44
<meta charset="utf-8">
55
<title>Test tracking UMD</title>
66
<style>
7+
body {
8+
font-family: sans-serif;
9+
}
10+
ol {
11+
display: inline-flex;
12+
flex-direction: column;
13+
align-items: flex-start;
14+
}
715
li {
16+
background-color: #F7F7F7;
817
border: solid #CCC 0.125rem;
918
margin-bottom: 0.5rem;
1019
border-radius: 0.25rem;
11-
padding: 0.25rem;
20+
padding: 0.5rem;
1221
}
1322
li:after {
1423
content: attr(data-value);
24+
margin-left: 0.25rem;
1525
}
1626
.correct {
1727
border-color: #0C0;
1828
border-style: solid;
29+
background: #EFE;
1930
}
2031
.incorrect {
2132
border-color: #F00;
2233
border-style: dashed;
34+
background-color: #FEE;
2335
}
2436
</style>
2537
</head>
@@ -29,107 +41,33 @@ <h1>Test tracking UMD</h1>
2941
This fixture tests that the new tracking API is accessible via UMD build using the UMD shim.
3042
It does not exhaustively test API functionality, only that the forwarded methods can be called.
3143
</p>
32-
<h2>Tests:</h2>
44+
<p>
45+
Before running the tests below, check the console to make sure there are no errors.
46+
</p>
47+
<h3>
48+
Tests
49+
<button onClick="runAllTests()">Run all tests</button>
50+
</h3>
3351
<ol>
34-
<li id="checkSchedulerAPI">
35-
<button onClick="checkSchedulerAPI()">Check scheduler API</button>
52+
<li id="checkSchedulerAPI" data-value="...">
53+
<strong>Test scheduler API</strong>
54+
</li>
55+
<li id="checkSchedulerTrackingAPI" data-value="...">
56+
<strong>Test tracking API</strong>
3657
</li>
37-
<li id="checkSchedulerTrackingAPI">
38-
<button onClick="checkSchedulerTrackingAPI()">Check tracking API</button>
58+
<li id="checkSchedulerTrackingSubscriptionsAPI" data-value="...">
59+
<strong>Test tracking subscriptions API</strong>
3960
</li>
40-
<li id="checkSchedulerTrackingSubscriptionsAPI">
41-
<button onClick="checkSchedulerTrackingSubscriptionsAPI()">Check tracking subscriptions API</button>
61+
<li id="checkEndToEndIntegration" data-value="...">
62+
<strong>Test end-to-end integration</strong>
4263
</li>
4364
</ol>
4465
<!-- Load the tracking API before react to test that it's lazily evaluated -->
45-
<script src="../../build/node_modules/react-scheduler/umd/react-scheduler.development.js"></script>
46-
<script src="../../build/node_modules/react-scheduler/umd/react-scheduler-tracking.development.js"></script>
47-
<script src="../../build/node_modules/react-scheduler/umd/react-scheduler-tracking-subscriptions.development.js"></script>
66+
<script src="../../build/node_modules/react-scheduler/umd/react-scheduler.js"></script>
67+
<script src="../../build/node_modules/react-scheduler/umd/react-scheduler-tracking.js"></script>
68+
<script src="../../build/node_modules/react-scheduler/umd/react-scheduler-tracking-subscriptions.js"></script>
4869
<script src="../../build/node_modules/react/umd/react.development.js"></script>
4970
<script src="../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
50-
<script>
51-
function runTest(listItem, callback) {
52-
try {
53-
callback();
54-
listItem.className = "correct";
55-
listItem.setAttribute("data-value", "All checks pass");
56-
} catch (error) {
57-
listItem.className = "incorrect";
58-
listItem.setAttribute("data-value", error.message);
59-
}
60-
}
61-
62-
function checkSchedulerAPI() {
63-
runTest(
64-
document.getElementById('checkSchedulerAPI'),
65-
() => {
66-
if (
67-
typeof ReactScheduler.unstable_now !== 'function' ||
68-
typeof ReactScheduler.unstable_scheduleWork !== 'function' ||
69-
typeof ReactScheduler.unstable_cancelScheduledWork !== 'function'
70-
) {
71-
throw "API is not defined";
72-
}
73-
74-
if (ReactScheduler.unstable_now() !== performance.now()) {
75-
throw "API does not work";
76-
}
77-
});
78-
}
79-
80-
function checkSchedulerTrackingAPI() {
81-
runTest(
82-
document.getElementById('checkSchedulerTrackingAPI'),
83-
() => {
84-
if (
85-
typeof ReactSchedulerTracking.__getInteractionsRef !== 'function' ||
86-
typeof ReactSchedulerTracking.__getSubscriberRef !== 'function' ||
87-
typeof ReactSchedulerTracking.unstable_clear !== 'function' ||
88-
typeof ReactSchedulerTracking.unstable_getCurrent !== 'function' ||
89-
typeof ReactSchedulerTracking.unstable_getThreadID !== 'function' ||
90-
typeof ReactSchedulerTracking.unstable_track !== 'function' ||
91-
typeof ReactSchedulerTracking.unstable_wrap !== 'function'
92-
) {
93-
throw "API is not defined";
94-
}
95-
96-
try {
97-
let interactionsSet;
98-
ReactSchedulerTracking.unstable_track('test', 123, () => {
99-
interactionsSet = ReactSchedulerTracking.__getInteractionsRef().current;
100-
});
101-
if (interactionsSet.size !== 1) {
102-
throw null;
103-
}
104-
const interaction = Array.from(interactionsSet)[0];
105-
if (interaction.name !== 'test' || interaction.timestamp !== 123) {
106-
throw null;
107-
}
108-
} catch (error) {
109-
throw "API does not work";
110-
}
111-
});
112-
}
113-
114-
function checkSchedulerTrackingSubscriptionsAPI() {
115-
runTest(
116-
document.getElementById('checkSchedulerTrackingSubscriptionsAPI'),
117-
() => {
118-
if (
119-
typeof ReactSchedulerTrackingSubscriptions.unstable_subscribe !== 'function' ||
120-
typeof ReactSchedulerTrackingSubscriptions.unstable_unsubscribe !== 'function'
121-
) {
122-
throw "API is not defined";
123-
}
124-
125-
try {
126-
ReactSchedulerTrackingSubscriptions.unstable_subscribe({});
127-
ReactSchedulerTrackingSubscriptions.unstable_unsubscribe({});
128-
} catch (error) {
129-
throw "API does not forward methods";
130-
}
131-
});
132-
}
133-
</script>
71+
<script src="./script.js"></script>
13472
</body>
13573
</html>

fixtures/tracking/script.js

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
function runTest(listItem, callback) {
2+
try {
3+
callback();
4+
listItem.className = 'correct';
5+
listItem.setAttribute('data-value', 'All checks pass');
6+
} catch (error) {
7+
listItem.className = 'incorrect';
8+
listItem.setAttribute('data-value', error);
9+
}
10+
}
11+
12+
function runAllTests() {
13+
try {
14+
checkSchedulerAPI();
15+
} finally {
16+
try {
17+
checkSchedulerTrackingAPI();
18+
} finally {
19+
try {
20+
checkSchedulerTrackingSubscriptionsAPI();
21+
} finally {
22+
checkEndToEndIntegration();
23+
}
24+
}
25+
}
26+
}
27+
28+
function checkSchedulerAPI() {
29+
runTest(document.getElementById('checkSchedulerAPI'), () => {
30+
if (
31+
typeof ReactScheduler === 'undefined' ||
32+
typeof ReactScheduler.unstable_now !== 'function' ||
33+
typeof ReactScheduler.unstable_scheduleWork !== 'function' ||
34+
typeof ReactScheduler.unstable_cancelScheduledWork !== 'function'
35+
) {
36+
throw 'API is not defined';
37+
}
38+
39+
if (ReactScheduler.unstable_now() !== performance.now()) {
40+
throw 'API does not work';
41+
}
42+
43+
// There is no real way to verify that the two APIs are connected.
44+
});
45+
}
46+
47+
function checkSchedulerTrackingAPI() {
48+
runTest(document.getElementById('checkSchedulerTrackingAPI'), () => {
49+
if (
50+
typeof ReactSchedulerTracking === 'undefined' ||
51+
typeof ReactSchedulerTracking.__getInteractionsRef !== 'function' ||
52+
typeof ReactSchedulerTracking.__getSubscriberRef !== 'function' ||
53+
typeof ReactSchedulerTracking.unstable_clear !== 'function' ||
54+
typeof ReactSchedulerTracking.unstable_getCurrent !== 'function' ||
55+
typeof ReactSchedulerTracking.unstable_getThreadID !== 'function' ||
56+
typeof ReactSchedulerTracking.unstable_track !== 'function' ||
57+
typeof ReactSchedulerTracking.unstable_wrap !== 'function'
58+
) {
59+
throw 'API is not defined';
60+
}
61+
62+
try {
63+
let interactionsSet;
64+
ReactSchedulerTracking.unstable_track('test', 123, () => {
65+
interactionsSet = ReactSchedulerTracking.__getInteractionsRef().current;
66+
});
67+
if (interactionsSet.size !== 1) {
68+
throw null;
69+
}
70+
const interaction = Array.from(interactionsSet)[0];
71+
if (interaction.name !== 'test' || interaction.timestamp !== 123) {
72+
throw null;
73+
}
74+
} catch (error) {
75+
throw 'API does not work';
76+
}
77+
78+
const ForwardedSchedulerTracking =
79+
React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
80+
.SchedulerTracking;
81+
82+
if (
83+
ReactSchedulerTracking.unstable_getThreadID() ===
84+
ForwardedSchedulerTracking.unstable_getThreadID()
85+
) {
86+
throw 'API forwarding is broken';
87+
}
88+
});
89+
}
90+
91+
function checkSchedulerTrackingSubscriptionsAPI() {
92+
runTest(
93+
document.getElementById('checkSchedulerTrackingSubscriptionsAPI'),
94+
() => {
95+
if (
96+
typeof ReactSchedulerTrackingSubscriptions === 'undefined' ||
97+
typeof ReactSchedulerTrackingSubscriptions.unstable_subscribe !==
98+
'function' ||
99+
typeof ReactSchedulerTrackingSubscriptions.unstable_unsubscribe !==
100+
'function'
101+
) {
102+
throw 'API is not defined';
103+
}
104+
105+
const onInteractionScheduledWorkCompletedCalls = [];
106+
const onInteractionTrackedCalls = [];
107+
const onWorkCanceledCalls = [];
108+
const onWorkScheduledCalls = [];
109+
const onWorkStartedCalls = [];
110+
const onWorkStoppedCalls = [];
111+
const subscriber = {
112+
onInteractionScheduledWorkCompleted: (...args) =>
113+
onInteractionScheduledWorkCompletedCalls.push(args),
114+
onInteractionTracked: (...args) => onInteractionTrackedCalls.push(args),
115+
onWorkCanceled: (...args) => onWorkCanceledCalls.push(args),
116+
onWorkScheduled: (...args) => onWorkScheduledCalls.push(args),
117+
onWorkStarted: (...args) => onWorkStartedCalls.push(args),
118+
onWorkStopped: (...args) => onWorkStoppedCalls.push(args),
119+
};
120+
121+
try {
122+
ReactSchedulerTrackingSubscriptions.unstable_subscribe(subscriber);
123+
ReactSchedulerTracking.unstable_track('foo', 123, () => {});
124+
ReactSchedulerTrackingSubscriptions.unstable_unsubscribe(subscriber);
125+
if (onInteractionTrackedCalls.length !== 1) {
126+
throw null;
127+
}
128+
const interaction = onInteractionTrackedCalls[0][0];
129+
if (interaction.name !== 'foo' || interaction.timestamp !== 123) {
130+
throw null;
131+
}
132+
ReactSchedulerTracking.unstable_track('bar', 456, () => {});
133+
if (onInteractionTrackedCalls.length !== 1) {
134+
throw null;
135+
}
136+
} catch (error) {
137+
throw 'API does not forward methods';
138+
}
139+
140+
const ForwardedSchedulerTrackingSubscriptions =
141+
React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
142+
.SchedulerTrackingSubscriptions;
143+
const ForwardedSchedulerTracking =
144+
React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
145+
.SchedulerTracking;
146+
147+
try {
148+
ForwardedSchedulerTrackingSubscriptions.unstable_subscribe(subscriber);
149+
ReactSchedulerTracking.unstable_track('foo', 123, () => {});
150+
ForwardedSchedulerTracking.unstable_track('bar', 456, () => {});
151+
ReactSchedulerTrackingSubscriptions.unstable_unsubscribe(subscriber);
152+
if (onInteractionTrackedCalls.length !== 3) {
153+
throw null;
154+
}
155+
const interactionFoo = onInteractionTrackedCalls[1][0];
156+
const interactionBar = onInteractionTrackedCalls[2][0];
157+
if (
158+
interactionFoo.name !== 'foo' ||
159+
interactionFoo.timestamp !== 123 ||
160+
interactionBar.name !== 'bar' ||
161+
interactionBar.timestamp !== 456
162+
) {
163+
throw null;
164+
}
165+
ForwardedSchedulerTracking.unstable_track('baz', 789, () => {});
166+
if (onInteractionTrackedCalls.length !== 3) {
167+
throw null;
168+
}
169+
} catch (error) {
170+
throw 'API forwarding is broken';
171+
}
172+
}
173+
);
174+
}
175+
176+
function checkEndToEndIntegration() {
177+
runTest(document.getElementById('checkEndToEndIntegration'), () => {
178+
try {
179+
const onRenderCalls = [];
180+
const onRender = (...args) => onRenderCalls.push(args);
181+
const container = document.createElement('div');
182+
183+
ReactSchedulerTracking.unstable_track('render', 123, () => {
184+
ReactDOM.render(
185+
React.createElement(
186+
React.unstable_Profiler,
187+
{id: 'profiler', onRender},
188+
React.createElement('div', null, 'hi')
189+
),
190+
container
191+
);
192+
});
193+
194+
if (container.textContent !== 'hi') {
195+
throw null;
196+
}
197+
198+
if (onRenderCalls.length !== 1) {
199+
throw null;
200+
}
201+
const call = onRenderCalls[0];
202+
if (call.length !== 7) {
203+
throw null;
204+
}
205+
const interaction = Array.from(call[6])[0];
206+
if (interaction.name !== 'render' || interaction.timestamp !== 123) {
207+
throw null;
208+
}
209+
} catch (error) {
210+
throw 'End to end integration is broken';
211+
}
212+
});
213+
}

0 commit comments

Comments
 (0)