Description

Previously, the <RichText/> component lacked test coverage in React Native altogether.

This is my humble attempt at adding coverage for styling rich text displayed with font size derived from various sources, i.e., fontSize and style.fontSize component props, and global state selected from __experimentalGlobalStylesBaseStyles.typography.fontSize.

How has this been tested?

The tests were written as "black-box integration" tests. That's basically just my way of saying that I deliberately tried to abstain from mocking or stubbing implementation details of the <RichText/> component itself and only mocked state provided to the component from the outer edges of the system, i.e., component props, global state selected from Redux. That means that getPxFromCssUnit and Dimensions.get( 'window' ) are "real."

These tests are supposed to closely resemble "functional" testing in that they "display" the <RichText/> component in various staged scenarios and attempt to assert the results from the "users' experience." I would have preferred to use the actual text that the user would see displayed in order to assert against, but for some reason our text provided via component props is modified to be represented as HTML fragments and is wrapped in <div> which could lead to nondeterminism. I chose to use accessibilityLabel instead even though it's not ideal.

$ npm run native test -- ../rich-text/src/test/index.native.js
...
 PASS  ../rich-text/src/test/index.native.js (6.04 s)
  <RichText/>
    Font Size
      ✓ should display rich text at the DEFAULT font size. (10 ms)
      ✓ should display rich text at the PROVIDED font size computed from the LOCAL `fontSize` CSS. (7 ms)
      ✓ should display rich text at the PROVIDED font size computed from the LOCAL `style.fontSize` CSS. (1 ms)
      ✓ should display rich text at the PROVIDED font size computed from the selected GLOBAL
		`__experimentalGlobalStylesBaseStyles.typography.fontSize` CSS. (2 ms)
      ✓ should display rich text at the font size computed from the LOCAL `fontSize` CSS with HIGHEST PRIORITY
		when CSS is provided ambiguously from ALL possible sources. (2 ms)
      ✓ should display rich text at the font size computed from the LOCAL `style.fontSize` CSS with
		NEXT PRIORITY when CSS is provided ambiguously from MULTIPLE possible sources EXCLUDING `fontSize`. (1 ms)
      ✓ should display rich text at the font size computed from CSS relative to the VIEWPORT WIDTH. (1 ms)
      ✓ should display rich text at the font size computed from CSS relative to the VIEWPORT HEIGHT. (2 ms)

Test Suites: 1 passed, 1 total
Tests:       8 passed, 8 total
Snapshots:   0 total
Time:        6.489 s

Screenshots

The changes do not affect the actual UX implementation details. This just adds test coverage to existing implementation details.

Types of changes

Test Coverage.

ESLint

No issues found with the contents of this PR. All issues found are regarding existing skipped tests.

$ npm run lint-js:fix
...
/Users/ttahmouch/Desktop/src/gutenberg/packages/e2e-tests/specs/*
  113:2  warning  Skipped test  jest/no-disabled-tests
✖ 18 problems (0 errors, 18 warnings)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).