From 0188626e6d70636b168ccfa69861bc2279b75ec8 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 31 Oct 2018 15:40:41 -0700 Subject: [PATCH 1/3] Added manual test harnesses for React 16+ minors --- test/regression/16/16.0.html | 33 +++++ test/regression/16/16.1.html | 33 +++++ test/regression/16/16.2.html | 33 +++++ test/regression/16/16.3.html | 33 +++++ test/regression/16/16.4.html | 33 +++++ test/regression/16/16.5.html | 35 +++++ test/regression/16/16.6.html | 36 +++++ test/regression/16/16.7.html | 36 +++++ test/regression/16/16.js | 241 ++++++++++++++++++++++++++++++++++ test/regression/16/index.html | 23 ++++ test/regression/16/styles.css | 23 ++++ 11 files changed, 559 insertions(+) create mode 100644 test/regression/16/16.0.html create mode 100644 test/regression/16/16.1.html create mode 100644 test/regression/16/16.2.html create mode 100644 test/regression/16/16.3.html create mode 100644 test/regression/16/16.4.html create mode 100644 test/regression/16/16.5.html create mode 100644 test/regression/16/16.6.html create mode 100644 test/regression/16/16.7.html create mode 100644 test/regression/16/16.js create mode 100644 test/regression/16/index.html create mode 100644 test/regression/16/styles.css diff --git a/test/regression/16/16.0.html b/test/regression/16/16.0.html new file mode 100644 index 0000000000..45b70a8a26 --- /dev/null +++ b/test/regression/16/16.0.html @@ -0,0 +1,33 @@ + + + + + React 16.0 + + + + + + + + + +
+ If you are seeing this message, you are likely viewing this file using the file protocol which does not support cross origin requests. +

+ Use a web server like serve instead: +

+ npm install -g pushstate-server
+ pushstate-server .
+ open http://localhost:9000/16.html +
+ + + + + + \ No newline at end of file diff --git a/test/regression/16/16.1.html b/test/regression/16/16.1.html new file mode 100644 index 0000000000..b34d9a319a --- /dev/null +++ b/test/regression/16/16.1.html @@ -0,0 +1,33 @@ + + + + + React 16.1 + + + + + + + + + +
+ If you are seeing this message, you are likely viewing this file using the file protocol which does not support cross origin requests. +

+ Use a web server like serve instead: +

+ npm install -g pushstate-server
+ pushstate-server .
+ open http://localhost:9000/16.html +
+ + + + + + \ No newline at end of file diff --git a/test/regression/16/16.2.html b/test/regression/16/16.2.html new file mode 100644 index 0000000000..7924829d10 --- /dev/null +++ b/test/regression/16/16.2.html @@ -0,0 +1,33 @@ + + + + + React 16.2 + + + + + + + + + +
+ If you are seeing this message, you are likely viewing this file using the file protocol which does not support cross origin requests. +

+ Use a web server like serve instead: +

+ npm install -g pushstate-server
+ pushstate-server .
+ open http://localhost:9000/16.html +
+ + + + + + \ No newline at end of file diff --git a/test/regression/16/16.3.html b/test/regression/16/16.3.html new file mode 100644 index 0000000000..85bcc1b2bd --- /dev/null +++ b/test/regression/16/16.3.html @@ -0,0 +1,33 @@ + + + + + React 16.3 + + + + + + + + + +
+ If you are seeing this message, you are likely viewing this file using the file protocol which does not support cross origin requests. +

+ Use a web server like serve instead: +

+ npm install -g pushstate-server
+ pushstate-server .
+ open http://localhost:9000/16.html +
+ + + + + + \ No newline at end of file diff --git a/test/regression/16/16.4.html b/test/regression/16/16.4.html new file mode 100644 index 0000000000..7e8535c57f --- /dev/null +++ b/test/regression/16/16.4.html @@ -0,0 +1,33 @@ + + + + + React 16.4 + + + + + + + + + +
+ If you are seeing this message, you are likely viewing this file using the file protocol which does not support cross origin requests. +

+ Use a web server like serve instead: +

+ npm install -g pushstate-server
+ pushstate-server .
+ open http://localhost:9000/16.html +
+ + + + + + \ No newline at end of file diff --git a/test/regression/16/16.5.html b/test/regression/16/16.5.html new file mode 100644 index 0000000000..a41eab828d --- /dev/null +++ b/test/regression/16/16.5.html @@ -0,0 +1,35 @@ + + + + + React 16.5 + + + + + + + + + + + +
+ If you are seeing this message, you are likely viewing this file using the file protocol which does not support cross origin requests. +

+ Use a web server like serve instead: +

+ npm install -g pushstate-server
+ pushstate-server .
+ open http://localhost:9000/16.html +
+ + + + + + \ No newline at end of file diff --git a/test/regression/16/16.6.html b/test/regression/16/16.6.html new file mode 100644 index 0000000000..1cdc49a5d2 --- /dev/null +++ b/test/regression/16/16.6.html @@ -0,0 +1,36 @@ + + + + + React 16.6 + + + + + + + + + + + + +
+ If you are seeing this message, you are likely viewing this file using the file protocol which does not support cross origin requests. +

+ Use a web server like serve instead: +

+ npm install -g pushstate-server
+ pushstate-server .
+ open http://localhost:9000/16.html +
+ + + + + + \ No newline at end of file diff --git a/test/regression/16/16.7.html b/test/regression/16/16.7.html new file mode 100644 index 0000000000..271b07c4ac --- /dev/null +++ b/test/regression/16/16.7.html @@ -0,0 +1,36 @@ + + + + + React 16.7 + + + + + + + + + + + + +
+ If you are seeing this message, you are likely viewing this file using the file protocol which does not support cross origin requests. +

+ Use a web server like serve instead: +

+ npm install -g pushstate-server
+ pushstate-server .
+ open http://localhost:9000/16.html +
+ + + + + + \ No newline at end of file diff --git a/test/regression/16/16.js b/test/regression/16/16.js new file mode 100644 index 0000000000..54268f71fa --- /dev/null +++ b/test/regression/16/16.js @@ -0,0 +1,241 @@ +/* eslint-disable no-fallthrough, react/react-in-jsx-scope, react/jsx-no-undef */ +/* global React ReactCache ReactDOM SchedulerTracing ScheduleTracing */ + +const apps = []; + +const minor = parseInt(React.version.split('.')[1], 10); + +function Feature({ children, label, version }) { + return ( +
+
+ {label} + {version} +
+ {children} +
+ ); +} + +// https://github.com/facebook/react/blob/master/CHANGELOG.md +switch (minor) { + case 7: + // Hooks + function Hooks() { + const [count, setCount] = React.useState(0); + const incrementCount = React.useCallback( + () => setCount(count + 1), + [count] + ); + return ( +
+ count: {count} +
+ ); + } + apps.push( + + + + ); + case 6: + // memo + function LabelComponent({label}) { + return ; + } + const AnonymousMemoized = React.memo(({label}) => ); + const Memoized = React.memo(LabelComponent); + const CustomMemoized = React.memo(LabelComponent); + CustomMemoized.displayName = 'MemoizedLabelFunction'; + apps.push( + + + + + + ); + + // Suspense + const loadResource = ([text, ms]) => { + return new Promise((resolve, reject) => { + setTimeout(() => { + resolve(text); + }, ms); + }); + }; + const getResourceKey = ([text, ms]) => text; + const Resource = ReactCache.unstable_createResource(loadResource, getResourceKey); + class Suspending extends React.Component { + state = {useSuspense: false}; + useSuspense = () => this.setState({useSuspense: true}); + render() { + if (this.state.useSuspense) { + const text = Resource.read(['loaded', 2000]); + return text; + } else { + return ( + + ); + } + } + } + apps.push( + + loading...}> + + + + ); + case 5: + case 4: + // unstable_Profiler + class ProfilerChild extends React.Component { + state = {count: 0}; + incrementCount = () => + this.setState(prevState => ({count: prevState.count + 1})); + render() { + return ( +
+ count: {this.state.count} +
+ ); + } + } + const onRender = (...args) => console.log('onRender()', ...args); + const Profiler = React.unstable_Profiler || React.Profiler; + apps.push( + + +
+ +
+ + + ); + case 3: + // createContext() + const LocaleContext = React.createContext(); + LocaleContext.displayName = 'LocaleContext'; + const ThemeContext = React.createContext(); + apps.push( + + + + {theme => ( +
theme: {theme}
+ )} + + + + + {locale => ( +
locale: {locale}
+ )} + + + + ); + + // forwardRef() + const AnonymousFunction = React.forwardRef((props, ref) => ( +
{props.children}
+ )); + const NamedFunction = React.forwardRef(function named(props, ref) { + return ( +
{props.children}
+ ); + }); + const CustomName = React.forwardRef((props, ref) => ( +
{props.children}
+ )); + CustomName.displayName = 'CustomNameForwardRef'; + apps.push( + + AnonymousFunction + NamedFunction + CustomName + + ); + + // StrictMode + class StrictModeChild extends React.Component { + render() { + return 'StrictModeChild'; + } + } + apps.push( + + + + + + ); + + // unstable_AsyncMode (later renamed to unstable_ConcurrentMode, then ConcurrentMode) + const ConcurrentMode = React.ConcurrentMode || React.unstable_ConcurrentMode || React.unstable_AsyncMode; + apps.push( + + +
unstable_AsyncMode was added in 16.3, renamed to unstable_ConcurrentMode in 16.5, and then renamed to ConcurrentMode in 16.7
+ + + ); + case 2: + + // Fragment + apps.push( + + +
one
+
two
+ + + ); + case 1: + case 0: + let trace = null; + if (typeof SchedulerTracing !== 'undefined') { + trace = SchedulerTracing.unstable_trace; + } else if (typeof ScheduleTracing !== 'undefined') { + trace = ScheduleTracing.unstable_trace; + } + + // Simple stateful app + class SimpleApp extends React.Component { + state = {count: 0}; + incrementCount = () => { + const updaterFn = prevState => ({count: prevState.count + 1}); + if (trace !== null) { + trace( + 'Updating count', + performance.now(), + () => this.setState(updaterFn) + ); + } else { + this.setState(updaterFn); + } + }; + render() { + const {count} = this.state; + return ( +
+ {count % 2 === 0 ? ( + count: {count} (even) + ) : ( + count: {count} + )} +
+ ); + } + } + apps.push( + + + + ); + break; +} + +ReactDOM.render(apps, document.getElementById('root')); diff --git a/test/regression/16/index.html b/test/regression/16/index.html new file mode 100644 index 0000000000..d21702dd50 --- /dev/null +++ b/test/regression/16/index.html @@ -0,0 +1,23 @@ + + + + + React 16 + + + +

React 16 releases

+

+ Select a release below to test the React DevTools. +

+ + + \ No newline at end of file diff --git a/test/regression/16/styles.css b/test/regression/16/styles.css new file mode 100644 index 0000000000..8936979a7b --- /dev/null +++ b/test/regression/16/styles.css @@ -0,0 +1,23 @@ +body { + font-family: sans-serif; + font-size: 12px; +} + +h2 { + margin: 1rem 0 0; +} + +.Feature { + margin: 1rem 0; + border-bottom: 1px solid #eee; + padding-bottom: 1rem; +} +.FeatureHeader { + font-size: 16px; + margin-bottom: 0.5rem; +} +.FeatureCode { + background-color: #eee; + padding: 0.25rem; + border-radius: 0.25rem; +} \ No newline at end of file From f5e3e8509d66cfad4ad4635e6354193879f3a1a8 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Thu, 1 Nov 2018 09:15:31 -0700 Subject: [PATCH 2/3] Update manual test harness to use iframes --- test/regression/{16 => }/16.0.html | 6 ++++++ test/regression/{16 => }/16.1.html | 6 ++++++ test/regression/{16 => }/16.2.html | 6 ++++++ test/regression/{16 => }/16.3.html | 6 ++++++ test/regression/{16 => }/16.4.html | 6 ++++++ test/regression/{16 => }/16.5.html | 6 ++++++ test/regression/{16 => }/16.6.html | 6 ++++++ test/regression/{16 => }/16.7.html | 6 ++++++ test/regression/{16 => }/16.js | 16 +++++++++++++++- test/regression/16/index.html | 23 ----------------------- test/regression/index.html | 18 ++++++++++++++++++ test/regression/{16 => }/styles.css | 10 ++++++++++ 12 files changed, 91 insertions(+), 24 deletions(-) rename test/regression/{16 => }/16.0.html (83%) rename test/regression/{16 => }/16.1.html (83%) rename test/regression/{16 => }/16.2.html (83%) rename test/regression/{16 => }/16.3.html (83%) rename test/regression/{16 => }/16.4.html (83%) rename test/regression/{16 => }/16.5.html (85%) rename test/regression/{16 => }/16.6.html (86%) rename test/regression/{16 => }/16.7.html (86%) rename test/regression/{16 => }/16.js (95%) delete mode 100644 test/regression/16/index.html create mode 100644 test/regression/index.html rename test/regression/{16 => }/styles.css (75%) diff --git a/test/regression/16/16.0.html b/test/regression/16.0.html similarity index 83% rename from test/regression/16/16.0.html rename to test/regression/16.0.html index 45b70a8a26..476ca134c2 100644 --- a/test/regression/16/16.0.html +++ b/test/regression/16.0.html @@ -5,6 +5,12 @@ React 16.0 + + diff --git a/test/regression/16/16.1.html b/test/regression/16.1.html similarity index 83% rename from test/regression/16/16.1.html rename to test/regression/16.1.html index b34d9a319a..6c680a21b5 100644 --- a/test/regression/16/16.1.html +++ b/test/regression/16.1.html @@ -5,6 +5,12 @@ React 16.1 + + diff --git a/test/regression/16/16.2.html b/test/regression/16.2.html similarity index 83% rename from test/regression/16/16.2.html rename to test/regression/16.2.html index 7924829d10..285114cc49 100644 --- a/test/regression/16/16.2.html +++ b/test/regression/16.2.html @@ -5,6 +5,12 @@ React 16.2 + + diff --git a/test/regression/16/16.3.html b/test/regression/16.3.html similarity index 83% rename from test/regression/16/16.3.html rename to test/regression/16.3.html index 85bcc1b2bd..6a3f2e0bb1 100644 --- a/test/regression/16/16.3.html +++ b/test/regression/16.3.html @@ -5,6 +5,12 @@ React 16.3 + + diff --git a/test/regression/16/16.4.html b/test/regression/16.4.html similarity index 83% rename from test/regression/16/16.4.html rename to test/regression/16.4.html index 7e8535c57f..876a4eabc9 100644 --- a/test/regression/16/16.4.html +++ b/test/regression/16.4.html @@ -5,6 +5,12 @@ React 16.4 + + diff --git a/test/regression/16/16.5.html b/test/regression/16.5.html similarity index 85% rename from test/regression/16/16.5.html rename to test/regression/16.5.html index a41eab828d..4bfb5ab445 100644 --- a/test/regression/16/16.5.html +++ b/test/regression/16.5.html @@ -5,6 +5,12 @@ React 16.5 + + diff --git a/test/regression/16/16.6.html b/test/regression/16.6.html similarity index 86% rename from test/regression/16/16.6.html rename to test/regression/16.6.html index 1cdc49a5d2..bbafb25669 100644 --- a/test/regression/16/16.6.html +++ b/test/regression/16.6.html @@ -5,6 +5,12 @@ React 16.6 + + diff --git a/test/regression/16/16.7.html b/test/regression/16.7.html similarity index 86% rename from test/regression/16/16.7.html rename to test/regression/16.7.html index 271b07c4ac..14dd60762b 100644 --- a/test/regression/16/16.7.html +++ b/test/regression/16.7.html @@ -5,6 +5,12 @@ React 16.7 + + diff --git a/test/regression/16/16.js b/test/regression/16.js similarity index 95% rename from test/regression/16/16.js rename to test/regression/16.js index 54268f71fa..f8134b4ab8 100644 --- a/test/regression/16/16.js +++ b/test/regression/16.js @@ -238,4 +238,18 @@ switch (minor) { break; } -ReactDOM.render(apps, document.getElementById('root')); +// This component, with the version prop, helps organize DevTools at a glance. +function TopLevelWrapperForDevTools({ version }) { + return ( +
+

React {version}

+ {apps} +
+ ); +} +TopLevelWrapperForDevTools.displayName = 'React'; + +ReactDOM.render( + , + document.getElementById('root') +); diff --git a/test/regression/16/index.html b/test/regression/16/index.html deleted file mode 100644 index d21702dd50..0000000000 --- a/test/regression/16/index.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - React 16 - - - -

React 16 releases

-

- Select a release below to test the React DevTools. -

- - - \ No newline at end of file diff --git a/test/regression/index.html b/test/regression/index.html new file mode 100644 index 0000000000..70131df6da --- /dev/null +++ b/test/regression/index.html @@ -0,0 +1,18 @@ + + + + + React 16 + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/regression/16/styles.css b/test/regression/styles.css similarity index 75% rename from test/regression/16/styles.css rename to test/regression/styles.css index 8936979a7b..155eb3bb3a 100644 --- a/test/regression/16/styles.css +++ b/test/regression/styles.css @@ -3,10 +3,20 @@ body { font-size: 12px; } +h1 { + margin: 0; + font-size: 20px; +} + h2 { margin: 1rem 0 0; } +iframe { + border: 1px solid #ddd; + border-radius: 0.5rem; +} + .Feature { margin: 1rem 0; border-bottom: 1px solid #eee; From 0697bf472333a1b353165f8610d450ee6f9ab58a Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Thu, 1 Nov 2018 09:55:00 -0700 Subject: [PATCH 3/3] Refactored verion tests to share a single script file (for simplicity) --- test/regression/14.9.html | 39 ++++++ test/regression/15.6.html | 39 ++++++ test/regression/16.0.html | 2 +- test/regression/16.1.html | 2 +- test/regression/16.2.html | 2 +- test/regression/16.3.html | 2 +- test/regression/16.4.html | 2 +- test/regression/16.5.html | 2 +- test/regression/16.6.html | 2 +- test/regression/16.7.html | 2 +- test/regression/16.js | 255 ----------------------------------- test/regression/index.html | 2 + test/regression/shared.js | 265 +++++++++++++++++++++++++++++++++++++ 13 files changed, 353 insertions(+), 263 deletions(-) create mode 100644 test/regression/14.9.html create mode 100644 test/regression/15.6.html delete mode 100644 test/regression/16.js create mode 100644 test/regression/shared.js diff --git a/test/regression/14.9.html b/test/regression/14.9.html new file mode 100644 index 0000000000..d5e3319106 --- /dev/null +++ b/test/regression/14.9.html @@ -0,0 +1,39 @@ + + + + + React 16.0 + + + + + + + + + + + +
+ If you are seeing this message, you are likely viewing this file using the file protocol which does not support cross origin requests. +

+ Use a web server like serve instead: +

+ npm install -g pushstate-server
+ pushstate-server .
+ open http://localhost:9000/16.html +
+ + + + + + \ No newline at end of file diff --git a/test/regression/15.6.html b/test/regression/15.6.html new file mode 100644 index 0000000000..80e2f44ee4 --- /dev/null +++ b/test/regression/15.6.html @@ -0,0 +1,39 @@ + + + + + React 16.0 + + + + + + + + + + + +
+ If you are seeing this message, you are likely viewing this file using the file protocol which does not support cross origin requests. +

+ Use a web server like serve instead: +

+ npm install -g pushstate-server
+ pushstate-server .
+ open http://localhost:9000/16.html +
+ + + + + + \ No newline at end of file diff --git a/test/regression/16.0.html b/test/regression/16.0.html index 476ca134c2..bc12dbc50b 100644 --- a/test/regression/16.0.html +++ b/test/regression/16.0.html @@ -28,7 +28,7 @@ open http://localhost:9000/16.html - +