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 sleep
ing 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.
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">×</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.
I didn't use it yet, but you may give a try to phpunit-spiderling.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With