siesta-lite
Version:
Stress-free JavaScript unit testing and functional testing tool, works in NodeJS and browsers
1 lines • 15 kB
JavaScript
Ext.data.JsonP.vue_testing_sample_application({"guide":"<h1 id='vue_testing_sample_application-section-testing-a-sample-react-application-with-siesta'>Testing a sample React application with Siesta</h1>\n<div class='toc'>\n<p><strong>Contents</strong></p>\n<ol>\n<li><a href='#!/guide/vue_testing_sample_application-section-live-example'>Live example</a></li>\n<li><a href='#!/guide/vue_testing_sample_application-section-setup-details'>Setup details</a></li>\n<li><a href='#!/guide/vue_testing_sample_application-section-conclusion'>Conclusion</a></li>\n<li><a href='#!/guide/vue_testing_sample_application-section-buy-this-product'>Buy this product</a></li>\n<li><a href='#!/guide/vue_testing_sample_application-section-support'>Support</a></li>\n<li><a href='#!/guide/vue_testing_sample_application-section-see-also'>See also</a></li>\n<li><a href='#!/guide/vue_testing_sample_application-section-attribution'>Attribution</a></li>\n<li><a href='#!/guide/vue_testing_sample_application-section-copyright-and-license'>COPYRIGHT AND LICENSE</a></li>\n</ol>\n</div>\n\n<p>In this guide, we'll describe how to test a Vue application with Siesta. As a sample application, we'll use\n<a href=\"https://github.com/epicmaxco/vuestic-admin\">Vuestic Admin Dashboard</a>. It is built with <a href=\"https://cli.vuejs.org/\">vue-cli3</a>\n- a modern web application framework.</p>\n\n<p>This application has no tests as-is. We'll add a few sample tests for the individual components and an end-to-end test for the application as whole.\nWe've seen tests for other Vue apps uses virtual DOM and runs in Node.js, however, following the Siesta philosophy,\nour tests will run in real browsers - the same environment end user operates in.</p>\n\n<p>In the following \"Live example\" sections there are instructions how to complete the setup of the example and examine it \"live\" in the browser.</p>\n\n<p>The 'Setup details' section, contains the detailed description of all changes, made to the \"stock\" Vuestic Admin Dashboard app.</p>\n\n<h2 id='vue_testing_sample_application-section-live-example'>Live example</h2>\n\n<p>The sample Vue application is bundled in the Siesta examples in the directory <code>examples-browser/vue-vuestic-admin-dashboard</code>. It is also available\nas a git repository, forked from the original app: <a href=\"\">git://git.assembla.com/bryntum.siesta-vuestic-admin-example.git</a></p>\n\n<p>To complete the setup, switch to the example folder in console, and run:</p>\n\n<pre><code>> npm install\n</code></pre>\n\n<p>Then to launch the server-side part of the example:</p>\n\n<pre><code>> npm run serve\n</code></pre>\n\n<p>This command will perform a development build and the app will be available at <code>http://localhost:8081</code>:</p>\n\n<p><p><img src=\"guides/vue_testing_sample_application/images/vuestic-admin-app.jpg\" alt=\"\" width=\"1233\" height=\"902\"></p></p>\n\n<p>If you open the <code>http://localhost:8081/tests/siesta.html</code> you'll see Siesta's web interface, from which you can launch individual tests.</p>\n\n<p><p><img src=\"guides/vue_testing_sample_application/images/siesta-web-interface.jpg\" alt=\"\" width=\"1233\" height=\"902\"></p></p>\n\n<p>There are 2 groups of tests - \"Individual components\" and \"Black box\". This is a <a href=\"#!/guide/testing_strategy\">recommended strategy</a>\nfor testing your web application, which has the best ROI for time in our experience.</p>\n\n<h2 id='vue_testing_sample_application-section-setup-details'>Setup details</h2>\n\n<p>Ok, we start with the \"stock\" <a href=\"https://github.com/epicmaxco/vuestic-admin\">Vuestic Admin Dashboard</a> app, freshly cloned to some\ndirectory on your machine, which is assumed to be a current directory for the all console commands we'll use.</p>\n\n<h3 id='vue_testing_sample_application-section-preparations'>Preparations</h3>\n\n<p>Install the <code>@vue/cli</code> globally, per the app's installation instructions:</p>\n\n<pre><code>> npm install -g @vue/cli\n</code></pre>\n\n<p>Then, we add dependency on <a href=\"https://www.npmjs.com/package/siesta-lite\">siesta-lite</a> and some other packages to <code>package.json</code>:</p>\n\n<pre><code class=\"json\"> \"devDependencies\": {\n ...\n\n \"siesta-lite\": \"^5.2.0\",\n\n \"webpack-watched-glob-entries-plugin\": \"^2.1.2\",\n \"lodash\": \"^4.17.11\",\n \"vue-cli-plugin-multi-compiler\": \"^0.1.0\",\n }\n</code></pre>\n\n<p>Then, we install all dependencies:</p>\n\n<pre><code>> npm install \n</code></pre>\n\n<h3 id='vue_testing_sample_application-section-siesta-project-creation'>Siesta project creation</h3>\n\n<p>Now, lets follow in general the <a href=\"#!/guide/getting_started_browser\">Getting started with Siesta in browser environment</a> guide and create the\nSiesta project file as the <code>/tests/siesta.js</code>:</p>\n\n<pre><code class=\"javascript\">const project = new <a href=\"#!/api/Siesta.Project.Browser\" rel=\"Siesta.Project.Browser\" class=\"docClass\">Siesta.Project.Browser</a>()\n\nproject.configure({\n title: 'Vuestic Admin Dashboard test suite',\n})\n\nproject.plan(\n {\n // Tests in this group, exercises individual components\n group: 'Individual components tests',\n\n // our entry page for Siesta tests\n pageUrl: '../entry.html',\n\n items: [\n 'components/color_picker.t.js',\n ],\n },\n {\n // This is end-to-end tests group, access application as a \"black box\"\n // they open the `index.html` page using the `pageUrl` config\n // and then executes as a script on that page\n group: 'Black box tests',\n\n pageUrl: '../index.html',\n\n items: [\n 'blackbox-app/sanity.t.js',\n ],\n },\n)\n\nproject.start()\n</code></pre>\n\n<p>We'll see shortly, what is the <code>entry.html</code> page, which is used for testing individual components. The <code>index.html</code> page, the 2nd group is refering\nto, is the main page of the application.</p>\n\n<p>We'll also need a HTML wrapper for the Siesta web interface, lets save it as <code>/tests/siesta.html</code></p>\n\n<pre><code class=\"html\"><!DOCTYPE html>\n<html>\n <head>\n <!-- Recommended set of pragmas, required for IE11 compatibility-->\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">\n\n <!-- Siesta web interface -->\n <link rel=\"stylesheet\" type=\"text/css\" href=\"../static/siesta-lite/resources/css/siesta-all.css\">\n <script type=\"text/javascript\" src=\"../static/siesta-lite/siesta-all.js\"></script>\n\n <script type=\"text/javascript\" src=\"siesta.js\"></script>\n\n </head>\n\n <body>\n </body>\n</html>\n</code></pre>\n\n<p>We'll see shortly, how the \"static/siesta-lite\" folder will be made available to the Siesta web interface page.</p>\n\n<h3 id='vue_testing_sample_application-section-plugging-into-vue-and-webpack-configuration'>Plugging into Vue and Webpack configuration</h3>\n\n<p>Now lets tweak the app configuration in the <code>/vue.config.js</code>. First of all, we'll add the <code>baseUrl</code> option, to allow access from arbitrary folder\nand not only from the root:</p>\n\n<pre><code class=\"js\">module.exports = {\n ...\n baseUrl: './',\n ...\n}\n</code></pre>\n\n<p>Then we add an instance of <code>copy-webpack-plugin</code>, to copy the static files of the Siesta web interface to the <code>/static</code> folder:</p>\n\n<pre><code class=\"js\">const CopyWebpackPlugin = require('copy-webpack-plugin')\n...\n\nmodule.exports = {\n ...\n configureWebpack: {\n plugins: [\n // copy Siesta files and web interface resources\n new CopyWebpackPlugin([\n {\n from: path.resolve(__dirname, 'node_modules/siesta-lite/resources'),\n to: 'static/siesta-lite/resources',\n },\n {\n from: path.resolve(__dirname, 'node_modules/siesta-lite/siesta-all.js'),\n to: 'static/siesta-lite/siesta-all.js',\n },\n {\n from: path.resolve(__dirname, 'tests/siesta.html'),\n to: 'tests/siesta.html',\n },\n {\n from: path.resolve(__dirname, 'tests/siesta.js'),\n to: 'tests/siesta.js',\n },\n ])\n ]\n }\n ...\n}\n</code></pre>\n\n<p>We now have the entry files to the Siesta web interface. The end-to-end tests will already work, as they just open the main page of the app (<code>index.html</code>)\nand operates on it.</p>\n\n<p>However, to be able to test the individual source files from the application, we need to setup the transpilation of the test's source files.</p>\n\n<p>For that, to not interfere with the application setup, we will need an additional Webpack pipeline configuration. Vue cli does not support\n<a href=\"https://github.com/vuejs/vue-cli/issues/2613\">this feature</a> out of the box, but only through the\n<a href=\"https://github.com/jkzing/vue-cli-plugin-multi-compiler\">vue-cli-plugin-multi-compiler</a> plugin (which we've already added to the project):</p>\n\n<pre><code class=\"js\">module.exports = {\n ...\n pluginOptions: {\n configureMultiCompilerWebpack: webpackConfig => {\n // `webpackConfig` here is the one resolved by vue cli.\n // (**after** executing `configureWebpack` and `chainWebpack`)\n const cloneDeep = require('lodash.clonedeep')\n const transpileTestsConfig = cloneDeep(webpackConfig)\n\n transpileTestsConfig.entry = WebpackWatchedGlobEntries.getEntries(\n [\n path.resolve(__dirname, 'tests/**/*.t.js'),\n ]\n )\n\n transpileTestsConfig.output.filename = 'tests/[name].js'\n\n transpileTestsConfig.plugins.push(new WebpackWatchedGlobEntries())\n\n // return an array to invoke webpack multi-compiler mode\n return [webpackConfig, transpileTestsConfig]\n }\n }\n ...\n}\n</code></pre>\n\n<p>The plugin configuration function (<code>configureMultiCompilerWebpack</code> above), receives the \"final\" version of the Webpack configuration\nobject, which is used by Vue cli to build our app. We then create a deep clone of it using <code>lodash.clonedeep</code> and add\n<a href=\"https://www.npmjs.com/package/webpack-watched-glob-entries-plugin\">WebpackWatchedGlobEntries</a> plugin. It creates a separate\nentry for every Siesta test file, given a glob pattern: <code>tests/**/*.t.js</code>.</p>\n\n<p>We also setup an output name, so that the transpiled files of our test suite matches the original filesystem structure.</p>\n\n<p>The experiment also showed, that, since this application uses chunked loading, every test also needs to start with the page, that includes\n\"vendor\" and \"common\" chunks. We add additional entry to the <code>pages</code> config:</p>\n\n<pre><code class=\"js\">module.exports = {\n ... \n pages: {\n index: { ... },\n siesta: {\n entry: 'tests/entry.js',\n template: 'tests/entry.html',\n filename: 'entry.html',\n inject: false,\n chunks: ['chunk-vendors', 'chunk-common'],\n }\n }\n ...\n}\n</code></pre>\n\n<p>Where the <code>/tests/entry.html</code> is simply an empty HTML page:</p>\n\n<pre><code class=\"html\"><!DOCTYPE html>\n<html>\n <head>\n </head>\n <body>\n </body>\n</html>\n</code></pre>\n\n<p>and <code>/tests/entry.js</code> is an empty JavaScript file.</p>\n\n<h3 id='vue_testing_sample_application-section-open-siesta-web-interface'>Open Siesta web interface</h3>\n\n<p>Now, you can launch the Webpack development server of this app with:</p>\n\n<pre><code>> npm run serve\n</code></pre>\n\n<p>And the Siesta web interface will be available at <a href=\"\">http://localhost:8081/tests/siesta.html</a></p>\n\n<h2 id='vue_testing_sample_application-section-conclusion'>Conclusion</h2>\n\n<p>As you can see, Siesta can be plugged into the Vue application in a very straightforward way. You should be able\nto follow the same approach in your application.</p>\n\n<p>If you will encounter any issues or problems with your Vue testing, please let us know in the forums below, and we'll try to help you.</p>\n\n<p>Happy testing!</p>\n\n<h2 id='vue_testing_sample_application-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='vue_testing_sample_application-section-support'>Support</h2>\n\n<p>Ask 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='vue_testing_sample_application-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='vue_testing_sample_application-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='vue_testing_sample_application-section-copyright-and-license'>COPYRIGHT AND LICENSE</h2>\n\n<p>Copyright (c) 2009-2022, Bryntum & Nickolay Platonov</p>\n\n<p>All rights reserved.</p>\n","title":"Testing a sample Vue application with Siesta"});