search

tjw-lint / jest-serializer-vue-tjw

Jest Serializer for Vue components
MIT License
33 stars 7 forks source link

v4.0.0 - Re-write the entire codebase #87

Open TheJaredWilcurt opened 2 months ago

TheJaredWilcurt commented 2 months ago

Idea

Re-write this library mostly from the ground up (copying some stuff over as needed)

Reason

This repo is old, updating dependencies is no longer possible (requires ESM re-write). The repo's main priority is Vue 2 with Jest. Going forward we want the main priority to be Vue 3 with Vitest.

Plan

  1. Make a new repo, so this can stop being an annoying fork.
    • vitest-serializer-vue-tjw - terrible name
    • vue3-snapshot-serializer - better name
    • vue-snapshot-serializer - yeah probably that
  2. New repo tech stack:
    • ESM import
      • Current repo uses CJS require
    • Vite + Vitest + Vitest snapshots
      • Current repo is Vue-CLI + Jest + Jest snapshots with weak Vitest support
    • Vue 3
      • Current repo is Vue 2 with weak Vue 3 support
    • GHA - Linting/Unit tests
      • Current repo has some Travis-CI code in it, but mostly uses GHA
  3. Settings will now be stored differently:
    • Settings no longer stored in files (package.json, vue.config.js, vite.config.js, etc.)
    • Instead globalThis.vueSnapshots = {}; will be used for settings.
    • This allows users to define settings in their global.beforeEach() in their settings file.
    • Also makes it much easier to override these global settings when you have test-specific settings.
    • Would be be nice to abstract the settings gathering from the serialization, so the serialization can be externalized.
      • serializeVue(htmlOrVueWrapper, settings);
      • Would allow E2E tooling to import and use this directly (See #70)
    • The library would need to clear this global setting after every run to prevent global object-mutation based test-bleed.

Planned API Support:

Setting In V4? Description
formatting Yes, may change Formmating options object
removeDataVId Yes Removes data-v-1234abcd="" from your snapshots
removeComments Yes Removes all HTML comments
removeDataTest Yes Removes data-test="whatever" from your snapshots
removeDataTestid Yes Removes data-testid="whatever" from your snapshots
removeDataTestId Yes Removes data-test-id="whatever" from your snapshots
removeDataQa Yes Removes data-qa="whatever" from your snapshots
removeDataCy Yes Removes data-cy="whatever" from your snapshots (Cypress)
removeDataPw Yes - New Removes data-pw="whatever" from your snapshots (Playwright)
removeServerRendered Yes Removes data-server-rendered="true" from your snapshots
sortAttributes Eventually Sorts the attributes inside HTML elements in the snapshot. May not be in first release of v4
attributesToClear Probably Array of attribute strings to remove the values from. ['title', 'id'] produces <input title id class="stuff">
verbose Probably Logs to the console errors or other messages if true
removeClassTest Maybe Removes all CSS classes that start with "test", class="test-whatever"
removeIdTest Maybe Removes id="test-whatever" or id="testWhatever"from snapshots
removeIstanbulComments Maybe Removes /* istanbul ignore next */ cov_1lmjj6lxv1.f[3]++; comments from snapshots. This may not be an issue in the new tech stack?
clearInlineFunctions Maybe <div title="(x) => !x"> becomes <div title="[function]">
addInputValues No Display form field value. <input> becomes <input value="whatever">. Not sure how to do this in Vue 3
stringifyObjects No Replaces title="[object Object]" with title="{a:'asdf'}". Not sure if this is possible in Vue 3

New planned features

TheJaredWilcurt commented 2 months ago

So some jackass already took the name I wanted, vue-snapshot-serializer and of course it's just using shitty "prettier". God prettier is fucking awful. It's so bad. You couldn't have called your shitty, low-effort library "vue-snapshot-prettier"???? something accurate. Of course not. Beat me by 9 months.

great. That's what I get for putting this off for years.

Prettier is the Nickelback of formatting tools.

TheJaredWilcurt commented 5 days ago

New repo and docs site mostly done.