book

Test-Driven JavaScript Development

by Ravi Kumar Gupta

December 2015

Intermediate to advanced

240 pages

4h 57m

English

Packt Publishing

Read now

Unlock full access

Support files, eBooks, discount offers, and moreWhy subscribe?Free access for Packt account holders
What this book covers

Downloading the example codeErrataPiracyQuestions
Complexity of web pages
The need for testingTypes of testingThe life cycle of TDDTDD microcycle
BenefitsMyths
Unit testingUnit testing frameworksYUI TestsFollowing the processPreparing the environmentFollowing the life cycleWriting a testRunning the test and seeing if test failsWriting a production codeRunning all testsCleaning up the codeRepeatUsing the browser consolesetUp() and tearDown()Test suitesActions and assertionsActionsAssertions
Benefits of unit testingPitfalls of unit testing
JsUnitGetting startedWriting testsRunning tests
Getting startedWriting testsRunning tests
Getting startedWriting testsRunning tests
Getting startedWriting testsActionsAssertionsRunning tests
Understanding behavior-driven development
Tracking spies using callsCreating a custom spy
Asynchronous callsThe Jasmine Ajax plugin
Disabling suites and specs
JsTestDriverOverviewGetting startedWriting testsAssertionsCapturing the browserRestructuring your projectThe configuration fileRunning tests using the command prompt
Running the testsRunning Jasmine specs
Understanding feature detectionAvailable methods and libraries
Writing custom tests
Downloading and setting up ModernizrHow it worksUsing ModernizrPolyfillsLoading polyfillsSupported browsers
User agent sniffingObject detection
CSS featuresHTML5 featuresMiscellaneous featuresPlugins for additional tests
Modernizr.prefixed()Modernizr.prefixedCSS()Modernizr.mq()Modernizr.on()Modernizr.atRule()Modernizr.addTest()Modernizr.testStyles()Modernizr.testProp()Modernizr.testAllProps()Modernizr.hasEvent()Modernizr._prefixes and Modernizr._domPrefixes
Overview
Event dispatcher/listenerPublish/subscribePush versus pullSample codeUnderstanding patterns in APIThe notify methodSubscribeUnsubscribe
Red step (code with error)Green step (with running code)RefactoringHot swapping componentsBrowser compatibility of the observer API
Setting up the environmentInstalling Node.jsSetting up the applicationChoosing a test runnerMocha and Chai
Implementing the web serverHelpdesk – sample applicationSetting up the MongoDB databaseThe Mocha test
TDD best practices
Make test case names more readableKeep the same name for test files and source filesKeep the name descriptive
Making sure that tests are written before starting implementationModifying/writing new code only when the test is failingRunning all the tests when we modify anything in the existing codeExisting tests should pass before new tests are writtenCleaning up code once all test cases are passed
Simple code that can be easily understoodWriting assertions firstOne assertion per test is enoughKeep your focus on findabilityReducing duplicationTests should run fastUsing mocksUsing stubsUsing setUp and tearDown methods
Feature detection toolsServer-side testing toolsAsynchronous testingRunning time of unit testsBrowser supportOther featuresJsLint

Content preview from Test-Driven JavaScript Development

Modernizr methods

Modernizr allows you to extend it by writing more tests and utilizing them to detect features of your choice. Along with that, there are methods available for testing CSS prefixes and media queries.

Modernizr.prefixed()

You might have seen CSS as in the following example:

    -moz-border-radius: 10px 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    border-radius: 10px 10px;

The preceding CSS is to put radius on elements like div and so on. If you note, there are prefixes before border-radius or border-xxx-xxx-radius. These are called vendor or browser prefixes. The following table shows the browsers and their prefixes: ...