test(playwright): enhance manager procedure mocking

[angeloashmore]

Context

This PR enhance's @slicemachine/manager mocking in Playwright tests.

This PR can be used as is or as a base for a refined implementation.

The Solution

• Add a procedures fixture with a procedures.mock() method.
• Maintain a list of procedure handlers to allow precise mock orchestration.
• Allow tests to register procedure mocks one at a time.

Impact / Dependencies

• Existing tests using procedure mocks needed to be updated.
• PRs test(playwright): Remove describe in test files #1256, test(playwright): Convert Cypress tests to Playwright - 3 #1250, fix(manager, slice-machine-ui, playwright): environment edge cases #1253 will need to be updated. There will likely be conflicts.

Checklist before requesting a review

• I hereby declare my code ready for review.
• If it is a critical feature, I have added tests.
• The CI is successful.
• If there could backward compatibility issues, it has been discussed and planned.

🐕

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
slice-machine	✅ Ready (Inspect)	Visit Preview	Dec 26, 2023 8:08pm

[xrutayisire]

Thank you to have started this, so for me I tried this way and first the typescript problem is blocking, and I don't see a beautiful way to fix it :/
So maybe we should convert it to a function with two sub function inside?

I explain:

// Path: playwright/utils/mockManagerProcedures.ts

async function handleRoute() {}

function mockManagerProcedures() {
  const procedures: Map<string, MockManagerProcedure[]> = new Map();

  init: (page: Page) => Promise<void>;
  mock: ({ path, handler?, config? }) => void;
}

// Path: playwright/fixtures/index.ts

export type DefaultFixtures = {
  mockProcedure: ({ path, handler?, config? }) => void
};

export const defaultTest = () => {
  return baseTest.extend<DefaultFixtures>({
    mockProcedure: async ({ page }, use) => {
      const { init, mock } = mockManagerProcedures();
      await init(page);
      
      await use(mock);
    }
  });

WDYT?

[xrutayisire]

Here this is broken in typescript with any :/

I guess it's because of the confusion with class for typescript.

Maybe we should create a classic TS function to handle this? It could remove the problem with the constructor. WDYT?

[angeloashmore]

It might be because I renamed mockManagerProcedures.ts to MockManagerProcedures.ts and eslint/tsserver isn't picking it up. I have full typing on my end.

Git properly shows the rename that was done via git mv. If it's still giving you trouble, maybe we can just rename the file something else temporarily.

A classic function is possible, but seems a bit messy considering we already have a class that encapsulates the mocking logic. The alternative was:

const mockManagerProcedures = new MockManagerProcedures()
await mockManagerProcedures.setup(page)

The setup/init methods are necessary because constructors cannot return Promises, thus they cannot use async/await.

[angeloashmore]

Another thing to consider re: using a plain function:

We may want to check the list of mocked procedures. Returning the full MockProceduresClass allows us to read the instance's procedures property. Providing a single mockProcedures fixture wouldn't allow that, unless we returned an object.

[xrutayisire]

LGTM with the typescript problem 🚀
Super work! Thanks!