refactor: Update test environments and lint configuration

[jhildenbiddle]

Summary

Updated test environments (Jest = unit + integration, Playwright = e2e) and lint configuration (ESLint, Prettier) to accommodate.

Summarized benefits

• Fixed e2e tests stability issues 🤞
• Fixed inability to run tests on M1-based Macs
• Improved test performance by > 50%
  • Switched to Playwright's own test runner instead of Jest for e2e tests
  • Split Jest (unit+integration) and Playwright (e2e) CI jobs to run in parallel
  • Reduced CI node tests from two versions ([14, 16]) to one (latest LTS).
  • Reduced Playwright OS tests from three (Linux, Mac, Windows) to one (Linux)
• Modernized ESLint configuration and fixed all existing issues

What kind of change does this PR introduce?

• Update Jest 26 => 27
• Update Jest-related libs (babel parser)
• Update Playwright 1.8 => Playwright Test 1.18
• Update GitHub CI (action versions, job parallelization, and matrices)
• Update ESLint 5 => 8
• Update ESLint-related libs (parser, prettier, Jest, Playwright)
• Fix test failures on M1-based Macs
• Fix e2e stability issues by replacing PW $ method calls
• Fix ESLint errors
• Fix incorrect CI flag on Jest runs (-ci => --ci)
• Refactor e2e test runner from Jest to Playwright Test
• Refactor e2e test files for Playwright Test
• Refactor fix-lint script name to lint:fix for consistency
• Refactor npm scripts order for readability
• Remove unnecessary configs and libs
• Remove example image snapshots

For any code change,

• Related documentation has been updated if needed
• Related tests have been updated or tests have been added

Does this PR introduce a breaking change? (check one)

• Yes
• No

Tested in the following browsers:

• Chrome
• Firefox
• Safari
• Edge
• IE

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/docsify-core/docsify-preview/G7EEdbUbz4cFbPM73nJ7SdD3jsoA
✅ Preview: https://docsify-preview-git-update-test-env-docsify-core.vercel.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 7d51edc:

Sandbox	Source
docsify-template	Configuration

[trusktr]

what is this used for?

[jhildenbiddle]

This is part of the upload-artifact action configuration. Entries in the path are zipped and made available for download after all jobs are completed. In this case:

• _playwright-results contains screenshot diffs. We aren't using them yet, but I wanted to have everything ready to go if/when someone wants too.
• _playwright-report contains an HTML report of the Playwright set results.

Screenshot diffs will only be available when one-or-more screenshot tests fail. The HTML report is generated every test run, but I'm going to update the action configuration to only store artifacts when a failure occurs. We don't need HTML reports filled with green check marks (as satisfying as they may be). :)

Currently, the HTML report is stored even when all tests pass, but I should switch this so

FYI: Artifacts can be downloaded on the bottom of an Action's detail page:

[trusktr]

does this mean we can remove __diff_output__ here now?

[jhildenbiddle]

Yep. Good catch. Will update.

[trusktr]

I wonder if these page args (instead of global page) prevent test issues. In the previous test setup with jest-playwright, I wrote the following local test which sometimes passes, sometimes fails:

test('the most basic test', () => {
    await page.goto(TEST_HOST + '/docs/index.html#/');

    expect(await page.innerHTML('#main')).toMatch(
      'A magical documentation site generator'
    );
})

What I noticed happens is that sometimes the text exists, test passes. Other times, between the page.goto call and the next expect, the on('click') handler in Docsify's implementation is triggered as if something (no idea what) clicked on a sidebar link, and by the time the expect runs, the content on the page is already different due to the (random?) link click that I am observing.

My guess is that something from one test is leaking into another, and if that is true, then I bet these individual page args isolate the pages better and will prevent it. Just a hunch.

[jhildenbiddle]

Hard to say what the issue is in the scenario above, but I don't think it's an issue with a global page object because I'm still using a global page object in this update (which I'm mulling over the best way to get rid of).

Playwright has undergone significant development since we adopted in over a year ago, so we needed this update just to bring us on par with the project. The updated docs also specifically recommend against using the original "dollar sign" methods like $, $$, $eval, and $$eval which I was using in a few areas (per the instructions from the old docs). This PR follows the new recommendation to replace these methods with the newer locator and evaluate methods. Here's are two screenshots from the docs:

Between the "flakey" method swap, the new Playwright runner, and a year's worth of development, I'm hoping this PR will address and test stability issues people have been dealing with.

[jhildenbiddle]

@docsifyjs/core -- Ready for review. Thx!

[sy-records]

What is the status of these? @jhildenbiddle

Shouldn't these need to be passed states?

[jhildenbiddle]

@sy-records --

Shouldn't these need to be passed states?

The unfinished jobs in the screenshot are the result of refactoring the YAML files. The same jobs are being run as before (build, lint, unit, integration, and e2e) but I've merged two separate YAML files into a single file. Instead of multiple files, we now have one file with multiple jobs. Same effect.

In other words, these "unfinished" jobs:

Are replaced by these newer jobs:

Moving from two YAML files to one means that instead of seeing two items per PR on the Actions page:

We now only see one:

And all tests are displayed on a single details page:

Much cleaner.

You may also notice that number of tests and their titles are different. This is a result of changing the test matrices. I have them configured to now test only on the latest LTS version instead of hard-coding multiple versions (previously node 14 and 16), and our e2e tests are now only running on Linux (because e2e tests are slow, and Linux is the fastest CI platform between Linux, macOS, and Windows). We can adjust these if needed, but these changes dramatically reduced the amount of time it took to complete tests (> 50%).

When the PR is merged, the required CI tests will be updated and unfinished jobs like the ones seen in your screenshots will not appear.

[sy-records]

Thanks, LGTM.

Please use Squash and merge.