Laravel: PHPUnit and interacting with JavaScript

Question

I have a very simple popup dialog that is driven by JavaScript in my Laravel app. Essentially, on click, a class is added to the popup div that uses a CSS transition to change its opacity from 0 to 1.

Here's my test:

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");
}

The transition takes 300ms, so I thought sleeping for 500ms would solve the issue, but no dice.

And actually, the test fails on the dontSee("Still can't find your code?") part, even though that text is inside of the popup, which has display: none set on it on load.

Am I doing something wrong, or is PHPUnit not aware of CSS and JavaScript like capybara is (because it runs in a headless browser).

If I can't use PHPUnit for this type of integration test, is there something similar that I can use? Note that I have ~70 other tests in PHPUnit, so whatever other tool there is, it can't be a wholesale replacement; ideally it'd exist alongside my PHPUnit tests.

Edit

Relevant part of the blade template:

<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>

Relevant 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

You're not doing anything wrong. In this case, PHPUnit is not aware of CSS and JavaScript. I was checking Laravel Testing module source code (which extends PHPUnit functionality) and it just uses a crawler. So, it doesn't run any client-side script. Actually, it doesn't even render the page. — Gustavo Straube
– Gustavo Straube, Commented Apr 22, 2016 at 15:02
BTW, I didn't use it yet, but you may give a try to phpunit-spiderling. — Gustavo Straube
– Gustavo Straube, Commented Apr 22, 2016 at 15:06
@GustavoStraube Both of these are great answers. Submit them together as an answer, and I'll mark them correct. — nickcoxdotme
– nickcoxdotme, Commented Apr 22, 2016 at 16:10

Gustavo Straube · Accepted Answer · 2016-04-22 18:16:45Z

9

You're not doing anything wrong. In this case, PHPUnit is not aware of CSS and JavaScript. I was checking Laravel Testing module source code (which extends PHPUnit functionality) and it just uses a crawler. So, it doesn't run any client-side script. Actually, it doesn't even render the page.

I didn't use it yet, but you may give a try to phpunit-spiderling.

answered Apr 22, 2016 at 18:16

Gustavo Straube

3,8916 gold badges45 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Haiko · Accepted Answer · 2019-04-24 15:48:12Z

2

I see this is a very old question, but just for documentations sake:

If you would like to test with browser functionality you can have a look at Laravel Dusk:

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

Dusk uses a Chrome driver to visit your project on your local machine for example. So it will execute the javascript too in case you are using a framework like Vue.js for example.

This is what a test looks like:

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);
    });
}

Note that Dusk will use your local environment unlike phpunit which might use a testing environment. For example, I use an sqlite environment for phpunit. But Dusk browses to "http://myproject.test/" which uses a different database. You can solve this by setting up a testing database on you local machine.

edited Apr 24, 2019 at 15:48

answered Apr 24, 2019 at 9:49

Haiko

1431 silver badge6 bronze badges

1 Comment

vik_78 Over a year ago

It's better to provide more information in answer instead of just post the link.

Collectives™ on Stack Overflow

Laravel: PHPUnit and interacting with JavaScript

Edit

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Edit

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related