Mock Figma API with MSW

opauloh commented 2 years ago

[x] I have read the Figmagic Contribution Guideline
[x] The PR title summarizes the change

1. Description of the changes made:

Added MSW package for mocking requests during tests, so it avoids hitting the real endpoints. MSW mocks work by intercepting requests on the network level, which allows to seamlessly reuse the same mock definition for testing, development, and debugging.
Added JSON mocks for all the Figma API requests, also added mocks for other tests scenarios.
Added log to warn when MSW is intercepting a request
Added ability to enable/disable mocks in the jest.env.js file
Updated Contributing guidelines with notes around mocking

2. Screenshots

API Call intercepted message:

All Tests Passing with mocking (msw) enabled:

All Tests Passing with mock disabled:

3. If this PR is related to an open issue please reference it with the # operator and the issue number:

closes https://github.com/mikaelvesavuori/figmagic/issues/124 and solves https://github.com/mikaelvesavuori/figmagic/issues/125

mikaelvesavuori commented 2 years ago

Hey! Brilliant work!

However, I get the following error, since it seems we no longer allow actual downloads. If we can handle this it would be good.

One way of doing it is to simply not test downloads as a separate unit test, as it's most likely covered by other (bigger) tests too.

Screenshot 2021-10-27 at 15 38 27

opauloh commented 2 years ago

Hey! Brilliant work!

However, I get the following error, since it seems we no longer allow actual downloads. If we can handle this it would be good.

One way of doing it is to simply not test downloads as a separate unit test, as it's most likely covered by other (bigger) tests too.

hey thanks!

I will take a look into that, the download file call is supposed to be mocked and treated as a real download, as defined by __tests__/mocks/handlers.ts line 80:

  rest.get(
    'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
    (req, res, ctx) => {
      logInterceptedRequest(req);

      const imageBuffer = readFileSync(resolve(__dirname, './files/googlelogo_color_272x92dp.png'));
      return res(
        ctx.set('Content-Length', imageBuffer.byteLength.toString()),
        ctx.set('Content-Type', 'image/jpeg'),
        ctx.body(imageBuffer)
      );
    }
  ),

I've checked against tests running in Linux and Windows machines, I'll try to check in a Mac machine

opauloh commented 2 years ago

I was able to successfully repro on a mac machine, will push a fix for it soon!

opauloh commented 2 years ago

Hi,

just pushed a fix that waits for the pipe of createWriteStream to be finished, that solves the issue with the mocks that provide the download at an instant time

const write = resp.pipe(fs.createWriteStream(filePath));
write.on('finish', resolve);

Screenshot

@mikaelvesavuori - Can you take another look? thanks!

mikaelvesavuori commented 2 years ago

CodeQL complains with this: https://github.com/mikaelvesavuori/figmagic/security/code-scanning/9?query=ref%3Arefs%2Fpull%2F142%2Fmerge+ref%3Arefs%2Fpull%2F142%2Fhead

Or as an image:

Not your "fault", as such, but it needs to be done to pass the checks.

I locally tested a solution that may work to pass the check:

// JS demo of getFigmaDocumentId()

function getFigmaDocumentId(url) {
  if (!url.startsWith('https://www.figma.com/file/')) return url;
  return url.split('https://www.figma.com/file/')[1].split('/')[0];
}

const resultFail = getFigmaDocumentId(
  'https://evil.com/https://www.figma.com/file/some-file-id-123'
);
console.log('Fails, returning original URL:', resultFail);

const resultPass = getFigmaDocumentId('https://www.figma.com/file/some-file-id-123');
console.log('Passes, returning file ID:', resultPass);

Trying to see if that fixes it.

mikaelvesavuori commented 2 years ago

This is being a pain in the ass in CI, but hold on and I'll see how we fix things.