Back to Repositories

Testing Angular.js Core Directives and Bindings in angular/angular.js

This E2E test suite validates core Angular.js functionality including text interpolation and ng-cloak directive behavior. The tests ensure proper DOM manipulation and style application through automated browser interactions.

Test Coverage Overview

The test suite provides coverage for fundamental Angular.js features through end-to-end testing scenarios.

Text interpolation verification using binding expressions
ng-cloak directive functionality testing
DOM element visibility checks
Dynamic element creation and manipulation

Implementation Analysis

The testing approach utilizes Protractor’s browser automation capabilities combined with Jasmine’s testing framework.

The implementation demonstrates:

Browser script execution for DOM manipulation
Element selection using various locator strategies
Asynchronous expectation handling
Fixture loading for test setup

Technical Details

Testing Framework: Jasmine
E2E Testing Tool: Protractor
Browser Automation: Selenium WebDriver
Setup: beforeEach hooks for fixture loading
Element Location: by.binding, by.className selectors

Best Practices Demonstrated

The test suite exemplifies several E2E testing best practices for Angular applications.

Isolated test scenarios with proper setup
Clear test descriptions and expectations
Efficient element location strategies
Proper assertion patterns
Modular test organization

angular/angularJs

test/e2e/tests/sample.spec.js

            
'use strict';

// Sample E2E test:
describe('Sample', function() {
  beforeEach(function() {
    loadFixture('sample');
  });

  it('should have the interpolated text', function() {
    expect(element(by.binding('text')).getText()).toBe('Hello, world!');
  });

  it('should insert the ng-cloak styles', function() {
    browser.executeScript(`
      var span = document.createElement('span');
      span.className = 'ng-cloak foo';
      document.body.appendChild(span);
    `);
    expect(element(by.className('foo')).isDisplayed()).toBe(false);
  });
});