10

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
3
  • 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. Apr 22, 2016 at 15:02
  • BTW, I didn't use it yet, but you may give a try to phpunit-spiderling. Apr 22, 2016 at 15:06
  • 1
    @GustavoStraube Both of these are great answers. Submit them together as an answer, and I'll mark them correct. Apr 22, 2016 at 16:10

2 Answers 2

8

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.

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.

1
  • It's better to provide more information in answer instead of just post the link.
    – vik_78
    Apr 24, 2019 at 10:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.