Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Jumping Into Front-End Testing

Jumping Into Front-End Testing

Talking about unit, integration, and visual regression testing given at Up Front Conf in Manchester, England, 2015.

Alicia Sedlock

May 29, 2015
Tweet

More Decks by Alicia Sedlock

Other Decks in Technology

Transcript

  1. describe(“Calculator Operations”, function () { it(“Should add two numbers”, function

    () { Calculator.init(); var result = Calculator.addNumbers(7,3); expect(result).toBe(10); }); });
  2. describe(“Calculator Operations”, function () { it(“Should add two numbers”, function

    () { Calculator.init(); var result = Calculator.addNumbers(7,3); expect(result).toBe(10); }); });
  3. describe(“Calculator Operations”, function () { it(“Should add two numbers”, function

    () { Calculator.init(); var result = Calculator.addNumbers(7,3); expect(result).toBe(10); }); });
  4. describe(“Calculator Operations”, function () { it(“Should add two numbers”, function

    () { Calculator.init(); var result = Calculator.addNumbers(7,3); expect(result).toBe(10); }); });
  5. it(“Should remember the last calculation”, function () { spyOn(Calculator, “updateCurrentValue”);

    Calculator.addNumbers(7,10); expect(Calculator.updateCurrentValue).toHaveBeenCalled(); expect(Calculator.updateCurrentValue) .toHaveBeenCalledWith(17); expect(Calculator.currentValue).toBe(17); });
  6. it(“Should remember the last calculation”, function () { spyOn(Calculator, “updateCurrentValue”);

    Calculator.addNumbers(7,10); expect(Calculator.updateCurrentValue).toHaveBeenCalled(); expect(Calculator.updateCurrentValue) .toHaveBeenCalledWith(17); expect(Calculator.currentValue).toBe(17); });
  7. it(“Should remember the last calculation”, function () { spyOn(Calculator, “updateCurrentValue”);

    Calculator.addNumbers(7,10); expect(Calculator.updateCurrentValue).toHaveBeenCalled(); expect(Calculator.updateCurrentValue) .toHaveBeenCalledWith(17); expect(Calculator.currentValue).toBe(17); });
  8. it(“Should remember the last calculation”, function () { spyOn(Calculator, “updateCurrentValue”);

    Calculator.addNumbers(7,10); expect(Calculator.updateCurrentValue).toHaveBeenCalled(); expect(Calculator.updateCurrentValue) .toHaveBeenCalledWith(17); expect(Calculator.currentValue).toBe(17); });
  9. it(“Should remember the last calculation”, function () { spyOn(Calculator, “updateCurrentValue”);

    Calculator.addNumbers(7,10); expect(Calculator.updateCurrentValue).toHaveBeenCalled(); expect(Calculator.updateCurrentValue) .toHaveBeenCalledWith(17); expect(Calculator.currentValue).toBe(17); });
  10. Unit tests • Test tiny pieces of code • Validations,

    calculations, etc. • Pairs well with functional requirements
  11. describe(“Integration tests”, function () { var page; beforeEach(function (done) {

    page = visit(“/home”); page.ready(done); }); describe(“Failure state”, function () { beforeEach(function (done) { page.fill_in(“input[name='email']", “Not An Email”); page.click(“button[type=submit]”); page.onBodyChange(done); }); it(“Shouldn’t allow invalid information”, function () { expect(page.find(“#signupError”) .hasClass(“hidden”)).toBeFalsy(); }); }); });
  12. describe(“Integration tests”, function () { var page; beforeEach(function (done) {

    page = visit(“/home”); page.ready(done); }); describe(“Failure state”, function () { beforeEach(function (done) { page.fill_in(“input[name='email']", “Not An Email”); page.click(“button[type=submit]”); page.onBodyChange(done); }); it(“Shouldn’t allow invalid information”, function () { expect(page.find(“#signupError”) .hasClass(“hidden”)).toBeFalsy(); }); }); });
  13. describe(“Integration tests”, function () { var page; beforeEach(function (done) {

    page = visit(“/home”); page.ready(done); }); describe(“Failure state”, function () { beforeEach(function (done) { page.fill_in(“input[name='email']", “Not An Email”); page.click(“button[type=submit]”); page.onBodyChange(done); }); it(“Shouldn’t allow invalid information”, function () { expect(page.find(“#signupError”) .hasClass(“hidden”)).toBeFalsy(); }); }); });
  14. describe(“Integration tests”, function () { var page; beforeEach(function (done) {

    page = visit(“/home”); page.ready(done); }); describe(“Failure state”, function () { beforeEach(function (done) { page.fill_in(“input[name='email']", “Not An Email”); page.click(“button[type=submit]”); page.onBodyChange(done); }); it(“Shouldn’t allow invalid information”, function () { expect(page.find(“#signupError”) .hasClass(“hidden”)).toBeFalsy(); }); }); });
  15. describe(“Integration tests”, function () { var page; beforeEach(function (done) {

    page = visit(“/home”); page.ready(done); }); describe(“Success state”, function () { beforeEach(function (done) { page.fill_in(“input[name='email']", “[email protected]”); page.click(“button[type=submit]”); page.onBodyChange(done); }); it(“Shouldn’t allow invalid information”, function () { expect(page.find(“#signupSuccess”) .hasClass(“hidden”)).toBeFalsy(); }); }); });
  16. describe(“Integration tests”, function () { var page; beforeEach(function (done) {

    page = visit(“/home”); page.ready(done); }); describe(“Success state”, function () { beforeEach(function (done) { page.fill_in(“input[name='email']", “[email protected]”); page.click(“button[type=submit]”); page.onBodyChange(done); }); it(“Shouldn’t allow invalid information”, function () { expect(page.find(“#signupSuccess”) .hasClass(“hidden”)).toBeFalsy(); }); }); });
  17. casper.start(“/home”).then(function(){ // Initial state of form phantomcss .screenshot(“#signUpForm”, “sign up

    form”); // Hit the sign up button (should trigger error) casper.click(“button#signUp”); // Take a screenshot of the UI component phantomcss .screenshot(“#signUpForm”, “sign up form error”); // Fill in form by name attributes & submit casper.fill(“#signUpForm”, { name: “Alicia Sedlock”, email: “[email protected]” }, true); // Take a second screenshot of success state phantomcss .screenshot(“#signUpForm”, “sign up form success”); });
  18. casper.start(“/home”).then(function(){ // Initial state of form phantomcss .screenshot(“#signUpForm”, “sign up

    form”); // Hit the sign up button (should trigger error) casper.click(“button#signUp”); // Take a screenshot of the UI component phantomcss .screenshot(“#signUpForm”, “sign up form error”); // Fill in form by name attributes & submit casper.fill(‘#signUpForm', { name: ‘Alicia Sedlock’, email: ‘[email protected]’ }, true); // Take a second screenshot of success state phantomcss .screenshot(“#signUpForm”, “sign up form success”); });
  19. casper.start(“/home”).then(function(){ // Initial state of form phantomcss .screenshot(“#signUpForm”, “sign up

    form”); // Hit the sign up button (should trigger error) casper.click(“button#signUp”); // Take a screenshot of the UI component phantomcss .screenshot(“#signUpForm”, “sign up form error”); // Fill in form by name attributes & submit casper.fill(‘#signUpForm', { name: ‘Alicia Sedlock’, email: ‘[email protected]’ }, true); // Take a second screenshot of success state phantomcss .screenshot(“#signUpForm”, “sign up form success”); });
  20. casper.start(“/home”).then(function(){ // Initial state of form phantomcss .screenshot(“#signUpForm”, “sign up

    form”); // Hit the sign up button (should trigger error) casper.click(“button#signUp”); // Take a screenshot of the UI component phantomcss .screenshot(“#signUpForm”, “sign up form error”); // Fill in form by name attributes & submit casper.fill(‘#signUpForm', { name: ‘Alicia Sedlock’, email: ‘[email protected]’ }, true); // Take a second screenshot of success state phantomcss .screenshot(“#signUpForm”, “sign up form success”); });
  21. casper.start(“/home”).then(function(){ // Initial state of form phantomcss .screenshot(“#signUpForm”, “sign up

    form”); // Hit the sign up button (should trigger error) casper.click(“button#signUp”); // Take a screenshot of the UI component phantomcss .screenshot(“#signUpForm”, “sign up form error”); // Fill in form by name attributes & submit casper.fill(‘#signUpForm', { name: ‘Alicia Sedlock’, email: ‘[email protected]’ }, true); // Take a second screenshot of success state phantomcss .screenshot(“#signUpForm”, “sign up form success”); });
  22. casper.start(“/home”).then(function(){ // Initial state of form phantomcss .screenshot(“#signUpForm”, “sign up

    form”); // Hit the sign up button (should trigger error) casper.click(“button#signUp”); // Take a screenshot of the UI component phantomcss .screenshot(“#signUpForm”, “sign up form error”); // Fill in form by name attributes & submit casper.fill(‘#signUpForm', { name: ‘Alicia Sedlock’, email: ‘[email protected]’ }, true); // Take a second screenshot of success state phantomcss .screenshot(“#signUpForm”, “sign up form success”); });
  23. casper.start(“/home”).then(function(){ // Initial state of form phantomcss .screenshot(“#signUpForm”, “sign up

    form”); // Hit the sign up button (should trigger error) casper.click(“button#signUp”); // Take a screenshot of the UI component phantomcss .screenshot(“#signUpForm”, “sign up form error”); // Fill in form by name attributes & submit casper.fill(‘#signUpForm', { name: ‘Alicia Sedlock’, email: ‘[email protected]’ }, true); // Take a second screenshot of success state phantomcss .screenshot(“#signUpForm”, “sign up form success”); });
  24. phantomcss: { big_size: { options: { ... viewportSize: [1280, 800]

    } }, small_size: { options: { ... viewportSize: [480, 320] } } }
  25. Visual regression tests • The youngest of the test types

    • Test components, not full pages • Great for responsive testing