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

Ponyfill clock functions via ponyfill prop #4662

Merged
merged 41 commits into from Mar 31, 2023
Merged

Ponyfill clock functions via ponyfill prop #4662

merged 41 commits into from Mar 31, 2023

Conversation

compulim
Copy link
Contributor

@compulim compulim commented Mar 4, 2023

Related to #4650.

Fixes #4665.

Changelog Entry

Added

  • Resolved #4650. Added ponyfill prop to <ReactWebChat>/<Composer> and createStoreWithOptions, by @compulim, in PR #4662
    • This is for development scenarios where fake timer is needed and will only applies to Web Chat only

Fixed

Description

axe-core use setTimeout from global scope.

However, for our tests, we are using fake timer (lolex) installed at global scope. Thus, our globally installed fake timer is intervening the operation of axe-core.

We are adding support to pass ponyfill of clock functions. In our code, instead of using setTimeout from global, we will use a ponyfill version of setTimeout, and fallback to global setTimeout.

This ponyfill prop/options is available on <ReactWebChat> and createStore.

However, since not all of our dependencies support ponyfill, it's use is very limited and only targeting development scenarios where fake timer is needed.

To-dos

  • (Postpone) Consider using eslint-plugin-html to extract inlined JavaScript code for ESLint and verify lolex.install is not used
  • (Done) Should we check if store is ponyfilled, but UI is not, and vice versa?
    • Also, for DirectLineEmulator to detect if the store is ponyfilled

Design

We added .eslintrc.yml/rules/no-restricted-globals to make sure our code don't use most clock functions from global.

As we are not using high-resolution timer, we are not supporting ponyfill of window.performance object.

createStore is internally called by <Composer> and also externally called by web devs. We are adding a new createStoreWithOptions to allow ponyfill to be passed to createStore.

Despite some new Date() are purely for formatting, such as new Date('2023-03-03T12:34:56.000Z').getTime(). For consistency, we are using the ponyfilled version of Date even for formatting.

We only pass ponyfill to where it is supported. As none of our dependencies support ponyfill clock functions, that means, the fake timers would only applies to code of Web Chat. For example, the auto-scroll package will not use this ponyfill.

Specific Changes

  • Added <PonyfillComposer> and usePonyfill(): [GlobalThisClock]
  • Modified all production code that use global clock functions, to use ponyfilled clock functions
  • Added new createStoreWithOptions to pass ponyfill
  • ESLint: added no-restricted-globals rule to disable global clock
  • Remove deprecated useLastTypingAt, useLocalize and <Localize>
  • Telemetry: "send status change" should not emit undefined values
  • Test: modernize hooks test for useActiveTyping and useTrackTiming
  • Updated ESBuild dev server to support latest version of ESBuild API
  • Typing: updated typing for whileConnected
  • Test: added new DirectLineEmulator.actPostActivity(() => Promise<void>) to manipulate outgoing message via send box, in addition to, via emulateOutgoingActivity
    • Will also return the activity-in-transit, namely, activity
  • Test: createDirectLineEmulator will now createStore
    • For all code that use the DirectLineEmulator, they are creating Redux store without customizing it
    • So it's okay to update the internal API
  • Test: use Asia/Hong_Kong timezone to reduce issues with daylight saving time
  • I have added tests and executed them locally
  • I have updated CHANGELOG.md
  • I have updated documentation

Review Checklist

This section is for contributors to review your work.

  • Accessibility reviewed (tab order, content readability, alt text, color contrast)
  • Browser and platform compatibilities reviewed
  • CSS styles reviewed (minimal rules, no z-index)
  • Documents reviewed (docs, samples, live demo)
  • Internationalization reviewed (strings, unit formatting)
  • package.json and package-lock.json reviewed
  • Security reviewed (no data URIs, check for nonce leak)
  • Tests reviewed (coverage, legitimacy)

@compulim compulim changed the title [DRAFT] Allow ponyfilling global clock functions [DRAFT] Ponyfill clock functions via ponyfill prop Mar 9, 2023
@compulim compulim changed the title [DRAFT] Ponyfill clock functions via ponyfill prop Ponyfill clock functions via ponyfill prop Mar 9, 2023
@compulim compulim marked this pull request as ready for review March 10, 2023 00:34
@compulim compulim added p1 Painful if we don't fix, won't block releasing area-accessibility labels Mar 23, 2023
tdurnford
tdurnford previously approved these changes Mar 29, 2023
@compulim compulim merged commit 0e770c8 into main Mar 31, 2023
8 of 10 checks passed
@compulim compulim deleted the feat-clock-ponyfill branch March 31, 2023 17:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-accessibility p1 Painful if we don't fix, won't block releasing
Projects
None yet
Development

Successfully merging this pull request may close these issues.

npm start not working after bumping ESBuild Onboarding shift-left solution for accessibility
2 participants