JAVASCRIPT, TESTING, AND DRUPAL

(1)

JAVASCRIPT, TESTING, AND

DRUPAL

(2)

JS, TESTING, AND DRUPAL

What is the current state of JS in Drupal 7? JavaScript testing

Drupal 8

2 Monday, November 5, 12

(3)

ABOUT ME

I work for Aten Design Group in Denver, Colorado I am a developer. I like code.

(4)

DRUPAL 7

(5)

DRUPAL 7

Drupal is a platform

Unlike other systems, you get many tools out-of-the-box What does this include?

(6)

jQuery Drupal

jQuery drupal.js

Plugins: Once, Cookie, Form form.js

jQuery UI ajax.js

(7)

Drupal comes with: jQuery 1.4.4 (2 years old)

Newest version: jQuery 1.8.2 (1 month old)

Core stability, interaction with other modules other JS May miss out on new functionality (e.g, .on())

(8)

THERE’S A MODULE FOR THAT

(9)

jQuery Update module will provide you with updates

jQuery 1.8.2 is in the dev version

(10)

USING JS

(11)

HOW TO ADD JS

Theme Layer

Module

(12)

THEME JS

General UX code

Code that helps with the site’s appearance

Anything that ties heavily to your site’s HTML

(13)

(14)

THEME JS

Drop the JS file into your theme folder Add the JS to your theme info file

scripts[] = js/main.js

You can also add via your html.tpl.php file (but you shouldn’t)

(15)

MODULES AND LIBRARIES

Relates to your module’s functionality

(16)

MODULES AND LIBRARIES

Use drupal_add_js()

http://is.gd/drupal_add_js

(17)

(18)

D R U PA L _ A D D _ J S

Don’t do this. It will include your JS everywhere ... even if your module isn’t being used

(19)

(20)

D R U PA L _ A D D _ J S!

This will only include the JS when your hook is going to run. This is a good thing.

(21)

(22)

D O N ’ T B U I L D J S

Don’t build your JS within your module

(23)

Put JS in a separate file!

Use Drupal.settings to get at values from your module into JS

(24)

U S I N G d r u p a l . s e t t i n g s

(25)

drupal.behaviors allows you to run code when DOM is loaded

It also ties into AJAX completion

This is simple to implement. Kinda.

(26)

d r u p a l . b e h a v i o r s E X A M P L E

Use the jQuery.once() plugin if you only want the code to execute on DOM load

(27)

You can also use jQuery directly still May be easier if you’re used to it

You can use $.ajaxComplete()

(28)

TESTING

(29)

We’ve added our JS

What about making sure this code works, though?

(30)

(31)

Testing is good

JS testing is important because:

Front end code can change any stage in your project Browsers

(32)

(33)

(34)

T E S T S WA R M

Automated testing with QUnit

(35)

Test Swarm is an active project

It’s involved in the getting tests available in D8 And ... it allows you to create your own tests

(36)

Implement hook_testswarm_tests()

Create a list of tests for your module/JS Tests are written in QUnit

TESTING

(37)

(38)

DRUPAL 8

(39)

Testing: http://drupal.org/node/237566

Don’t use drupal_add_js: http://drupal.org/node/1737148 New libraries: http://drupal.org/node/1149866

Lots of other changes: http://groups.drupal.org/node/226738

AMD, jQuery dependencies

(40)

The future is coming along fast

Many of the changes look to create some good practices Smaller JS profiles

DRUPAL 8

(41)

Get involved, find a way to contribute Voice an opinion

Feature freeze is coming up!

(42)

JAVASCRIPT, TESTING, AND

DRUPAL

Rob Ballou @rob_ballou 39 Monday, November 5, 12