Update to Percy 5

.eslintrc.js

@@ -46,6 +46,8 @@ module.exports = {
         './config/**/*.js',
         './lib/*/index.js',
         './server/**/*.js',
+        // custom
+        './percy.config.js',
       ],
       parserOptions: {
         sourceType: 'script',

.github/workflows/ci.yml

@@ -42,7 +42,7 @@ jobs:
       - name: Install Dependencies
         run: pnpm install --frozen-lockfile
       - name: Run Tests
-        run: pnpm test:ember
+        run: pnpm test:ember:with-percy
         env:
           PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
 

config/environment.js

@@ -73,13 +73,6 @@ module.exports = function (environment) {
     ENV.DS.host = undefined;
 
     ENV.toastDuration = false;
-
-    ENV.percy = {
-      breakpointsConfig: {
-        desktop: 1280,
-      },
-      defaultBreakpoints: ['desktop'],
-    };
   }
 
   if (environment === 'production') {

package.json

@@ -22,7 +22,8 @@
     "lint:js:fix": "eslint . --fix",
     "start": "ember serve",
     "test": "concurrently \"npm:lint\" \"npm:test:*\" --names \"lint,test:\"",
-    "test:ember": "ember test"
+    "test:ember": "ember test",
+    "test:ember:with-percy": "percy exec -- ember test"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.21.3",
@@ -37,6 +38,8 @@
     "@glimmer/tracking": "^1.1.2",
     "@hashicorp/design-system-components": "^4.24.0",
     "@hashicorp/design-system-tokens": "^3.0.0",
+    "@percy/cli": "^1.31.6",
+    "@percy/ember": "^5.0.0",
     "@sentry/ember": "^10.32.1",
     "bluebird": "^3.7.2",
     "broccoli-asset-rev": "^3.0.0",
@@ -75,7 +78,6 @@
     "ember-modifier": "^4.2.2",
     "ember-moment": "^10.0.0",
     "ember-page-title": "^8.2.4",
-    "ember-percy": "^1.6.0",
     "ember-power-calendar": "^1.1.0",
     "ember-power-calendar-moment": "^1.0.2",
     "ember-power-select": "^8.11.0",

percy.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  version: 2,
+  snapshot: {
+    widths: [1280],
+  },
+};

tests/acceptance/calendar-test.js

@@ -5,7 +5,7 @@ import { setupApplicationTest } from '../helpers/application-tests';
 import { Response } from 'miragejs';
 import { overrideRoute } from '../helpers/override-route';
 import { authenticateSession } from 'ember-simple-auth/test-support';
-import { percySnapshot } from 'ember-percy';
+import percySnapshot from '@percy/ember';
 import { pollTaskFor } from 'ember-lifeline/test-support';
 
 import page from 'prison-rideshare-ui/tests/pages/calendar';
@@ -138,7 +138,7 @@ module('Acceptance | calendar', function (hooks) {
       3,
       'expected the commitment to have been deleted on the server',
     );
-    percySnapshot(assert);
+    await percySnapshot(assert);
   });
 
   test('slots can be committed to', async function (assert) {
@@ -478,7 +478,7 @@ module('Acceptance | calendar', function (hooks) {
       'expected the submit button to be highlighted when the record is dirty',
     );
 
-    percySnapshot(assert);
+    await percySnapshot(assert);
     await page.person.submitButton.click();
 
     const [person] = this.server.db.people;
@@ -666,7 +666,7 @@ module('Acceptance | calendar', function (hooks) {
       'expected the contact information to be revealed',
     );
 
-    percySnapshot(assert);
+    await percySnapshot(assert);
 
     await page.nextMonth.click();
 

tests/acceptance/debts-test.js

@@ -1,8 +1,7 @@
 /* eslint-disable qunit/require-expect */
 import { module, test } from 'qunit';
 import { setupApplicationTest } from '../helpers/application-tests';
-import { percySnapshot } from 'ember-percy';
-
+import percySnapshot from '@percy/ember';
 import { authenticateSession } from 'ember-simple-auth/test-support';
 
 import page from 'prison-rideshare-ui/tests/pages/debts';
@@ -81,7 +80,7 @@ module('Acceptance | debts', function (hooks) {
   test('debts are listed', async function (assert) {
     await page.visit();
 
-    percySnapshot(assert);
+    await percySnapshot(assert);
 
     assert.strictEqual(getPageTitle(), 'Debts · Prison Rideshare');
     assert.strictEqual(

tests/acceptance/forgot-test.js

@@ -1,7 +1,7 @@
 /* eslint-disable qunit/require-expect */
 import { module, test } from 'qunit';
 import { setupApplicationTest } from '../helpers/application-tests';
-import { percySnapshot } from 'ember-percy';
+import percySnapshot from '@percy/ember';
 import { Response } from 'miragejs';
 
 import { getPageTitle } from 'ember-page-title/test-support';
@@ -25,7 +25,7 @@ module('Acceptance | forgot', function (hooks) {
 
     await forgotPage.visit();
 
-    percySnapshot(assert);
+    await percySnapshot(assert);
 
     await forgotPage.fillEmail('[email protected]');
     await forgotPage.submit();

tests/acceptance/gas-prices-test.js

@@ -1,8 +1,7 @@
 /* eslint-disable qunit/require-expect */
 import { module, test } from 'qunit';
 import { setupApplicationTest } from '../helpers/application-tests';
-import { percySnapshot } from 'ember-percy';
-
+import percySnapshot from '@percy/ember';
 import page from 'prison-rideshare-ui/tests/pages/gas-prices';
 import { getPageTitle } from 'ember-page-title/test-support';
 
@@ -39,7 +38,7 @@ module('Acceptance | gas prices', function (hooks) {
   test('it lists gas prices and reïmbursement rates', async function (assert) {
     await page.visit();
 
-    percySnapshot(assert);
+    await percySnapshot(assert);
 
     assert.strictEqual(getPageTitle(), 'Gas prices · Prison Rideshare');
     assert.strictEqual(

tests/acceptance/institutions-test.js

@@ -1,8 +1,7 @@
 /* eslint-disable qunit/require-expect */
 import { module, test } from 'qunit';
 import { setupApplicationTest } from '../helpers/application-tests';
-import { percySnapshot } from 'ember-percy';
-
+import percySnapshot from '@percy/ember';
 import { authenticateSession } from 'ember-simple-auth/test-support';
 
 import page from 'prison-rideshare-ui/tests/pages/institutions';
@@ -21,7 +20,7 @@ module('Acceptance | institutions', function (hooks) {
   test('institutions can be listed and edited', async function (assert) {
     await page.visit();
 
-    percySnapshot(assert);
+    await percySnapshot(assert);
 
     assert.strictEqual(getPageTitle(), 'Institutions · Prison Rideshare');
     assert.strictEqual(
@@ -63,7 +62,7 @@ module('Acceptance | institutions', function (hooks) {
     await page.form.nameField.fillIn('Remand Centre');
     await page.form.farField.click();
 
-    percySnapshot(assert);
+    await percySnapshot(assert);
 
     await page.form.submit();
 

tests/acceptance/log-test.js

@@ -1,7 +1,7 @@
 /* eslint-disable qunit/require-expect */
 import { module, test } from 'qunit';
 import { setupApplicationTest } from '../helpers/application-tests';
-import { percySnapshot } from 'ember-percy';
+import percySnapshot from '@percy/ember';
 import { authenticateSession } from 'ember-simple-auth/test-support';
 
 import page from 'prison-rideshare-ui/tests/pages/log';
@@ -47,7 +47,7 @@ module('Acceptance | log', function (hooks) {
 
     await page.visit();
 
-    percySnapshot(assert);
+    await percySnapshot(assert);
 
     assert.strictEqual(getPageTitle(), 'Log · Prison Rideshare');
     assert.strictEqual(shared.logCount.text, '1');
@@ -134,7 +134,7 @@ module('Acceptance | log', function (hooks) {
 
     await page.posts[0].editButton.click();
 
-    percySnapshot(assert);
+    await percySnapshot(assert);
 
     await page.form.content.field.fillIn('new post content');
     await page.form.cancel();

tests/acceptance/login-test.js

@@ -2,8 +2,7 @@
 import { currentRouteName, currentURL } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from '../helpers/application-tests';
-import { percySnapshot } from 'ember-percy';
-
+import percySnapshot from '@percy/ember';
 import { authenticateSession } from 'ember-simple-auth/test-support';
 import { Response } from 'miragejs';
 import { overrideRoute } from '../helpers/override-route';
@@ -91,7 +90,7 @@ module('Acceptance | login', function (hooks) {
     await page.fillPassword('wrong-password');
     await page.submit();
 
-    percySnapshot(assert);
+    await percySnapshot(assert);
 
     assert.strictEqual(currentURL(), '/login');
     assert.strictEqual(

tests/acceptance/overlaps-test.js

@@ -1,7 +1,7 @@
 /* eslint-disable qunit/require-expect */
 import { module, test } from 'qunit';
 import { setupApplicationTest } from '../helpers/application-tests';
-import { percySnapshot } from 'ember-percy';
+import percySnapshot from '@percy/ember';
 import { authenticateSession } from 'ember-simple-auth/test-support';
 
 import page from 'prison-rideshare-ui/tests/pages/rides';
@@ -37,7 +37,7 @@ module('Acceptance | overlaps', function (hooks) {
 
     await page.visit();
 
-    percySnapshot(assert);
+    await percySnapshot(assert);
 
     assert.strictEqual(shared.ridesBadge.text, '1');
 

tests/acceptance/people-test.js

@@ -1,7 +1,7 @@
 /* eslint-disable qunit/require-expect */
 import { module, test } from 'qunit';
 import { setupApplicationTest } from '../helpers/application-tests';
-import { percySnapshot } from 'ember-percy';
+import percySnapshot from '@percy/ember';
 import { Response } from 'miragejs';
 
 import { authenticateSession } from 'ember-simple-auth/test-support';
@@ -92,7 +92,7 @@ module('Acceptance | people', function (hooks) {
     assert.ok(page.people[2].copyButton.isVisible);
     assert.strictEqual(page.people[2].copyButton.clipboardText, '91 Albert');
 
-    percySnapshot(assert);
+    await percySnapshot(assert);
   });
 
   test('people can be edited, cancelled edits are discarded', async function (assert) {
@@ -102,7 +102,7 @@ module('Acceptance | people', function (hooks) {
 
     await page.people[2].edit();
 
-    percySnapshot(assert);
+    await percySnapshot(assert);
 
     await page.form.nameField.fill('Billiam');
     await page.form.cancel();

tests/acceptance/registration-test.js

@@ -3,8 +3,7 @@ import { currentURL } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from '../helpers/application-tests';
 import { Response } from 'miragejs';
-import { percySnapshot } from 'ember-percy';
-
+import percySnapshot from '@percy/ember';
 import { authenticateSession } from 'ember-simple-auth/test-support';
 
 import page from 'prison-rideshare-ui/tests/pages/register';
@@ -76,7 +75,7 @@ module('Acceptance | registration', function (hooks) {
 
     await page.submit();
 
-    percySnapshot(assert);
+    await percySnapshot(assert);
 
     assert.strictEqual(currentURL(), '/register');
     assert.strictEqual(

tests/acceptance/reimbursements-test.js

@@ -1,8 +1,7 @@
 /* eslint-disable qunit/require-expect */
 import { module, test } from 'qunit';
 import { setupApplicationTest } from '../helpers/application-tests';
-import { percySnapshot } from 'ember-percy';
-
+import percySnapshot from '@percy/ember';
 import { authenticateSession } from 'ember-simple-auth/test-support';
 
 import reimbursementsPage from 'prison-rideshare-ui/tests/pages/reimbursements';
@@ -205,7 +204,7 @@ module('Acceptance | reimbursements', function (hooks) {
       'expected the car expense to have been donated',
     );
 
-    percySnapshot(assert);
+    await percySnapshot(assert);
   });
 
   test('process reimbursements', async function (assert) {

tests/acceptance/reports-test.js

@@ -2,7 +2,7 @@
 import { currentURL } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from '../helpers/application-tests';
-import { percySnapshot } from 'ember-percy';
+import percySnapshot from '@percy/ember';
 import { Response } from 'miragejs';
 
 import { authenticateSession } from 'ember-simple-auth/test-support';
@@ -90,7 +90,7 @@ module('Acceptance | reports', function (hooks) {
     await page.notes.fillIn('These r the notes');
     await page.donation.click();
 
-    percySnapshot(assert);
+    await percySnapshot(assert);
 
     await page.submitButton.click();
 

tests/acceptance/reset-test.js

@@ -2,7 +2,7 @@
 import { module, test } from 'qunit';
 import { setupApplicationTest } from '../helpers/application-tests';
 import { currentURL } from '@ember/test-helpers';
-import { percySnapshot } from 'ember-percy';
+import percySnapshot from '@percy/ember';
 import { Response } from 'miragejs';
 import { overrideRoute } from '../helpers/override-route';
 
@@ -91,7 +91,7 @@ module('Acceptance | reset password', function (hooks) {
     await resetPage.fillPassword('x');
     await resetPage.submit();
 
-    percySnapshot(assert);
+    await percySnapshot(assert);
 
     assert.strictEqual(
       shared.inlineAlert.text,

tests/acceptance/rides-test.js

@@ -2,7 +2,7 @@
 import { click, currentURL, findAll, waitUntil } from '@ember/test-helpers';
 import { module, test } from 'qunit';
 import { setupApplicationTest } from '../helpers/application-tests';
-import { percySnapshot } from 'ember-percy';
+import percySnapshot from '@percy/ember';
 import { Response } from 'miragejs';
 
 import { authenticateSession } from 'ember-simple-auth/test-support';
@@ -77,7 +77,7 @@ module('Acceptance | rides', function (hooks) {
     });
 
     await page.visit();
-    percySnapshot(assert);
+    await percySnapshot(assert);
 
     assert.strictEqual(getPageTitle(), 'Rides · Prison Rideshare');
     assert.strictEqual(
@@ -517,7 +517,7 @@ module('Acceptance | rides', function (hooks) {
     // FIXME not really here, but keyboard input for this is broken, and hovering
     await page.form.institution.choose('Rockwood');
 
-    percySnapshot(assert);
+    await percySnapshot(assert);
 
     await page.form.submit();
 

tests/acceptance/users-test.js

@@ -1,8 +1,7 @@
 /* eslint-disable qunit/require-expect */
 import { module, skip, test } from 'qunit';
 import { setupApplicationTest } from '../helpers/application-tests';
-import { percySnapshot } from 'ember-percy';
-
+import percySnapshot from '@percy/ember';
 import { authenticateSession } from 'ember-simple-auth/test-support';
 
 import page from 'prison-rideshare-ui/tests/pages/users';
@@ -97,7 +96,7 @@ module('Acceptance | users', function (hooks) {
       'expected the non-admin to be marked as present',
     );
 
-    percySnapshot(assert);
+    await percySnapshot(assert);
 
     const leavePresenceDiffMessage = { joins: {}, leaves: {} };
     leavePresenceDiffMessage.leaves[`User:${this.nonAdmin.id}`] = {};