Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Port spec for Numberinput #81

Merged
merged 1 commit into from
Sep 16, 2023
Merged

Conversation

kikuomax
Copy link
Collaborator

@kikuomax kikuomax commented Sep 4, 2023

Part of the series of PRs to port unit tests.

The following command should pass:

npx jest src/components/numberinput

You will see the following warning while running the tests, but it is fine because it happens only in the test environment:

[Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected Number with value 0, got String with value "".

Related to:

Proposed Changes

  • Port spec for Numberinput

- Reimplements the test case "increments/decrements on long pressing
  exponentially" due to its flaky results. It used to use the real timer
  to simulate a long press, however, this depended on the machine
  running the test. It now uses Jest's fake timer to make the test case
  deterministic. There were subtle details I had to take into account to
  confidently wrote a test:
    - Jest's fake `setTimeout` truncates a given `delay` to an extact ms
      when it schedules a callback.
    - `jest.advanceTimersByTime` also truncates a given `msToRun` but
      accumulates the remainders. It advances an extra millisecond when
      the accumulated remainders becomes large enough.
    - I decided to floor the input for `jest.advanceTimersByTime` to
      prevent the accumulated remainder from triggering an extra
      callback. This may look counter-intuitive if you look into the
      source code of `Numberinput`, because it does not floor the delay
      before passing it to `setTimeout`. Although, according to the
      above Jest's behavior, I am confident with my decision.
- Updates the unit tests (spec) of `Numberinput` so that they can work
  with `@vue/test-utils` V2:
    - Supplies a fake component that mocks `checkHtml5Validity` as a
      stub of `b-input` in the test group "Rendered (shallow)", because
      the entire tests aborted due to missing `checkHtml5Validity`.
      In `@vue/test-utils` V1, `shallowMount` catches an error thrown
      from mounted component, warns it, and continues, but in V2, it
      bubbles the error and ends up with a crash.
    - Corrects the v-model property: `value` → `modelValue`.
    - Replaces `wrapper.contains` with a combination of `find` and
      `exists` because `wrapper.contains` no longer exists in
      `@vue/test-utils` V2.
    - Awaits `wrapper.setProps` to make sure the subsequent tests verify
      the updated state.
    - Replaces direct data modification with `wrapper.setData` and
      awaits it to make sure the subsequent tests verify the updated
      state.
    - Replaces `wrapper.name()` with `wrapper.vm.$options.name` because
      `wrapper.name` no longer exists in `@vue/test-utils` V2.
    - Replaces the test on `wrapper.isVueInstance()` with presence of
      `wrapper.vm` because `wrapper.isVueInstance` no longer exists in
      `@vue/test-utils` V2.

issue ntohq#1
@kikuomax kikuomax requested a review from wesdevpro September 4, 2023 03:54
@wesdevpro wesdevpro merged commit a602e6e into ntohq:dev Sep 16, 2023
@kikuomax kikuomax deleted the test-numberinput branch September 18, 2023 01:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants