Testable, Object-Oriented JavaScript

Download as pptx, pdf

2 likes2,902 views

The document outlines principles of object-oriented programming, including readability and unit testing, while sharing code snippets for testing inject HTML in jQuery. It describes a client class with various methods for handling user input and actions related to a form. Additionally, it includes links to related resources and personal information about the author.

Technology

 Object oriented programming
 Readable code
 Small classes/files
 Loosely coupled
 Unit testing

F

 Cucumber, SpecFlow, Selenium, Watir, etc.

 Inject HTML in our tests

describe("Testing by injecting HTML into jQuery", function()
{
it("should work, but it's kind of a pain", function()
{
element = $('<div>text</div>');
element.text("some more text");
expect(element.text()).toEqual("some more text");
});
});

 Tests a small unit of functionality
 Must run fast
 Isolate external dependencies

 How do we deal with the DOM
 How do we deal with AJAX calls
 How do we run the tests

DOM Fake DOM
???????

JavaScript
AJAX

Server

http://github.com/jonkruger/jsview

function Client(element, view)
{
if (view == null)
view = new jQueryView("Client", element);

registerObjectProperties(this, view, ['Username']);
}

The Client class now has the following methods:
getUsername whenUsernameChanges
setUsername whenUsernameClicked
showUsername whenUsernameIsClicked
hideUsername whenUsernameGainsFocus
clickUsername whenUsernameLosesFocus
pressKeyInUsername whenKeyIsPressedInUsername
keyDownInUsername whenKeyDownInUsername
enableUsername
disableUsername

function Client(element, view)
{
if (view == null)
view = new jQueryView("Client", element);

registerObjectProperties(this, view, ['SendButton']);
}

The Client class now has the following methods:
showSendButton whenSendButtonClicked
hideSendButton whenSendButtonIsClicked
clickSendButton
enableSendButton
disableSendButton

function Client(element, view)
{
if (view == null)
view = new jQueryView("Client", element);

registerList(this, view, ['Tweets']);
}

The Client class now has the following methods:
appendToTweets
prependToTweets
getTweets

<html>
<head>
<script language="javascript">
$(document).ready(function()
{
entryForm = new EntryForm($("#EntryForm"));
});
</script>
</head>
<body>
<div id="EntryForm">
First Name:<br/>
<input type="text" class="EntryForm-FirstName" /><br/>
<br/>
Last Name:<br/>
<input type="text" class="EntryForm-LastName" />
</div>
</body>
</html>

Slides: http://jonkruger.com/blog
JSView: http://github.com/jonkruger/jsview
Jasmine: http://pivotal.github.com/jasmine

mail: jon@jonkruger.com
Twitter: @JonKruger
Blog: http://jonkruger.com/blog

The document discusses object-oriented programming and design principles. It defines OOP as a programming paradigm based on classes and cooperating objects. It then discusses the SOLID principles of object-oriented design, which are guidelines for writing reusable, flexible and maintainable code. Specifically, it emphasizes that classes and methods should have a single responsibility, code should be open for extension but closed for modification, and software should be designed to be easy to test, change and add new features to.

Callbacks, Promises, and Coroutines (oh my!): Asynchronous Programming Patter...Domenic Denicola

This document discusses asynchronous programming patterns in JavaScript, focusing on the differences between synchronous and asynchronous execution using callbacks, promises, and coroutines. It highlights the complexity introduced by callbacks and advocates for the use of promises to simplify error handling and composition of asynchronous operations. Additionally, it touches on the future of JavaScript with coroutines and ECMAScript Harmony, which aim to improve the handling of asynchronous code.

History of jQueryjeresig

The document details the history and evolution of jQuery, highlighting its initial inspirations, features, and functionalities since its inception in 2005. It discusses various implementations, releases, and the growing support and usage of jQuery across multiple platforms and companies. The future outlook for jQuery includes the launch of jQuery UI and enhancements to testing and internationalization efforts.

jQuery from the very beginningAnis Ahmad

The document provides an overview of jQuery, a lightweight and cross-browser JavaScript library designed to simplify HTML and JavaScript interactions, with a size of only 19kb when minified. It includes examples of jQuery's usage for AJAX, DOM manipulation, as well as details on selectors, filters, and events, demonstrating its capabilities in web development. Additionally, resources for downloading jQuery and further education on its functionality are referenced.

Node.js in actionSimon Su

This document provides an overview of Node.js and how to use it for web development. It covers installing Node.js, the basic syntax and features of Node.js like modules, asynchronous programming. It also discusses using the NPM package manager and popular Node packages. Finally, it demonstrates how to build a basic web server and framework like Express along with integrating a database like MySQL.

SOLID PRINCIPLESLuciano Queiroz

The document discusses the SOLID principles of object-oriented design: - The Single Responsibility Principle states that a class should have one, and only one, reason to change. An example class that violates this principle is refactored to separate concerns into distinct classes. - The Open/Closed Principle states that a class should be open for extension but closed for modification. An encoder class is refactored to use polymorphism and dependency injection to follow this principle. - The Liskov Substitution Principle states that subclasses must be substitutable for their base classes. Examples of violations include subclasses not implementing base class methods or having incompatible method signatures.

Backbone jsrstankov

Why rubyrstankov

Web Crawling with NodeJSSylvain Zimmer

The document outlines a presentation on web crawling using Node.js, highlighting its asynchronous capabilities and the rich ecosystem of modules available. It discusses the use of the Apricot library for HTML parsing, its limitations, and how to utilize other libraries such as jQuery and jsdom for enhanced functionality. Additionally, it introduces concurrency management with generic-pool for MySQL connections and wraps up with a simple crawler API example, inviting collaboration and contributions from the community.

Ruby/Railsrstankov

- Ruby is an interactive, object-oriented programming language created by Yukihiro Matsumoto in 1995. - Ruby on Rails is a web application framework built on Ruby that emphasizes convention over configuration and is optimized for programmer happiness. - The document discusses Ruby and Ruby on Rails, providing an overview of their history, key principles like MVC, REST, and conventions used in Rails. It also provides examples of modeling data with classes and ActiveRecord in Rails.

05 JavaScript #burningkeyboardsDenis Ristic

The document provides an overview of JavaScript, including that it is used to make web pages interactive, runs in browsers, and supports built-in. It discusses the DOM, common events, using the console, variables, operators, comments, conditionals, loops, arrays, objects, type checking, functions, events, timers, accessing and manipulating DOM elements, working with CSS/classes, and AJAX requests.

jQueryDileep Mishra

The document provides an overview of jQuery including: - What jQuery is and its main features like DOM manipulation and AJAX - How to include jQuery in an HTML document and basic usage syntax - jQuery selectors to find elements and filters to refine selections - Common jQuery methods for manipulating attributes, events, HTML, CSS, and more - Examples of using various jQuery functions and concepts

Week 4 - jQuery + Ajaxbaygross

This document provides an introduction to jQuery, including what jQuery is, why it's useful, how to include it, and some common jQuery syntax and methods. Key points: - jQuery is a JavaScript framework that makes interacting with HTML, CSS, and browser functionality simpler. It provides methods for DOM manipulation, AJAX requests, and event handling. - jQuery uses CSS selector syntax to select elements and chainable methods to manipulate them. Common methods include show(), hide(), addClass(), removeClass(), and more. - Events like click and change can have callback functions attached via jQuery. AJAX requests allow asynchronous data retrieval without page reloads. - jQuery handles cross-browser compatibility and provides a consistent

jQuery in 15 minutesSimon Willison

This document provides an overview of jQuery, a JavaScript library for DOM manipulation. It discusses jQuery's CSS selector syntax, methods for manipulating DOM elements and collections, event handling, AJAX support through methods like load() and get(), and how jQuery is extensible through plugins. The document also provides examples of DOM traversal, value retrieval, event binding, and chaining methods.

06 jQuery #burningkeyboardsDenis Ristic

This document provides an introduction to jQuery, including examples of how to use jQuery. It discusses jQuery plugins, performance tips for jQuery, and jQuery deferreds/promises. Some key points: - jQuery is a JavaScript library that allows DOM manipulation and event handling via JavaScript - jQuery code uses $ as an alias for jQuery functions - Plugins can extend jQuery's functionality - For performance, cache selections, append outside loops, detach/reattach elements being modified - Deferreds/promises allow asynchronous functions to be chained together

jQueryMohammed Arif

The document discusses the jQuery framework, explaining why jQuery should be used, what the $() function does, how to write unobtrusive JavaScript, and how to extend jQuery through plugins. It also covers using jQuery with other libraries by relinquishing control of the $ variable through the $.noConflict() method. Key features of jQuery include its small file size, cross-browser compatibility, and ease of selecting, manipulating, and animating elements.

Javascript Frameworks for JoomlaLuke Summerfield

The document discusses how JavaScript frameworks like MooTools can be leveraged in Joomla sites to provide features like DOM manipulation, classes, event listeners, and effects. It describes how MooTools is the default framework used by Joomla and provides examples of its key capabilities. Additionally, it offers suggestions for optimizing framework usage, such as implementing the Google Loader API to decrease page load times.

JavaScript PromisesL&T Technology Services Limited

The document discusses callback functions and their implications in JavaScript, particularly the issue known as 'callback hell' where nested callbacks complicate code readability. It introduces promises as a solution to manage asynchronous operations in a cleaner manner, outlining their structure, use cases, and advantages over callbacks. The document also compares jQuery's promise model with the 'q' library and AngularJS's implementation, highlighting important functional differences.

Joe Walker Interactivewebsites Cometand Dwrdeimos

The document discusses Comet and DWR (Direct Web Remoting). It provides an overview of Comet, which allows for long-lived HTTP connections to enable low-latency data delivery. It discusses various Comet techniques like forever frames, long polling, and HTMLFile. It also covers challenges of implementing Comet and how frameworks like DWR and protocols like Bayeux help address these. DWR allows for easily calling Java objects from JavaScript and updating pages in real-time.

jQuery Best Practice chandrashekher786

This document provides best practices for using jQuery, including loading jQuery from a CDN, using variables to cache jQuery objects, optimizing selectors for performance, best practices for DOM manipulation, event handling, AJAX requests, animations, chaining, using plugins, and other miscellaneous tips. Key recommendations include prefixing variables with $, using ID selectors when possible, giving selectors context, avoiding implied universal selectors, detaching elements before manipulation, avoiding anonymous event handlers, and using object literals for parameters.

Remy Sharp The DOM scripting toolkit jQuerydeimos

The document discusses jQuery, a JavaScript library that makes DOM scripting and event handling easier. It provides functions to select elements, handle events, perform animations and AJAX requests. Some key features include CSS selector syntax to select elements, chaining of methods, cross-browser compatibility, and a simple plugin API. Popular uses of jQuery include DOM manipulation, event handling, and animating effects.

J query trainingFIS - Fidelity Information Services

This document provides an overview of jQuery, including what it is, why it's useful, how to get started, and some common jQuery syntax. jQuery is a JavaScript library that makes it much easier to use JavaScript on websites. It simplifies tasks like DOM manipulation, event handling, animation, and Ajax. The document explains how to download jQuery, includes some basic jQuery syntax using selectors and methods, and covers various features like effects, HTML/CSS manipulation, events, traversing, and Ajax.

Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KThomas Fuchs

JavaScript PromiseJoseph Chiang

This document discusses JavaScript promises as an abstraction pattern for handling asynchronous code. It explains why promises are useful by describing some of the issues with callback-based asynchronous code, such as callback hell and lack of readability. The document then provides examples of how to create and use promises to handle sequential and parallel asynchronous tasks in a more maintainable way using chaining and batching. It also discusses how promises are supported in browsers, Node.js, and common promise libraries like Q, RSVP, when.js, and Bluebird.

JqueryGirish Srivastava

This document provides an introduction to jQuery, covering its features, comparisons to other frameworks, selectors, and plugins. jQuery is an open-source JavaScript library that simplifies DOM manipulation, event handling, animations, and Ajax interactions. It uses CSS-style selectors to select and manipulate HTML elements. Some key features include DOM element selections, DOM traversal/modification, DOM manipulation based on CSS selectors, events, effects/animations, Ajax, and extensibility through plugins. The document also discusses jQuery versus other frameworks like Dojo and YUI, demonstrates basic selectors and methods, and encourages the use of plugins to add additional functionality.

jQueryJay Poojara

JQuery is a JavaScript library that simplifies HTML document manipulation, event handling, animations, and Ajax interactions. It works across browsers and makes tasks like DOM traversal and manipulation, event handling, animation, and Ajax much simpler. JQuery's versatility, extensibility, and cross-browser compatibility have made it popular, with millions of developers using it to write JavaScript.

Basic Tutorial of React for ProgrammersDavid Rodenas

The document is a comprehensive guide on basic ReactJS concepts by Dr. David Rodenas, focusing on its structure, components, and rendering techniques. It highlights the evolution from MVC frameworks to React's unidirectional data flow and the importance of JSX syntax in creating reusable components. The document also discusses state management, lifecycle methods, event handling, and best practices for rendering lists with unique keys.

jQuery secretsBastian Feder

This document discusses various jQuery secrets including: 1. Utilities for saving and removing state from DOM elements using jQuery.data() and jQuery.removeData(). 2. Hidden events like getData, setData, and changeData that are emitted when data is read, set, or changed on an element. 3. Extending jQuery with custom functions, properties, and AJAX shortcuts. 4. Binding custom events and namespaces, self-defined animation speeds, and extending jQuery plugins.

Introducing jQueryWildan Maulana

This document provides an introduction and overview of jQuery. It discusses why jQuery is useful, unobtrusive JavaScript, fundamental jQuery elements and concepts like selectors and the jQuery wrapper. It also covers more advanced topics like query chains, advanced selectors, the document ready handler, extending jQuery, and using jQuery with other libraries. The document is intended to teach the basics of jQuery and how it can be used to select and manipulate elements on an HTML page.

More Related Content

What's hot (20)

Why rubyrstankov

Web Crawling with NodeJSSylvain Zimmer

Ruby/Railsrstankov

05 JavaScript #burningkeyboardsDenis Ristic

jQueryDileep Mishra

Week 4 - jQuery + Ajaxbaygross

jQuery in 15 minutesSimon Willison

06 jQuery #burningkeyboardsDenis Ristic

jQueryMohammed Arif

Javascript Frameworks for JoomlaLuke Summerfield

JavaScript PromisesL&T Technology Services Limited

Joe Walker Interactivewebsites Cometand Dwrdeimos

jQuery Best Practice chandrashekher786

Remy Sharp The DOM scripting toolkit jQuerydeimos

J query trainingFIS - Fidelity Information Services

Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KThomas Fuchs

JavaScript PromiseJoseph Chiang

JqueryGirish Srivastava

jQueryJay Poojara

Basic Tutorial of React for ProgrammersDavid Rodenas

Why rubyrstankov

Web Crawling with NodeJSSylvain Zimmer

Ruby/Railsrstankov

05 JavaScript #burningkeyboardsDenis Ristic

jQueryDileep Mishra

Week 4 - jQuery + Ajaxbaygross

jQuery in 15 minutesSimon Willison

06 jQuery #burningkeyboardsDenis Ristic

jQueryMohammed Arif

Javascript Frameworks for JoomlaLuke Summerfield

JavaScript PromisesL&T Technology Services Limited

Joe Walker Interactivewebsites Cometand Dwrdeimos

jQuery Best Practice chandrashekher786

Remy Sharp The DOM scripting toolkit jQuerydeimos

J query trainingFIS - Fidelity Information Services

Zepto.js, a jQuery-compatible mobile JavaScript framework in 2KThomas Fuchs

JavaScript PromiseJoseph Chiang

JqueryGirish Srivastava

jQueryJay Poojara

Basic Tutorial of React for ProgrammersDavid Rodenas

Similar to Testable, Object-Oriented JavaScript (20)

jQuery secretsBastian Feder

Introducing jQueryWildan Maulana

Automated testing for client-side - Adam Klein, 500 TechCodemotion Tel Aviv

This document discusses client-side testing using Jasmine and Karma. It introduces Jasmine as the most popular testing framework for writing unit tests in the browser. It demonstrates a simple example of using Jasmine to test a Person constructor function. It then discusses Karma, a test runner that makes browser testing seamless. Karma allows running tests across multiple browsers simultaneously. The document also covers techniques for testing AngularJS controllers and services, including mocking external server calls. It emphasizes that while tests may pass using mocks, the mocks represent the contract with the external system and code could still fail if that contract changes.

Client side unit tests - using jasmine & karmaAdam Klein

Jquery- One slide completing all JQueryKnoldus Inc.

This document provides a comprehensive introduction to jQuery, a lightweight JavaScript library designed to simplify HTML document manipulation, event handling, and animation. It covers essential topics such as selectors, DOM manipulation methods, event handling, and effects, along with code examples. The document serves as a practical guide for getting started with jQuery and utilizing its features effectively.

international PHP2011_Bastian Feder_jQuery's Secretssmueller_sandsmedia

This document contains a summary of jQuery secrets presented by Bastian Feder. It discusses various techniques including saving and removing state from DOM elements using jQuery.data() and jQuery.removeData(), extending jQuery functionality through plugins, and customizing AJAX requests and event handling. The presentation provides code examples for working with jQuery's data storage methods, namespaces, promises/deferreds, global AJAX settings, and extending jQuery.

jQuery secretsBastian Feder

Introduction to jQueryNagaraju Sangam

The document provides an introduction to jQuery, explaining what it is, its benefits over traditional JavaScript, and how it can be used. Key points covered include: - jQuery is a lightweight JavaScript library that makes client-side scripting easier by providing cross-browser compatibility and methods for selecting, manipulating, and traversing DOM elements. - jQuery solves many cross-browser issues that exist with traditional JavaScript and allows unobtrusive JavaScript that separates behavior from content. - jQuery simplifies many common tasks like DOM traversal and manipulation through methods like $.(), selectors, events, effects, and plugins. This allows easier and more readable code compared to traditional JavaScript. - The document provides examples of how to use

amsterdamjs - jQuery 1.5mennovanslooten

The document discusses the February 2011 AmsterdamJS meetup that focused on jQuery version 1.5, highlighting new features such as deferred objects, improvements in AJAX, and the creation of jQuery subs for customizable instances. It provides a micro tutorial on jQuery's core functionalities, including DOM manipulation, event handling, and AJAX calls. Additionally, it presents examples of using deferred objects for better management of asynchronous operations.

Jquery Complete Presentation along with Javascript BasicsEPAM Systems

jQuery and Rails, Sitting in a Treeadamlogic

This document discusses using jQuery with Ruby on Rails. It covers including jQuery and rails.js in Rails 3 applications, reproducing CSRF meta tags, using remote links, and rendering JavaScript templates. It also discusses making AJAX requests in Rails 2 applications by returning JSON from controllers and binding to jQuery events in rails.js. The document provides an introduction and agenda for a presentation on integrating jQuery into Ruby on Rails applications.

jQueryIvano Malavolta

The document provides an extensive overview of jQuery, covering its functionalities like DOM manipulation, event handling, and AJAX, while also introducing useful microframeworks such as Zepto.js and Hammer.js. Key concepts include using selectors, callback functions, and AJAX requests to update content without refreshing pages. Additional utilities and libraries such as Underscore.js and Swipe.js are mentioned for enhancing development in JavaScript and mobile scenarios.

Kakunin E2E framework showcaseThe Software House

The document outlines a comprehensive workshop agenda for Kakunin, an end-to-end testing tool, focusing on installation, configuration, and usage for both Angular and non-Angular applications. It includes detailed sections on interacting with elements, filling forms, creating custom steps, email handling, and content validation. Additional topics cover debugging, working with selectors, and using transformers and handlers for greater flexibility in testing scenarios.

Magento2&java script (2)EvgeniyKapelko1

The document discusses different ways to include JavaScript in Magento 2 projects, including plain modules, jQuery widgets, and UI components. Plain modules use require() or define() to load dependencies and code. jQuery widgets create reusable JavaScript behaviors using the $.widget() method. UI components are declarative, reusable pieces defined through initialization scripts and component classes.

Javascript - Beyond-jQueryTanner Moushey ❖ Mission Lab - WordPress Agency

The document provides an overview of JavaScript concepts, including variable declarations, functions, DOM manipulation, and variable scope. It also touches on localized scripts in WordPress and debugging techniques, along with references to further learning resources such as ES6 syntax. The document is aimed at developers seeking to strengthen their JavaScript skills within the context of WordPress development.

Web Components EverywhereIlia Idakiev

This document provides an overview of web components, detailing their principles, features, and usage. It explains concepts like encapsulation through shadow DOM, custom elements, and the S.O.L.I.D principles of object-oriented programming. Additionally, it offers code examples for creating, using, and managing custom elements, along with discussions on libraries and frameworks related to web component development.

Jquery plugin developmentFaruk Hossen

JQuery is a JavaScript library that allows developers to easily manipulate HTML, CSS, and events. A JQuery plugin extends JQuery's functionality by adding new methods to its prototype object. Plugins provide reusable code and save development time. A plugin consists of a function, options, callbacks, and the ability to chain methods. The 'this' keyword refers to DOM elements or JQuery objects depending on the context.

J Query The Write Less Do More Javascript Libraryrsnarayanan

This document provides an agenda for a presentation on jQuery, a popular JavaScript library. It begins with an introduction to jQuery and why it is useful, then covers various topics like DOM manipulation, event handling, Ajax, effects, and plugins. It emphasizes that jQuery makes cross-browser JavaScript programming easier and provides robust support for tasks like DOM traversal, Ajax, and animations. The document also includes several code demos to illustrate jQuery concepts.

Clean JavascriptRyunosuke SATO

The document discusses techniques for writing clean JavaScript code. It provides examples of code smells and improvements to address issues like attaching events from the outside, separating selection from logic, shallow scope, overwriting default behavior, and separating logic from views. The document advocates for practices like modularizing functions, separating DOM manipulation from models, and creating model objects to represent DOM elements rather than directly manipulating the DOM. It encourages learning clean JavaScript techniques to write better structured and more maintainable code.

Unit3.pptxAnamikaRai59

This document provides an introduction to jQuery, including: - What jQuery is and its main features like DOM manipulation, CSS manipulation, events, effects, animations, and AJAX. - The benefits of jQuery like being browser independent and increasing coding speed. - How to add jQuery to web pages by downloading the jQuery library, including the jQuery file, and writing jQuery code within script tags. - jQuery selectors that allow selecting elements based on name, id, classes, attributes, and more. Common selectors include element, id, class, and universal selectors. - jQuery events like click, change, submit, and how to attach event handler functions using methods like click(), change

jQuery secretsBastian Feder

Introducing jQueryWildan Maulana

Automated testing for client-side - Adam Klein, 500 TechCodemotion Tel Aviv

Client side unit tests - using jasmine & karmaAdam Klein

Jquery- One slide completing all JQueryKnoldus Inc.

international PHP2011_Bastian Feder_jQuery's Secretssmueller_sandsmedia

jQuery secretsBastian Feder

Introduction to jQueryNagaraju Sangam

amsterdamjs - jQuery 1.5mennovanslooten

Jquery Complete Presentation along with Javascript BasicsEPAM Systems

jQuery and Rails, Sitting in a Treeadamlogic

jQueryIvano Malavolta

Kakunin E2E framework showcaseThe Software House

Magento2&java script (2)EvgeniyKapelko1

Javascript - Beyond-jQueryTanner Moushey ❖ Mission Lab - WordPress Agency

Web Components EverywhereIlia Idakiev

Jquery plugin developmentFaruk Hossen

J Query The Write Less Do More Javascript Libraryrsnarayanan

Clean JavascriptRyunosuke SATO

Unit3.pptxAnamikaRai59

More from Jon Kruger (7)

The Business of You: 10 Steps To Run Your Career Like a BusinessJon Kruger

The document presents a guide titled 'The Business of You,' emphasizing ten steps to manage one’s career effectively. It highlights the importance of defining mission, vision, and values, particularly through the lens of the Canadian Cancer Society's commitment to quality and empathy in serving cancer patients. Additionally, it encourages individuals to take ownership of their careers, emphasize accomplishments over perceived experiences, and seek fulfillment in their professional lives.

Developing an Automated Testing StrategyJon Kruger

The document discusses different types of automated testing including unit tests, integration tests, acceptance tests, manual tests, security tests, load tests, and A/B tests. It emphasizes that testing strategy should be determined by a team based on factors like the application, available resources, risks, and constraints. An effective strategy balances automation with different testing types based on priority areas and what will cause the most damage if failed.

A Whole Team Approach To TestingJon Kruger

This document discusses testing an e-commerce checkout feature using behavior-driven development (BDD) and acceptance test-driven development (ATDD). It provides examples of test scenarios written in the Gherkin syntax to test different order scenarios involving products, taxes, shipping charges and total costs. It also discusses best practices for BDD/ATDD such as insisting on complete acceptance criteria before development and using the "Three Amigos" technique of business analysts, developers and testers collaborating on test cases.

An ATDD Case StudyJon Kruger

The document outlines an acceptance criteria for processing an order on a checkout page, detailing cost breakdowns, tax rates by state, and shipping policies. It discusses project management philosophies including self-directed teams and shared risk, as well as the importance of continuous integration and testing in the development process. The document also emphasizes the goal of continuous improvement and highlights the achievement of automating 75% of test cases by 2012.

Productivity Boosters for .NET DevelopersJon Kruger

Test-Driven Development In ActionJon Kruger

This document provides an overview of test driven development (TDD), including what TDD is, an example unit test, the TDD process, benefits of TDD such as more maintainable code and fewer bugs, and resources for learning and practicing TDD such as books and training courses. TDD involves writing automated tests before implementation code to help ensure code quality and catch errors early. The process involves writing a test, seeing it fail, then writing just enough code to make it pass and refactoring as needed.

Advanced Object-Oriented/SOLID PrinciplesJon Kruger

Here are a few guidelines for creating reusable code: - Create small, focused classes with single responsibilities. General purpose classes are harder to reuse. - Program to interfaces rather than concrete classes. Depend on abstractions so specific implementations can be swapped out. - Make classes and members as loosely coupled as possible. Tight coupling makes code less flexible. - Favor composition over inheritance where possible. Inheritance binds subclasses tightly to parent classes. - Code against abstractions using dependency injection rather than directly instantiating concrete types. This improves testability and flexibility. - Make sure classes have clear, well-defined contracts via interfaces and parameters. External code should need minimal context to use a class.

The Business of You: 10 Steps To Run Your Career Like a BusinessJon Kruger

Developing an Automated Testing StrategyJon Kruger

A Whole Team Approach To TestingJon Kruger

An ATDD Case StudyJon Kruger

Productivity Boosters for .NET DevelopersJon Kruger

Test-Driven Development In ActionJon Kruger

Advanced Object-Oriented/SOLID PrinciplesJon Kruger

Recently uploaded (20)

Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdfPriyanka Aash

Raman Bhaumik - Passionate Tech EnthusiastRaman Bhaumik

FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptxFIDO Alliance

Cyber Defense Matrix Workshop - RSA ConferencePriyanka Aash

A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdfPriyanka Aash

You are not excused! How to avoid security blind spots on the way to productionMichele Leroux Bustamante

We live in an ever evolving landscape for cyber threats creating security risk for your production systems. Mitigating these risks requires participation throughout all stages from development through production delivery - and by every role including architects, developers QA and DevOps engineers, product owners and leadership. No one is excused! This session will cover examples of common mistakes or missed opportunities that can lead to vulnerabilities in production - and ways to do better throughout the development lifecycle.

FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptxFIDO Alliance

Lessons Learned from Developing Secure AI Workflows.pdfPriyanka Aash

"Database isolation: how we deal with hundreds of direct connections to the d...Fwdays

What can go wrong if you allow each service to access the database directly? In a startup, this seems like a quick and easy solution, but as the system scales, problems appear that no one could have guessed. In my talk, I'll share Solidgate's experience in transforming its architecture: from the chaos of direct connections to a service-based data access model. I will talk about the transition stages, bottlenecks, and how isolation affected infrastructure support. I will honestly show what worked and what didn't. In short, we will analyze the controversy of this talk.

OpenACC and Open Hackathons Monthly Highlights June 2025OpenACC

The OpenACC organization focuses on enhancing parallel computing skills and advancing interoperability in scientific applications through hackathons and training. The upcoming 2025 Open Accelerated Computing Summit (OACS) aims to explore the convergence of AI and HPC in scientific computing and foster knowledge sharing. This year's OACS welcomes talk submissions from a variety of topics, from Using Standard Language Parallelism to Computer Vision Applications. The document also highlights several open hackathons, a call to apply for NVIDIA Academic Grant Program and resources for optimizing scientific applications using OpenACC directives.

Smarter Aviation Data Management: Lessons from Swedavia Airports and SwecoSafe Software

Managing airport and airspace data is no small task, especially when you’re expected to deliver it in AIXM format without spending a fortune on specialized tools. But what if there was a smarter, more affordable way? Join us for a behind-the-scenes look at how Sweco partnered with Swedavia, the Swedish airport operator, to solve this challenge using FME and Esri. Learn how they built automated workflows to manage periodic updates, merge airspace data, and support data extracts – all while meeting strict government reporting requirements to the Civil Aviation Administration of Sweden. Even better? Swedavia built custom services and applications that use the FME Flow REST API to trigger jobs and retrieve results – streamlining tasks like securing the quality of new surveyor data, creating permdelta and baseline representations in the AIS schema, and generating AIXM extracts from their AIS data. To conclude, FME expert Dean Hintz will walk through a GeoBorders reading workflow and highlight recent enhancements to FME’s AIXM (Aeronautical Information Exchange Model) processing and interpretation capabilities. Discover how airports like Swedavia are harnessing the power of FME to simplify aviation data management, and how you can too.

FIDO Alliance Seminar State of Passkeys.pptxFIDO Alliance

AI vs Human Writing: Can You Tell the Difference?Shashi Sathyanarayana, Ph.D

The Future of Data, AI, and AR: Innovation Inspired by You.pdfSafe Software

Python Conference Singapore - 19 Jun 2025ninefyi

OpenPOWER Foundation & Open-Source Core InnovationsIBM

penPOWER offers a fully open, royalty-free CPU architecture for custom chip design. It enables both lightweight FPGA cores (like Microwatt) and high-performance processors (like POWER10). Developers have full access to source code, specs, and tools for end-to-end chip creation. It supports AI, HPC, cloud, and embedded workloads with proven performance. Backed by a global community, it fosters innovation, education, and collaboration.

Powering Multi-Page Web Applications Using Flow Apps and FME Data StreamingSafe Software

Unleash the potential of FME Flow to build and deploy advanced multi-page web applications with ease. Discover how Flow Apps and FME’s data streaming capabilities empower you to create interactive web experiences directly within FME Platform. Without the need for dedicated web-hosting infrastructure, FME enhances both data accessibility and user experience. Join us to explore how to unlock the full potential of FME for your web projects and seamlessly integrate data-driven applications into your workflows.

Securing AI - There Is No Try, Only Do!.pdfPriyanka Aash

Security Tips for Enterprise Azure SolutionsMichele Leroux Bustamante

Delivering solutions to Azure may involve a variety of architecture patterns involving your applications, APIs data and associated Azure resources that comprise the solution. This session will use reference architectures to illustrate the security considerations to protect your Azure resources and data, how to achieve Zero Trust, and why it matters. Topics covered will include specific security recommendations for types Azure resources and related network security practices. The goal is to give you a breadth of understanding as to typical security requirements to meet compliance and security controls in an enterprise solution.

FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptxFIDO Alliance

Oh, the Possibilities - Balancing Innovation and Risk with Generative AI.pdfPriyanka Aash

Raman Bhaumik - Passionate Tech EnthusiastRaman Bhaumik

FIDO Seminar: Evolving Landscape of Post-Quantum Cryptography.pptxFIDO Alliance

Cyber Defense Matrix Workshop - RSA ConferencePriyanka Aash

A Constitutional Quagmire - Ethical Minefields of AI, Cyber, and Privacy.pdfPriyanka Aash

You are not excused! How to avoid security blind spots on the way to productionMichele Leroux Bustamante

FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptxFIDO Alliance

Lessons Learned from Developing Secure AI Workflows.pdfPriyanka Aash

"Database isolation: how we deal with hundreds of direct connections to the d...Fwdays

OpenACC and Open Hackathons Monthly Highlights June 2025OpenACC

Smarter Aviation Data Management: Lessons from Swedavia Airports and SwecoSafe Software

FIDO Alliance Seminar State of Passkeys.pptxFIDO Alliance

AI vs Human Writing: Can You Tell the Difference?Shashi Sathyanarayana, Ph.D

The Future of Data, AI, and AR: Innovation Inspired by You.pdfSafe Software

Python Conference Singapore - 19 Jun 2025ninefyi

OpenPOWER Foundation & Open-Source Core InnovationsIBM

Powering Multi-Page Web Applications Using Flow Apps and FME Data StreamingSafe Software

Securing AI - There Is No Try, Only Do!.pdfPriyanka Aash

Security Tips for Enterprise Azure SolutionsMichele Leroux Bustamante

FIDO Seminar: Perspectives on Passkeys & Consumer Adoption.pptxFIDO Alliance

Testable, Object-Oriented JavaScript

1. by Jon Kruger

5. $("#Name").text("jon");

6.  Object oriented programming  Readable code  Small classes/files  Loosely coupled  Unit testing F

7.  Cucumber, SpecFlow, Selenium, Watir, etc.

8.  Inject HTML in our tests describe("Testing by injecting HTML into jQuery", function() { it("should work, but it's kind of a pain", function() { element = $('<div>text</div>'); element.text("some more text"); expect(element.text()).toEqual("some more text"); }); });

9.  ?????????????????

11.  Tests a small unit of functionality  Must run fast  Isolate external dependencies

12.  How do we deal with the DOM  How do we deal with AJAX calls  How do we run the tests

13. DOM JavaScript AJAX Server

14. DOM JavaScript AJAX Server

15. DOM ??????? JavaScript AJAX Server

16. DOM Fake DOM ??????? JavaScript AJAX Server

17. http://github.com/jonkruger/jsview

18. FTW!!!!

19. function Client(element, view) { if (view == null) view = new jQueryView("Client", element); registerObjectProperties(this, view, ['Username']); } The Client class now has the following methods: getUsername whenUsernameChanges setUsername whenUsernameClicked showUsername whenUsernameIsClicked hideUsername whenUsernameGainsFocus clickUsername whenUsernameLosesFocus pressKeyInUsername whenKeyIsPressedInUsername keyDownInUsername whenKeyDownInUsername enableUsername disableUsername

20. function Client(element, view) { if (view == null) view = new jQueryView("Client", element); registerObjectProperties(this, view, ['SendButton']); } The Client class now has the following methods: showSendButton whenSendButtonClicked hideSendButton whenSendButtonIsClicked clickSendButton enableSendButton disableSendButton

21. function Client(element, view) { if (view == null) view = new jQueryView("Client", element); registerList(this, view, ['Tweets']); } The Client class now has the following methods: appendToTweets prependToTweets getTweets

22. <html> <head> <script language="javascript"> $(document).ready(function() { entryForm = new EntryForm($("#EntryForm")); }); </script> </head> <body> <div id="EntryForm"> First Name:<br/> <input type="text" class="EntryForm-FirstName" /><br/> <br/> Last Name:<br/> <input type="text" class="EntryForm-LastName" /> </div> </body> </html>

24. Slides: http://jonkruger.com/blog JSView: http://github.com/jonkruger/jsview Jasmine: http://pivotal.github.com/jasmine mail: [email protected] Twitter: @JonKruger Blog: http://jonkruger.com/blog

Editor's Notes

#2: How many of you like writing JavaScript as much as you do your primary language?Why don’t you like it as much?How many of you write tests for your JavaScript? - What kinds of things are you testing? (logic code, injecting HTML, DOM interactions, ajax, etc.)How many of you have written JavaScript with OO objects?-Why/why not?
#3: - Browser inconsistencies (e.g. document.getElementById(), document.all)- We used to not have jQuery
#4: Many more single-page client-side rich applications written in JavaScriptYou use these and think they are awesome (Gmail, Google Maps, Outlook Web Access newer versions)HTML5 will allow you to do things that you couldn’t do before in the browser (store data locally, richer graphics, etc.)Mobile websites – you don’t need to build apps for 4 mobile platformsIf you had to do one of these, how would you do it?
#5: -What problems do we have when we write JavaScript like this?-Hard to read-Breaks when you change DOM attributes (id, class, etc.)Maybe you move the mess into a separate file, in which case it’s still a mess (you just don’t have to look at it as much)You can do this for simple JavaScript and get away with it, of course (as long as you don’t want to test it with a JavaScript test)
#6: What problems would you have if you wanted to write tests for this code?-You would have to have the DOM for the selector to work!-You have to know specifics about what your DOM is going to look like (to some extent)-We might not be able to use an ID selector because we might need to have something else use the id property (e.g. 3rd party controls, old WebForms)
#7: We need to do something about this:
#8: -These tools are good for end-to-end testing-They won’t help you design your JavaScript-Sometimes it’s easier to test scenarios by testing JavaScript (same reason you write unit tests in server-side code vs. using the browser tools)
#10: We need a better way. I want to be able to write my tests first, before I even know what my HTML page looks like.
#11: -Reads like RSpec-Ruby gem-Community involvement
#14: We have an interface between JavaScript and the server (AJAX), but what is the interface between the JavaScript and the DOM?
#15: Typical JavaScript tends to have the JavaScript very tightly coupled to the DOM.
#16: How do we separate JavaScript and the DOM?
#17: How can we write JavaScript code that will run against the real DOM in production and against a fake DOM in our tests?What things do we typically do with the DOM in JavaScript?Find elementsGet/set textEnable/disable elementsShow/hide elementsEtc.
#18: The abstraction layer between your JavaScript and jQuery/the DOMConvention over configurationMakes testing first easier
#23: Link DOM elements to the registered properties

Testable, Object-Oriented JavaScript

Recommended

More Related Content

What's hot (20)

Similar to Testable, Object-Oriented JavaScript (20)

More from Jon Kruger (7)

Recently uploaded (20)

Testable, Object-Oriented JavaScript

Editor's Notes