Update button text and initial paint in example app

Author: zeusdeux

cypress/integration/useIntersectionObserver.test.js

@@ -4,6 +4,11 @@ before(() => {
 
 describe('useIsInViewport', () => {
   it('should report correctly when an element is visible in parent document', () => {
+    cy.get('[data-testid="toggle-simple-parent-doc-test"]').should(
+      'contain',
+      'Show simple parent doc test'
+    )
+    cy.get('[data-testid="toggle-simple-parent-doc-test"]').click()
     cy.get('[data-testid="toggle-simple-parent-doc-test"]').should(
       'contain',
       'Hide simple parent doc test'

examples/cra/src/index.js

@@ -11,7 +11,7 @@ import {
 } from './viewportAnotherElement'
 
 function App() {
-  const [testToShow, setTestToShow] = React.useState(1)
+  const [testToShow, setTestToShow] = React.useState(0)
   const forwardedTargetRef = node => {
     window.forwardedTargetRef = window.forwardedTargetRef || []
     window.forwardedTargetRef.push(node)

examples/cra/src/viewportAnotherElement.js

@@ -23,7 +23,7 @@ export function SimpleElement() {
         onClick={() => toggleHide(h => !h)}
         data-testid="toggle-box-position"
       >
-        {hidden ? 'Show box' : 'Hide box'}
+        {hidden ? 'Show box (or scroll to show it)' : 'Hide box'}
       </button>
       <div ref={viewportRef} data-testid="viewport" className={container}>
         <div
@@ -65,7 +65,7 @@ export const RefForwardingElement = React.forwardRef(function RefForwardingEleme
         onClick={() => toggleHide(h => !h)}
         data-testid="toggle-boxes-positions"
       >
-        {hidden ? 'Show boxes' : 'Hide boxes'}
+        {hidden ? "Show boxes (or scroll to show 'em)" : 'Hide boxes'}
       </button>
       <div ref={finalParentRef} data-testid="viewport" className={cx('viewport', container)}>
         <div

examples/cra/src/viewportParentDocument.js

@@ -14,7 +14,7 @@ export function SimpleElement() {
         onClick={() => toggleHide(h => !h)}
         data-testid="toggle-box-position"
       >
-        {hidden ? 'Show box' : 'Hide box'}
+        {hidden ? 'Show box (or scroll to show it)' : 'Hide box'}
       </button>
       <div
         className={cx(box, {
@@ -57,7 +57,7 @@ export const RefForwardingElement = React.forwardRef(function RefForwardingEleme
         onClick={() => toggleHide(h => !h)}
         data-testid="toggle-box-position"
       >
-        {hidden ? 'Show box' : 'Hide box'}
+        {hidden ? 'Show box (or scroll to show it)' : 'Hide box'}
       </button>
       <div
         className={cx('target-div', box, {

package.json

@@ -44,6 +44,10 @@
       "tslint --fix",
       "git add"
     ],
+    "cypress/integration/**/*.js": [
+      "prettier --write",
+      "git add"
+    ],
     "*.{json,md,html,css}": [
       "prettier --write",
       "git add"