CODEWITHSUNDEEP
firebasepolymerfirebase-authenticationweb-component-tester
dlmt
dlmt

Reputation: 166

Web Component Tester Fails to call firebase-auth

I have the following polymer element (with many lines of import for paper elements and firebase-auth removed) that I'd like to test using Web Component Tester. 

<dom-module id="my-login">
  <template>
    <firebase-auth id="auth" app-name="myapp" provider="email"></firebase-auth>
    <paper-input id="email" label="Enter Email"></paper-input>
    <paper-input id="password" label="Enter password" type="password"></paper-input>
    <paper-button id="signin" on-tap="_signIn" raised primary>Login</paper-button>
    <paper-button id="signup" on-tap="_register" secondary>Register</paper-button>
  </template>
  <script>
    Polymer({
      is: 'my-login',
      ready: function () {
        this.$.email.value = "xxxxxxxxxxxxxxx";
        this.$.password.value = "zzzzzzzzzzz";
      },
      _signIn: function () {
        const email = this.$.email.value;
        const passw = this.$.password.value;
        const sgn = this.$.auth;
        sgn.signInWithEmailAndPassword(email, passw) // *** ERRROR HERE ***
          .then(response => {
          });
      }
    });
  </script>
 </dom-module>

using the following test suite (lots of irrelevant details removed):

<!doctype html>
<html lang="en"> 
<head>
  <script src="../bower_components/webcomponentsjs/webcomponents-lite.js></script>
  <script src="../bower_components/web-component-tester/browser.js"></script>
  <link rel="import" href="../src/my-login.html">
</head>
<body>
  <test-fixture id="login">
    <template>
      <my-login></my-login>
    </template>
  </test-fixture>
  <script>
  suite('LOGIN', function () {
    var el, loginBtn;

    setup(function () {
      el = fixture("login");
      loginBtn = el.$$('#signin');
    });

    test('user login', done => {
      loginBtn.click();
      flush(_ => {
        done();
      });
    });
  });
  </script>
</body>
</html>

but the test failed with the following error:

Error: Cannot read property 'signInWithEmailAndPassword' of undefined
HTMLElement.signInWithEmailAndPassword at /bower_components/polymerfire/firebase-auth.html:211
HTMLElement._signIn at /src/my-login.html:20

I noticed that the error says 

Cannot read property signInWithEmailAndPassword of undefined

instead of 

Cannot read property signInWithEmailAndPassword of null

The code snippet shows no <link rel="import" ...> but in my code I do have those lines included and other test cases for <paper-input> and <paper-button> are passing.

What did I do wrong?

Upvotes: 1

Views: 113

Answers (1)

dlmt
dlmt

Reputation: 166

I'm not sure if the following is the answer to my own question, but after adding a stub that returns a Promise, the error disappeared and the above test is passing. However, I still did not figure out the cause of the undefined error above. 

stub('firebase-auth', {
  signInWithEmailAndPassword: function (e, p) {
    return new Promise( (resolve, reject) => {
      resolve("Yes");
    });
  }
});

Upvotes: 1

Related Questions