npm
/
react-native-webview
Watch 11
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 141 Wiki Activity
Browse Source

Extra dimension to tests

Jamie Birch 4 years ago
parent
dd3a09bd70
commit
13ea17f439
1 changed files with 55 additions and 10 deletions
Unified View Show Diff Stats
  1. 55
    10
      example/examples/Injection.tsx

+ 55
- 10
example/examples/Injection.tsx View File

11 
 	    <meta name="viewport" content="width=device-width, initial-scale=1">
 11 
 	    <meta name="viewport" content="width=device-width, initial-scale=1">
12 
 	    <title>iframe test</title>
 12 
 	    <title>iframe test</title>
13 
 	</head>
 13 
 	</head>
14 
-	<body>
15 
-		<iframe src="https://birchlabs.co.uk/linguabrowse/infopages/obsol/iframe.html?v=1" name="iframe_0" style="width: 100%; height: 25px;"></iframe>
14 
+  <body>
15 
+    <p style="">beforeContentLoaded <span id="before_failed" style="display: inline-block;">failed</span><span id="before_succeeded" style="display: none;">succeeded</span>!</p>
16 
+    <p style="">afterContentLoaded <span id="after_failed" style="display: inline-block;">failed</span><span id="after_succeeded" style="display: none;">succeeded</span>!</p>
17 
+    <iframe src="https://birchlabs.co.uk/linguabrowse/infopages/obsol/iframe.html?v=1" name="iframe_0" style="width: 100%; height: 25px;"></iframe>
16 
 		<iframe src="https://birchlabs.co.uk/linguabrowse/infopages/obsol/iframe2.html?v=1" name="iframe_1" style="width: 100%; height: 25px;"></iframe>
 18 
 		<iframe src="https://birchlabs.co.uk/linguabrowse/infopages/obsol/iframe2.html?v=1" name="iframe_1" style="width: 100%; height: 25px;"></iframe>
17 
 		<iframe src="https://www.ebay.co.uk" name="iframe_2" style="width: 100%; height: 25px;"></iframe>
 19 
 		<iframe src="https://www.ebay.co.uk" name="iframe_2" style="width: 100%; height: 25px;"></iframe>
18 
 	</body>
 20 
 	</body>
33 
     return (
 35 
     return (
34 
       <ScrollView>
 36 
       <ScrollView>
35 
         <View style={{ }}>
 37 
         <View style={{ }}>
36 
-          <View style={{ height: 120 }}>
38 
+          <View style={{ height: 200 }}>
37 
             <WebView
 39 
             <WebView
38 
               /**
 40 
               /**
39 
                * This HTML is a copy of a multi-frame JS injection test that I had lying around.
 41 
                * This HTML is a copy of a multi-frame JS injection test that I had lying around.
47 
                * JS injection user scripts, consistent with current behaviour. This is undesirable,
 49 
                * JS injection user scripts, consistent with current behaviour. This is undesirable,
48 
                * so needs addressing in a follow-up PR. */
 50 
                * so needs addressing in a follow-up PR. */
49 
               onMessage={() => {}}
 51 
               onMessage={() => {}}
52 
+
50 
               /* We set this property in each frame */
 53 
               /* We set this property in each frame */
51 
-              injectedJavaScriptBeforeContentLoaded={`window.self.colourToUse = "orange";`}
54 
+              injectedJavaScriptBeforeContentLoaded={`
55 
+              window.self.colourToUse = "green";
56 
+
57 
+              function declareSuccessBeforeContentLoaded(head){
58 
+                var style = window.self.document.createElement('style');
59 
+                style.type = 'text/css';
60 
+                style.innerHTML = "#before_failed { display: none !important; }#before_succeeded { display: inline-block !important; }";
61 
+                head.appendChild(style);
62 
+              }
63 
+
64 
+              const head = (window.self.document.head || window.self.document.getElementsByTagName('head')[0]);
65 
+
66 
+              if(head){
67 
+                declareSuccessBeforeContentLoaded(head);
68 
+              }
69 
+
70 
+              window.self.document.addEventListener("DOMContentLoaded", function (event) {
71 
+                const head = (window.self.document.head || window.self.document.getElementsByTagName('head')[0]);
72 
+                declareSuccessBeforeContentLoaded(head);
73 
+              });
74 
+              `}
75 
+
52 
               injectedJavaScriptForMainFrameOnly={false}
 76 
               injectedJavaScriptForMainFrameOnly={false}
77 
+
53 
               /* We read the colourToUse property in each frame to recolour each frame */
 78 
               /* We read the colourToUse property in each frame to recolour each frame */
54 
-              injectedJavaScript={`window.self.document.body.style.backgroundColor = window.self.colourToUse;`}
79 
+              injectedJavaScript={`
80 
+              function declareSuccessAfterContentLoaded(head){
81 
+                var style = window.self.document.createElement('style');
82 
+                style.type = 'text/css';
83 
+                style.innerHTML = "#after_failed { display: none !important; }#after_succeeded { display: inline-block !important; }";
84 
+                head.appendChild(style);
85 
+              }
86 
+
87 
+              declareSuccessAfterContentLoaded(window.self.document.head || window.self.document.getElementsByTagName('head')[0]);
88 
+
89 
+              if(window.self.colourToUse){
90 
+                window.self.document.body.style.backgroundColor = window.self.colourToUse;
91 
+              } else {
92 
+                window.self.document.body.style.backgroundColor = "cyan";
93 
+              }
94 
+              `}
55 
             />
 95 
             />
56 
           </View>
 96 
           </View>
57 
         </View>
 97 
         </View>
58 
         <Text>This test presents three iframes: iframe_0 (yellow); iframe_1 (pink); and iframe_2 (transparent, because its 'X-Frame-Options' is set to 'SAMEORIGIN').</Text>
 98 
         <Text>This test presents three iframes: iframe_0 (yellow); iframe_1 (pink); and iframe_2 (transparent, because its 'X-Frame-Options' is set to 'SAMEORIGIN').</Text>
59 
         <Text>Before injection, the main frame's background is the browser's default value (transparent or white) and each frame has its natural colour.</Text>
 99 
         <Text>Before injection, the main frame's background is the browser's default value (transparent or white) and each frame has its natural colour.</Text>
60 
-        <Text>1) At injection time "beforeContentLoaded", a variable will be set in each frame to set 'orange' as the "colour to be used".</Text>
61 
-        <Text>2) At injection time "afterContentLoaded", that variable will be read, and thus the colour orange will be injected into all frames.</Text>
62 
-        <Text>✅ If the main frame, iframe_0, and iframe_1 all become orange, then multi-frame injection is supported and both injection times are supported.</Text>
63 
-        <Text>❌ If no frames become orange, then only one (or neither) of the injection times are supported, or even injection into the main frame is failing.</Text>
64 
-        <Text>❌ If only the main frame becomes orange, then multi-frame injection is not supported.</Text>
100 
+        <Text>1a) At injection time "beforeContentLoaded", a variable will be set in each frame to set 'green' as the "colour to be used".</Text>
101 
+        <Text>1b) Also upon "beforeContentLoaded", a style element to change the text "beforeContentLoaded failed" -> "beforeContentLoaded succeeded" will be applied as soon as the head has loaded.</Text>
102 
+        <Text>2a) At injection time "afterContentLoaded", that variable will be read – if present, the colour green will be injected into all frames. Otherwise, cyan.</Text>
103 
+        <Text>2b) Also upon "afterContentLoaded", a style element to change the text "afterContentLoaded failed" -> "afterContentLoaded succeeded" will be applied as soon as the head has loaded.</Text>
104 
+        <Text>✅ If the main frame, iframe_0, and iframe_1 all become green or cyan, then multi-frame injection is supported.</Text>
105 
+        <Text>✅ If the two texts say "beforeContentLoaded succeeded!" and "afterContentLoaded succeeded!", then both injection times are supported.</Text>
106 
+        <Text>❌ If the text "beforeContentLoaded failed" remains unchanged, then JS injection has failed on the main frame before the content loaded.</Text>
107 
+        <Text>❌ If the text "afterContentLoaded failed" remains unchanged, then JS injection has failed on the main frame after the content loaded.</Text>
108 
+        <Text>❌ If any frames become coloured cyan, then JS injection has failed before the content loaded (but succeeded after the content loaded).</Text>
109 
+        <Text>❌ If only the main frame changes colour (to green or cyan), then multi-frame injection is not supported.</Text>
65 
       </ScrollView>
 110 
       </ScrollView>
66 
     );
 111 
     );
67 
   }
 112 
   }