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

[RNMobile] Adds Clipboard Link Suggestion to Image block and Buttons block #35972

Merged
merged 15 commits into from
Nov 22, 2021

Commits on Oct 26, 2021

  1. TT | 4058 | Resolving runtime error when running npm run native test.

    ```
    console.error
        Warning: Each child in a list should have a unique "key" prop.
    
        Check the render method of `StylePreview`. See https://reactjs.org/link/warning-keys for more information.
    ...
          86 | 		>
          87 | 			<View style={ [ styles.container, { width: itemWidth } ] }>
        > 88 | 				<View style={ styles.imageWrapper }>
             | 				^
          89 | 					{ isActive &&
          90 | 						getOutline( [ styles.outline, innerOutlineStyle ] ) }
          91 | 					<Image
    ```
    ttahmouch authored and ttahmouch committed Oct 26, 2021
    Configuration menu
    Copy the full SHA
    095a417 View commit details
    Browse the repository at this point in the history
  2. TT | 4058 | Mocking Image.getSize and Clipboard.[gs]etString for …

    …the whole test runtime.
    
    This will help avoid inadvertently making async I/O operations to underlying Native Modules
    or HTTP when integration-testing our components to ensure more stability in the test runtime.
    
    + Mocked `Image.getSize` specifically, i.e., not the whole `Image` module from `react-native`.
    + Rewrote the implementation to simply call the provided success callback synchronously.
        + It returns default values of `0` for `width` and `height` pretending to have retrieved the image URI async using HTTP.
    
    + Mocked `Clipboard.[gs]etString` which is the entire `Clipboard` module from `react-native`.
    + **Note:** `Clipboard` was deprecated in favor of `@react-native-community/clipboard` and will be removed in the future.
    + Rewrote the implementation to simply do nothing on `setString`.
    + Rewrote the implementation to simply return a `Promise` that resolves to `''` on `getString`.
    + Staging strings returned from the `Clipboard` in future integration tests can be as simple as `Clipboard.getString.mockReturnValueOnce( 'value' )`.
    ttahmouch authored and ttahmouch committed Oct 26, 2021
    Configuration menu
    Copy the full SHA
    c91bef9 View commit details
    Browse the repository at this point in the history
  3. TT | 4058 | TDDing the removal of auto-population of URLs from the Cl…

    …ipboard into the `Link Settings > Link To`
    
    field when editing an `Image` block type.
    
    + Deliberately removed existing unit tests in this module for the moment in order to make transitioning
    from `react-test-renderer` to `@testing-library/react-native` easier to manage. They will either be
    re-added in the near future, or converted to complementary integration tests.
    
    + Deliberately structured the test cases in "Given-When-Then (GWT) Gherkin-style."
    
    + Added the first test that necessitates the change for forcing auto-population of URLs from the Clipboard
    to NOT take place when editing an `<ImageEdit/>` block.
    
    + Intend to parameterize the tests to see how the same tests may be leveraged for other block types that
    have `Link Settings`, e.g., `Embed` and `Button` to avoid repeating the tests for those block types.
    
    + Integration tests will eventually be written for various planned user experience scenarios including:
    
    ```
      GIVEN the Link Settings sheet displays,
      AND the Clipboard has a URL copied,
      THEN the `Link to` field in the Link Settings should be populated with the placeholder text, i.e., `Search or type URL`.
    
      GIVEN the Link Picker sheet displays,
      AND the Clipboard has a URL copied that is different from the contents of the text input field,
      THEN the `From Clipboard` table cell should be populated with the URL from the Clipboard.
    
      GIVEN the Link Picker sheet displays with the `From Clipboard` table cell,
      WHEN the Clipboard is cleared or changed to something that is NOT a URL,
      THEN the `From Clipboard` table cell should disappear.
    
      GIVEN the Link Picker sheet displays,
      AND the contents of the Clipboard are IDENTICAL to the contents of the text input field,
      THEN do NOT display the `From Clipboard` table cell.
    
      GIVEN the Link Picker sheet displays,
      AND the `From Clipboard` table cell is pressed,
      THEN the `Search or type URL` text input field is populated with the URL from the Clipboard,
      AND the `Add this link` table cell is repopulated with the new URL from the Clipboard.
    ```
    ttahmouch authored and ttahmouch committed Oct 26, 2021
    Configuration menu
    Copy the full SHA
    da94d68 View commit details
    Browse the repository at this point in the history
  4. Merge branch 'trunk' into feature/4058-add-link-from-clipboard

    ttahmouch authored and ttahmouch committed Oct 26, 2021
    Configuration menu
    Copy the full SHA
    b738267 View commit details
    Browse the repository at this point in the history

Commits on Oct 29, 2021

  1. TT | 4058 | Generalized the existing test assertion from the `<ImageE…

    …dit/>` block to the `<ButtonsEdit/>` block.
    
    + Added a utility function called `interactionWithUIElement` to interact with an element under test before assertions. This allows us to pretend that the user is interacting with the UI of the `<Editor/>` as if they are using the mobile app in order to stage a test. Right now it's fairly primitive, and is mostly used for `press` events. It can also be used for `layout` events at the moment, but it would need to be elaborated further to support events like `changeText` or `scroll`.
    + Used `interactionWithUIElement` to generalize a test to assert the same expectations regardless of whether the UX is displaying an `<ImageEdit/>` block or `<ButtonsEdit/>` block. The expected UX the test is asserting should be identical regardless of which block is being used in the `<Editor/>`. The only technical difference is how we'd find the elements in the view tree since they have different accessibility props to identify them, e.g., `getByA11yLabel` for the edit button block, and `getByA11yHint` for the edit image block.
    ttahmouch authored and ttahmouch committed Oct 29, 2021
    Configuration menu
    Copy the full SHA
    6877894 View commit details
    Browse the repository at this point in the history
  2. Merge branch 'trunk' into feature/4058-add-link-from-clipboard

    ttahmouch authored and ttahmouch committed Oct 29, 2021
    Configuration menu
    Copy the full SHA
    8cb9178 View commit details
    Browse the repository at this point in the history

Commits on Nov 3, 2021

  1. TT | 4058 | Tested scenarios where the From Clipboard button in the…

    … Link Picker **SHOULD/NOT** display to the user.
    
    + Tested some naive scenarios where the `From Clipboard` button **WOULD** or **WOULD NOT** display given the `Clipboard` has a **VALID** or **INVALID** URL copied. It is naive because it doesn't account for if the user has already copied the URL suggestion from the `Clipboard` into their Link Settings yet. Presumably, we **SHOULD NOT** suggest the URL if it is already the URL in their Link Settings (which will be a future test assertion).
    + Added a [Clipboard SVG](https://www.iconfinder.com/icons/211649/clipboard_icon) as a placeholder asset for the `From Clipboard` button until a final one is decided. It is MIT licensed.
    + Reimplemented `interactionWithUIElement` to **NOT** be an `async` function to avoid unnecessary warnings, i.e., `Warning: An update to ForwardRef(NavigationContainer) inside a test was not wrapped in act(...).`.
    ttahmouch authored and ttahmouch committed Nov 3, 2021
    Configuration menu
    Copy the full SHA
    95a0598 View commit details
    Browse the repository at this point in the history
  2. TT | 4058 | Moving the integration tests for the <LinkSettings/> fr…

    …om the `<ImageEdit/>` Block Library module as they are not specific to the Image Edit Block but also the Button Edit Block.
    ttahmouch authored and ttahmouch committed Nov 3, 2021
    Configuration menu
    Copy the full SHA
    7ebf074 View commit details
    Browse the repository at this point in the history

Commits on Nov 9, 2021

  1. Merge branch 'trunk' into feature/4058-add-link-from-clipboard

    ttahmouch authored and ttahmouch committed Nov 9, 2021
    Configuration menu
    Copy the full SHA
    8497c4f View commit details
    Browse the repository at this point in the history
  2. Merge branch 'trunk' into feature/4058-add-link-from-clipboard

    ttahmouch authored and ttahmouch committed Nov 9, 2021
    Configuration menu
    Copy the full SHA
    b3864e2 View commit details
    Browse the repository at this point in the history

Commits on Nov 10, 2021

  1. TT | 4058 | Tested scenarios for when the Clipboard Link Suggestion i…

    …s hidden or pressed in the Link Picker.
    
    0. Hiding the Clipboard Link Suggestion.
    
    Previously, the Clipboard Link Suggestion was only being hidden in the Link Picker if the text in the Clipboard was NOT a valid URL.
    Now, the Clipboard Link Suggestion will also be hidden in the Link Picker if the text is a valid URL, but is the same URL the user already picked.
    
    1. Pressing the Clipboard Link Suggestion.
    
    Previously, this was unimplemented.
    Now, the behavior is identical to selecting a Link Suggestion from the search results in the Link Picker, i.e., it will navigate back to the previous screen and pass it the selected URL to change the Block Attributes.
    ttahmouch authored and ttahmouch committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    4695c80 View commit details
    Browse the repository at this point in the history
  2. Merge branch 'trunk' into feature/4058-add-link-from-clipboard

    ttahmouch authored and ttahmouch committed Nov 10, 2021
    Configuration menu
    Copy the full SHA
    52577be View commit details
    Browse the repository at this point in the history

Commits on Nov 16, 2021

  1. TT | 4058 | Cleaning up comments and console logs in the test module.

    ttahmouch authored and ttahmouch committed Nov 16, 2021
    Configuration menu
    Copy the full SHA
    5bf3038 View commit details
    Browse the repository at this point in the history
  2. TT | 4058 | Replacing the placeholder Clipboard SVG with one from Gri…

    …dIcons.
    ttahmouch authored and ttahmouch committed Nov 16, 2021
    Configuration menu
    Copy the full SHA
    1530f5e View commit details
    Browse the repository at this point in the history
  3. TT | 4058 | Updated the accessibilityLabel of the Clipboard `<LinkS…

    …uggestionItemCell/>` to be localized. The tests still default to the `English` translation.
    ttahmouch authored and ttahmouch committed Nov 16, 2021
    Configuration menu
    Copy the full SHA
    40f5004 View commit details
    Browse the repository at this point in the history