Replace ember-cli-mirage with direct miragejs usage

.eslintrc.js

@@ -109,7 +109,7 @@ module.exports = {
 
     // mirage files
     {
-      files: ['mirage/**/*.js'],
+      files: ['tests/mirage/**/*.js'],
       rules: {
         // disabled because of different `.find()` meaning
         'unicorn/no-array-callback-reference': 'off',

.github/workflows/ci.yml

@@ -39,7 +39,6 @@ jobs:
           files_ignore: |
             app/**
             e2e/**
-            mirage/**
             public/**
             tests/**
             .eslintrc

config/environment.js

@@ -63,8 +63,6 @@ module.exports = function (environment) {
 
   if (environment === 'production') {
     // here you can enable a production-specific feature
-    delete ENV['ember-cli-mirage'];
-
     ENV.sentry = {
       dsn: process.env.SENTRY_DSN_WEB,
     };

docs/ARCHITECTURE.md

@@ -51,14 +51,14 @@ These files have to do with the frontend:
 - `.ember-cli` - Settings for the `ember` command line interface
 - `ember-cli-build.js` - Contains the build specification for Broccoli
 - `.eslintrc.js` - Defines Javascript coding style guidelines (enforced during CI???)
-- `mirage/` - A mock backend used during development and testing
 - `node_modules/` - npm dependencies - (ignored in `.gitignore`)
 - `package.json` - Defines the npm package and its dependencies
 - `package-lock.json` - Locks dependencies to specific versions providing consistency across
   development and deployment
 - `public/` - Static files that are merged into `dist/` during build
 - `testem.js` - Integration with Test'em Scripts
 - `tests/` - Frontend tests
+- `tests/mirage/` - A mock backend used during development and testing
 - `vendor/` - frontend dependencies not distributed by npm; not currently used
 
 ## Deployment - Heroku

docs/CONTRIBUTING.md

@@ -134,18 +134,12 @@ To build and serve the frontend assets, use the command `pnpm start`. There
 are variations on this command that change which backend your frontend tries to
 talk to:
 
-| Command                                   | Backend                                       | Use case                                                |
-| ----------------------------------------- | --------------------------------------------- | ------------------------------------------------------- |
-| `pnpm start:live`                         | <https://crates.io>                           | Testing UI changes with the full live site's data       |
-| `pnpm start:staging`                      | <https://staging-crates-io.herokuapp.com>     | Testing UI changes with a smaller set of realistic data |
-| `pnpm start`                              | Static fixture test data in `mirage/fixtures` | Setting up particular situations, see note              |
-| `pnpm start:local`                        | Backend server running locally                | See the Working on the backend section for setup        |
-| `pnpm start -- --proxy https://crates.io` | Whatever is specified in `--proxy` arg        | If your use case is not covered here                    |
-
-> Note: If you want to set up a particular situation, you can edit the fixture
-> data used for tests in `mirage/fixtures`. The fixture data does not currently
-> contain JSON needed to support every page, so some pages might not load
-> correctly.
+| Command                                   | Backend                                   | Use case                                                |
+| ----------------------------------------- | ----------------------------------------- | ------------------------------------------------------- |
+| `pnpm start:live`                         | <https://crates.io>                       | Testing UI changes with the full live site's data       |
+| `pnpm start:staging`                      | <https://staging-crates-io.herokuapp.com> | Testing UI changes with a smaller set of realistic data |
+| `pnpm start:local`                        | Backend server running locally            | See the Working on the backend section for setup        |
+| `pnpm start -- --proxy https://crates.io` | Whatever is specified in `--proxy` arg    | If your use case is not covered here                    |
 
 #### Running the frontend tests
 

package.json

@@ -24,7 +24,6 @@
     "precompress": "node ./script/precompress-assets.mjs",
     "prettier:check": "prettier --check package.json '**/*.js' '**/*.mjs' '**/*.ts' '**/*.md'",
     "prettier:write": "prettier --write package.json '**/*.js' '**/*.mjs' '**/*.ts' '**/*.md'",
-    "start": "ember serve",
     "start:docker": "ember serve --proxy http://backend:8888",
     "start:live": "ember serve --proxy https://crates.io",
     "start:local": "ember serve --proxy http://127.0.0.1:8888",
@@ -88,7 +87,6 @@
     "ember-cli-head": "2.0.0",
     "ember-cli-htmlbars": "6.3.0",
     "ember-cli-inject-live-reload": "2.1.0",
-    "ember-cli-mirage": "3.0.4",
     "ember-cli-notifications": "9.1.0",
     "ember-click-outside": "6.1.1",
     "ember-concurrency": "4.0.2",
@@ -99,6 +97,7 @@
     "ember-event-helpers": "0.1.1",
     "ember-exam": "9.0.0",
     "ember-fetch": "8.1.2",
+    "ember-inflector": "5.0.2",
     "ember-keyboard": "9.0.1",
     "ember-link": "3.3.0",
     "ember-load-initializers": "3.0.1",
@@ -143,8 +142,7 @@
     "ember-get-config": "2.1.1",
     "ember-inflector": "5.0.2",
     "ember-modifier": "4.2.0",
-    "ember-svg-jar>cheerio": "1.0.0-rc.12",
-    "miragejs": "0.1.48"
+    "ember-svg-jar>cheerio": "1.0.0-rc.12"
   },
   "pnpm": {
     "peerDependencyRules": {

tests/acceptance/front-page-test.js

@@ -9,8 +9,8 @@ import { getPageTitle } from 'ember-page-title/test-support';
 
 import { setupApplicationTest } from 'crates-io/tests/helpers';
 
-import { summary } from '../../mirage/route-handlers/summary';
 import axeConfig from '../axe-config';
+import { summary } from '../mirage/route-handlers/summary';
 
 module('Acceptance | front page', function (hooks) {
   setupApplicationTest(hooks);

tests/acceptance/search-test.js

@@ -10,8 +10,8 @@ import { getPageTitle } from 'ember-page-title/test-support';
 
 import { setupApplicationTest } from 'crates-io/tests/helpers';
 
-import { list as listCrates } from '../../mirage/route-handlers/crates';
 import axeConfig from '../axe-config';
+import { list as listCrates } from '../mirage/route-handlers/crates';
 
 module('Acceptance | search', function (hooks) {
   setupApplicationTest(hooks);

tests/helpers/setup-mirage.js

@@ -1,19 +1,37 @@
-import { setupMirage } from 'ember-cli-mirage/test-support';
+import { settled } from '@ember/test-helpers';
+
 import window from 'ember-window-mock';
 import { setupWindowMock } from 'ember-window-mock/test-support';
 
+import makeServer from '../mirage/config';
 import { setupFakeTimers } from './fake-timers';
 
 export default function (hooks) {
-  setupMirage(hooks);
   setupWindowMock(hooks);
   setupFakeTimers(hooks, '2017-11-20T12:00:00');
 
   // To have deterministic visual tests, the seed has to be constant
   hooks.beforeEach(function () {
+    this.server = makeServer({
+      environment: 'test',
+    });
+
+    if (location.search.includes('mirageLogging')) {
+      this.server.logging = true;
+    }
+
     this.authenticateAs = user => {
       this.server.create('mirage-session', { user });
       window.localStorage.setItem('isLoggedIn', '1');
     };
   });
+
+  hooks.afterEach(async function () {
+    await settled();
+
+    if (this.server) {
+      this.server.shutdown();
+      delete this.server;
+    }
+  });
 }

tests/mirage/config.js

@@ -0,0 +1,49 @@
+import { createServer } from 'miragejs';
+
+import factories from './factories';
+import fixtures from './fixtures';
+import models from './models';
+import * as RouteHandlers from './route-handlers';
+import serializers from './serializers';
+
+export default function makeServer(config) {
+  let server = createServer({
+    ...config,
+
+    factories,
+    fixtures,
+    models,
+    serializers,
+
+    routes() {
+      RouteHandlers.register(this);
+
+      // Used by ember-cli-code-coverage
+      this.passthrough('/write-coverage');
+    },
+    ...getHookConfig(),
+  });
+  server = processHooks(server);
+  return server;
+}
+
+export const CONFIG_KEY = 'hook:mirage:config';
+export const HOOK_KEY = 'hook:mirage:hook';
+
+// Get injected config for testing with Playwright
+function getHookConfig() {
+  return window[Symbol.for(CONFIG_KEY)];
+}
+
+// Process injected hooks for testing with Playwright
+function processHooks(server) {
+  let hooks = window[Symbol.for(HOOK_KEY)];
+  if (hooks && Array.isArray(hooks)) {
+    hooks.forEach(hook => {
+      if (hook && typeof hook === 'function') {
+        hook(server);
+      }
+    });
+  }
+  return server;
+}