Skip to main content
100%

Sample protractor test for todo list in angularjs.org

✓ Published0🌍 Public
Aackuser
Last edited Jul 18, 2014
Created on Oct 10, 2016

This example shows an automated end-to-end test for the AngularJS homepage’s todo list, verifying that a new todo item is added correctly. The test, written with Protractor, uses `browser.get` to navigate to the site, `element(by.model)` and `element(by.css)` to locate input and button controls, and `element.all(by.repeater)` to inspect the rendered list. It asserts the todo count changes to three and that the newly added text appears as the last item. The code demonstrates a concrete workflow for validating dynamic list behavior in a real web application.

AI-generated description

Similar vizzes

Loading thumbnail…

Todo

A functional todo-list interface demonstrates AngularJS 1.5.6 component architecture and two-way data binding. The component uses `ng-model` to capture input, `ng-click` to trigger an `addTodo` controller method that pushes entries into a `todos` array, and `ng-repeat` to render each item as a list element. The `| json` filter displays the array's live state in the `<pre>` block, showing how AngularJS updates the view from controller state without manual DOM manipulation.

JJ6K
70% match
Loading thumbnail…

Protractor API Cheatsheet

This example presents a cheatsheet for the Protractor API, organizing common commands for browser control, element location, visibility checks, and Jasmine matchers. It demonstrates how to interact with Angular applications using selectors like `by.model`, `by.binding`, and `by.repeater`, alongside promise handling via `.then()` and `browser.wait()`. The code samples, sourced from a gist by ackuser, reference the official Protractor documentation and cover practical tasks such as sending keystrokes, retrieving element positions, and asserting conditions with `expect()`.

Aackuser
69% match
Loading thumbnail…

todo list en angularjs (con Gaba)

A simple AngularJS todo-list application lets users add and remove items by typing into a text field and submitting a form. Each entry appears as a checkbox with a label, and checking the box deletes that item from the list. The controller initializes two hard-coded tasks and uses the `ng-repeat`, `ng-submit`, and `ng-change` directives to update the model and re-render the view. The code relies on the AngularJS 1.2.15 library loaded from a Google CDN, with the controller managing the `todoList` array and methods `todoAdd` and `remove`.

Aaaizemberg
63% match
Loading thumbnail…

Gist 70aa9843db736bfad529

This example demonstrates automated UI testing for a web application’s navigation and search features. The code uses the WebDriver API via the `wd` library with Mocha and async.js to simulate user interactions. It verifies that the top-level category “Terveys” appears in the service tree, that the typeahead suggestions show “Kallion kirjasto,” and that a full search returns that same result. The tests rely on XPath and CSS selectors to locate elements and assert their displayed text.

ZZeukkari
61% match
Loading thumbnail…

Gist 159a8117261c02868bf3bb34f860ab9c

This example shows unit tests for an Angular `SampleService` that fetches airport data from a remote API. The service exposes two methods: `fetchAll$` returns a sorted list of airports, while `fetchByIATA$` retrieves a single airport by its IATA code. The tests use Angular’s `HttpClientTestingModule` and `HttpTestingController` to mock HTTP requests and flush dummy JSON data. The code verifies that the service correctly parses and orders the response, relying on RxJS observables and Angular’s dependency injection for testability.

Aackuser
60% match
Loading thumbnail…

Example of how you can test your AngularJS providers.

This example demonstrates how to test AngularJS providers using the Karma test runner with Jasmine specifications. The code defines a simple configurable provider with a default value and setter method, then verifies both default and configured behaviors through injected instances. The provider exposes `getValue` and `throwValue` functions, which the specs check for expected output and error messages. Tests run in PhantomJS, with AngularJS and angular-mocks loaded as dependencies.

Aackuser
58% match
Loading thumbnail…

Gist d0d5610ab577351ae1b1

This example shows a navigation menu for a warehouse task interface, with links for Picking and Dispatch tasks that highlight the active task type. The HTML uses AngularJS directives such as `ng-repeat`, `ng-href`, and `ng-class` to render task links dynamically from a `rows.consignment.data.tasks` array, while filtering out transit tasks with `ng-if`. Font Awesome icons (`fa-check-square-o`, `fa-truck`) provide visual labels, and the `active` class is conditionally applied based on the current task type name. No other JavaScript libraries or rendering techniques are present beyond the AngularJS bindings.

Aandybak
57% match
Loading thumbnail…

Gist 653d17f45fc4a94d6a52

This example catalogs browser-based testing and frontend performance tools, organizing them by category: visual regression, CSS testing, performance measurement, monkey testing, and general testing frameworks. It lists concrete libraries such as Wraith, PhantomCSS, Phantomas, browser-perf, perfjankie, gremlins.js, and DalekJS, with links to their documentation and related articles. The collection highlights both established tools and emerging practices, including telemetry-based benchmarks from Topcoat and Chromium. The page itself is a simple markdown file with hyperlinks, serving as a curated resource rather than an interactive visualization.

Aalessioalex
56% match