Unit Testing Front End JavaScript

Sep 20, 20142 likes1,856 views

Unit Testing Front End JavaScript with Yuri Takhteyev Presented on September 18 2014 at FITC's Web Unleashed Toronto 2014 Conference More info at www.fitc.ca Building complex software application can be made much easier with unit testing – a fact well established in back-end work but often overlooked on the front-end. Yuri Takhteyev will look at some of the tools and techniques for unit testing front end code, focusing on Mocha and Karma. Most of the examples will draw on AngularJS but the main ideas are applicable to other frameworks as well. OBJECTIVE Learn how to write unit tests for front-end code. TARGET AUDIENCE Front-end JavaScript developers not currently using unit testing or those experiencing difficulties with unit testing. ASSUMED AUDIENCE KNOWLEDGE Intermediate front-end JavaScript, no prior experience with front-end unit testing FIVE THINGS AUDIENCE MEMBERS WILL LEARN How unit testing benefits the developer How to structure applications to make them testable How to use Mocha and Karma in unit testing How to mock dependencies (and why) How to handle asynchronous code

UNIT TESTING
FRONT END
JAVASCRIPT
YURI TAKHTEYEV
@QARAMAZOV
@RANGLEIO

Writing Testable Code
☛ Modular
code
☛ AngularJS
services
☛ Other
modules not
entangled
with DOM

Common Tools
Runner: Karma
Task Automation: Gulp || Grunt
Scorer: Mocha || Jasmine
Assertions: Chai || Jasmine
Spies: Sinon || Jasmin
+ CI tools (e.g. Magnum-CI)

http://yto.io/xunit

Installing the Example Code
# First install
git clone https://github.com/yuri/webu-unit.git
cd webu-unit
npm install
sudo npm install -g gulp
sudo npm install -g bower
bower install
# Now run
gulp karma
☛ You’ll need to install git and node before

A Basic Test
function isOdd(value) {
return (value % 2 === 1);
}
describe('isEven', function () {
it('should handle positive ints', function () {
if (isOdd(2)) {
throw new Error('2 should be even');
}
});
});
☛ Let’s put this in “client/app/is-odd.test.js”

Chai
describe('isEven', function () {
it('should handle positive ints', function () {
expect(isOdd(1)).to.be.true;
expect(isOdd(2)).to.be.false;
expect(isOdd(3)).to.be.true;
});
});
☛ More Chai at http://chaijs.com/api/bdd/

Extending Tests
describe('isEven', function () {
...
it('should handle negative ints', function () {
expect(isOdd(-1)).to.be.true;
});
});

Extending Tests
describe('isEven', function () {
...
xit('should handle negative ints', function () {
expect(isOdd(-1)).to.be.true;
});
});

Extending Tests
describe('isEven', function () {
...
it.only('should handle negative ints',
function () {
expect(isOdd(-1)).to.be.true;
});
});

Extending Tests
describe('isEven', function () {
...
it('should handle negative ints', function () {
expect(isOdd(-1)).to.be.true;
});
});
function isOdd(value) {
return (value % 2 === 1);
}

Testing a Service
angular.module('app.tasks', [
'app.server'
])
.factory('tasks', function(server) {
var service = {};
service.getTasks = function () {
return server.get('tasks');
};
return service;
});
☛ Let’s put this in “client/app/tasks-service.js”

The Test, Take 1
describe('tasks service', function () {
beforeEach(module('app.tasks'));
it('should get tasks', function() {
var tasks = getService('tasks');
expect(tasks.getTasks()).to
.not.be.undefined;
});
});
☛ Let’s put this in “client/app/tasks-service.test.js”
☛ See “client/testing/test-utils.js” for
implementation of getService().
Error: [$injector:unpr] Unknown provider:
serverProvider <- server <- tasks

Mocking Dependencies
var data;
beforeEach(module(function($provide){
$provide.service('server', function() {
return {
get: function() {
return Q.when(data);
}
};
});
$provide.service('$q', function() {
return Q;
});
}));
Chrome 37.0.2062 (Mac OS X 10.9.4): Executed 3 of
3 SUCCESS (0.046 secs / 0.027 secs)

$Let’s Extend the Service service.getMyTasks = function () { return server.getTasks() .then(function(taskArray) { return _.filter(taskArray, function(task) { return task.owner === user.userName; }); }); }; ☛ We’ll need to inject “user” into the service$

Mocking the User
$provide.service('user', function() {
return {
username: 'yuri'
};
});
☛ The mock can be very simple

An Async Test, Wrong
it('should get user's tasks', function() {
var tasks = getService('tasks');
data = [{
owner: 'bob',
description: 'Mow the lawn'
}, {
owner: 'yuri',
description: 'Save the world'
}];
tasks.getMyTasks()
.then(function(myTasks) {
expect(myTasks.length).to.equal(1);
});
});
☛ Always check that “wrong” tests fail!

An Async Test, Right
it('should get user's tasks', function() {
var tasks = getService('tasks');
data = [{
owner: 'bob',
description: 'Mow the lawn'
}, {
owner: 'yuri',
description: 'Save the world'
}];
return tasks.getMyTasks()
.then(function(myTasks) {
expect(myTasks.length).to.equal(1);
});
});

Spies with Sinon
$provide.service('server', function() {
return {
get: sinon.spy(function() {
return Q.when(data);
})
};
});
var server = getService('server');
return tasks.getMyTasks()
.then(function(myTasks) {
expect(myTasks.length).to.equal(1);
server.get.should.have.been.calledOnce;
});

Thank You.
Contact:
yuri@rangle.io
http://yto.io
@qaramazov
This presentation:
http://yto.io/xunit

Image Credits
by dunechaser
by lincolnblues
by spenceyc
by creative_tools
by mycroyance
by angeljimenez
by snre

The document discusses strategies for testing AngularJS applications, including unit testing controllers and services, mocking dependencies like HTTP requests and services, and end-to-end testing. It provides examples of writing tests for controllers, services, directives, and end-to-end tests using Protractor. Key points covered are setting up tests, injecting dependencies, mocking, and making assertions to validate test behavior.

Redux Sagas - React AlicanteIgnacio Martín

React hooksAssaf Gannon

This document discusses React hooks and how they enhance functional components. It explains that hooks allow functional components to maintain state and lifecycle methods like class components. The key hooks discussed are useState for managing state, useEffect for side effects like data fetching, and useCallback and useMemo for optimization. Custom hooks are also covered as a way to extract reusable logic. Overall, hooks improve on class components by making code more modular, reusable and easier to test.

The redux saga beginsDaniel Franz

The document discusses refactoring an asynchronous Redux application from using Redux Thunk to Redux Saga. It begins by showing an example of an asynchronous action using Redux Thunk, which involves chaining callbacks. It then introduces Redux Saga as an alternative that uses generator functions to manage asynchronous logic in a cleaner way. The document shows how the same asynchronous action can be rewritten using Redux Saga effects like put(), call(), and takeEvery() within generator functions. Overall, the key points are that Redux Saga encapsulates side effects, has a more readable syntax than Redux Thunk, and makes asynchronous workflows easier to test.

activity_and_fragment_may_2020_lakopiToru Wonyoung Choi

Angular JS Unit Testing - OverviewThirumal Sakthivel

This document discusses Angular JS unit testing and provides examples of testing controllers, routes, services, and directives. It introduces Karma and Jasmine, two popular tools for Angular testing. Karma is a test runner that executes unit tests. Jasmine is a BDD framework used for writing unit tests with matchers to make assertions. Examples are given for setting up tests for controllers, routes, services, and directives by injecting dependencies and compiling elements.

The evolution of redux action creatorsGeorge Bukhanov

This document summarizes the evolution of Redux action creators from plain objects to functions that return action objects, and then to functions that return functions that dispatch actions. It discusses how middleware like Redux-Thunk and dependency injection allow async logic and testing of action creators. Redux-Saga is introduced as providing a cleaner way to write complex asynchronous action creators using generator functions. Key benefits of Redux-Saga include easy testing and ability to create daemon processes using patterns like takeLatest and takeEvery.

Redux saga: managing your side effects. Also: generators in es6Ignacio Martín

The document summarizes a presentation on Redux Sagas given at a React Native meetup in Munich in May 2017. It introduces generators and how they enable asynchronous logic to be written in a synchronous style. It provides examples of using generators to increment a value each time a new value is passed in and shows how generators can be used in a loop. The purpose of Redux Sagas is to manage asynchronous side effects in Redux applications using generator functions.

Testing AngularJSJacopo Nardiello

Workshop 23: ReactJS, React & Redux testingVisual Engineering

React new features and intro to HooksSoluto

The document discusses React hooks and how they can be used to manage state and other features in function components without writing classes. It provides examples of how common lifecycle methods and state management in classes can be re-written using hooks like useState, useEffect, and useContext. Specifically, it walks through converting a chat component that subscribes to new messages and manages local state from a class to a function component using these React hooks.

LinkedIn TBC JavaScript 100: FunctionsAdam Crabtree

This document discusses JavaScript functions. It covers function definitions, invocation patterns, the this keyword, and function methods like call, apply, and bind. Function definitions can be declared using the function keyword or assigned anonymously. Functions are first-class citizens that can be passed around and returned. Invocation patterns include direct invocation, method invocation, constructor invocation, and reflective invocation using call and apply. The this keyword is determined by the invocation pattern and bind can be used to set the this value.

Functional Core, Reactive ShellGiovanni Lodi

Firebase ng2 zurichChristoffer Noring

Firebase and ng2 This document discusses Firebase and AngularFire/AngularFire2. It summarizes that Firebase is a backend as a service that provides realtime database functionality. AngularFire/AngularFire2 are wrappers that make the Firebase API accessible to Angular applications. Key features covered include authentication, authorization, data validation, and working with data through observable references and promises. Best practices like shallow data structures and avoiding deep nesting are also highlighted.

Typescript barcelonaChristoffer Noring

Typescript fundamentals document summarized in 3 sentences: The document discusses Typescript fundamentals including types, classes, interfaces, modules and how to use the Typescript compiler. It explains how Typescript adds type safety and compile time checking to JavaScript by using types for variables, parameters, returns and more. Examples are provided for many Typescript features and how they compile down to equivalent JavaScript.

UI 모듈화로 워라밸 지키기NAVER SHOPPING

Full Stack Unit TestingGlobalLogic Ukraine

This presentation deals with a complex approach to application testing in back end and front end parts, tests writing and common mistakes. It also includes a short overview of libraries and frameworks for creation of tests, as well as practical examples of code. Presentation by Pavlo Iuriichuk, Lead Software Engineer, GlobalLogic, Kyiv), delivered at an open techtalk on December 11, 2014. More details - http://globallogic.com.ua/report-web-testing-techtalk-2014

Understanding react hooksSamundra khatri

This document provides an overview and explanation of React Hooks. It introduces common Hooks like useState, useEffect, useReducer, and custom hooks. useState is used to add local state to functional components. useEffect is similar to component lifecycle methods and lets you perform side effects. useReducer is an alternative to useState for managing state in a single object. Custom hooks let you extract reusable logic and share it without changing components. The document also includes a FAQ addressing questions about hooks and class components.

Stop Making Excuses and Start Testing Your JavaScriptRyan Anklam

The document provides tips for adding testing to JavaScript projects. It recommends choosing a testing environment and dialect, then setting up the tests by installing dependencies and configuring files. Common issues like testing asynchronous code and methods that call other methods can be addressed with spies, stubs, mocks and promises. Tests should focus on isolated units of code and avoid direct DOM manipulation when possible. Automating testing through build tools like Grunt and Testem helps to easily run and watch tests. Overall, the document emphasizes making testing easy by writing maintainable, modular code and setting up automation.

Testing in airflowChandulal Kavar

Rxjs swetuggChristoffer Noring

This document provides an overview of Rxjs (Reactive Extensions for JavaScript). It begins by explaining why Rxjs is useful for dealing with asynchronous code in a synchronous way and provides one paradigm for asynchronous operations. It then discusses the history of callbacks and promises for asynchronous code. The bulk of the document explains key concepts in Rxjs including Observables, Operators, error handling, testing with Schedulers, and compares Promises to Rxjs. It provides examples of many common Rxjs operators and patterns.

Unit Testing Express and Koa Middleware in ES2015Morris Singer

Martin Anderson - threads v actorsbloodredsun

This lightning talk discusses replacing threads with actors for making concurrent service calls in web applications. It describes how actors provide an alternative concurrency model that can be more resource efficient than threads. The talk shows how to implement a master/worker pattern using Akka actors to dispatch work to remote services in parallel from a servlet, collecting the responses to render the page. Key advantages of the actor model include easier reasoning about concurrency and built-in supervision to restart failed actors.

Avoiding callback hell in Node js using promisesAnkit Agarwal

This document discusses using promises in Node.js to avoid callback hell. It explains that Node.js is event-based and non-blocking, allowing it to handle multiple requests simultaneously. However, nested callbacks can result in unwieldy callback pyramids or "callback hell". Promises provide a way to write asynchronous code in a more linear way using method chaining. Key benefits include separation of concerns between wrapping asynchronous functions and controlling flow, as well as more readable code. The document provides examples of chaining, nesting, combining, and creating promises using deferred objects in the Q promise library.

Javascript: master thisBarak Drechsler

Cocoa heads 09112017Vincent Pradeilles

Douglas Crockford: ServersidenessWebExpo

JavaScript FunctionsColin DeCarlo

Functions being first-class citizens in JavaScript offers developers a tremendous amount power and flexibilty. However, what good is all this power if you don't know how to harness it? This talk will provide a thorough examination of JavaScript functions. Topics that will be covered in this talk are: * Functions are objects * Execution Context and the Scope Chain * Closures * Modifying Context * The Various Forms of Functions. Attendees will leave this talk understanding the power of JavaScript functions and the knowledge to apply new techiques that will make their JavaScript cleaner, leaner and more maintainable.

Automated Frontend TestingNeil Crosby

Front-End Testing: DemystifiedSeth McLaughlin

More Related Content

What's hot (20)

Testing AngularJSJacopo Nardiello

Workshop 23: ReactJS, React & Redux testingVisual Engineering

React new features and intro to HooksSoluto

LinkedIn TBC JavaScript 100: FunctionsAdam Crabtree

Functional Core, Reactive ShellGiovanni Lodi

Firebase ng2 zurichChristoffer Noring

Typescript barcelonaChristoffer Noring

UI 모듈화로 워라밸 지키기NAVER SHOPPING

Full Stack Unit TestingGlobalLogic Ukraine

Understanding react hooksSamundra khatri

Stop Making Excuses and Start Testing Your JavaScriptRyan Anklam

Testing in airflowChandulal Kavar

Rxjs swetuggChristoffer Noring

Unit Testing Express and Koa Middleware in ES2015Morris Singer

Martin Anderson - threads v actorsbloodredsun

Avoiding callback hell in Node js using promisesAnkit Agarwal

Javascript: master thisBarak Drechsler

Cocoa heads 09112017Vincent Pradeilles

Douglas Crockford: ServersidenessWebExpo

JavaScript FunctionsColin DeCarlo

Testing AngularJSJacopo Nardiello

Workshop 23: ReactJS, React & Redux testingVisual Engineering

React new features and intro to HooksSoluto

LinkedIn TBC JavaScript 100: FunctionsAdam Crabtree

Functional Core, Reactive ShellGiovanni Lodi

Firebase ng2 zurichChristoffer Noring

Typescript barcelonaChristoffer Noring

UI 모듈화로 워라밸 지키기NAVER SHOPPING

Full Stack Unit TestingGlobalLogic Ukraine

Understanding react hooksSamundra khatri

Stop Making Excuses and Start Testing Your JavaScriptRyan Anklam

Testing in airflowChandulal Kavar

Rxjs swetuggChristoffer Noring

Unit Testing Express and Koa Middleware in ES2015Morris Singer

Martin Anderson - threads v actorsbloodredsun

Avoiding callback hell in Node js using promisesAnkit Agarwal

Javascript: master thisBarak Drechsler

Cocoa heads 09112017Vincent Pradeilles

Douglas Crockford: ServersidenessWebExpo

JavaScript FunctionsColin DeCarlo

Viewers also liked (20)

Automated Frontend TestingNeil Crosby

Front-End Testing: DemystifiedSeth McLaughlin

Cats, Dinosaurs and A Lot of Pizza with Reed + RaderFITC

Cats, Dinosaurs and A Lot of Pizza with Reed + Rader Take a plunge into artist couple Reed + Rader’s animated augmented reality. Reed + Rader will talk about their pioneering effort to help cement the animated GIF as a legitimate photographic editorial medium, as well as discuss their brave, nontraditional use of gaming engines to make content for the worlds of art, fashion and advertising. Presented at FITC Toronto 2014 on April 27-29, 2014 More info at www.FITC.ca

(Re)aligning The Way 400,000 People ThinkFITC

Presented at FITC Toronto 2016 See details at www.fitc.ca Overview Companies are beginning to understand that great design incites an emotional connection. This doesn’t occur at the enterprise level, but in the hearts of each individual user. Changing a 100+ year old company to be design-led isn’t a walk in the park. IBM Design Thinking was developed to unite IBM and deliver solutions that delight their users individually, and deliver increasing value for every additional IBM touchpoint they experience. Hear how Adam has brought design thinking to the enterprise at a scale never attempted before. He’ll share how IBM Design Thinking works and how it has been changing the way that IBM works from the inside out and the outside in. OBJECTIVE Provide an overview of IBM Design Thinking and the value it brings to the enterprise. TARGET AUDIENCE Those interested in design, design thinking and how to be design-led. FIVE THINGS AUDIENCE MEMBERS WILL LEARN A behavioral model for continuous understanding. A framework for teaming and action. How to be comfortable with failure. How to slow down to move faster. How IBM is practicing design at scale.

A New Era for AnimatorsFITC

Managing The ProcessFITC

The document discusses the importance of establishing processes for managing work as a business or team grows beyond just one person. It recommends designating a process leader to define the key processes such as production, creative work, technology, client services, leadership, and more. The processes should be thoroughly documented, involve input from the entire team, and evolve over time with reviews and edits to improve. Establishing and following processes helps define roles, expectations, how work gets done, develops a strong work culture, and prevents repeating work.

Components are the Future of the Web: It’s Going To Be OkayFITC

Presented at Web Unleashed on September 16-17, 2015 in Toronto, Canada More info at www.fitc.ca/webu Components are the Future of the Web: It’s Going To Be Okay with Tessa Thornton OVERVIEW Overview JavaScript innovations in 2014 coalesced on a common theme: the public release of React.js, the announcments of the roadmaps for Ember and Angular 2.0, and Google betting big on Polymer, all emphasize that the future of the web lies in declarative components. This direction can seem radical and backwards to those of us with painful memories of inline event handlers and XML, who fear re-living the hell of tightly-coupled, unmaintainable code. This talk will focus on the real-world motivations behind this shift, and explain why `ng-click` is not your grandma’s onClick. I’ll also discuss the popular (currently usable!) implementations of this philosophy, and how leveraging components can lead to happier developers and more maintainable code, regardless of your framework of choice. OBJECTIVE Convey the motivations and benefits behind recent directions in front-end JavaScript development. TARGET AUDIENCE Novice web/JavaScript developers that aren’t yet sold on a framework. ASSUMED AUDIENCE KNOWLEDGE Basic JavaScript and HTML knowledge. FIVE THINGS AUDIENCE MEMBERS WILL LEARN A brief history of how JavaScript got to where it is The difference between imperative and declarative programming How writing declarative code can simplify front-end development How declarative APIs are being introduced to the browser How you can take advantage of declarative components today, regardless of framework/library

The Browser Is Dead, Long Live The Web!FITC

The Browser Is Dead, Long Live The Web! with Jonathan Stark OVERVIEW For decades, it has been safe to assume that every networked computing device had a graphical web browser installed by default. With the rise of mobile computing, wearable tech, and conversational computing, this is no longer a safe assumption. Join Jonathan for this inspiring talk where he will he explore what web professionals can do to thrive in a world without web browsers. OBJECTIVE To help web designers and developers thrive in a world where the browser is declining in relevance. INTENDED AUDIENCE Web designers and web developers WHAT YOU’LL LEARN 6 skills that won’t go out of style for at least a decade How to succeed in an industry that changes almost daily Why the browser is declining in relevance (and why it’s no big deal) What the digital landscape will look like in the next few years Where the web is going

Getting to Know Grunt By Writing Your Own PluginFITC

The document discusses how to create your own Grunt plugin by scaffolding it, developing it with testing in mind, and publishing it on npm. It recommends using tools like grunt-init and Yeoman to scaffold the plugin, developing the plugin code alongside unit and integration tests, and publishing it on npm after addressing dependencies. The overall goal is to learn how to create well-tested and publishable plugins by going through the full process.

It’s the Experience That Makes the Product, Not the FeaturesFITC

It’s the Experience That Makes the Product, Not the Features with Lee Dale presented on March 07 2015 at FITC's Spotlight UX/UI More info at www.fitc.ca OVERVIEW All too often, products are brought to market with a feature-first approach. A list of functions that are needed to meet business goals such as sign-ups or downloads, views or shares. There’s little thought that’s gone into who the user of the product will be, what their goals are, and what it will take to provide meaningful value to them. We’ll look at what it means to bring a focused, valuable Minimum Viable Product (MVP) to market. An MVP that can help you learn how to better serve your users, and the business that’s footing the bill. OBJECTIVE To understand that no great product began with a list of features. It’s the experience that engages users and drives adoption, so it’s the experience that you need to focus on when bringing a product to market. TARGET AUDIENCE Product Owners, Developers, Founders, UX/UI Designers. ASSUMED AUDIENCE KNOWLEDGE This should be a great introduction for folks who are thinking of bringing a product to market or are working on a product which isn’t quite connecting with its intended audience. FIVE THINGS AUDIENCE MEMBERS WILL LEARN Great digital products do just one thing really well. They serve a target that can’t live without that one thing. Features are a byproduct of the product experience—they don’t drive the experience. You need to deliver a focused MVP to market. Then learn from that MVP and continue to refine the experience for your users, and your business.

Front-end Tools: Sifting Through the MadnessFITC

with Louis Lazaris Presented at FITC Toronto 2015 More info at http://www.fitc.ca/toronto The front-end tools landscape is growing at an exponential pace. Every week there are new plugins, new coding methodologies, new native apps, new JavaScript utilities, new jQuery plugins, new build tools, Grunt plugins, JavaScript libraries and so on. Many help us to solve problems and be more productive. This talk will give you a quick overview of the kinds of things that get released every week, showing the variety of what’s available. But we shouldn’t be discouraged or overwhelmed by the amount we need to keep up with.Louis will cover some suggestions for dealing with the madness, and how developers today can benefit greatly from this influx of new stuff, even if they can’t keep up with it all. OBJECTIVE Demonstrate how to keep up with at least some of the pace, while benefiting from stuff we might not even use. TARGET AUDIENCE Front-end developers. ASSUMED AUDIENCE KNOWLEDGE Decent understanding of HTML, CSS, and JavaScript. FIVE THINGS AUDIENCE MEMBERS WILL LEARN The wide variety of JavaScript-based utilities available today. The kinds of CSS and Sass tools that are at our disposal. How to keep up with the influx of tools. How to keep from being overwhelmed. The possibilities to learn from tools that we don’t even use.

Designing True Cross-Platform AppsFITC

Alexander Blom Isle of Code Overview Some people consider responsive design to be cross-platform, and responsive design to be resizing for containers. However, this misses the distinction of fluid design & often leads to slow and bad programmatic implementations. This talk will cover the distinction and provide pointers on how to implement responsive apps that are also performant. Attendees should understand a differing view on how to build cross-platform apps, and the difference between fluid & responsive design. Target Audience Programmers, designers & cssers who think a single page with lots of media queries is a good idea. Five Things Audience Members Will Learn What is fluid design? The difference between responsive & fluid design Why are responsive designs often slow? How to implement responsive designs that are performant Bonus points to be revealed in talk!

Graphic Designer to Object Designer: Your 3D Printing EvolutionFITC

Graphic Designer to Object Designer: Your 3D Printing Evolution with Paul Trani Presented at FITC Toronto 2015 More info at www.fitc.ca OVERVIEW 3D printing with Photoshop is here. Find out how Photoshop 3D printing capabilities let you create, perfect, preview and print your 3D designs. Also learn what you need to know to bring your images and designs into the physical world. In this fun and fast-moving session, Paul covers: The fundamentals of 3D printing and the 3D printing industry 3D printing functionality in Photoshop CC Finding and importing 3D models Photoshop techniques for getting great-looking 3D printed objects Ideas and inspiration to get you started and on your way

Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015FITC

Presented at Web Unleashed on September 16-17, 2015 in Toronto, Canada More info at www.fitc.ca/webu Upgrading the Web with Douglas Crockford The web was originally imagined to be a simple distributed document retrieval system. It is now being used for applications that go far beyond the system’s original capabilities and intentions. We have found ways to make it work, but they are difficult and far too fragile. Many times companies have offered to replace the web with superior proprietary systems, but we rejected them. We have been adding features to the web, but this does little to correct the deep underlying deficiencies, increasing instead of reducing its complexity. This talk suggests a way forward, taking inspiration from our successful transition from NTSC to HDTV. There is a way forward to a web that is safer, easier, and as good as we desire.

Improving Game Performance in the BrowserFITC

Improving Game Performance in the Browser with Mickey MacDonald Presented on September 17 2014 at FITC's Web Unleashed 2014 event in Toronto Poor performance is the easiest way to wreck the experience of any game; with web-based games, performance is even more crucial. In this talk, Mickey will discuss the various ways that we can optimize web-based games. He will look at the how the use of WebWorkers can increase performance, as well as tricks to improve load times and audio performance. So join Mickey and learn how to optimize your game to be lightning fast in every browser. OBJECTIVE Demonstrate techniques for increasing game performance in browsers TARGET AUDIENCE Web-based game developers ASSUMED AUDIENCE KNOWLEDGE Basic web-based game development skills FIVE THINGS AUDIENCE MEMBERS WILL LEARN Using WebWorkers to increase performance How to speed up load times Audio performance techniques Best practices for graphics compression Pooling techniques

5 Things Every Designer Should be Doing Right NowFITC

The document discusses five things that every web designer should be doing: 1. Create websites using a grid system for layout and organization. 2. Make mistakes early by creating wireframes and prototypes to test designs before development. 3. Use frameworks to simplify development and create responsive websites. 4. Use web fonts for responsive typography and icons. 5. Include imagery responsively to convey information visually.

Functional Web DevelopmentFITC

Functional Web Development – An Introduction to React.js with Bertrand Karerangabo Presented at FITC's Web Unleashed 2014 conference on September 18 2014 More info at www.fitc.ca React.js is a UI framework created by Facebook and Instagram. Its primary design goal is to help build large applications with data that changes over time. To do so at scale, conventional wisdom and some long-held assumptions about software development had to be challenged. Gone are the “M” and the “C” in MVC. Gone are templates and special HTML directives. Gone also are traditional data-bindings. The results are applications that are extremely fast and reliable, out of the box. Bertrand Karerangabo will dive into those concepts that make React.js unique and along the way, also learn how to build web applications from simple, composable and reusable components. OBJECTIVE Rethink web development best practices and explore how you can build ambitious and performant application using functional programming with a virtual DOM representation. TARGET AUDIENCE Javascript developers working on medium to large dynamic applications. ASSUMED AUDIENCE KNOWLEDGE A solid understanding of Javascript and the DOM is strongly recommended. FIVE THINGS AUDIENCE MEMBERS WILL LEARN What React.js is and why it was built. How to deal with the “evil” of mutable state in non-trivial applications. A strategy for working around notoriously slow and expensive DOM operations. The way to truly separate concerns, instead of just technologies, in an application. The SEO, performance and usability benefits that come from using a client-side framework that plays nice with the server.

Pocket web gl skFITC

Pocket WebGL: What WebGL support on mobile means for HTML5 games with Chris Shankland presented on September 17 2014 at FITC's Web Unleashed Toronto 2014 Conference WebGL is an adaptation of the OpenGL ES specification for usage within the context of HTML5. This allows for unprecedented control over hardware directly from JavaScript and can provide a significant performance boost for essentially any graphics intensive application. HTML5 games on mobile have been very limited in what they can achieve in terms of visual fidelity and performance, unless some kind of native extension was used. These native extensions significantly reduce the flexibility of the applications, both from a distribution point of view and from a cross-platform point of view. These reasons are a large part of the choice to use HTML5 in the first place, and any hinderance of them drastically reduces the value of HTML5 as a mobile platform for games. WebGL provides a standardized mechanism to overcome many of the performance issues that had previously crippled mobile HTML5. In this session, Chris Shankland will be exploring how to get WebGL into your application, even if it’s just a 2D application. He will also explore some of the drawbacks that come with the additional control: mobile HTML5 games that use WebGL can be a double-edged sword. Additionally, he will give some examples of how this is the case and share some best practices. Finally, given that the field of 3D graphics and OpenGL is extensive, Chris will also share a number of resources for further learning and exploration. OBJECTIVE Understand what WebGL means for Mobile TARGET AUDIENCE Game developers with a focus on HTML5 related technologies ASSUMED AUDIENCE KNOWLEDGE Familiarity with JavaScript, HTML5 (what it is, what it isn’t), and a general understanding of what WebGL (or OpenGL) is. Any mobile development experience will be a big bonus, but not required. 5 THINGS LEARNED How to get WebGL running from scratch A sense of the significance of WebGL (performance comparison against 2D canvas) Differences across platforms to be aware of Common pitfalls Performance best practices

Designing Interactive Experiences for Kids of All Ages with Mark ArgoFITC

Kickstarting Your Stupid MagazineFITC

Overview Thinking about crowdfunding your next project? Hear Holly’s blow-by-blow account of how she launched the first issue of Stupid Magazine via a successfully-funded Kickstarter campaign. She’ll share what worked, what tanked and what she learned along the way. Proper insights and actual campaign data guaranteed. Objective To help others who are planning on crowdfunding creative projects. Target Audience Smart creators who are evaluating if crowdfunding makes sense for their project. Five Things Audience Members Will Learn How to plan and execute a Kickstarter campaign What a successfully-funded campaign looks like behind the scenes When crowdfunding makes sense and what it can do for your project Kickstarter’s potential for finding new supporters How many times I cried during the Stupid Magazine Kickstarter campaign and why

Automated Frontend TestingNeil Crosby

Front-End Testing: DemystifiedSeth McLaughlin

Cats, Dinosaurs and A Lot of Pizza with Reed + RaderFITC

(Re)aligning The Way 400,000 People ThinkFITC

A New Era for AnimatorsFITC

Managing The ProcessFITC

Components are the Future of the Web: It’s Going To Be OkayFITC

The Browser Is Dead, Long Live The Web!FITC

Getting to Know Grunt By Writing Your Own PluginFITC

It’s the Experience That Makes the Product, Not the FeaturesFITC

Front-end Tools: Sifting Through the MadnessFITC

Designing True Cross-Platform AppsFITC

Graphic Designer to Object Designer: Your 3D Printing EvolutionFITC

Upgrading the Web with Douglas Crockford @ FITC's Web Unleashed 2015FITC

Improving Game Performance in the BrowserFITC

5 Things Every Designer Should be Doing Right NowFITC

Functional Web DevelopmentFITC

Pocket web gl skFITC

Designing Interactive Experiences for Kids of All Ages with Mark ArgoFITC

Kickstarting Your Stupid MagazineFITC

Similar to Unit Testing Front End JavaScript (20)

Unit Testing - The Whys, Whens and Howsatesgoral

Unit Testing: The Whys, Whens and Hows discusses unit testing definitions, benefits, and best practices. It covers: - Defining what constitutes a unit test and different testing styles. Unit tests should be written by developers, run fast, be deterministic, and not integrate multiple areas of code. - Benefits of unit testing include better code quality, a safety net for refactoring, documentation of functionality, and preventing code from becoming untestable. - Characteristics of good unit tests like being functionally correct, running independently, running fast, and adding new tests for bugs fixed. Good code is more unit testable through interfaces, contracts, and low dependencies.

Angularjs - Unit testing introductionNir Kaufman

Angularjs Test Driven Development (TDD)Anis Bouhachem Djer

The document discusses test driven development for AngularJS applications. It describes problems with traditional front-end development approaches like jQuery manipulation and lack of structure. It then introduces tools for test driven AngularJS development including Node.js, NPM, Bower, Grunt, Jasmine, and Yeoman. Specific features and user stories are outlined for a task tracking application including displaying tasks, adding tasks, marking tasks as done, filtering by priority, searching tasks, and persisting data to a backend. Unit tests and end-to-end scenarios are written using these tools to drive the development of the application features.

Test-Driven Development of AngularJS ApplicationsFITC

The document discusses test driven development for AngularJS applications. It outlines problems with traditional front-end development approaches like jQuery manipulation and lack of structure/modularity. The solution presented uses Node.js, NPM, Bower, Grunt, Jasmine and other tools to automate tasks, add structure and enable testing. Features of an example task tracking app are developed using a test-first approach with end-to-end and unit tests. The app is built incrementally by splitting development into small features and writing tests for each.

Describe's Full of It'sJim Lynch

Unit-testing and E2E testing in JSMichael Haberman

Unit testing and end-to-end (E2E) testing are important types of automated testing for JavaScript applications. Unit tests focus on testing individual functions or components in isolation to catch bugs, while E2E tests ensure that user flows work as expected by interacting with the application through a browser. The presentation discussed setting up testing frameworks like Karma and Jasmine for unit testing and Protractor for E2E testing. It also covered writing testable code, handling dependencies through dependency injection, and selecting elements and interacting with them during E2E tests.

AngularJS Unit TestingPrince Norin

Angular testingRaissa Ferreira

BDD Testing and Automating from the trenches - Presented at Into The Box June...Gavin Pickin

ITB2016 -BDD testing and automation from the trenchesOrtus Solutions, Corp

JavaCro'14 - Unit testing in AngularJS – Slaven TomacHUJAK - Hrvatska udruga Java korisnika / Croatian Java User Association

Intro to Unit Testing in AngularJSJim Lynch

Unit Testing in Angular(7/8/9) Using Jasmine and Karma Part-2Katy Slemon

Intro To JavaScript Unit Testing - Ran MizrahiRan Mizrahi

The document introduces JavaScript testing and test-driven development (TDD). It discusses why software projects fail, challenges of testing JavaScript code, and how to use the Mocha and ChaiJS frameworks for TDD and behavior-driven development (BDD). It provides an example of writing unit tests for a user service function using TDD principles, implementing the code to pass the tests, and running the tests with Mocha. Benefits of testing code include short feedback cycles, high test coverage, documentation of specifications, and less time spent debugging.

Unit testing in JavaScript with Jasmine and KarmaAndrey Kolodnitsky

Unit testing frameworks like Jasmine and Mocha can be used to write unit tests in Angular. Jasmine requires less setup and is fully BDD compliant. Tests are organized into describe blocks for test suites and it blocks for individual specs. Expectations are made using the expect function and matcher functions. Spies can mock and spy on functions. Karma is a test runner that runs tests across browsers and re-runs on file changes. It is configured via a karma.conf.js file. Unit tests validate controllers, services, and other application code. End-to-end tests using Protractor validate full user workflows and interactions.

An Introduction to the World of Testing for Front-End DevelopersFITC

Presented at Web Unleashed 2017. More info at www.fitc.ca/webu Presented by Haris Mahmood, Shopify Overview As front-end developers become more and more capable of building web applications, the value of testing front-end code is now more valuable than ever. Unfortunately, the testing ecosystem can be confusing, and daunting to those just getting started with the vast number of libraries and testing frameworks offering various tools and capabilities. This talk aims to navigate the world of testing front-end code, and provide steps for front-end developers to incorporate testing into their work and projects quickly and with ease! Objective Provide an introduction and overview of the world of testing for front-end development, and tips and steps to get started today. Target Audience Front-end developers with no or little experience with testing. Five Things Audience Members Will Learn Understanding on why testing is important What options exist for testing today What type of tests are best for what scenario How to assess what frameworks and libraries to use Steps on getting started with testing

FITC Web Unleashed 2017 - Introduction to the World of Testing for Front-End ...Haris Mahmood

The document provides an introduction to testing for front-end developers. It discusses why testing is important, common test types like unit, integration and functional tests, popular testing frameworks like Jest and Mocha, and how to set up a basic testing environment and write tests using Jest. It also covers test concepts like assertions, spies and stubs. An example movie app is used to demonstrate setting up Jest and writing tests to validate functions.

Javascript Testing with Jasmine 101Roy Yu

Js fwdays unit tesing javascript(by Anna Khabibullina)Anna Khabibullina

JS Frameworks Day April,26 of 2014DA-14

Unit Testing in Javascript The way to quality product isn't easy or simple but it is reachable. One of the key things to do is unit testing. What, when and how to do it --> read in the presentation. See more details here: http://www.slideshare.net/AnnaKhabibullina/jsfwdays-2014unittesingjavascriptv4-33966202 Read about this and other techtalks @ DA-14 in our blog: http://da-14.com/our-blog/

Unit Testing - The Whys, Whens and Howsatesgoral

Angularjs - Unit testing introductionNir Kaufman

Angularjs Test Driven Development (TDD)Anis Bouhachem Djer

Test-Driven Development of AngularJS ApplicationsFITC

Describe's Full of It'sJim Lynch

Unit-testing and E2E testing in JSMichael Haberman

AngularJS Unit TestingPrince Norin

Angular testingRaissa Ferreira

BDD Testing and Automating from the trenches - Presented at Into The Box June...Gavin Pickin

ITB2016 -BDD testing and automation from the trenchesOrtus Solutions, Corp

JavaCro'14 - Unit testing in AngularJS – Slaven TomacHUJAK - Hrvatska udruga Java korisnika / Croatian Java User Association

Intro to Unit Testing in AngularJSJim Lynch

Unit Testing in Angular(7/8/9) Using Jasmine and Karma Part-2Katy Slemon

Intro To JavaScript Unit Testing - Ran MizrahiRan Mizrahi

Unit testing in JavaScript with Jasmine and KarmaAndrey Kolodnitsky

An Introduction to the World of Testing for Front-End DevelopersFITC

FITC Web Unleashed 2017 - Introduction to the World of Testing for Front-End ...Haris Mahmood

Javascript Testing with Jasmine 101Roy Yu

Js fwdays unit tesing javascript(by Anna Khabibullina)Anna Khabibullina

JS Frameworks Day April,26 of 2014DA-14

More from FITC (20)

Cut it upFITC

1) The document discusses code splitting strategies for bundling JavaScript applications, including route-based code splitting, splitting on-demand components, and using the Split Chunks plugin. 2) It recommends optimizing lazy loading through techniques like prefetching and using IntersectionObserver to preload resources the user may visit. 3) The key code splitting strategies discussed are route-based splitting, splitting common dependencies, and splitting asynchronous or on-demand components.

Designing for Digital HealthFITC

Presented at Web Unleashed 2019 More info at www.fitc.ca/webu Andréa Crofts League Overview Examining our responsibility as creators to design for disconnection. The “restore connection” alert isn’t just for devices– it applies to people too. And it’s more important now than ever before. Digital creators, we need to talk. The rise in mental health as a result of situational stress is a prevailing theme in today’s society, and some of the products we’re building are the root cause. But we have the power to change this. As creators of digital products, how might we enable our users to be more present in their lives? How might we invest in features like Instagram’s activity timer, despite the fact that they’re fundamentally counterintuitive to the usage metrics most behemoth tech companies are driving towards? We have a responsibility as creators of digital products to enable others to disconnect …and re-connect with themselves, physically and mentally. This intersection is an emerging category Andrea likes to call digital health, and it’s something we can create together. Objective To share actionable strategies, principles and considerations for designing with digital health top of mind. Andrea will get into some #realtalk about how we can collectively create more balance and presence for the humans using our products. Target Audience Designers and digital creators of all kinds – especially those building digital products at scale! Level Open to audience members of any skill level (this is a more high-level talk) Five Things Audience Members Will Learn Tips and best-in-class examples of designing for digital health Design guidelines and principles for designing with digital health in mind Evidence-based practices to ground your future design decisions Strategies for re-framing the success metrics of digital products Design ethics resources

Profiling JavaScript PerformanceFITC

Presented at Web Unleashed 2019 More info at www.fitc.ca/webu Luke DeWitt REDspace Overview JavaScript’s popularity has exploded over the last decade, taking it from a laughable scripting language to one that powers much of the web today. Because it’s so flexible and so easy to learn, it’s extremely popular with new developers looking to cut their teeth in programming. However, these strengths are also weaknesses, as it’s incredibly easy to write bad JavaScript without even knowing it. A lot of these newer developers jump from “Hello, World!”, to TodoMVC in order to find the library that makes their life easier. By doing this, they skip over some of the important details of not only how JavaScript works, but also how to optimize its performance to ensure the best user experience. The Chrome profiler is a very handy tool that not a lot of developers have experience with. In this talk, we’ll take a beginner’s look at the profiler tool and examine how to use it to best improve your web application, and identify bottlenecks in your code without having to rely only on console.log statements. Objective To help developers understand how to better make use of the JavaScript profiler. Target Audience Any JavaScript developers Assumed Audience Knowledge Basic JavaScript Level Beginner / intermediate Five Things Audience Members Will Learn Javascript inner-workings Profiling concepts Identifying bottlenecks Profiling node applications Tooling

Surviving Your Tech StackFITC

presented at Web Unleashed 2019 For more info see https://fitc.ca/event/webu19/ Kevin Daly RBC Ventures Every developer has faced the difficult choice of deciding what tech stack they should use for a new project. Should you use the latest tech or something that everyone knows? Which framework is the best for your team? To survive your tech stack, developers must make trade-offs with developing on new tech stacks and the ability to maintain and scale their applications. In this presentation, you’ll learn how to evaluate your tech stack and understand the pros and cons of using bleeding edge technology. Using his past experiences, Kevin will also share his lessons learned and how his team tackles managing their tech stack today.

How to Pitch Your First AR ProjectFITC

Presented at FITC Toronto 2019 More info at www.fitc.ca/toronto Bushra Mahmood Unity Technologies Overview In this talk, Bushra Mahmood will explain how to articulate and pitch augmented reality as a viable medium to help solve problems. Learn about what makes an AR application come together on both mobile devices and headsets. Uncover different tools and methodologies for problem-solving and making a compelling story. By properly understanding this technology and its parts, creatives can take an active role in shaping and defining this new space in computing. Objective Learn the tools and techniques required to pitch an augmented reality project. Target Audience Designers, product managers, product stakeholders. Assumed Audience Knowledge An understanding of product design and an awareness of AR Five Things Audience Members Will Learn The right language to use when explaining ‘spatial’ design The different requirements and considerations for scoping an AR project The tools that are currently available for AR authoring Insights into what the near and far future will hold for this medium. An example of an AR application pitch

Start by Understanding the Problem, Not by Delivering the AnswerFITC

Presented at FITC Toronto 2019 More info at www.fitc.ca/toronto Karri Ojanen RBC Royal Bank of Canada Overview Over the past number of years companies have adopted the idea of customer-centricity. People across functions can fluently talk about the importance of paying special attention to end-user needs and overall customer experience. But innovation and forward-thinking ideas that connect both customer and business needs can’t simply be squeezed out of brainstorm sessions and sticky notes if the organization doesn’t learn how to effectively look outside of its own silos. In this session, Karri will show how to move from jumping to solutions to driving innovation by understanding the question first. Target Audience Designers, researchers, strategists, product managers, and technology leads Three Things Audience Members Will Learn Methodologies and tools to form insights out of a holistic understanding of customer challenges How to synthesize data to form a vision of the better future How to break the vision into manageable chunks that drive value for the business and the customer at every launch

Cocaine to Carrots: The Art of Telling Someone Else’s StoryFITC

Presented at FITC Toronto 2019 More info at www.fitc.ca/toronto Alan Williams Imaginary Forces Overview During dailies as an intern at Imaginary Forces, Alan’s director, Karin Fong, would follow her animation feedback with one of the scariest and empowering questions of his career, “what do you think?” Over the last eight years, Alan’s transition from technician to creative director came from a dramatic shift in how he approached and answered that question. By examining larger conceptual principles to practical application in commercial and tv/film design, such as HBO’s Vinyl and Netflix’s Anne with an E, he will share hard-learned lessons that can empower you, whether in Photoshop, behind a camera, or pitching to clients, in developing and selling your creative voice. Target Audience Visual communicators eager to become more evocative storytellers Five Things Audience Members Will Learn ‘Method branding’ in a selfie culture O.C.D. (observe, collect, dissect) & the imagination The resuscitating power of rearrangement Pertinence vs pipeline: the crippling cage of routine Less pitching, more poetry

Everyday InnovationFITC

Everyday innovation is defined as a daily process of introducing new ideas, devices, or methods through small improvements. There are different types of innovation, including empowering, sustaining, efficiency, and disruptive innovation. Everyday innovation focuses on making incremental improvements through collaboration, identifying opportunities by listening for user needs, and building habits of innovation. Effective collaboration and feedback are important to driving everyday innovation, with feedback working best when it is specific, goal-oriented, organized, relevant and timely.

HyperLight WebsitesFITC

Presented at FITC Toronto 2019 More info at www.fitc.ca/toronto Chris Zacharias imgix Overview The average website loads over 1.5MBs of content per page, making over 75 requests. Many popular websites are serving over 5MBs just to load their homepages. And these numbers represent measurements taken AFTER compression is applied. The full weight of many popular websites is pushing 20+ MBs these days. In an era where performance truly matters to the end user experience, web developers need techniques to help curtail this bloat in data down the wire. No matter how well you optimize, there is no better way to than to delete things you do not need. How does one determine what is essential to the user experience and what is not? One answer Chris posits is to develop a hyper-lightweight version of your website which will provide critical insights into your specific performance priorities. This is a process that he has leveraged on many projects, in particular at YouTube to reduce the size of the video watch page from 1.5MBs to 100KBs. In this talk, Chris will take real-world web pages and show techniques for dramatically reducing their page weight and for identifying areas to optimize, while outlining the key steps to doing this well. Objective Learn a process for building a hyper-lightweight version of your website for establishing reasonable performance budgets, grounded in reality, to work from. Target Audience Web developers Assumed Audience Knowledge HTML, CSS, Javascript, some server-side awareness. Level Intermediate Five Things Audience Members Will Learn How to analyze a web page for performance issues A holistic approach to deconstructing an existing website A clear process for building a hyper-lightweight version of your website Translating your findings into real performance priorities Establishing a realistic performance budget

Everything is TerrifyingFITC

Presented at FITC Toronto 2019 More info at www.fitc.ca/toronto Michael Fullman VT Pro Design Overview An exploration of the process of creation. We live in a time where technology and inspiration are more readily available and accessible than ever before. That being said we also live in a time that mostly highlights the successes of projects and process. In this particular talk Michael wants to touch on the process of creation with technology at VT Pro, to further explore a full circle approach to inspiration and creation where often times our next project is inspired by something learned in the process of creating something else. By exploring what went wrong and what went right in a number of different projects he’s created, Michael will touch on points where inspiration can be found in this world of seemingly endless technology; the importance of collaboration; what can be learned from the moments that don’t necessarily go as planned; and how often projects come close to failure than the audience ever knows. Lastly he wants to touch on the process of finding personal inspiration to inspire an audience, and the momentum to push further that comes from their energy. Objective Things often don’t go as planned, but often that’s the fun part. Target Audience Creative technologists and experience designers Five Things Audience Members Will Learn Collaborative process Giving personality to a piece of technology How to learn from the unexpected We all start somewhere (the journey is just as important as the destination) Everything is possible now

Post-Earth Visions: Designing for Space and the Future HumanFITC

Presented at FITC Toronto 2019 More info at www.fitc.ca/toronto Sands Fish MIT Media Lab Overview Today, the environments that humans occupy in space are designed for survival. Humans are carefully shuttled to and from space, and during their relatively short stays, they are provided with minimum supplies to remain alive and able to perform experiments. As we begin to plan less for short visits and more for life in space (such as a six to eight month trip to Mars and beyond) the question becomes: What does human culture look like in space? This talk will explore how human culture, design, and creativity might evolve as we begin to live in space, and the unique environmental conditions that might guide us in certain directions, just as the environment on Earth has. It will discuss space tourism, living in zero gravity, and some experiments in art and design that hint at future aesthetics. Objective Convey what opportunities exist at the outset of a more democratized New Space age, and call out the aesthetics, ethics, and cultural frontiers we find ourselves faced with at the end of the second decade of this century. Target Audience Those interested in the future of human life in space Five Things Audience Members Will Learn The history of human culture in space Unique design constraints and considerations when designing for zero gravity The experience of flying in a zero-g flight The aesthetics at play in human spacefaring — (what has been) New forms, new materials, new ideas — (what might be)

The Rise of the Creative Social Influencer (and How to Become One)FITC

Presented at FITC Toronto 2019 More info at www.fitc.ca/toronto Lindsay Munro Adobe XD Overview Your social network could be more valuable than the work you’re doing today, because it could (and should) lead to the opportunities you get tomorrow. Your next post could result in your next recommendation, job, collaboration, exhibit, and next level experience. In this session, you’ll learn how to hone and build your online social media presence to attract brands and engage in the modern-day endorsement deal. Get a behind-the-scenes perspective on the things brands look for in creative profiles and the rules of engagement. Objective Teach the ins and outs of what it means to be a creative social influencer. Target Audience Creatives looking to up level their social media presence and strike brand partnerships. Things Audience Members Will Learn How to set yourself up for “success” on social media The importance of working with the right brands Figuring out compensation and negotiating contracts The ins and outs of disclosure and liability How to not mess it up

East of the Rockies: Developing an AR GameFITC

Presented at FITC Toronto 2019 More info at www.fitc.ca/toronto Amelie Rosser Jam3 Overview For the past two years Jam3 worked alongside Joy Kogawa and the NFB to create East of the Rockies, an augmented reality storytelling experience. East of the Rockies is the first interactive AR game of its kind. The story takes users through a piece of Canadian history where Japanese Canadians were forced to leave their homes and live at internment camps during WWII. This talk will cover the creation of the game: from concept and storyboarding, to the development process in Unity and various challenges and questions to consider from a creator’s perspective. Objective To let the audience in on the behind the scenes of developing an AR experience like East of the Rockies. Target Audience For those interested in Augmented Reality storytelling and game development. Five Things Audience Members Will Learn AR techniques using Unity Storytelling in AR Prototyping interactions in AR Game state management using Unidux Game optimization techniques in Unity

Creating a Proactive Healthcare SystemFITC

The Knowledge Society: Three Talks About the Future Futurism Innovation Science Isabella Grandic The Knowledge Society Overview Join three incredible, young, and brilliant minds as they present their findings on topics that we’ll all have to deal with in the not so distant future. This series of talks will explore how exponential technologies like synthetic farming, nanotechnology, and quantum computing can be used to solve some of the world’s most difficult problems. The speakers are all students of The Knowledge Society (TKS), a human accelerator for high school students designed to help them impact billions. TKS encourages students to take risks and think big. Ayaan Esmail‘s talk will cover creating a proactive healthcare system

World Transformation: The Secret Agenda of Product DesignFITC

R.C. Woodmass Crescendo Overview The reports are in: how we relate to technology directly affects how we relate to other humans, to our environments, and to ourselves. Are we headed for a technological dystopia, where robots are in charge and empathy is just a word for the history books? Not necessarily! Learn how the interfaces we interact with can teach us how to be better communicators, increase our understanding of each other, and how product design might be the key to building a positive future for all. Objective Directly address fear and skepticism about technology, inspiring all who design and build tech to think more empathetically when building UX and UI. Target Audience Product designers, HR specialists, and anyone skeptical about technology Three Things Audience Members Will Learn How to create user interfaces that are flexible enough to include everyone, even if they can’t keep up with all the different identities and new labels that people are using What is conversation design, and how it has the power to teach people how to communicate How AI has the potential to be more inclusive than previous data analysis systems, if we leverage its weaknesses to the human advantage

The Power of NowFITC

High Performance PWAsFITC

Hasan Ahmad Aquent DEV6 Overview PWAs are a newly emerging delivery format for web, desktop apps. The fact that they can be installed on a client device and behave like natively installed apps means that special care should be taken when designing and building these types of apps, above and beyond a typical browser-only web application. One of the most important (potential) differentiators in the user experience of a PWA app vs a traditional web app is the ability to provide a high-performance UI because of their ability to do things like cache resources offline, including entire pieces of Web UI code, and the use of background services. In this talk we are going to do an exhaustive overview of the entire landscape of building PWAs from a performance-first perspective. Target Audience Web development teams Assumed Audience Knowledge Web Development fundamentals Objective Large enterprise applications Five Things Audience Members Will Learn Why PWA’s require performance engineering What tools are available to measure performance metrics Offline caching strategies Host device considerations: desktop and mobile Taking advantage of background code: Service Workers

Rise of the JAMstackFITC

The document discusses the rise of the JAMstack, which stands for JavaScript, APIs, and Markup. It describes how the JAMstack architecture uses static sites, content managed by headless CMSes, and APIs to provide performance and security benefits compared to traditional monolithic frameworks. Key advantages of the JAMstack include faster load times, higher security since there are fewer moving parts, and easier scalability using CDNs. The document outlines the various ingredients that make up the JAMstack like static site generators, hosting providers, and serverless functions, and provides examples of how popular sites have benefited from adopting this architecture.

From Closed to Open: A Journey of Self DiscoveryFITC

Midge “Mantissa” Sinnaeve Mantissa Overview Midge will be speaking about his experience of switching to open source applications for his freelance work. From ditching expensive software subscriptions to going down the linux rabbit hole, he’ll take you along for the ride and show you some cool stuff along the way. It’s an in-depth look at what happens when your digital tools become an extension of yourself and how that can in turn inspire you to get better as an artist and find your style. Objective Taking a critical look at how you work and why. Target Audience (Motion) designers, 3D & VFX artists Four Things Audience Members Will Learn Open Source Design Tools Self-criticism Inspiration Letting go

Projects Ain’t Nobody Got Time ForFITC

Cut it upFITC

Designing for Digital HealthFITC

Profiling JavaScript PerformanceFITC

Surviving Your Tech StackFITC

How to Pitch Your First AR ProjectFITC

Start by Understanding the Problem, Not by Delivering the AnswerFITC

Cocaine to Carrots: The Art of Telling Someone Else’s StoryFITC

Everyday InnovationFITC

HyperLight WebsitesFITC

Everything is TerrifyingFITC

Post-Earth Visions: Designing for Space and the Future HumanFITC

The Rise of the Creative Social Influencer (and How to Become One)FITC

East of the Rockies: Developing an AR GameFITC

Creating a Proactive Healthcare SystemFITC

World Transformation: The Secret Agenda of Product DesignFITC

The Power of NowFITC

High Performance PWAsFITC

Rise of the JAMstackFITC

From Closed to Open: A Journey of Self DiscoveryFITC

Projects Ain’t Nobody Got Time ForFITC

Recently uploaded (20)

MOBILE PHONE DATA presentation with all necessary detailsbenamorraj

LpQuantueer rtwrt 1e erere errerqer m.pptcyberesearchprof

Cloud Computing - iCloud by Hamza Anwaar .pptxislamicknowledge5224

Cloud Computing – iCloud Cloud computing is a modern technology that allows users to store and access data over the internet instead of using local storage devices. One of the most popular cloud services is Apple's iCloud, which is specially designed for Apple users. iCloud helps users keep their data safe, accessible, and synchronized across all Apple devices like iPhones, iPads, and MacBooks. It is simple to use, secure, and saves time by automatically backing up important information.

Inter-Mirifica-Navigating-Media-in-the-Modern-World.pptxsecretarysocom

On Dec. 4, 1963, the Second Vatican Council solemnly approved its first two documents: the constitution on the Sacred Liturgy, Sacrosanctum Concilium, and the decree Inter Mirifica, regarding the mass media. The latter document is much less known than the former one. Nonetheless, Inter Mirifica offers some crucial principles to guide us in a world where we find ourselves ever more immersed in mass communication: the press, film, television, along with the newer forms of media. During the preparation for Vatican II, the Church keenly realized the importance of this topic, and Pope John XXIII established a special body to work on a text that might articulate the Church’s teaching on the mass media and promote her action in this area. The result of this work was an extensive document, entitled “On the instruments of social communication,” which was presented to the Council on Nov. 23, 1962.

AI theory work for students to understand the logicareeba15775n

Unlocking Business Growth Through Targeted Social EngagementDigital Guider

Facebook marketing allows businesses to connect with their ideal audience through precise targeting and engaging content. By leveraging advanced tools like custom audiences, Facebook Ads, and real-time analytics, brands can build strong relationships, increase visibility, and drive measurable results. It’s not just about reaching people—it’s about reaching the right people and turning engagement into growth. https://digitalguider.com/digital-advertising/facebook-advertising-services/

DDos Mitigation Strategie, presented at bdNOG 19APNIC

Internet & Protocols : A Blueprint of the Internet Systemcpnabil59

Internet & Protocols: A Blueprint of the Internet System by Nabil Bin Billal is a comprehensive and ambitious guide that unravels the complexity of how the internet works—layer by layer, protocol by protocol, and service by service. This book is designed not just for students or developers, but for anyone curious about the inner structure and functionality of the digital world we depend on every day. Whether you're a beginner hoping to build foundational knowledge or a curious reader aiming to explore deeper layers of internet architecture, this book serves as a solid blueprint. From the basics of the internet and its protocols to the intricate systems behind servers, databases, hosting, and DNS, the book journeys through every major layer of online connectivity. It explores technologies like TCP/IP, HTTP, DNS, and modern URL systems, helping readers understand how a simple web address leads to a complex interaction between multiple systems and services. With examples from real-life websites such as Apple.com, GitHub Pages, and Bidibo.xyz, concepts are explained clearly and practically. The book delves into backend processes, covering JavaScript-based interactivity, database integration, and dynamic routing. It then transitions into the world of domains and internet governance, introducing readers to ICANN, registrars, DNS root servers, and the fascinating history of domain name systems. It sheds light on the control structure of the internet, discussing why most digital infrastructure is based in the U.S. and how domain registration has evolved from a free service to a billion-dollar industry. Security plays a central role in the discussion, with detailed chapters on HTTPS, SSL/TLS, browser verification, and data encryption. It also takes a practical look at performance, introducing concepts like caching, CDNs, and load balancing to show how the modern web achieves speed and stability. The deep and dark web chapters provide insight into the vast unexplored parts of the internet, discussing how anonymity tools like Tor work and what lies beyond the surface web. A standout feature of the book is its treatment of search engines—both traditional and dark web variants—explaining crawling, indexing, noindex tags, ranking algorithms, and SEO basics. It demystifies how websites appear in Google search results and how metadata plays a key role. Readers are also introduced to the real-time internet, with chapters on IoT, cloud computing, NASA’s deep space networks, Wi-Fi, Bluetooth, Ethernet, and data transmission protocols. Detailed discussions cover IEEE standards, spectrum ranges, SIM card technology, mobile towers, and the very mechanics of electromagnetic communication.

What to Expect When Hiring Shopify Development Services_ A Technical Walkthro...CartCoders

3 years of Quarkus in production, what have we learned - Devoxx PolenJago de Vreede

Quarkus has grown in popularity in the last years, but what’s it really like to use it in large-scale, real-world business projects? In this session, we’ll move beyond the basics of "Hello World" to explore how to build enterprise-level applications with Quarkus efficiently. In this talk we will set up a multi-module project, incorporating integration tests and addressing the challenges with build times, while maintaining a high development velocity. Next, we’ll tackle an upgrade scenario and splitting the application into multiple microservices. Along the way, we’ll share hard-earned lessons, including what to avoid. At the end of the talk, you should have a good understanding of how to efficiently set up a “big” enterprise project with Quarkus and the confidence to get started.

UV_Unwrapping_Lecture_with_Figures.pptx presentation for lecture of animation17218

最新版西班牙加泰罗尼亚国际大学毕业证（UIC毕业证书）原版定制Taqyea

挂科无法毕业鉴于此购买文凭【q薇1954292140】一比一原版(UIC毕业证)加泰罗尼亚国际大学毕业证如何办理改成绩单GPA，文凭购买，毕业证办理，文凭办理只是基础业务。【q薇1954292140】一比一还原国外大学毕业证，定制国外大学学历，制作国外大学文凭，复刻国外大学毕业证书。学位证1:1完美还原海外各大学毕业材料上的工艺：水印，阴影底纹，钢印LOGO烫金烫银，LOGO烫金烫银复合重叠。文字图案浮雕、激光镭射、紫外荧光、温感、复印防伪等防伪工艺。【办理加泰罗尼亚国际大学成绩单Buy Universitat Internacional de Catalunya Transcripts】购买日韩成绩单、英国大学成绩单、美国大学成绩单、澳洲大学成绩单、加拿大大学成绩单（q微1954292140）新加坡大学成绩单、新西兰大学成绩单、爱尔兰成绩单、西班牙成绩单、德国成绩单。成绩单的意义主要体现在证明学习能力、评估学术背景、展示综合素质、提高录取率，以及是作为留信认证申请材料的一部分。加泰罗尼亚国际大学成绩单能够体现您的的学习能力，包括加泰罗尼亚国际大学课程成绩、专业能力、研究能力。（q微1954292140）具体来说，成绩报告单通常包含学生的学习技能与习惯、各科成绩以及老师评语等部分，因此，成绩单不仅是学生学术能力的证明，也是评估学生是否适合某个教育项目的重要依据！ Buy Universitat Internacional de Catalunya Diploma《正式成绩单论文没过》有文凭却得不到认证。又该怎么办？鉴于此，购买西班牙毕业证【q微1954292140】西班牙文凭购买，西班牙文凭购买，西班牙文凭定制，西班牙文凭补办。专业在线定制西班牙大学文凭，定做西班牙本科文凭，【q微1954292140】复制西班牙Universitat Internacional de Catalunya completion letter。在线快速补办西班牙本科毕业证、硕士文凭证书，购买西班牙学位证、加泰罗尼亚国际大学Offer，西班牙大学文凭在线购买。【主营项目】一、工作未确定，回国需先给父母、亲戚朋友看下文凭的情况，办理毕业证|办理加泰罗尼亚国际大学毕业证（UIC毕业证书）文凭: 买大学毕业证|买大学文凭【q薇1954292140】学位证明书如何办理申请？二、回国进私企、外企、自己做生意的情况，这些单位是不查询毕业证真伪的，而且国内没有渠道去查询国外文凭的真假，也不需要提供真实教育部认证。鉴于此，办理加泰罗尼亚国际大学毕业证【q薇1954292140】西班牙学位证（UIC毕业证书）加泰罗尼亚国际大学毕业证书如何办理国外大学毕业证, 文凭办理, 国外文凭办理, 留信网认证三.材料咨询办理、认证咨询办理加泰罗尼亚国际大学毕业证（UIC毕业证书）请加学历顾问【微信:1954292140】毕业证购买指大学文凭购买，毕业证办理和文凭办理。学院文凭定制，学校原版文凭补办，扫描件文凭定做，100%文凭复刻。经常操作的国家有美国毕业证，英国毕业证，澳洲毕业证，加拿大毕业证，以及德国毕业证，法国毕业证、荷兰毕业证、瑞士毕业证、日本毕业证、韩国毕业证、新西兰毕业证、新加坡毕业证、泰国毕业证、马来西亚毕业证等。包括了本科毕业证，硕士毕业证。

3D Graphics an introduction and details .pptxislamicknowledge5224

In order to install and use the device software, your computer must meet the ...raguclc

CBUSDAW - Ash Lewis - Reducing LLM HallucinationsJason Packer

Quantiuwewe e3er14e we3223 32222 m2.pptxcyberesearchprof

Timeline Infographics Para utilização diáriameslellis

simple-presentationtestingdocument2007.pptxashokjayapal

Vigilanti-Cura-Protecting-the-Faith.pptxsecretarysocom

On the 29th of June, 1936, Pius XI addressed a pontifical encyclical entitled "Vigilanti Cura" to all the Catholic bishops in the United States. This encyclical was dedicated to "The Motion Picture" and justified his intervention by "the lamentable progress of the motion picture art and industry in the portrayal of sin and vice". I've appropriated the title of his encyclical for my film, putting it to a completely different use to that originally intended. The 'photogenic quality' of the Latin terminology has, however, been preserved and, as per Adorno: "like a neon light which has just been switched on, the commercial and promotional nature of contemporary culture glows brightly". Vigilanti Cura is an irreverent film; insolent and deliberately confusing; a grab-bag of immorality. The montage combines a range of archival imagery from Humanite magazine with images sourced from the media (the military parade of the 14th of July, the current sorry crop of political celebrities ...) or from the cinema (the automatic writing of a puzzle composed of motifs borrowed from existing films). Vigilanti Cura ... or merely a tacit admission of the downfall of contemporary man, drowning in a sea of political, social and religious fundamentalisms. Where is he to be found? Locked in a vis-a-vis with depression and ego. Psychoanalysis no longer serves as a pretext for the dissolution of sexual and social taboos; it now provokes withdrawal into an auto-reflexive isolation, to the extent that societal problems get frozen in the mirror of Auto-Medusification. The mirror has become our idol - let's destroy it!

Predicting Site Quality Google Patent US9767157B2 - Behzad Hussain.pdfBehzad Hussain

𝐏𝐚𝐭𝐞𝐧𝐭 𝐈𝐧𝐟𝐨𝐫𝐦𝐚𝐭𝐢𝐨𝐧 𝗣𝗮𝘁𝗲𝗻𝘁 𝗡𝗼.: US9767157B2 𝗧𝗶𝘁𝗹𝗲: Predicting Site Quality 𝗔𝘀𝘀𝗶𝗴𝗻𝗲𝗲: Google Inc., Mountain View, CA 𝗜𝗻𝘃𝗲𝗻𝘁𝗼𝗿𝘀: Navneet Panda; Yun Zhou 𝗜𝘀𝘀𝘂𝗲 𝗗𝗮𝘁𝗲: September 19, 2017 𝐀𝐛𝐬𝐭𝐫𝐚𝐜𝐭 This patent describes methods and systems for automatically predicting a quality score for a website (or “site”) that can be used as a ranking signal in search engines: 1. 𝗕𝗮𝘀𝗲𝗹𝗶𝗻𝗲 𝘀𝗶𝘁𝗲 𝗾𝘂𝗮𝗹𝗶𝘁𝘆 𝘀𝗰𝗼𝗿𝗲𝘀 obtained for previously scored sites. 2. 𝗣𝗵𝗿𝗮𝘀𝗲 𝗺𝗼𝗱𝗲𝗹𝘀 that map phrase-specific relative frequency measures to baseline quality scores. 3. 𝗔𝗴𝗴𝗿𝗲𝗴𝗮𝘁𝗲 𝘀𝗰𝗼𝗿𝗶𝗻𝗴 of a new site by applying the phrase model to its phrase frequencies and then predicting its overall site quality score from the aggregate. 𝐒𝐲𝐬𝐭𝐞𝐦 𝐀𝐫𝐜𝐡𝐢𝐭𝐞𝐜𝐭𝐮𝐫𝐞 (𝐅𝐢𝐠. 𝟏) 1. 𝗨𝘀𝗲𝗿 𝗗𝗲𝘃𝗶𝗰𝗲 & 𝗡𝗲𝘁𝘄𝗼𝗿𝗸: Users submit queries via a device (e.g., browser) over a network. 2. 𝗦𝗲𝗮𝗿𝗰𝗵 𝗦𝘆𝘀𝘁𝗲𝗺: Contains an Indexing Engine (builds the index database) and a Ranking Engine (ranks results). 3. 𝗦𝗶𝘁𝗲 𝗦𝗰𝗼𝗿𝗶𝗻𝗴 𝗘𝗻𝗴𝗶𝗻𝗲: Computes site quality scores using the phrase model and provides these scores to the ranking engine as part of the ranking signals. 𝐏𝐡𝐫𝐚𝐬𝐞 𝐌𝐨𝐝𝐞𝐥 𝐆𝐞𝐧𝐞𝐫𝐚𝐭𝐢𝐨𝐧 (𝐅𝐢𝐠. 𝟐) 1. 𝗧𝗼𝗸𝗲𝗻𝗶𝘇𝗮𝘁𝗶𝗼𝗻 𝗮𝗻𝗱 𝗻-𝗴𝗿𝗮𝗺 𝗘𝘅𝘁𝗿𝗮𝗰𝘁𝗶𝗼𝗻: For each site in a corpus of previously scored sites, extract n-grams (typically 2- to 5-grams) from page content. 2. 𝗥𝗲𝗹𝗮𝘁𝗶𝘃𝗲 𝗙𝗿𝗲𝗾𝘂𝗲𝗻𝗰𝘆 𝗖𝗮𝗹𝗰𝘂𝗹𝗮𝘁𝗶𝗼𝗻: For each extracted n-gram, compute its relative frequency as the ratio of pages containing that n-gram to total pages on the site. 3. 𝗕𝘂𝗰𝗸𝗲𝘁 𝗣𝗮𝗿𝘁𝗶𝘁𝗶𝗼𝗻𝗶𝗻𝗴: Group sites into 20–100 buckets based on their relative frequency measures for each n-gram, ensuring roughly equal bucket sizes or equal interval ranges. 4. 𝗕𝗮𝘀𝗲𝗹𝗶𝗻𝗲 𝗦𝗰𝗼𝗿𝗲 𝗔𝗴𝗴𝗿𝗲𝗴𝗮𝘁𝗶𝗼𝗻: For each bucket, calculate an average baseline quality score from the known scores of sites in that bucket. 5. 𝗣𝗵𝗿𝗮𝘀𝗲 𝗠𝗼𝗱𝗲𝗹 𝗖𝗼𝗻𝘀𝘁𝗿𝘂𝗰𝘁𝗶𝗼𝗻: Associate each n-gram with its vector of bucket-average quality scores. Optionally exclude “neutral” phrases whose scores are statistically indistinguishable from the global average. 𝐒𝐢𝐭𝐞 𝐐𝐮𝐚𝐥𝐢𝐭𝐲 𝐏𝐫𝐞𝐝𝐢𝐜𝐭𝐢𝐨𝐧 𝐏𝐫𝐨𝐜𝐞𝐬𝐬 (𝐅𝐢𝐠. 𝟑) 1. 𝗥𝗲𝗹𝗮𝘁𝗶𝘃𝗲 𝗙𝗿𝗲𝗾𝘂𝗲𝗻𝗰𝘆 𝗳𝗼𝗿 𝗡𝗲𝘄 𝗦𝗶𝘁𝗲: Extract the same set of n-grams from the new (previously unscored) site and compute their relative frequencies. 2. 𝗕𝘂𝗰𝗸𝗲𝘁 𝗟𝗼𝗼𝗸𝘂𝗽: For each phrase, map its relative frequency to the corresponding bucket’s average score in the phrase model. 3. 𝗔𝗴𝗴𝗿𝗲𝗴𝗮𝘁𝗲 𝗦𝗰𝗼𝗿𝗲 𝗖𝗼𝗺𝗽𝘂𝘁𝗮𝘁𝗶𝗼𝗻: Compute an aggregate score across all phrases’ bucket scores—typically via a weighted or unweighted mean. Weights can reflect phrase frequency, distance from a “neutral” score, or limit the influence of overly frequent phrases.

MOBILE PHONE DATA presentation with all necessary detailsbenamorraj

LpQuantueer rtwrt 1e erere errerqer m.pptcyberesearchprof

Cloud Computing - iCloud by Hamza Anwaar .pptxislamicknowledge5224

Inter-Mirifica-Navigating-Media-in-the-Modern-World.pptxsecretarysocom

AI theory work for students to understand the logicareeba15775n

Unlocking Business Growth Through Targeted Social EngagementDigital Guider

DDos Mitigation Strategie, presented at bdNOG 19APNIC

Internet & Protocols : A Blueprint of the Internet Systemcpnabil59

What to Expect When Hiring Shopify Development Services_ A Technical Walkthro...CartCoders

3 years of Quarkus in production, what have we learned - Devoxx PolenJago de Vreede

UV_Unwrapping_Lecture_with_Figures.pptx presentation for lecture of animation17218

最新版西班牙加泰罗尼亚国际大学毕业证（UIC毕业证书）原版定制Taqyea

3D Graphics an introduction and details .pptxislamicknowledge5224

In order to install and use the device software, your computer must meet the ...raguclc

CBUSDAW - Ash Lewis - Reducing LLM HallucinationsJason Packer

Quantiuwewe e3er14e we3223 32222 m2.pptxcyberesearchprof

Timeline Infographics Para utilização diáriameslellis

simple-presentationtestingdocument2007.pptxashokjayapal

Vigilanti-Cura-Protecting-the-Faith.pptxsecretarysocom

Predicting Site Quality Google Patent US9767157B2 - Behzad Hussain.pdfBehzad Hussain

Unit Testing Front End JavaScript

1. UNIT TESTING FRONT END JAVASCRIPT YURI TAKHTEYEV @QARAMAZOV @RANGLEIO

2. Why Bother with Unit Tests?

3. Why Bother with Unit Tests?

4. TDD Lite

5. Writing Testable Code ☛ Modular code ☛ AngularJS services ☛ Other modules not entangled with DOM

6. Keeping Tests Simple

7. Common Tools Runner: Karma Task Automation: Gulp || Grunt Scorer: Mocha || Jasmine Assertions: Chai || Jasmine Spies: Sinon || Jasmin + CI tools (e.g. Magnum-CI)

8. http://yto.io/xunit

9. Installing the Example Code # First install git clone https://github.com/yuri/webu-unit.git cd webu-unit npm install sudo npm install -g gulp sudo npm install -g bower bower install # Now run gulp karma ☛ You’ll need to install git and node before

10. A Basic Test function isOdd(value) { return (value % 2 === 1); } describe('isEven', function () { it('should handle positive ints', function () { if (isOdd(2)) { throw new Error('2 should be even'); } }); }); ☛ Let’s put this in “client/app/is-odd.test.js”

11. Chai describe('isEven', function () { it('should handle positive ints', function () { expect(isOdd(1)).to.be.true; expect(isOdd(2)).to.be.false; expect(isOdd(3)).to.be.true; }); }); ☛ More Chai at http://chaijs.com/api/bdd/

12. Extending Tests describe('isEven', function () { ... it('should handle negative ints', function () { expect(isOdd(-1)).to.be.true; }); });

13. Extending Tests describe('isEven', function () { ... xit('should handle negative ints', function () { expect(isOdd(-1)).to.be.true; }); });

14. Extending Tests describe('isEven', function () { ... it.only('should handle negative ints', function () { expect(isOdd(-1)).to.be.true; }); });

15. Extending Tests describe('isEven', function () { ... it('should handle negative ints', function () { expect(isOdd(-1)).to.be.true; }); }); function isOdd(value) { return (value % 2 === 1); }

16. Testing a Service angular.module('app.tasks', [ 'app.server' ]) .factory('tasks', function(server) { var service = {}; service.getTasks = function () { return server.get('tasks'); }; return service; }); ☛ Let’s put this in “client/app/tasks-service.js”

17. The Test, Take 1 describe('tasks service', function () { beforeEach(module('app.tasks')); it('should get tasks', function() { var tasks = getService('tasks'); expect(tasks.getTasks()).to .not.be.undefined; }); }); ☛ Let’s put this in “client/app/tasks-service.test.js” ☛ See “client/testing/test-utils.js” for implementation of getService(). Error: [$injector:unpr] Unknown provider: serverProvider <- server <- tasks

18. Mocking Dependencies var data; beforeEach(module(function($provide){ $provide.service('server', function() { return { get: function() { return Q.when(data); } }; }); $provide.service('$q', function() { return Q; }); })); Chrome 37.0.2062 (Mac OS X 10.9.4): Executed 3 of 3 SUCCESS (0.046 secs / 0.027 secs)

19. Let’s Extend the Service service.getMyTasks = function () { return server.getTasks() .then(function(taskArray) { return _.filter(taskArray, function(task) { return task.owner === user.userName; }); }); }; ☛ We’ll need to inject “user” into the service

20. Mocking the User $provide.service('user', function() { return { username: 'yuri' }; }); ☛ The mock can be very simple

21. An Async Test, Wrong it('should get user's tasks', function() { var tasks = getService('tasks'); data = [{ owner: 'bob', description: 'Mow the lawn' }, { owner: 'yuri', description: 'Save the world' }]; tasks.getMyTasks() .then(function(myTasks) { expect(myTasks.length).to.equal(1); }); }); ☛ Always check that “wrong” tests fail!

22. An Async Test, Right it('should get user's tasks', function() { var tasks = getService('tasks'); data = [{ owner: 'bob', description: 'Mow the lawn' }, { owner: 'yuri', description: 'Save the world' }]; return tasks.getMyTasks() .then(function(myTasks) { expect(myTasks.length).to.equal(1); }); });

23. Spies with Sinon $provide.service('server', function() { return { get: sinon.spy(function() { return Q.when(data); }) }; }); var server = getService('server'); return tasks.getMyTasks() .then(function(myTasks) { expect(myTasks.length).to.equal(1); server.get.should.have.been.calledOnce; });

24. Thank You. Contact: [email protected] http://yto.io @qaramazov This presentation: http://yto.io/xunit

25. Image Credits by dunechaser by lincolnblues by spenceyc by creative_tools by mycroyance by angeljimenez by snre

Unit Testing Front End JavaScript

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Unit Testing Front End JavaScript (20)

More from FITC (20)

Recently uploaded (20)

Unit Testing Front End JavaScript