Communicating between Parent Tab and Child Tab

The same things as Parent to iFrame can be achieved in inter tab communication but the APIs are different:

  • Parent has the reference to the child tab from the start
  • Child tab need to use the window.opener to get the parent reference.

then they can send messages back and forth using postMessage API

This works across all browsers.

BDD with TDD


  • Behvaior-Driven Development is a collection of tools and techniques that originated in Test-Driven Development. The key difference is that TDD is used for unit testing, whereas BDD is designed to assert high-level behaviors. The BDD assertion style uses plain-English sentences that can be understood by non-technical resources, such as Business Analysts and Product Owners.
    • Cucumber is a well-established BDD testing framework. It is compatible with Javascript, Ruby, and Java. BDD is a powerful technique for expressing and asserting behaviors at the process level. Cucumber is a powerful library used to implement BDD.
  • BDD can be divided into two parts:
    • Deliberate Discovery: A conversation between product owners, business analysts, domain experts, users, programmers, testers, and others that culminate in concrete examples that can be converted into executable specifications.
    • Test-Driven Development: Natural language tests, often written in Gherkin, that help programmers and non-programmers spell out the desired outcomes of concrete examples without any ambiguity.
  • Test-Driven Development relies on assertions as the basis for unit tests.  Assertions are at the core of all testing. An assertion says “this should be true,” and can apply to any statement. Unit tests assert that a condition is true; by definition, if the condition is false, the test fails. This could be as simple as an expected return value from a function, or as complex as the expected order of a sequence of function calls. At their core, Mocha and Jasmine both offer TDD for Behavior-Driven Design (BDD) tests but:
    • Jasmine includes an assertion library that uses an expect-style syntax
    • Mocha does not have a built-in assertion library. Developers must use a dedicated assertion libraryin combination with Mocha. The popular Chai assertion library uses a syntax similar to Jasmine
    • Jasmine includes a spyOn method that can be used to create spies
    • Once again, Mocha does not include a spy framework. The SinonJS framework is a popular choice for creating spies
      • SinonJS is a complete framework test double framework than Jasmine, including not only spies but also stubs and fakes.
    • Fakes, Mocks, and Stubs are objects that are patterned from real objects but exist only to simulate communication between a function and its external dependencies. SinonJS is a stand-alone library that works with any test framework. Its syntax is simple and provides powerful features. SinonJS can be used to test functions in a completely isolated state, and to write assertions about a function’s interaction with fakes, stubs and mocks created by SinonJS.

Jasime and Mocha are the two most widely used TDD frameworks for JavaScript, but they lack a full set of BDD features. Cucumber.js and Yadda have become the most popular BDD frameworks that add Gherkin or Gherkin-like syntax. Cucumber.js stays the closest to plain language step definitions, whereas Yadda is designed to be less invasive and flexible.

We communicate with our application through Protractor and just giving a layer of abstraction through Cucumber so that non-techncal people can understand it, Cucumber adds more clarity and readability to our automated test scripts .

Using BDD and TDD together (eg. Cucumber with Mocha/Jasmine/Jest):

  • Assertion library:
    • Cucumber JS: Need to be integrated with Cucumber-assert
    • Jasmine: Inbuilt
    • Mocha: Need to be integrated with different assertion libraries : Chai, should.js, expect.js, better-assert
  • Gerkin language support:
    • Cucumber JS: Inbuilt
    • Jasmine: Need to be integrated with Karma or Cucumber
    • Mocha: Need to be integrated with Mocha-Cakes or mocha-gherkin
  • Grouping/tagging of tests:
    • Cucumber JS: Yes
    • Jasmine: Yes
    • Mocha: Yes
  • Test runner:
    • Cucumber JS: Command line
    • Jasmine: Command line
    • Mocha: Command line
  • Reporting:
    • Cucumber JS: Intuitive reports using cucumber-html-reporter and multiple-cucumber-html-reporter libraries
    • Jasmine: Either cucumber reports can be generated or karma-jasmine-html-reporter or jasmine-pretty-html-reporter can be used, but these reports are less intuitive than Cucumber
    • Mocha: Mocha-simple-html-reporter and mochawesome can be used for reporting. Mochawesome reports are intuitive, just like cucumber reports
  • Documentation/Forums support:
    • Cucumber JS: Good
    • Jasmine: Good
    • Mocha: Good
  • Rerun of failed tests:
    • Cucumber JS: No inbuilt support for JS version of Cucumber
    • Jasmine: No inbuilt support
    • Mocha: Inbuilt support available
  • Highlight slow tests:
    • Cucumber JS: No support available
    • Jasmine: Can be implemented using jasmine-slow-reporter
    • Mocha: Inbuilt support available
  • Asynchronous testing:
    • Cucumber JS: Easy
    • Jasmine: Difficult
    • Mocha: Easy
  • Parallel execution:
    • Cucumber JS: Yes
    • Jasmine: Yes
    • Mocha: Yes
  • Plug-in support and extensibility:
    • Cucumber JS: Limited
    • Jasmine: Limited
    • Mocha: Good