![]() Toby’s blog post on testem, including links is here.Testem is a test runner from Toby Ho which provides an auto-re-run-on-save for test driven development.Require.js is a JavaScript file and module loader.Sinon.js is a mocking and spying framework for JavaScript testing.Backbone.js is a popular JavaScript library that gives structure to web applications.Underscore.js is a pre-requisite for Backbone.js, and can be found here.Jasmine is a behaviour-driven development framework for testing JavaScript code.It is a pre-requisite for testem, and can be downloaded here.Node.js is a platform built on Chrome’s JavaScript runtime for building fast, scalable network applications.TypeScript : Download the installation media (for Windows) here.This walkthrough uses the following software: I have just updated the download to include tests from Part 1, Part 2, and Part 3. Many thanks to Jim Newbery, over at tinnedfruit for this excellent tutorial, which has been the reference that I have been working from. The full solution used for this walkthrough can be downloaded from skydrive (TypeScriptSampleApp.zip) here. Unit testing therefore with Chutzpah will need to wait until official support has been added. While my initial preference was to try and integrate TypeScript with Chutzpah, I ran across a few issues where changes to TypeScript files were not being picked up by the Test Discoverer. Of course the Javascript ecosystem is evolving so quickly that there will be even bigger and better ways to do all of this and more! It always helps to keep your ears and eyes open for ways to keep improving and streamlining.This blog is a starting point for those who are just getting into TypeScript development (like all of us I guess), and need a workable unit testing framework. With those small changes to your Javascript workflow you have multi-file compiled ES2015 Javascript which plays nice with WordPress included scripts–pretty neat right?Įven cooler? If you use generator-plugin-wp, which I covered in a previous post, you get this workflow by default as of version 0.6.0! Just running yo plugin-wp:js in your plugin folder and selecting the Browserify option gives you properly shimmed jQuery (with everything setup to easily add other WordPress scripts you are using), and Babel running through Grunt! Now whenever you compile your scripts using Browserify they are automatically run through Babel as well, so you are free to use the new features of ES2015 without fear of compatibility issues. To get it set up, first install: npm install -save-dev browserify-shimĪdd it to your Browserify setup as a transform, in this case using grunt-browserify: browserify: You can var $ = require('jquery') and instead of it loading jQuery from it’s npm package, it will fill it in with the global jQuery variable. Browserify-shim allows for including external libraries in the exact same way you would with libraries from npm but with a custom location. So how can we solve this? Using an awesome transform for Browserify called browserify-shim. While Browserify works great for external libraries, what about libraries included in WordPress core like jQuery or Backbone? You could include them the same as other libraries just using npm and a require statement, but what if there is another script on the same page that requires one of them? The built in scoping of Browserify protects from version conflicts, but it’s still the same library being required twice (or more)! WordPress Dependencies vs Browserify Requires Let’s build on that and take it to the next level while smoothly integrating with WordPress’ built-in JavaScript interface. ![]() Not too long ago, I walked through the basics of using Browserify to organize and improve your JavaScript.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |