How to use the intern testing framework for functional testing on dynamically generated server content

I am new to the Intern framework and am trying to understand how to perform functional tests on server generated code. The Intern Documentation says up front that this is possible but doesn't offer much more explanation on it. I can't figure out how to set up the project so that my php code executes when the intern test runner loads my page.

I have the recommended intern file structure in place with two files in the src directory: test.php and test.html. If I run my functional test on test.html with the test-runner it passes just fine; however, if I run it against test.php, the browser just downloads the file and fails the test.

My Intern Config file:

// tests/intern.js

define({
  capabilities: {
    'browserstack.selenium_version': '2.45.0'
  },

  // Maximum number of simultaneous integration tests that should be executed on the remote WebDriver service
  maxConcurrency: 2,

  tunnel: 'NullTunnel',
  environments: [ { browserName: 'chrome' } ],

  loaderOptions: {
    // Packages that should be registered with the loader in each testing environment
    packages: [ { name: 'myPackage', location: '.' } ]
  },

  // Functional test suite(s) to execute against each browser once non-functional tests are completed
  functionalSuites: [  'tests/functional/index.js'  ],

  // A regular expression matching URLs to files that should not be included in code coverage analysis
  excludeInstrumentation: /^(?:tests|node_modules)\//
});

My Functional Test:

// tests/functional/index.js

define(function (require) {
var registerSuite = require('intern!object');
var assert = require('intern/chai!assert');

registerSuite({
name: 'index',

'get Header': function () {
  return this.remote
    .get(require.toUrl('src/index.php'))
    .setFindTimeout(5000)
    .findByTagName('h1')
    .setFindTimeout(5000)
    .getVisibleText()
    .then(function(text) {
      assert.equal(text, "Home",
            'calling getHeader for home page should return Home');
    });
}
});
});

My PHP page:

// src/test.php

<?php

   // do php stuff

   if (isset($_GET["returnJson"])) {
     // return php stuff
   } else {
?>
  <!DOCTYPE html>
  <!--[if lte IE 8]> <html class="lte-ie8"> <![endif]-->
  <!--[if IE 9]> <html class="lte-ie9"> <![endif]-->
  <!--[if gt IE 9]><!--> <html> <!--<![endif]-->
  <head></head>

  <body>

    <h1>Home</h1>

  </body>
  </html>
}

My HTML Page:

// src/test.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Intern And Server Generated Content</title> 
</head>
<body>
  <h1>Home</h1>
</body>
</html>

Solution

Making a get call on the remote simply loads whatever URL is provided, just like a web browser would. The issue here is that you're using require.toUrl to reference the PHP file. This loads src/index.php relative to the test file itself. The test files and other Intern-related assets are loaded through Intern's test server (known as its "proxy"), which doesn't process PHP, so the browser will just end up with the raw content of index.php.

To test a PHP app, you'll need to give the get call the URL of a server that supports PHP.