Search code examples
javascriptobjectinheritanceinternui-testing

Extending (inherit) class (or object ) in Javascript


I'm working on a UI automation project where i want to extend one page object from another page object. I googled for the way to achieve this but couldn't find exactly what i am searching for. Basically i have a code setup something like this.

BasePage.js

    define([],
         function () {

            function BasePage(remote) {
             this.remote = remote;

            }

            BasePage.prototype = {
              constructor: BasePage,
             // common methods to interact with page

             commonMethodToIntreactWithPage : function{
               return doSomething;
             }
    };

    return BasePage;
});

LoginPage.js

    define([],
         function () {

            function LoginPage(remote) {
             this.remote = remote;

            }

            LoginPage.prototype = {
              constructor: BasePage,
             // Login Page related Methods

             loginPageRelatedMethod: function{
               return doSomething;
             }
    };

    return LoginPage;
});

I want to inherit the method of BasePage in LoginPage by just doing this:

var loginPage = new LoginPage(remote);
loginPage.commonMethodToIntreactWithPage();

Just for information I'm using Intern.js for testing.


Solution

  • You need to define something like this. The first row will create a new object with the properties and methods, which are in BasePage.prototype and set the prototype reference to this, so every LoginPage object will have those properties and objects. After all I add all specific data which is related only to LoginPage (loginPageRelatedMethod). And also it is important to set the proper constructor.

    LoginPage.prototype = Object.create(BasePage.prototype);
    
    LoginPage.prototype.constructor = LoginPage;
    
    LoginPage.prototype.loginPageRelatedMethod = function(){
        return doSomething;
    }
    

    UPDATED

    function LoginPage(remote) {
       BasePage.call(this, remote);
    }
    

    Example

    function BasePage(remote) {
       this.remote = remote;
    }
    
    BasePage.prototype = {
       constructor: BasePage,    
       commonMethodToIntreactWithPage : function() {
          return 'From Base Page';
       }
    };
    
    function LoginPage(remote) {
       BasePage.call(this, remote);
    }
    
    LoginPage.prototype = Object.create(BasePage.prototype);
    
    LoginPage.prototype.constructor = LoginPage;
    
    LoginPage.prototype.loginPageRelatedMethod = function () {
       return 'From Login Page';
    }
    
    var loginPage = new LoginPage('Test');
    console.log(loginPage.commonMethodToIntreactWithPage());