siesta-lite/docs/guides/cross_page_testing/README.js

Stress-free JavaScript unit testing and functional testing tool, works in NodeJS and browsers

Ext.data.JsonP.cross_page_testing({"guide":"<h1 id='cross_page_testing-section-cross-page-testing.'>Cross-page testing.</h1>\n<div class='toc'>\n<p><strong>Contents</strong></p>\n<ol>\n<li><a href='#!/guide/cross_page_testing-section-contexts'>Contexts</a></li>\n<li><a href='#!/guide/cross_page_testing-section-1.-disabling-web-security-in-chrome'>1. Disabling Web Security in Chrome</a></li>\n<li><a href='#!/guide/cross_page_testing-section-2.-disabling-x-frame-options-in-chrome'>2. Disabling X-Frame-Options in Chrome</a></li>\n<li><a href='#!/guide/cross_page_testing-section-note-about-settimeout'>Note about setTimeout</a></li>\n<li><a href='#!/guide/cross_page_testing-section-example'>Example</a></li>\n<li><a href='#!/guide/cross_page_testing-section-buy-this-product'>Buy this product</a></li>\n<li><a href='#!/guide/cross_page_testing-section-support'>Support</a></li>\n<li><a href='#!/guide/cross_page_testing-section-see-also'>See also</a></li>\n<li><a href='#!/guide/cross_page_testing-section-attribution'>Attribution</a></li>\n<li><a href='#!/guide/cross_page_testing-section-copyright-and-license'>COPYRIGHT AND LICENSE</a></li>\n</ol>\n</div>\n\n<p>Modern RIA applications rarely require a full page refresh, but sometimes you may still need to write such a test.\nFor example when testing a login form submit. This guide describes the specifics of writing such tests.</p>\n\n<p>Please note, that this functionality is available only in the <a href=\"https://bryntum.com/store/siesta\">Standard Package</a>.</p>\n\n<h2 id='cross_page_testing-section-contexts'>Contexts</h2>\n\n<p>To be able to test the page refresh/redirect, the <em>test script</em> (<code>*.t.js file</code>) should reside in a different context from the <em>test page</em>.\nThis can be achieved with the enablePageRedirect option:</p>\n\n<pre><code>project.plan(\n    '010_normal_test.t.js',\n    {\n        enablePageRedirect  : true,\n        url                 : '020_page_redirect.t.js'\n    }\n)\n</code></pre>\n\n<p>Please note, that any preload files you have will still be loaded in the context of the test page and not the context of the script.</p>\n\n<p>Since contexts are separated, inside the test script, one need to use <code>t.global</code> to reach any global objects of the test page.</p>\n\n<pre><code>StartTest(t =&gt; {\n    // BAD - the \"MyApp\" global is loaded into different page\n    let store = new MyApp.MyStoreClass();\n\n    // GOOD - pick the \"MyApp\" global from the test page\n    let store = new t.global.MyApp.MyStoreClass();\n\n    // BEST - save all required globals upfront, in variables\n    const MyApp   = t.global.MyApp;\n}) \n</code></pre>\n\n<p>When you need to perform a page redirect or refresh use <a href=\"#!/api/Siesta.Test.Browser-method-waitForPageLoad\" rel=\"Siesta.Test.Browser-method-waitForPageLoad\" class=\"docClass\">waitForPageLoad</a> method.\nIt accepts a callback which will receive the <code>window</code> object of the new page (same as <code>t.global</code>).</p>\n\n<pre><code>t.waitForPageLoad(window =&gt; {\n    // new reference to `MyApp`\n    const MyApp   = window.MyApp;\n})\n</code></pre>\n\n<p>As a summary - tests with enablePageRedirect will \"survive\" page update / refresh.</p>\n\n<h1 id='cross_page_testing-section-testing-x-domain-websites-with-siesta-in-chrome'>Testing X-Domain Websites With Siesta in Chrome</h1>\n\n<p>The cross-page tests, described above, are still limited to the same origin policy though, as any other web pages. The recommended approach\nis to place your tests, right in one of the root folders of your deploy. In this way, your tests suite and your application will share\nthe same origin and it will be possible to use cross-page communication.</p>\n\n<p>However, in Chrome, we can also just disable the same-origin security check, which is sometimes very useful when\nusing <a href=\"#!/guide/event_recorder\">Events recorder</a>.</p>\n\n<p>We need to do two things to be able to test a site on another domain.</p>\n\n<h2 id='cross_page_testing-section-1.-disabling-web-security-in-chrome'>1. Disabling Web Security in Chrome</h2>\n\n<p>Let’s say you wanted to run a test targeting <code>https://www.google.com</code> from your own localhost. A simple project setup would look like this:</p>\n\n<pre><code>var project = <a href=\"#!/api/Siesta.Project.Browser\" rel=\"Siesta.Project.Browser\" class=\"docClass\">Siesta.Project.Browser</a>\n\nproject.configure({\n    enablePageRedirect : true\n})\n\nproject.plan(\n    {\n        pageUrl     : '//google.com',\n        url         : 'x-domain.t.js'\n    }\n)\n\nproject.start()\n</code></pre>\n\n<p>Note that we set enablePageRedirect to true since the test will navigate between different pages.\nTo allow Siesta to access an iframe pointing to a remote site, you can launch Chrome with a special command line switch.</p>\n\n<p>On Linux, it will look like:</p>\n\n<pre><code>google-chrome --disable-web-security --user-data-dir=~/new_chrome_profile\n</code></pre>\n\n<p>If you have a Mac:</p>\n\n<pre><code>open /Applications/Google\\ Chrome.app --args --disable-web-security --user-data-dir=~/new_chrome_profile\n</code></pre>\n\n<p>For Windows:</p>\n\n<pre><code>c:\\Program Files (x86)\\Google\\Chrome\\Application&gt;chrome.exe --disable-web-security --user-data-dir=c:\\new_chrome_profile\n</code></pre>\n\n<p>The <code>--disable-web-security</code> flag tells Chrome to not enforce the Same Origin Policy. For more information about Chrome command line switches, please see\n<a href=\"http://peter.sh/experiments/chromium-command-line-switches/\">this resource</a>.\nNote, that you need to specify a valid directory for the <code>–user-data-dir</code> switch, pointing to some empty, but existing, directory - a new Chrome profile will be\ncreated in it.</p>\n\n<h2 id='cross_page_testing-section-2.-disabling-x-frame-options-in-chrome'>2. Disabling X-Frame-Options in Chrome</h2>\n\n<p>After opening Chrome with the <code>--disable-web-security</code> flag, running the test will still produce the following warning.</p>\n\n<p><p><img src=\"guides/cross_page_testing/images/xframe-error.png\" alt=\"\" width=\"1694\" height=\"332\"></p></p>\n\n<p>This error is a result of Google setting the <code>X-Frame-Options</code> response header to <code>SAMEORIGIN</code>. This means “The page can only be displayed in a\nframe on the same origin as the page itself”, and you can read more about this setting <a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options\">here</a>.\nTo bypass this security feature, we simply install\nthe <a href=\"https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe\">Ignore X-Frame Headers</a> extension for Chrome.</p>\n\n<p>Note, that the extension should be installed inside the <code>new_chrome_profile</code> Chrome profile.</p>\n\n<p>Now we can run the test again, and the full Google page displays normally in the Siesta iframe.</p>\n\n<h2 id='cross_page_testing-section-note-about-settimeout'>Note about setTimeout</h2>\n\n<p>The <code>setTimeout</code> function in browsers is not synchronized across different contexts. Thus if you will call <code>setTimeout</code> inside of the <em>test page</em> with lets say 100ms delay,\nand then you call <code>setTimeout</code> from the <em>test script</em> with 150ms delay, there's no guarantee that the 1st function will actually be called first.</p>\n\n<p>Because of that, it's recommended to always use the <code>setTimeout</code> from the scope of the <em>test page</em>: <code>t.global.setTimeout</code>.\nSiesta provides a simple shortcut for that: <a href=\"#!/api/Siesta.Test.Browser-method-setTimeout\" rel=\"Siesta.Test.Browser-method-setTimeout\" class=\"docClass\">t.setTimeout()</a> / <a href=\"#!/api/Siesta.Test.Browser-method-clearTimeout\" rel=\"Siesta.Test.Browser-method-clearTimeout\" class=\"docClass\">t.clearTimeout()</a></p>\n\n<pre><code>// pick the `MyApp` from the scope of test page\nlet MyApp       = t.global.MyApp\n\n// call the method, involving the deferred calls\nMyApp.defer(function () {}, 100ms)\n\n// BAD: this `setTimeout` is not synchronized with the `setTimeout` of the application\nlet timeoutId = setTimeout(function () {}, 150)\n\nclearTimeout(timeoutId)\n\n\n// GOOD: using `setTimeout` from the scope of test page\nlet timeoutId = t.setTimeout(function () {}, 150)\n\nt.clearTimeout(timeoutId)\n</code></pre>\n\n<h2 id='cross_page_testing-section-example'>Example</h2>\n\n<p>See the \"/examples/100-standardpkg-page-redirect\"</p>\n\n<h2 id='cross_page_testing-section-buy-this-product'>Buy this product</h2>\n\n<p>Visit our store: <a href=\"https://bryntum.com/store/siesta\">https://bryntum.com/store/siesta</a></p>\n\n<h2 id='cross_page_testing-section-support'>Support</h2>\n\n<p>Ask a question in our community forum: <a href=\"https://www.bryntum.com/forum/viewforum.php?f=20\">https://www.bryntum.com/forum/viewforum.php?f=20</a></p>\n\n<p>Subscribers can post expedited questions in Premium Forum: <a href=\"https://www.bryntum.com/forum/viewforum.php?f=21\">https://www.bryntum.com/forum/viewforum.php?f=21</a></p>\n\n<p>Please report any bugs through the web interface at <a href=\"https://www.assembla.com/spaces/bryntum/support/tickets\">https://www.assembla.com/spaces/bryntum/support/tickets</a></p>\n\n<h2 id='cross_page_testing-section-see-also'>See also</h2>\n\n<p>Siesta web-page: <a href=\"https://bryntum.com/products/siesta\">https://bryntum.com/products/siesta</a></p>\n\n<p>Other Bryntum products: <a href=\"https://bryntum.com/products\">https://bryntum.com/products</a></p>\n\n<h2 id='cross_page_testing-section-attribution'>Attribution</h2>\n\n<p>This software contains icons from the following icon packs (licensed under Creative Common 2.5/3.0 Attribution licenses)</p>\n\n<ul>\n<li><a href=\"http://www.famfamfam.com/lab/icons/silk/\">http://www.famfamfam.com/lab/icons/silk/</a></li>\n<li><a href=\"http://led24.de/iconset/\">http://led24.de/iconset/</a></li>\n<li><a href=\"http://p.yusukekamiyamane.com/\">http://p.yusukekamiyamane.com/</a></li>\n<li><a href=\"http://rrze-icon-set.berlios.de/index.html\">http://rrze-icon-set.berlios.de/index.html</a></li>\n<li><a href=\"http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/\">http://www.smashingmagazine.com/2009/05/20/flavour-extended-the-ultimate-icon-set-for-web-designers/</a></li>\n<li><a href=\"http://www.doublejdesign.co.uk/products-page/icons/super-mono-icons/\">http://www.doublejdesign.co.uk/products-page/icons/super-mono-icons/</a></li>\n<li><a href=\"http://pixel-mixer.com/\">http://pixel-mixer.com/</a></li>\n</ul>\n\n\n<p>Thanks a lot to the authors of the respective icons packs.</p>\n\n<h2 id='cross_page_testing-section-copyright-and-license'>COPYRIGHT AND LICENSE</h2>\n\n<p>Copyright (c) 2009-2022, Bryntum &amp; Nickolay Platonov</p>\n\n<p>All rights reserved.</p>\n","title":"Cross page testing"});