Support changing which origin the integration tests are run on

client/tests/integration/.eslintrc.js

@@ -15,7 +15,8 @@ module.exports = {
     node: true
   },
   globals: {
-    page: 'readonly'
+    page: 'readonly',
+    TEST_ORIGIN: 'readonly'
   },
   settings: {
     'import/resolver': {

client/tests/integration/PuppeteerEnvironment.js

@@ -19,6 +19,8 @@ class PuppeteerEnvironment extends NodeEnvironment {
       throw new Error('wsEndpoint not found');
     }
 
+    this.global.TEST_ORIGIN = process.env.TEST_ORIGIN ?? 'http://localhost:8000';
+
     // connect to puppeteer
     this.global.browser = await puppeteer.connect({
       browserWSEndpoint: wsEndpoint,

client/tests/integration/editor.test.js

@@ -3,7 +3,7 @@ describe('Editor', () => {
     '.skiplink, .sidebar__collapse-toggle, #wagtail-sidebar, li[aria-controls^="tab-"]';
   beforeAll(async () => {
     await page.goto(
-      'http://localhost:8000/admin/pages/add/demosite/standardpage/2/'
+      `${TEST_ORIGIN}/admin/pages/add/demosite/standardpage/2/`
     );
   });
 

client/tests/integration/groups.test.js

@@ -1,6 +1,6 @@
 describe('Groups', () => {
   beforeAll(async () => {
-    await page.goto('http://localhost:8000/admin/groups/2/');
+    await page.goto(`${TEST_ORIGIN}/admin/groups/2/`);
   }, 10000);
 
   it('has the right heading', async () => {

client/tests/integration/homepage.test.js

@@ -1,6 +1,6 @@
 describe('Homepage', () => {
   beforeAll(async () => {
-    await page.goto('http://localhost:8000/admin/', {
+    await page.goto(`${TEST_ORIGIN}/admin/`, {
       waitUntil: 'domcontentloaded',
     });
   });

client/tests/integration/listing.test.js

@@ -1,6 +1,6 @@
 describe('Listing', () => {
   beforeAll(async () => {
-    await page.goto('http://localhost:8000/admin/pages/2/');
+    await page.goto(`${TEST_ORIGIN}/admin/pages/2/`);
   });
 
   it('has the right heading', async () => {

client/tests/integration/setup.js

@@ -14,13 +14,16 @@ module.exports = async () => {
   // this global is only available in the teardown but not in TestEnvironments
   global.__BROWSER_GLOBAL__ = browser;
 
+  // Make sure this matches the origin defined in PuppeteerEnvironment.js.
+  const testOrigin = process.env.TEST_ORIGIN ?? 'http://localhost:8000';
+
   // use the file system to expose the wsEndpoint for TestEnvironments
   await mkdir(DIR, { recursive: true });
   await writeFile(path.join(DIR, 'wsEndpoint'), browser.wsEndpoint());
 
   // Automatically log into the Wagtail admin.
   const page = await browser.newPage();
-  await page.goto('http://localhost:8000/admin/login/');
+  await page.goto(`${testOrigin}/admin/login/`);
   await page.type('#id_username', 'admin');
   await page.type('#id_password', 'changeme');
   await Promise.all([

client/tests/integration/users.test.js

@@ -1,6 +1,6 @@
 describe('Users', () => {
   beforeAll(async () => {
-    await page.goto('http://localhost:8000/admin/users/', { waitUntil: 'load' });
+    await page.goto(`${TEST_ORIGIN}/admin/users/`);
   });
 
   it('axe', async () => {

docs/contributing/developing.rst

@@ -191,6 +191,7 @@ Our end-to-end browser testing suite also uses `Jest <https://jestjs.io/>`_, com
     $ npm --prefix client/tests/integration install
     $ npm run test:integration
 
+Integration tests target ``http://localhost:8000` by default. Use the ``TEST_ORIGIN`` environment variable to use a different port, or test a remote Wagtail instance: ``TEST_ORIGIN=http://localhost:9000 npm run test:integration``.
 
 Browser and device support
 --------------------------