New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

angular-protractor: conflict with JQuery #2734

Closed
turp opened this Issue Aug 28, 2014 · 51 comments

Comments

Projects
None yet
@turp

turp commented Aug 28, 2014

I'm seeing the following conflict when using Protractor with JQuery.

Subsequent variable declarations must have the same type.  
Variable '$' must be of type 'cssSelectorHelper', but here has type 'JQueryStatic'.
Web\Scripts\typings\jquery\jquery.d.ts   3936

I tried to uninstall JQuery, but 'angularjs.TypeScript.DefinitelyTyped 2.0.6 depend(s) on it.

I'm using the following version:

<package id="angularjs.TypeScript.DefinitelyTyped" version="2.0.6" targetFramework="net45" /
<package id="angular-protractor.TypeScript.DefinitelyTyped" version="0.0.4" targetFramework="net45" />
<package id="jquery.TypeScript.DefinitelyTyped" version="1.3.8" targetFramework="net45" />

Thanks
Jay

@awerlang

This comment has been minimized.

Show comment
Hide comment
@awerlang

awerlang Nov 17, 2014

Contributor

+1

It seems that it is not possible to reference both files in the same project, even if they aren't used in the same

@turp You could handle this by moving your e2e tests to a new project.

Contributor

awerlang commented Nov 17, 2014

+1

It seems that it is not possible to reference both files in the same project, even if they aren't used in the same

@turp You could handle this by moving your e2e tests to a new project.

@brian428

This comment has been minimized.

Show comment
Hide comment
@brian428

brian428 Nov 18, 2014

Contributor

Yeah, rather annoying even though it's not the fault of either TSD. Given that both libraries set up a global $ function, I'm not even sure you can load both underlying JS libraries at the same time?

Contributor

brian428 commented Nov 18, 2014

Yeah, rather annoying even though it's not the fault of either TSD. Given that both libraries set up a global $ function, I'm not even sure you can load both underlying JS libraries at the same time?

@tiparkki

This comment has been minimized.

Show comment
Hide comment
@tiparkki

tiparkki commented Nov 24, 2014

+1

@jt000

This comment has been minimized.

Show comment
Hide comment
@jt000

jt000 Dec 16, 2014

Contributor

I had created the above issue in typescript, but as I was thinking about it I came to the conclusion that this is likely an issue with how TSD is creating the tsd.d.ts file. Since we shouldn't be using both JQuery and angular-protractor in the same typescript file, then we should have a dedicated set of references for each scenario...

However, not sure how this would be done specifically... Maybe something like having a "dev" version of a tsd.d.ts for tests? (i.e. tsd install --save-dev that would save to "tsd.dev.d.ts"?)

Contributor

jt000 commented Dec 16, 2014

I had created the above issue in typescript, but as I was thinking about it I came to the conclusion that this is likely an issue with how TSD is creating the tsd.d.ts file. Since we shouldn't be using both JQuery and angular-protractor in the same typescript file, then we should have a dedicated set of references for each scenario...

However, not sure how this would be done specifically... Maybe something like having a "dev" version of a tsd.d.ts for tests? (i.e. tsd install --save-dev that would save to "tsd.dev.d.ts"?)

@brian428

This comment has been minimized.

Show comment
Hide comment
@brian428

brian428 Dec 16, 2014

Contributor

I set up two TSDs, one used by my main app, and one to reference from functional test code. Obviously, the protractor d.ts isn't part of my main app TSD.

Contributor

brian428 commented Dec 16, 2014

I set up two TSDs, one used by my main app, and one to reference from functional test code. Obviously, the protractor d.ts isn't part of my main app TSD.

@jt000

This comment has been minimized.

Show comment
Hide comment
@jt000

jt000 Dec 16, 2014

Contributor

I gave that a try & it didn't work for me. Maybe I have something different in my project, but by simply including the d.ts (regardless of the in the ts files) causes the build issue. Do you have a single VS project for both your unit\functional test code & your app?

Contributor

jt000 commented Dec 16, 2014

I gave that a try & it didn't work for me. Maybe I have something different in my project, but by simply including the d.ts (regardless of the in the ts files) causes the build issue. Do you have a single VS project for both your unit\functional test code & your app?

@jt000

This comment has been minimized.

Show comment
Hide comment
@jt000

jt000 Dec 16, 2014

Contributor

After playing with this for a couple hours now, it really seems like there's something off with the typescript compiler that might be compounding this issue... If I have 2 ts files in my project, 1 references angular-protractor and the other ts file references jquery, then I get "TS2134: Build: Subsequent variable declarations...". Since the ts are independent of each other and don't reference both angular-protractor & jquery at the same time, then this build issue should never be hit.

I'm going to create a simple github project to demonstrate & file an issue against typescript (again).

Contributor

jt000 commented Dec 16, 2014

After playing with this for a couple hours now, it really seems like there's something off with the typescript compiler that might be compounding this issue... If I have 2 ts files in my project, 1 references angular-protractor and the other ts file references jquery, then I get "TS2134: Build: Subsequent variable declarations...". Since the ts are independent of each other and don't reference both angular-protractor & jquery at the same time, then this build issue should never be hit.

I'm going to create a simple github project to demonstrate & file an issue against typescript (again).

@brian428

This comment has been minimized.

Show comment
Hide comment
@brian428

brian428 Dec 17, 2014

Contributor

I don't use Visual Studio so I'm not sure if that's part of the issue or not. I use IDEA to code, and Gulp to watch the file system, compile, and produce the build artifacts.

Contributor

brian428 commented Dec 17, 2014

I don't use Visual Studio so I'm not sure if that's part of the issue or not. I use IDEA to code, and Gulp to watch the file system, compile, and produce the build artifacts.

@jt000

This comment has been minimized.

Show comment
Hide comment
@jt000

jt000 Dec 17, 2014

Contributor

when Gulp compiles, does it call TSC per file or once for all files? For example,

tsc a.ts b.ts c.d.ts

or

tsc a.ts
tsc b.ts

Visual Studio builds the first way, which I think is why I'm seeing the issue & why having multiple tsd.d.ts files isn't working for me. I would guess Gulp does it the 2nd way (though, i've never used Gulp, so this is just a guess).

Contributor

jt000 commented Dec 17, 2014

when Gulp compiles, does it call TSC per file or once for all files? For example,

tsc a.ts b.ts c.d.ts

or

tsc a.ts
tsc b.ts

Visual Studio builds the first way, which I think is why I'm seeing the issue & why having multiple tsd.d.ts files isn't working for me. I would guess Gulp does it the 2nd way (though, i've never used Gulp, so this is just a guess).

@brian428

This comment has been minimized.

Show comment
Hide comment
@brian428

brian428 Dec 17, 2014

Contributor

I'm actually not sure. I have it compiling and aggregating the JS into a single file, along with a source map for easier debugging, but you can also have it compile out to individual JS files. It can also do incremental compilation for updates, which speeds things up. So it almost seems like it does both, but that's really just a guess. (If it helps, you can see what it is using here: https://github.com/ivogabe/gulp-typescript/tree/master/typescript).

Contributor

brian428 commented Dec 17, 2014

I'm actually not sure. I have it compiling and aggregating the JS into a single file, along with a source map for easier debugging, but you can also have it compile out to individual JS files. It can also do incremental compilation for updates, which speeds things up. So it almost seems like it does both, but that's really just a guess. (If it helps, you can see what it is using here: https://github.com/ivogabe/gulp-typescript/tree/master/typescript).

@StanleyGoldman

This comment has been minimized.

Show comment
Hide comment
@StanleyGoldman

StanleyGoldman Jan 16, 2015

Contributor

I am struggling with this issue as well

Contributor

StanleyGoldman commented Jan 16, 2015

I am struggling with this issue as well

@bgever

This comment has been minimized.

Show comment
Hide comment
@bgever

bgever commented Feb 12, 2015

+1

@ShiraazMoollatjie

This comment has been minimized.

Show comment
Hide comment
@ShiraazMoollatjie

ShiraazMoollatjie Feb 12, 2015

+1

I ended up using the workaround suggested by @awerlang.

ShiraazMoollatjie commented Feb 12, 2015

+1

I ended up using the workaround suggested by @awerlang.

@jasond-s

This comment has been minimized.

Show comment
Hide comment
@jasond-s

jasond-s Feb 17, 2015

Contributor

+1 This is most annoying.

Contributor

jasond-s commented Feb 17, 2015

+1 This is most annoying.

@brian428

This comment has been minimized.

Show comment
Hide comment
@brian428

brian428 Feb 17, 2015

Contributor

I'm not really sure what's not sinking in here. Angular depends on jQuery, which defines a $() function. The Protractor JS library also defines a $() function (because this is what the underlying Webdriver API is). The jQuery and Protractor TSD's can only match the API declared by the original JS libraries. If you include both the Angular and Protractor TSDs, you're going to have a conflict. There's nothing the author of the Protractor TSD can do about this.

The only possible option would be to create a Protractor TSD that omits $() from the definition. But then, anyone using the TSD would be forced to use something like element(by.css(selector)) everywhere, instead of $(). And I doubt that anyone would be happy with that.

Since I don't think there's any reason for Protractor code to depend on Angular or jQuery anyway, the only viable solution seems to be just not referencing the Angular TSD within the Protractor project/code. That probably means using a separate project, or at least separate TSD listings.

Contributor

brian428 commented Feb 17, 2015

I'm not really sure what's not sinking in here. Angular depends on jQuery, which defines a $() function. The Protractor JS library also defines a $() function (because this is what the underlying Webdriver API is). The jQuery and Protractor TSD's can only match the API declared by the original JS libraries. If you include both the Angular and Protractor TSDs, you're going to have a conflict. There's nothing the author of the Protractor TSD can do about this.

The only possible option would be to create a Protractor TSD that omits $() from the definition. But then, anyone using the TSD would be forced to use something like element(by.css(selector)) everywhere, instead of $(). And I doubt that anyone would be happy with that.

Since I don't think there's any reason for Protractor code to depend on Angular or jQuery anyway, the only viable solution seems to be just not referencing the Angular TSD within the Protractor project/code. That probably means using a separate project, or at least separate TSD listings.

@jt000

This comment has been minimized.

Show comment
Hide comment
@jt000

jt000 Feb 17, 2015

Contributor

If you're using Visual Studio to build & have both protractor/angular in the same project, then please put your "+1" in Microsoft/TypeScript#1516 to let them know I'm not the only one seeing this issue

Contributor

jt000 commented Feb 17, 2015

If you're using Visual Studio to build & have both protractor/angular in the same project, then please put your "+1" in Microsoft/TypeScript#1516 to let them know I'm not the only one seeing this issue

@jasond-s

This comment has been minimized.

Show comment
Hide comment
@jasond-s

jasond-s Feb 17, 2015

Contributor

This is the first google hit for the issue. I knew at the time it was VS's fault but the red mis, it made me do it.

Contributor

jasond-s commented Feb 17, 2015

This is the first google hit for the issue. I knew at the time it was VS's fault but the red mis, it made me do it.

@awerlang

This comment has been minimized.

Show comment
Hide comment
@awerlang

awerlang Mar 12, 2015

Contributor

For those who want main app and tests on the same VS project, refer to PR #3528. Get it and see if anything's broken at your side. It must fix this issue.

Contributor

awerlang commented Mar 12, 2015

For those who want main app and tests on the same VS project, refer to PR #3528. Get it and see if anything's broken at your side. It must fix this issue.

@brp-nylin

This comment has been minimized.

Show comment
Hide comment
@brp-nylin

brp-nylin May 8, 2015

Contributor

+1

This is really annoying indeed. I wonder why protractor used $ in the first place, wasn't jQuery well established when Protractor was developed? I can't get my e2e tests compiled with TS and TSLint and don't seem to find a way of fixing this.

Has anyone found a good workaround? I was thinking about settings up two tsd folders, but since both my app and my e2e tests needs type definitions for angular this wouldn't help anyway.

I understand the implications of this problem, and that it doesn't really help anyone to

Contributor

brp-nylin commented May 8, 2015

+1

This is really annoying indeed. I wonder why protractor used $ in the first place, wasn't jQuery well established when Protractor was developed? I can't get my e2e tests compiled with TS and TSLint and don't seem to find a way of fixing this.

Has anyone found a good workaround? I was thinking about settings up two tsd folders, but since both my app and my e2e tests needs type definitions for angular this wouldn't help anyway.

I understand the implications of this problem, and that it doesn't really help anyone to

@brian428

This comment has been minimized.

Show comment
Hide comment
@brian428

brian428 May 8, 2015

Contributor

Protractor is just a wrapper for Selenium/Webdriver, which uses $ and $$ extensively.

However, I'm not sure why your e2e tests project would actually need the Angular or JQuery definitions?

Contributor

brian428 commented May 8, 2015

Protractor is just a wrapper for Selenium/Webdriver, which uses $ and $$ extensively.

However, I'm not sure why your e2e tests project would actually need the Angular or JQuery definitions?

@stites

This comment has been minimized.

Show comment
Hide comment
@stites

stites May 22, 2015

+1 @brian428

Keep in mind that angular-mocks also has a reference to angular.d.ts — so you may have to further split your unit test definition files from your e2e ones.

stites commented May 22, 2015

+1 @brian428

Keep in mind that angular-mocks also has a reference to angular.d.ts — so you may have to further split your unit test definition files from your e2e ones.

@chaosmail

This comment has been minimized.

Show comment
Hide comment
@chaosmail

chaosmail Jul 6, 2015

Contributor

Hi guys,

I sent a PR to DefinitelyTyped #4844 to allow embedding of a noConflict version of jQuery. This would be an acceptable solution for me. Please feel free to add your comments and thoughts to the proposed workaround.

Until this PR is merged, I use the following tsd.json configuration (I am using a fork of DefinitelyTyped and replaced the jQuery lib). A tsd reinstall -o should override the current jQuery version.

{
  "version": "v4",
  "repo": "chaosmail/DefinitelyTyped",
  "ref": "master",
  "path": "typings",
  "bundle": "typings/tsd.d.ts",
  "installed": {
    "angularjs/angular.d.ts": {
      "commit": "220ada3f90a7b9e769593650e6aba824bf2f085a"
    },
    "jquery/jquery.d.ts": {
      "commit": "705b4cc80bced7c0cc95575741113667d210602f"
    },
    "angular-protractor/angular-protractor.d.ts": {
      "commit": "2fe8a6fda29c3340a5e5672b1809a84c88729a30"
    },
    "selenium-webdriver/selenium-webdriver.d.ts": {
      "commit": "2fe8a6fda29c3340a5e5672b1809a84c88729a30"
    }
  }
}

Hope this helps someone.

Edit: It didn't work as expected, because version names are appended in the *.d.ts file. At the moment my repo contains a noConflict version of jQuery.

Best.
Christoph

Contributor

chaosmail commented Jul 6, 2015

Hi guys,

I sent a PR to DefinitelyTyped #4844 to allow embedding of a noConflict version of jQuery. This would be an acceptable solution for me. Please feel free to add your comments and thoughts to the proposed workaround.

Until this PR is merged, I use the following tsd.json configuration (I am using a fork of DefinitelyTyped and replaced the jQuery lib). A tsd reinstall -o should override the current jQuery version.

{
  "version": "v4",
  "repo": "chaosmail/DefinitelyTyped",
  "ref": "master",
  "path": "typings",
  "bundle": "typings/tsd.d.ts",
  "installed": {
    "angularjs/angular.d.ts": {
      "commit": "220ada3f90a7b9e769593650e6aba824bf2f085a"
    },
    "jquery/jquery.d.ts": {
      "commit": "705b4cc80bced7c0cc95575741113667d210602f"
    },
    "angular-protractor/angular-protractor.d.ts": {
      "commit": "2fe8a6fda29c3340a5e5672b1809a84c88729a30"
    },
    "selenium-webdriver/selenium-webdriver.d.ts": {
      "commit": "2fe8a6fda29c3340a5e5672b1809a84c88729a30"
    }
  }
}

Hope this helps someone.

Edit: It didn't work as expected, because version names are appended in the *.d.ts file. At the moment my repo contains a noConflict version of jQuery.

Best.
Christoph

@basarat

This comment has been minimized.

Show comment
Hide comment
@basarat

basarat Jul 7, 2015

Member

Here's what I did for converting the official AngularSeed project for TypeScript : https://github.com/Microsoft/TypeScriptSamples/blob/master/angular1/CONVERSION.md

The final project : https://github.com/Microsoft/TypeScriptSamples/tree/master/angular1

Member

basarat commented Jul 7, 2015

Here's what I did for converting the official AngularSeed project for TypeScript : https://github.com/Microsoft/TypeScriptSamples/blob/master/angular1/CONVERSION.md

The final project : https://github.com/Microsoft/TypeScriptSamples/tree/master/angular1

@serhiisol

This comment has been minimized.

Show comment
Hide comment
@serhiisol

serhiisol Aug 14, 2015

Contributor

It won't work if your tests will include functionality, which depends on jQuery.
Lets say you need to test directive's controller or something else and this directive requires jQuery.

Contributor

serhiisol commented Aug 14, 2015

It won't work if your tests will include functionality, which depends on jQuery.
Lets say you need to test directive's controller or something else and this directive requires jQuery.

@awerlang

This comment has been minimized.

Show comment
Hide comment
@awerlang

awerlang Aug 14, 2015

Contributor

@SergeySolonko to test controller's you use karma, not protractor. A unit test is what you need, while protractor offers integration tests.

Contributor

awerlang commented Aug 14, 2015

@SergeySolonko to test controller's you use karma, not protractor. A unit test is what you need, while protractor offers integration tests.

@serhiisol

This comment has been minimized.

Show comment
Hide comment
@serhiisol

serhiisol Aug 14, 2015

Contributor

@awerlang you're right. But in this case unit tests also use jasmine and maybe another libraries for testing. And in this case if you'll create one typings.d.ts file and include it for all types of testings - you'll get this error. And in this case you'll need to create 3 typings.d.ts files:

typings.d.ts - for you app sources
typings.tests.unit.d.ts - for your unit tests
typings.tests.e2e.d.ts - for your e2e tests

Difference between them will be in these files:

/// <reference path="../typings/angular-protractor/angular-protractor.d.ts" />
/// <reference path="../typings/selenium-webdriver/selenium-webdriver.d.ts" />

Rest of the references should be the same.
Right?

P.S. if you will setup grunt/gulp task to compile TS sources, you need to exclude test files. In other case, if you'll compile all sources - you'll get this error.

Contributor

serhiisol commented Aug 14, 2015

@awerlang you're right. But in this case unit tests also use jasmine and maybe another libraries for testing. And in this case if you'll create one typings.d.ts file and include it for all types of testings - you'll get this error. And in this case you'll need to create 3 typings.d.ts files:

typings.d.ts - for you app sources
typings.tests.unit.d.ts - for your unit tests
typings.tests.e2e.d.ts - for your e2e tests

Difference between them will be in these files:

/// <reference path="../typings/angular-protractor/angular-protractor.d.ts" />
/// <reference path="../typings/selenium-webdriver/selenium-webdriver.d.ts" />

Rest of the references should be the same.
Right?

P.S. if you will setup grunt/gulp task to compile TS sources, you need to exclude test files. In other case, if you'll compile all sources - you'll get this error.

@brian428

This comment has been minimized.

Show comment
Hide comment
@brian428

brian428 Aug 14, 2015

Contributor

Correct. I use separate TSDs, and separate gulp tasks to compile source vs. test code.

Contributor

brian428 commented Aug 14, 2015

Correct. I use separate TSDs, and separate gulp tasks to compile source vs. test code.

@xFrigginx

This comment has been minimized.

Show comment
Hide comment
@xFrigginx

xFrigginx commented Jan 22, 2016

+1

@huula

This comment has been minimized.

Show comment
Hide comment
@huula

huula commented Jul 12, 2016

+1

@AloeDream

This comment has been minimized.

Show comment
Hide comment
@AloeDream

AloeDream commented Jul 16, 2016

+1

@CristyTarantino

This comment has been minimized.

Show comment
Hide comment
@CristyTarantino

CristyTarantino commented Jul 27, 2016

+1

@tylervick

This comment has been minimized.

Show comment
Hide comment
@tylervick

tylervick commented Aug 27, 2016

+1

CloudNiner added a commit to azavea/climate-change-lab that referenced this issue Aug 31, 2016

Add jquery typings to project
Remove protractor typings
As detailed in this issue,
DefinitelyTyped/DefinitelyTyped#2734,
the protractor typings are incompatible with jQuery. The best
workaround suggested is to move integration tests via protractor
and selenium to a different project. Since we will likely not
worry about integration tests in this project, I just removed
the protractor typings.

CloudNiner added a commit to azavea/climate-change-lab that referenced this issue Aug 31, 2016

Add jquery typings to project
Remove protractor typings
As detailed in this issue,
DefinitelyTyped/DefinitelyTyped#2734,
the protractor typings are incompatible with jQuery. The best
workaround suggested is to move integration tests via protractor
and selenium to a different project. Since we will likely not
worry about integration tests in this project, I just removed
the protractor typings.
@hirako2000

This comment has been minimized.

Show comment
Hide comment
@hirako2000

hirako2000 commented Sep 4, 2016

+1

@mchurichi

This comment has been minimized.

Show comment
Hide comment
@mchurichi

mchurichi commented Sep 7, 2016

+1

@jakeNiemiec

This comment has been minimized.

Show comment
Hide comment
@jakeNiemiec

jakeNiemiec commented Sep 12, 2016

+1

@Ch0bits

This comment has been minimized.

Show comment
Hide comment
@Ch0bits

Ch0bits Sep 12, 2016

Contributor

+1

Contributor

Ch0bits commented Sep 12, 2016

+1

@robsonrosa

This comment has been minimized.

Show comment
Hide comment
@robsonrosa

robsonrosa commented Sep 14, 2016

+1

@jakeNiemiec

This comment has been minimized.

Show comment
Hide comment
@jakeNiemiec

jakeNiemiec Sep 14, 2016

We should really make a new issue, this one is from 2014. This issue is also for the first angular/protractor and I am sure all of us are here for angular2.

jakeNiemiec commented Sep 14, 2016

We should really make a new issue, this one is from 2014. This issue is also for the first angular/protractor and I am sure all of us are here for angular2.

@robsonrosa

This comment has been minimized.

Show comment
Hide comment
@robsonrosa

robsonrosa Sep 14, 2016

angular1 here :)

robsonrosa commented Sep 14, 2016

angular1 here :)

@sergiomichels

This comment has been minimized.

Show comment
Hide comment
@sergiomichels

sergiomichels Sep 14, 2016

@jakeNiemiec Nope, using AngularJS 1.x here. We're just trying to minimize the migration effort in the future.

sergiomichels commented Sep 14, 2016

@jakeNiemiec Nope, using AngularJS 1.x here. We're just trying to minimize the migration effort in the future.

@icegnome

This comment has been minimized.

Show comment
Hide comment
@icegnome

icegnome commented Sep 28, 2016

+1

@ihrimech

This comment has been minimized.

Show comment
Hide comment
@ihrimech

ihrimech commented Oct 3, 2016

+1

@smitalm

This comment has been minimized.

Show comment
Hide comment
@smitalm

smitalm Oct 4, 2016

Is there any way i can use jquery and protractor typings in the same project, without modifying typings sources and without getting this error? After all this time, there must be a way :(

smitalm commented Oct 4, 2016

Is there any way i can use jquery and protractor typings in the same project, without modifying typings sources and without getting this error? After all this time, there must be a way :(

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Oct 5, 2016

+1

This is really annoying. Introduction of "Types" to Javascript is supposed to increase productivity! I am JS pro & I have been working on it since month and I still keep on getting such annoying issues which diverts your focus from actual functionality! Sadly, I don't see productivity in action with Types!

ghost commented Oct 5, 2016

+1

This is really annoying. Introduction of "Types" to Javascript is supposed to increase productivity! I am JS pro & I have been working on it since month and I still keep on getting such annoying issues which diverts your focus from actual functionality! Sadly, I don't see productivity in action with Types!

@sky-coding

This comment has been minimized.

Show comment
Hide comment
@sky-coding

sky-coding Oct 9, 2016

+1
Really, 2 years?

sky-coding commented Oct 9, 2016

+1
Really, 2 years?

@Andrey-Pavlov

This comment has been minimized.

Show comment
Hide comment
@Andrey-Pavlov

Andrey-Pavlov Oct 13, 2016

Fix it please!

Andrey-Pavlov commented Oct 13, 2016

Fix it please!

@jakeNiemiec

This comment has been minimized.

Show comment
Hide comment
@jakeNiemiec

jakeNiemiec Oct 13, 2016

There is ~1000 open issues, no one is going to find this (2 years and counting).

Looking at the history of contributors, @cnishina may be able to help (his profile tagline: Mission: typescript protractor tests)

@vvakame is also a recent contributor (seemingly related issue here: Microsoft/TypeScript#3102 (comment).

jakeNiemiec commented Oct 13, 2016

There is ~1000 open issues, no one is going to find this (2 years and counting).

Looking at the history of contributors, @cnishina may be able to help (his profile tagline: Mission: typescript protractor tests)

@vvakame is also a recent contributor (seemingly related issue here: Microsoft/TypeScript#3102 (comment).

@cnishina

This comment has been minimized.

Show comment
Hide comment
@cnishina

cnishina Oct 14, 2016

Contributor

Hi everyone. I've had this issue bookmarked for a very long time and have been meaning to respond.

Since angular-protractor is built off an older version of Protractor, we decided to not maintain this.

Protractor has been slowly migrating JavaScript files to TypeScript. If you are using the latest version of Protractor (v 4.0.9), it has built in TypeScript support. There is a sample TypeScript project in the Protractor repo as well as in the cookbook. Just a quick note: TypeScript support is still experimental, check the changelog for any potential breaking changes.

So to not have a jQuery conflict, you must set noGlobals to true. (See config file). This will ensure that protractor publishes a single global object called 'protractor'.

import {$} from 'protractor';

The import actually uses the global protractor.$ and does not use global $ that jQuery uses.

So let's say you are using $ for jQuery. The above typing doesn't work if you are importing $ from Protractor... so maybe you want to do the following:

import {$ as Protractor$} from 'protractor';
Contributor

cnishina commented Oct 14, 2016

Hi everyone. I've had this issue bookmarked for a very long time and have been meaning to respond.

Since angular-protractor is built off an older version of Protractor, we decided to not maintain this.

Protractor has been slowly migrating JavaScript files to TypeScript. If you are using the latest version of Protractor (v 4.0.9), it has built in TypeScript support. There is a sample TypeScript project in the Protractor repo as well as in the cookbook. Just a quick note: TypeScript support is still experimental, check the changelog for any potential breaking changes.

So to not have a jQuery conflict, you must set noGlobals to true. (See config file). This will ensure that protractor publishes a single global object called 'protractor'.

import {$} from 'protractor';

The import actually uses the global protractor.$ and does not use global $ that jQuery uses.

So let's say you are using $ for jQuery. The above typing doesn't work if you are importing $ from Protractor... so maybe you want to do the following:

import {$ as Protractor$} from 'protractor';
@cnishina

This comment has been minimized.

Show comment
Hide comment
@cnishina

cnishina Oct 14, 2016

Contributor

Hopefully the above response is enough to close this issue. 🎉

Below is more details about "fixing" angular-protractor and probably why it might not be ideal:

API mismatch

Since Protractor version 1.5, some of the APIs have changed causing a version mismatch for the ambient typings. This is probably the most important reason why Protractor now supports TypeScript.

Below is the proposed fix; however, making this change will ultimately break tests for users that do not have an ambient typing problem with jQuery. This might be a good reason to use Protractor 4.0.9+.

The fix for Protractor 3.2+

For users that are using Protractor 3.2+ and < 4, using the noGlobals flag would ensure that there are no conflicts at the global namespace for $. The fix would be to remove the declare var $ as well as other global variables completely from angular-protractor.d.ts. This would require users to set up their own Protractor variables.

import {Protractor} from 'protractor';

let protractor: Protractor = (global as any)['protractor'];
let $ = protractor.$; 

The fix for Protractor < 3.2

Again, the fix would be to remove the declare var $ and other global variables as stated above and would also require users to set up their own Protractor variables (also shown above). However, if you are using jQuery in your Protractor file, there still is a global namespace problem with Protractor's $ and jQuery's $.

Contributor

cnishina commented Oct 14, 2016

Hopefully the above response is enough to close this issue. 🎉

Below is more details about "fixing" angular-protractor and probably why it might not be ideal:

API mismatch

Since Protractor version 1.5, some of the APIs have changed causing a version mismatch for the ambient typings. This is probably the most important reason why Protractor now supports TypeScript.

Below is the proposed fix; however, making this change will ultimately break tests for users that do not have an ambient typing problem with jQuery. This might be a good reason to use Protractor 4.0.9+.

The fix for Protractor 3.2+

For users that are using Protractor 3.2+ and < 4, using the noGlobals flag would ensure that there are no conflicts at the global namespace for $. The fix would be to remove the declare var $ as well as other global variables completely from angular-protractor.d.ts. This would require users to set up their own Protractor variables.

import {Protractor} from 'protractor';

let protractor: Protractor = (global as any)['protractor'];
let $ = protractor.$; 

The fix for Protractor < 3.2

Again, the fix would be to remove the declare var $ and other global variables as stated above and would also require users to set up their own Protractor variables (also shown above). However, if you are using jQuery in your Protractor file, there still is a global namespace problem with Protractor's $ and jQuery's $.

@jakeNiemiec

This comment has been minimized.

Show comment
Hide comment
@jakeNiemiec

jakeNiemiec Oct 14, 2016

@cnishina Thanks for following up!

jakeNiemiec commented Oct 14, 2016

@cnishina Thanks for following up!

@cnishina

This comment has been minimized.

Show comment
Hide comment
@cnishina

cnishina Jan 14, 2017

Contributor

@andy-ms This should be closed since angular-protractor does not exist.

Contributor

cnishina commented Jan 14, 2017

@andy-ms This should be closed since angular-protractor does not exist.

@andy-ms andy-ms closed this Jan 16, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment