host: Remove Monaco Percy snapshots and add lint rule

packages/eslint-plugin-boxel/index.js

@@ -4,6 +4,7 @@ module.exports = {
     'template-missing-invokable': require('./lib/rules/template-missing-invokable'),
     'missing-card-api-import': require('./lib/rules/missing-card-api-import'),
     'no-duplicate-imports': require('./lib/rules/no-duplicate-imports'),
+    'no-percy-direct-import': require('./lib/rules/no-percy-direct-import'),
     // Add other rules here
   },
 

packages/eslint-plugin-boxel/lib/recommended-rules.js

@@ -7,5 +7,6 @@
 module.exports = {
   "@cardstack/boxel/missing-card-api-import": "error",
   "@cardstack/boxel/no-duplicate-imports": "error",
+  "@cardstack/boxel/no-percy-direct-import": "error",
   "@cardstack/boxel/template-missing-invokable": "error"
 }

packages/eslint-plugin-boxel/lib/rules/no-percy-direct-import.js

@@ -0,0 +1,43 @@
+'use strict';
+
+//------------------------------------------------------------------------------
+// Rule Definition
+//------------------------------------------------------------------------------
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Forbid importing percySnapshot directly from @percy/ember; use @cardstack/host/tests/helpers instead',
+      category: 'Best Practices',
+      recommended: true,
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      noPercyDirectImport:
+        "Do not import directly from '@percy/ember'. Use `import { percySnapshot } from '@cardstack/host/tests/helpers'` instead.",
+    },
+  },
+
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value === '@percy/ember') {
+          context.report({
+            node,
+            messageId: 'noPercyDirectImport',
+            fix(fixer) {
+              return fixer.replaceText(
+                node,
+                "import { percySnapshot } from '@cardstack/host/tests/helpers';",
+              );
+            },
+          });
+        }
+      },
+    };
+  },
+};

packages/eslint-plugin-boxel/tests/lib/rules/no-percy-direct-import-test.js

@@ -0,0 +1,42 @@
+'use strict';
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/no-percy-direct-import');
+const RuleTester = require('eslint').RuleTester;
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({
+  parserOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+  },
+});
+
+ruleTester.run('no-percy-direct-import', rule, {
+  valid: [
+    {
+      code: `import { percySnapshot } from '@cardstack/host/tests/helpers';`,
+    },
+    {
+      code: `import { foo } from 'some-other-module';`,
+    },
+  ],
+  invalid: [
+    {
+      code: `import percySnapshot from '@percy/ember';`,
+      errors: [{ messageId: 'noPercyDirectImport' }],
+      output: `import { percySnapshot } from '@cardstack/host/tests/helpers';`,
+    },
+    {
+      code: `import { percySnapshot } from '@percy/ember';`,
+      errors: [{ messageId: 'noPercyDirectImport' }],
+      output: `import { percySnapshot } from '@cardstack/host/tests/helpers';`,
+    },
+  ],
+});

packages/host/tests/helpers/percy-snapshot.ts

@@ -1,5 +1,6 @@
 import { pauseTest, settled } from '@ember/test-helpers';
 
+// eslint-disable-next-line @cardstack/boxel/no-percy-direct-import
 import originalPercySnapshot from '@percy/ember';
 
 import QUnit from 'qunit';

packages/host/tests/integration/components/card-basics-test.gts

@@ -13,7 +13,6 @@ import {
 import { tracked } from '@glimmer/tracking';
 
 import Plane from '@cardstack/boxel-icons/plane';
-import percySnapshot from '@percy/ember';
 import { getService } from '@universal-ember/test-support';
 import format from 'date-fns/format';
 import parseISO from 'date-fns/parseISO';
@@ -47,6 +46,7 @@ import {
   testRealmURL,
   setupCardLogs,
   saveCard,
+  percySnapshot,
   provideConsumeContext,
   testModuleRealm,
   setupIntegrationTestRealm,

packages/host/tests/integration/components/formatted-aibot-message-test.gts

@@ -7,7 +7,6 @@ import { waitUntil } from '@ember/test-helpers';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 
-import percySnapshot from '@percy/ember';
 import { getService } from '@universal-ember/test-support';
 import { module, test } from 'qunit';
 
@@ -220,8 +219,6 @@ ${REPLACE_MARKER}
     assert.dom('.cdr.line-delete').exists({ count: 2 });
     assert.dom('.cdr.line-insert').exists({ count: 1 });
     assert.dom('[data-test-apply-code-button]').exists();
-
-    await percySnapshot(assert);
   });
 
   test('it will render one diff editor and one standard code block if one search replace block is complete and another is not', async function (assert) {
@@ -318,8 +315,6 @@ let c = 3;
         lines?.innerText === '// existing code ... \nlet a = 1;\nlet c = 3;'
       );
     });
-
-    await percySnapshot(assert);
   });
 
   test('unincremental updates are handled gracefully', async function (assert) {