Databases
StackOverflow2013
Postsdbo
POHow can I simulate a click event in my AngularJS directive test?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I simulate a click event in my AngularJS directive test?
    primarykey
    data
    text
    <p>I've tried following the format of the <a href="https://github.com/vojtajina/ng-directive-testing/blob/master/test/tabsSpec.js">ng-directive-testing</a> repo for a directive I've written. The directive basically renders an overlay when the user clicks on an element. Here's the directive (simplified):</p> <pre class="lang-js prettyprint-override"><code>mod.directive('uiCopyLinkDialog', function(){ return { restrict: 'A', link: function(scope, element, attrs) { var $elm = angular.element(element); element.bind('click', function(event) { $elm.addClass('test'); }); } }; }); </code></pre> <p>The test I'm writing looks like this:</p> <pre class="lang-js prettyprint-override"><code>describe('pre-compiled link', function () { beforeEach(mocks.inject(function($compile, $rootScope) { scope = $rootScope; element = angular.element('&lt;span class="foo" ui-copy-link-dialog="url"&gt;&lt;/span&gt;'); $compile(element)(scope); scope.$digest(); })); it("should change the class when clicked", function () { element.click(); // this returns "'undefined' is not a function" element[0].click(); // so does this $(elm).click(); // this uses jquery and doesn't *seem* to fail waits(500); // hack to see if it was a race condition expect(elm.className).toContain('test'); // always fails }); }); </code></pre> <p>You can see in the test that I try several ways to trigger the <code>click()</code> event on the link, with most of them giving an <code>undefined</code> error. </p> <p>Can anyone tell me what I'm doing wrong here? Reading the examples this sounds like it's the correct syntax but my test runner (Karma via Grunt) doesn't want to play ball.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USNoremac
    1. USMatt Andrews
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow can I simulate a click event in my AngularJS directive test?
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POHow can I simulate a click event in my AngularJS directive test?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow can I simulate a click event in my AngularJS directive test?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COYou may want to try giving it an ID, and selecting based on the Id: angular.element('span[id="theSpan"]').click(); Additionally since I see you mention dialog... is your overlay using a jQuery dialog? if so; you'll be blocked from triggering a click event on anything outside that dialog while the dialog is opened. A solution is to trigger an event once the dialog closes, then run a click event.
      singulars
      1. POHow can I simulate a click event in my AngularJS directive test?
      1. USJeff Dalley
    2. COThanks: it looks like this is actually a bug with running these tests in PhantomJS -- when I run tests in Chrome it correctly fires the `click()` events. Weird!
      singulars
      1. POHow can I simulate a click event in my AngularJS directive test?
      1. USMatt Andrews
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload