Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Laravel: PHPUnit and interacting with JavaScript

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
like image 238
nickcoxdotme Avatar asked Apr 15 '16 16:04

nickcoxdotme


2 Answers

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.

like image 186
Gustavo Straube Avatar answered Oct 27 '22 09:10

Gustavo Straube


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.

like image 26
Haiko Avatar answered Oct 27 '22 11:10

Haiko