Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Migrate from ember-cli-mirage to msw and @mswjs/data #10393

Merged
merged 189 commits into from
Jan 31, 2025
Merged

Conversation

Turbo87
Copy link
Member

@Turbo87 Turbo87 commented Jan 15, 2025

As discussed in #10357, ember-cli-mirage isn't particularly well maintained anymore and blocking a couple of dependency updates.

This PR migrates us from using ember-cli-mirage for the mock API in the frontend test suites towards using msw and @mswjs/data.

I've used a pnpm workspace to add a subpackage at packages/crates-io-msw, that is roughly equivalent to the previous top-level mirage folder. This package contains:

  • all of the msw request handlers to simulate our crates.io API (exported as handlers)
  • the @mswjs/data database with all of the models that support the above request handlers (exported as db)
  • the data from mirage/fixtures/ and a loadFixtures() function

The package also contains its own dedicated test suite. The test suite is essentially a vitest port of the previous tests/mirage/ tests, but running in Node.js to simplify their development.

The @crates-io/msw package is integrated into the QUnit test suite by a setupMsw() function (similar to the previous setupMirage()). This function sets up the mock service worker and database for each test and ensures proper cleanup of both after the test has finished.

The package is also integrated into the Playwright test suite (at e2e/). Here, it is using a msw fixture, that can be used in tests and sets up playwright-msw which transforms the msw request handlers into Playwright request handlers. The msw fixture has three properties, worker is controlling the HTTP mocking, db is the @mswjs/data database mentioned above, and authenticateAs() is roughly equivalent to the similarly-named function from before. Since the mocking is now running on the Playwright side instead of inside the browser the test code could be simplified significantly.

I'm aware that the diff is big, and I'm happy to split it up into more manageable chunks if it helps. I definitely recommend reviewing in "ignore whitespace changes" mode. I've tried to group the commits thematically so that the can be reviewed in smaller chunks too. Let me know if/how I can help in getting this reviewed! :)

Closes #10357

Related:

@Turbo87 Turbo87 added A-frontend 🐹 C-internal 🔧 Category: Nonessential work that would make the codebase more consistent or clear labels Jan 15, 2025
@Turbo87 Turbo87 force-pushed the msw branch 5 times, most recently from 87a8963 to 400fa6c Compare January 17, 2025 10:35
@eth3lbert
Copy link
Contributor

eth3lbert commented Jan 18, 2025

Hmm, since msw is optional in @mswjs/data, I think we could use the webpack's externals trick to just let it get from the global (or other likes window, self, ...).
This would look something like following:

// ember-cli-build.js

...

  return require('@embroider/compat').compatBuild(app, Webpack, {
    extraPublicTrees,
    staticAddonTrees: true,
    staticAddonTestSupportTrees: true,
    staticModifiers: true,
    packagerOptions: {
      webpackConfig: {
        resolve: {
          fallback: {
            // disables `crypto` import warning in `axe-core`
            crypto: false,
            // disables `timers` import warning in `@sinon/fake-timers`
            timers: false,
          },
        },
        externals: ({ request, context }, callback) => {
          if (request == 'msw' && context.includes('@mswjs/data')) {
            return callback(null, request, 'global');
          }
          callback();
        },
      },
    },
  });

I'm not sure if this is more better than the patch approach though 😅

@Turbo87 Turbo87 force-pushed the msw branch 22 times, most recently from 7b13aa9 to 331b2d5 Compare January 27, 2025 10:09
@Turbo87 Turbo87 enabled auto-merge January 31, 2025 13:06
@Turbo87 Turbo87 merged commit ae8195c into rust-lang:main Jan 31, 2025
10 checks passed
@Turbo87 Turbo87 deleted the msw branch January 31, 2025 13:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-frontend 🐹 C-internal 🔧 Category: Nonessential work that would make the codebase more consistent or clear
Projects
Status: For next meeting
Development

Successfully merging this pull request may close these issues.

3 participants