Question

我使用Behat和Zombie.js进行端到端测试，使用materializecss框架。我正在测试create操作失败并且控制器重定向回表单页面的情况。

我得到以下异常：

And I press "Crear"      # WebContext::pressButton()
  Error while processing event 'click': "TypeError: Cannot read property 'badInput' of undefined
    at .<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.4/js/materialize.min.js:8:22076)
    at Function.each (https://code.jquery.com/jquery-2.1.1.min.js:2:2880)
    at n.each (https://code.jquery.com/jquery-2.1.1.min.js:2:847)
    at Object.Materialize.updateTextFields (https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.4/js/materialize.min.js:8:21969)
    at HTMLDocument.<anonymous> (https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.4/js/materialize.min.js:8:22558)
    at j (https://code.jquery.com/jquery-2.1.1.min.js:2:26860)
    at Object.fireWith [as resolveWith] (https://code.jquery.com/jquery-2.1.1.min.js:2:27673)
    at Function.ready (https://code.jquery.com/jquery-2.1.1.min.js:2:29467)
    at HTMLDocument.I (https://code.jquery.com/jquery-2.1.1.min.js:2:29658)
    at callListeners (/usr/lib/node_modules/zombie/node_modules/jsdom/lib/jsdom/events/EventTarget.js:170:34)
        in http://localhost/myresource/create" (Behat\Mink\Exception\DriverException)

最糟糕的是，这不会发生在实际的浏览器上（可能是重定向的原因？）所以我不知道如何重现它。

有什么想法吗？

Answer 1

我面临与Zombie.js测试相同的问题

describe('User visits test page', function() {
  const browser = new Browser();
  it('should open page ', function(done) {
    browser.visit('/test', function() {
     done();
    });
  })
});

简单的html页面，带有一个输入：

<html>
  <head>
    <title>Test</title>
    <link rel="stylesheet" href="/vendor/materialize/css/materialize.min.css" />
    <script type="text/javascript" src="/vendor/jquery.min.js"></script>
    <script type="text/javascript" src="/vendor/materialize/js/materialize.js"></script>
  </head>
  <body>
    <label for="email">Email</label>
    <input id="email" name="email" type="email" />
  </body>
</html>

在这种情况下，

input.validity未定义。根本原因对我来说并不清楚。但是可以通过materialize.js更改来避免

    $(input_selector).each(function(index, element) {
    if ($(element).val().length > 0 
    || element.autofocus 
    ||$(this).attr('placeholder') !== undefined 
    || $(element)[0].validity.badInput === true) {
      $(this).siblings('label').addClass('active');
    }
    else {
      $(this).siblings('label').removeClass('active');
    }
  });

到

    if ($(element).val().length > 0 
    || element.autofocus 
    || $(this).attr('placeholder') !== undefined) {
      $(this).siblings('label').addClass('active');
    } else if ($(element)[0].validity) {
      if ($(element)[0].validity.badInput === true) {
        $(this).siblings('label').addClass('active');
      }
      else {
        $(this).siblings('label').removeClass('active');
      }
    }
    else {
      $(this).siblings('label').removeClass('active');
    }

我已经创建了拉取请求来实现。这是a link。

Materialize：无法读取未定义的属性'badInput'

1 个答案: