fix: empty build due babel incorrect configuration

[ghassanmas]

The PR #315 added @babel/core >= 7.*. upgrading/using babel v7
requires, making certian changes, e.g using @babel...etc. This
lead to npm run build being interrupted/exited.without
generating the /dist folder.

Luckily, there is a pacakge to automate migration of config
using npx babel-upgrade --write, followed by npm install, and
few minor changes, the dist folder came to life again.

This shall fixes this openedx/wg-build-test-release#166. and
probably making this openedx/edx-platform#30309 unnecessary.

[openedx-webhooks]

Thanks for the pull request, @ghassanmas! I've created OSPR-6648 to keep track of it in JIRA, where we prioritize reviews. Please note that it may take us up to several weeks or months to complete a review and merge your PR.

Feel free to add as much of the following information to the ticket as you can:

• supporting documentation
• Open edX discussion forum threads
• timeline information ("this must be merged by XX date", and why that is)
• partner information ("this is a course on edx.org")
• any other information that can help Product understand the context for the PR

All technical communication about the code itself will be done via the GitHub pull request interface. As a reminder, our process documentation is here.

Please let us know once your PR is ready for our review and all tests are green.

[ghassanmas]

@Jawayria @mraarif since this is realted to #340 I am tagging you here.

[mraarif]

@Jawayria can you help @ghassanmas

[natabene]

@ghassanmas Thank you for your contribution. @Jawayria Will you review this PR?

[codecov]

Codecov Report

Merging #341 (7243756) into master (66906f3) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #341   +/-   ##
=======================================
  Coverage   98.90%   98.90%           
=======================================
  Files          71       71           
  Lines        1641     1641           
  Branches      404      404           
=======================================
  Hits         1623     1623           
  Misses         18       18           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 66906f3...7243756. Read the comment docs.

[Jawayria]

We already have @babel/core in dependencies then why do we need to add babel-core?

[ghassanmas]

Yup good catch just removed it. May be was added by the script or by me while debugging and forgot to remove it... Anyway after removing still got the bundle when npm run build

[aht007]

@ghassanmas I enabled CI checks on this PR and looks like some configuration needs updates that you might have missed after replacing the outdated packages with newer packages

[ghassanmas]

The issue here is because we upgrade babel to v7 while using still using babel-jest 23.x.
As it seems babel-jest 23.* uses babel 6 and where we upgrade to babel 7, this means we have to rely to on https://github.com/babel/babel-bridge, which is the official recommend solution to get away when you have pacakges that needs babel 6 and babel 7. Also qouting from babel-jest:

Note: If you are using Babel version 7 then you need to install babel-jest, babel-core@^7.0.0-bridge.0 and @babel/core with the following command:
yarn add --dev babel-jest babel-core@^7.0.0-bridge.0 @babel/core regenerator-runtime
You will need to use babel.config.js in order to transpile node_modules. See https://babeljs.io/docs/en/next/config-files for more information.
You can also see the example in the Jest repository: https://github.com/facebook/jest/tree/54f4d4ebd3d1a11d65962169f493ce41efdd784f/examples/babel-7 ¹

So resolve I would need to revert this commit 8a14cdd. And that pacakge shall be removed when babel-jest is upgraded to >= 24.*
Does that sound okay @Jawayria @aht007

Footnotes

1. https://archive.jestjs.io/docs/en/23.x/getting-started.html#using-babel ↩

[aht007]

The issue here is because we upgrade babel to v7 while using still using babel-jest 23.x. As it seems babel-jest 23.* uses babel 6 and where we upgrade to babel 7, this means we have to rely to on https://github.com/babel/babel-bridge, which is the official recommend solution to get away when you have pacakges that needs babel 6 and babel 7. Also qouting from babel-jest:

Note: If you are using Babel version 7 then you need to install babel-jest, babel-core@^7.0.0-bridge.0 and @babel/core with the following command:
yarn add --dev babel-jest babel-core@^7.0.0-bridge.0 @babel/core regenerator-runtime
You will need to use babel.config.js in order to transpile node_modules. See https://babeljs.io/docs/en/next/config-files for more information.
You can also see the example in the Jest repository: https://github.com/facebook/jest/tree/54f4d4ebd3d1a11d65962169f493ce41efdd784f/examples/babel-7 1

So resolve I would need to revert this commit 8a14cdd. And that pacakge shall be removed when babel-jest is upgraded to >= 24.* Does that sound okay @Jawayria @aht007

Footnotes

1. https://archive.jestjs.io/docs/en/23.x/getting-started.html#using-babel ↩

Yeah thats okay with me, we can add this placeholder package until we don't upgrade babel-jest. We can also mention this thing in comments somewhere to keep it in records to remove that once the said upgrade is done

[ghassanmas]

@aht007 can you rerun the tests now... I have readded the bridge pacakge... also wrote expalnation about it in the commit message

[Jawayria]

@ghassanmas why can't we just upgrade babel-jest to v24 instead of going for a temporary solution? Is there any blocker on upgrading babel-jest to v24?

[ghassanmas]

@Jawayria two tests are failling:

Summary of all failing tests
 FAIL  src/components/EditImageModal/EditImageModal.test.jsx (6.265s)
  ● EditImageModal › Modal › behaves › handleOpenModal sets correct state for event with data (editing an image)

    expect(received).toEqual(expected) // deep equality

    Expected: "normal"
    Received: "skeleton"

      700 |
      701 |         expect(editImageModal.state('areImageDimensionsValid')).toEqual(true);
    > 702 |         expect(editImageModal.state('assetsPageType')).toEqual(pageTypes.NORMAL);
          |                                                        ^
      703 |         expect(editImageModal.state('baseAssetURL')).toEqual(sampleText);
      704 |         expect(editImageModal.state('currentUploadErrorMessage')).toBe(null);
      705 |         expect(editImageModal.state('currentValidationMessages')).toEqual({});

      at Object.<anonymous> (src/components/EditImageModal/EditImageModal.test.jsx:702:56)

 FAIL  src/components/AccessibilityPolicyForm/AccessibilityPolicyForm.test.jsx
  ● <AccessibilityPolicyForm /> › statusAlert › shows correct success message

    expect(received).toContain(expected) // indexOf

    Expected substring: "×Thank you for contacting edX!Thank you for your feedback regarding the accessibility of Studio. We typically respond within one business day (Monday to Friday, 1:00 PM UTC to 9:00 PM UTC)."
    Received string:    "×Thank you for contacting edX!Thank you for your feedback regarding the accessibility of Studio. We typically respond within one business day (Monday to Friday, 3:00 PM GMT+2 to 11:00 PM GMT+2)."

      159 |       expect(statusAlertType).toEqual('success');
      160 |       expect(statusAlert.find('div').first().hasClass('alert-success')).toEqual(true);
    > 161 |       expect(statusAlert.find('div').first().text()).toContain('×Thank you for contacting edX!Thank you for your feedback regarding the accessibility of Studio. We typically respond within one business day (Monday to Friday, 1:00 PM UTC to 9:00 PM UTC).');
          |                                                      ^
      162 |     });
      163 |
      164 |     it('shows correct rate limiting message', () => {

      at Object.<anonymous> (src/components/AccessibilityPolicyForm/AccessibilityPolicyForm.test.jsx:161:54)


Test Suites: 2 failed, 39 passed, 41 total
Tests:       2 failed, 720 passed, 722 total
Snapshots:   0 total
Time:        19.21s      

I can fix them but I don't if I would be cheating or not. So I opted out from missing the test cases

[Jawayria]

Oh alright. If it brings up test failures then leave the babel-jest upgrade. We can go with the current solution for now.
Thanks for clarifying the things.

[aht007]

@ghassanmas Are we good to merge this one now...?

[ghassanmas]

I am good but I can't merge it myself

[openedx-webhooks]

@ghassanmas 🎉 Your pull request was merged! Please take a moment to answer a two question survey so we can improve your experience in the future.