From 88160b0abe75bd5ef0fae063edd405d0d5975872 Mon Sep 17 00:00:00 2001
From: Matthias Giger <i@matthiasgiger.com>
Date: Tue, 20 Jul 2021 20:18:53 +0200
Subject: [PATCH] test(react): tests for React plugin including a mocked
 server-side render

---
 cypress/helper.js                 | 10 ++++++
 cypress/integration/react.spec.js | 55 +++++++++++++++++++++++++++++++
 demo/test.tsx                     | 50 ++++++++++++++++++++++++++--
 3 files changed, 113 insertions(+), 2 deletions(-)
 create mode 100644 cypress/integration/react.spec.js

diff --git a/cypress/helper.js b/cypress/helper.js
index b1f20ff..5bb7978 100644
--- a/cypress/helper.js
+++ b/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]})`
diff --git a/cypress/integration/react.spec.js b/cypress/integration/react.spec.js
new file mode 100644
index 0000000..63950f9
--- /dev/null
+++ b/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)
+  })
+})
diff --git a/demo/test.tsx b/demo/test.tsx
index a7760f6..c31a151 100644
--- a/demo/test.tsx
+++ b/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 />
     </>
   )
 }