test(react): tests for React plugin including a mocked server-side re…

…nder

cypress/helper.js

@@ -17,6 +17,16 @@ export const getIndicator = (className, position, inline = false) => {
   return wrapper.find(`span`).eq(positionToIndex[position] + 3)
 }
 
+export const noIndicators = (className, inline = false) => {
+  let wrapper = cy.get(className).parent()
+
+  if (inline) {
+    wrapper = wrapper.parent()
+  }
+
+  return wrapper.find('span').should('not.exist')
+}
+
 export const getIndicatorElement = (document, selector, position) =>
   document.querySelector(
     `${selector} ~ span:nth-of-type(${positionToIndex[position]})`

cypress/integration/react.spec.js

@@ -0,0 +1,55 @@
+import { open, getIndicator, noIndicators } from '../helper.js'
+
+describe('Basic tests for table elements', () => {
+  it('Regular react version works.', () => {
+    const className = '.react-regular'
+    open()
+    cy.get(className).should('be.visible')
+
+    // Verify basic functionality also works with react.
+    getIndicator(className, 'left').should('not.be.visible')
+    getIndicator(className, 'right').should('be.visible')
+
+    // Parent as it's an inline element.
+    cy.get(className).should('have.prop', 'scrollLeft', 0)
+
+    // Scroll right.
+    getIndicator(className, 'right').click()
+
+    cy.get(className).should('not.have.prop', 'scrollLeft', 0)
+
+    getIndicator(className, 'left').should('be.visible')
+    getIndicator(className, 'right').should('be.visible')
+  })
+  it('React with childAsElement works.', () => {
+    const className = '.react-child'
+    open()
+    cy.get(className).should('be.visible')
+
+    getIndicator(className, 'left').should('not.be.visible')
+    getIndicator(className, 'right').should('be.visible')
+  })
+})
+
+describe('Preserves layout with server-side rendering.', () => {
+  it('Server-side regular react version works.', () => {
+    const className = '.react-server-regular'
+    open()
+    cy.get(className).should('be.visible')
+
+    // Indicators are be layout preserving and will only be added on the client.
+    noIndicators(className)
+
+    // Tiles layout kept horizontal.
+    cy.get(className).invoke('height').should('be.lt', 300)
+  })
+  it('childAsElement works on the server.', () => {
+    const className = '.react-server-child'
+    open()
+    cy.get(className).should('be.visible')
+
+    noIndicators(className)
+
+    cy.get(className).invoke('height').should('be.lt', 300)
+  })
+})

demo/test.tsx

@@ -1,6 +1,7 @@
-import { useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
 import { Tiles } from 'react-preview'
-import { indicate, remove } from 'indicate'
+import { indicate, remove, Indicate } from 'indicate'
 import youtube from 'indicate/dist/theme/youtube'
 import className from 'indicate/dist/theme/class-name'
 import { Button } from 'markup/Button'
@@ -91,7 +92,40 @@ const toggleTestCases = () => {
   }
 }
 
+const ServerSideRendering = () => {
+  const [renderedMarkup, setMarkup] = useState('')
+  const reactRef = useRef()
+
+  useEffect(() => {
+    const markup = (
+      <>
+        <h4>Regular</h4>
+        <Indicate className="react-server-regular">
+          <Tiles />
+        </Indicate>
+        <h4>childAsElement</h4>
+        <Indicate
+          ref={reactRef}
+          childAsElement
+          style={{ display: 'inline-flex' }}
+          className="react-server-child"
+        >
+          <div ref={reactRef}>
+            <Tiles />
+          </div>
+        </Indicate>
+      </>
+    )
+
+    setMarkup(renderToStaticMarkup(markup))
+  }, [])
+
+  return <div dangerouslySetInnerHTML={{ __html: renderedMarkup }} />
+}
+
 export const TestCases = () => {
+  const reactRef = useRef()
+
   useEffect(() => {
     renderTestCases()
   })
@@ -273,6 +307,18 @@ export const TestCases = () => {
       <div style={{ display: 'flex' }} className="remove">
         <Tiles />
       </div>
+      <h2>React</h2>
+      <Indicate className="react-regular">
+        <Tiles />
+      </Indicate>
+      <h3>childAsElement</h3>
+      <Indicate ref={reactRef} childAsElement className="react-child">
+        <div ref={reactRef}>
+          <Tiles />
+        </div>
+      </Indicate>
+      <h3>Server-Side Rendering</h3>
+      <ServerSideRendering />
     </>
   )
 }