Laravel：PHPUnit并与JavaScript交互

Question

我有一个非常简单的弹出对话框，由我的Laravel应用程序中的JavaScript驱动。基本上，在点击时，一个类被添加到弹出窗口div，它使用CSS转换将其不透明度从0更改为1。

这是我的测试：

public function testCantFindCodePopup()
{
  $customer = $this->createCustomer();
  $this->fillOutEmailAndDob($customer);

  $this->visit('/product-codes/new')
       ->dontSee("Still can't find your code?");
  $this->click('Can\'t find your code?');
         sleep(0.5);
  $this->see("Call customer service");
}

过渡需要300毫秒，所以我认为sleeping 500ms将解决问题，但没有骰子。

实际上，测试在dontSee("Still can't find your code?")部分失败了，即使该文本在弹出窗口内部，在加载时设置了display: none。

我做错了什么，或者PHPUnit不知道像capybara那样的CSS和JavaScript（因为它在无头浏览器中运行）。

如果我不能将PHPUnit用于这种类型的集成测试，那么我可以使用类似的东西吗？请注意，我在PHPUnit中有大约70个其他测试，所以无论其他工具是什么，它都不能代替批发;理想情况下，它与我的PHPUnit测试一起存在。

编辑

刀片模板的相关部分：

<div class="form-control">
          <label for="product-code">Enter Your{{$second}}Code</label>
          <input type="text" id="product-code" name="product-code" />
        </div>
        <button class="btn btn-dark" type="submit">Submit</button>
        <span class="label-explanation js__popup-toggle">Can't find your code?
          <div class='popup'>
            <span class="popup__close">&times;</span>
            <img src="/assets/images/find-code-pop-up.png" alt="[alt text]" />
            <p class="popup__cannot-find">Still can't find your code?<br/> Call customer service at xxx-xxx-xxxx.</p>

相关CSS：

.popup
  width 300px
  position absolute
  left 35%
  bottom 0
  transition width 0.3s, height 0.3s, opacity 0.3s, transform 0.45s
  opacity 0
  background rgba(255,255,255,0.9)
  color $brand-primary-dark
  text-align center
  transform scale(0)
  p
    font-size 16px
    text-transform none
    line-height 1.15
  &.js__display
    height auto
    opacity 1
    transform scale(1)
    z-index 9999

.popup__close
  font-size 20px
  position absolute
  top 0
  right 5px
  transition font-size 0.3s
  &:hover
    font-size 24px

Answer 1

你没有做错任何事。在这种情况下，PHPUnit不了解CSS和JavaScript。我正在检查Laravel Testing模块源代码（它扩展了PHPUnit功能），它只使用了一个爬虫。因此，它不会运行任何客户端脚本。实际上，它甚至不呈现页面。

我还没有使用它，但你可以试试phpunit-spiderling。

Answer 2

我看到这是一个非常古老的问题，但仅仅是为了文件：

如果您想使用浏览器功能进行测试，可以查看Laravel Dusk：

https://laravel.com/docs/5.8/dusk

例如，Dusk使用Chrome驱动程序访问本地计算机上的项目。因此，如果你使用像Vue.js这样的框架，它也会执行javascript。

这是测试的样子：

public function test_careers_page_shows_vacancies()
{
    $this->browse(function (Browser $browser) {
        $career = \App\Career::first();
        $browser->visit("/careers")
                ->assertSee("Join our team!")
                ->pause(1000) // Pause for a second
                ->waitForText("Careers loaded") // Or wait for text
                ->assertSee($career->title);
    });
}

请注意，Dusk将使用您的local环境，而不像phpunit可能使用testing环境。例如，我为phpunit使用sqlite环境。但是Dusk浏览使用不同数据库的“http://myproject.test/”。您可以通过在本地计算机上设置测试数据库来解决此问题。