Test site improvements

[ang-zeyu]

Describe the solution you'd like

The test site works fine for detecting diffs but could be better organised in general:

• [ ] Split the tests in the main test_site/index.md into more files
• [ ] Dedicate a specific page to stress test the site nav, and then make a site nav that is actually usable for navigating within the site
• [ ] PR previews for the test site?
• [x] Gitignore the page-vue.render.js files containing the vue applications as the diffs are unreadable. (from #1512)

[gerteck]

I am proposing to up the priority of this issue. (To at least p.Medium, if not high).

Some context to why the simple act of ignoring render files can drastically improve overhead and developer experience.

Context and Explanation to understand this Issue

What is the page-vue.render,js function? This function is pre-generated on the server side, and sent over to the web client to render / hydrate the HTML received. Currently, in the Vue 2 implementation of MarkBind, this is where this function is generated: https://github.com/MarkBind/markbind/blob/8c9de42d78a67e4e73d8ed06c39d741ed71ddeb2/packages/core/src/Page/PageVueServerRenderer.ts#L39-L68

For more information, read up to MarkBind's Server Side Rendering. (I think that it can be more descriptive - which is another issue for a subsequent time). So, whenever there is a change in the html content, there will inevitably be a change in the js render function. Note that these render functions can be more than thousands of lines long, with numerous characters per line. Because these render functions are auto-compiled, they are not meant to be human readable.

Currently for the snapshot tests, the render function files are not ignored. An example of the render function file is:

https://github.com/MarkBind/markbind/blob/8c9de42d78a67e4e73d8ed06c39d741ed71ddeb2/packages/cli/test/functional/test_site/expected/index.page-vue-render.js#L1-L337

The snapshot tests currently check for differences in rendered HTML, AND the page render function - which is unnecessary and adds considerable overhead. For example, I make a change that causes a regression in the rendered HTML file. We see that the test detects at least two differences - one in the index.html, and one in the render function

The change in index.html shown is useful. The change in the render function is not as much so. Additionally, because the render function is sometimes generated in a single line, unrelated changes pollute the CLI and makes it hard to identify the change or regression.

Furthermore, this effectively doubles or exponentially increases the workload of the snapshot tests (render functions are understandably more verbose than finished, rendered HTML), making it take at least double as much time to check diffs.

Fix

Gitignore the page-vue.render.js files containing the vue applications as the diffs are unreadable.

[gerteck]

Recommend this issue to be worked on once Vue Migration is completed, as there might be some changes to the vue render function (e.g. naming etc.)