How to integrate Protractor test cases in Atom using Typescript?

Question

I have installed typescript for atom for writing Protractor Scripts For automation.

My code is written in Jasmine Framework as protractor supports it nicely.

I wrote in this structure.

 describe('Sign in',function(){
     it ('Verify Modules Present', function(){
     loginPage.enterUsernameAndPasswordWithSignIn('a','b');
     browser.sleep(3000);
     var module = element(by.xpath("//*[@ng-reflect-router-link='My']"));
     browser.wait(protractor.ExpectedConditions.elementToBeClickable(module),
                                  8000).thenCatch(function () {
              assert.fail(' element is not click able');
      });
    var expectedModuleName = ["My", "X","Y", "Z" ];
    var testArray = ["My", "X","Y", "Z" ];;
    logger.log('info','Checking All modules');
    for (var i = 0; i < testArray.length;i++) {
      var moduleName = text.verifyText("//*[@ng-reflect-router-link='"+ testArray[i] + "']");
      expect(moduleName).toBe(expectedModuleName[i]);
    }
  logger.log('info','Checked All modules');
  });
});

I am getting following errors.

My understanding is : The Typescript is not able to find Jasmine libraries. How to do so?

I went through: https://angular.io/docs/ts/latest/testing/jasmine-testing-101.html

But couldn't find much. I installed typings too. But I don't know how to use it.

How can i configure Jasmine Framework into atom for Protractor so that this errors may resolve?

If not so, Which editor can be useful to do so and how?

Please guide me..

Answer 1

You have to install jasmine and node typings so that typescript recognizes them. Now there is even a better approach, there is no need of typings folder and typings.json. we have @types dependencies for the same.

so you can do that by following steps-

go to your project folder and install the dependencies -

 npm install --save-dev @types/jasmine //this would install jasmine typings as a dev dependency in your package.json
 npm install --save-dev @types/node   //this would install node typings as a dev dependency in your package.json

once you have installed try compiling it with tsc or tsc -w watch mode, now you shouldn't see those TS syntax errors!

And you have to import browser from protractor/globals to use its methods, like this-

import {browser} from 'protractor/globals';

For more details you can check out my rep for initial setup of protractor with typescript it uses cucumber as well as you can check out the official protractor-typescript example

Answer 2

Obviously, some of these issues (require and loginPage, for example) aren't necessarily anything to do with Jasmine. However, the issue is that these are global variables and the TS compiler can't find their declaration. The easiest way to remedy this is to declare each one at the top of the file in the following way:

declare var describe: any;

This will resolve the issues with describe and it. Other problems, such as require will be because you're not using the module import syntax.

Answer 3

This didn't quite fix the problem for me. In addition to installing the jasmine types (above answer)

I had to open tsconfig.json and insure jasmine was in the list of types under compilerOptions. For example { "compileOnSave": false, "compilerOptions": { "outDir": "./dist/out-tsc", "baseUrl": "src", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "allowJs": true, "target": "es5", "paths": { "environments": [ "./environments" ] }, "types": [ "node", "jasmine" ], "typeRoots": [ "node_modules/@types" ], "lib": [ "es2016", "dom" ] } } After adding "jasmine" as a type, the errors disappeared in Atom immediately.