CODEWITHSUNDEEP
angularjsnode.jsprotractorprototypal-inheritance
Лилия Сапурина
Лилия Сапурина

Reputation: 627

Protractor: classes inheritance

I have 3-levels of inheriting classes: First class inherit ElementArrayFinder, Second class inherit first class. This is my code:

1-st class:

 var util = require('util');
 var ElementArrayFinder = require('C:/Users/Lilia.Sapurina/AppData/Roaming/npm/node_modules/protractor/lib/element').ElementArrayFinder;

 var psComponent = function() {};

 util.inherits(psComponent, ElementArrayFinder);

 module.exports = psComponent;

2-nd class:

var util = require('util');
var psComponent = require('../lib/psComponent');

var psDateTimePicker = function() {};

util.inherits(psDateTimePicker, psComponent);

psDateTimePicker.prototype.getField = function() {
  return element(by.xpath('//div[1]/table/tbody/tr[2]/td[1]/div/input'));
};

psDateTimePicker.prototype.getButton = function() {
  return element(by.css('td > a.b-button.b-button_only_icon'));
};

exports.psDateTimePicker = new psDateTimePicker();

I can use it in my code in this way:

  fdescribe('lala', function () {

     var psDateTimePicker = require('../lib/psDateTimePicker').psDateTimePicker;

    beforeEach(function(){
      browser.get('ng-components/examples/ps-date-time-picker.html');
    });

    it('test', function () {
             expect(psDateTimePicker.getField().getAttribute("value")).toEqual(6);

  });
});

But I want to make global interface and make code construction looks like:

fdescribe('lala', function () {

  var psComponents = require('../lib/psComponent');

  beforeEach(function(){
    browser.get('ng-components/examples/ps-date-time-picker.html');
  });

  it('test', function () {
       expect(psComponents.psDateTimePicker.getField().getAttribute("value")).toEqual(6); 
  });
});

Does anybody know how I can organize it? I tried to use getInstanceOf(), but its not working. Also it isn't very conveniently.

Upvotes: 2

Views: 830

Answers (2)

Brine
Brine

Reputation: 3731

Not entirely sure what you're looking for but maybe something along these line...?

var util = require('util');
var ElementArrayFinder = require('C:/Users/Lilia.Sapurina/AppData/Roaming/npm/node_modules/protractor/lib/element').ElementArrayFinder;
var psDateTimePicker = require('../lib/psDateTimePicker').psDateTimePicker;

var PsComponent = function() {};

util.inherits(PsComponent, ElementArrayFinder);

PsComponent.prototype = util;
PsComponent.prototype = psDateTimePicker;
module.exports = new PsComponent();

Then...

describe('lala', function () {
  var psComponents = require('../lib/psComponents');

  beforeEach(function(){
    browser.get('ng-components/examples/ps-date-time-picker.html');
  });

  it('test', function() {
    expect(psComponents.getField().getAttribute("value")).toEqual(6); 
  });
});

Upvotes: 2

Michael Radionov
Michael Radionov

Reputation: 13319

If you want to create a namespace for all your components, you can just create an extra module responsible for that:

// psComponents.js
module.exports = {
    psDateTimePicker: require('../lib/psDateTimePicker').psDateTimePicker,
    psAnotherComponent: require('../lib/psAnotherComponent').psAnything
};

And use it pretty like the same you want:

var psComponents = require('../lib/psComponents');
expect(psComponents.psDateTimePicker.getField().getAttribute("value")).toEqual(6);

This is much simpler than what you've tried to do - trying to access children from a parent - there is no an easy way to achieve it and usually there is no reason to. Prototypes are just boilerplates to create new independent instances, which are not supposed to be connected to each other. Pretty much the same with prototype inheritance: you just extend that boilerplate, but child and parent instances a gonna remain independent.

Upvotes: 2

Related Questions