test(react): migrate cypress and remove table as child test

Using tables in conjunction with childAsElement resulted in invalid markup regular interface is better suited when used with tables. BREAKING CHANGE: table elements no longer work in React when used with childAsElement use the regular interface instead
tobua · Oct 25, 2022 · 4bd953b · 4bd953b
1 parent 7635db9
commit 4bd953b
Show file tree

Hide file tree

Showing 10 changed files with 44 additions and 48 deletions.
diff --git a/cypress.config.js b/cypress.config.js
@@ -0,0 +1,8 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  chromeWebSecurity: false,
+  e2e: {
+    supportFile: false,
+  },
+})
diff --git a/cypress.json b/cypress.json
diff --git a/cypress/integration/basic.spec.js → cypress/e2e/basic.cy.js b/cypress/integration/basic.spec.js → cypress/e2e/basic.cy.js
diff --git a/cypress/integration/react.spec.js → cypress/e2e/react.cy.js b/cypress/integration/react.spec.js → cypress/e2e/react.cy.js
@@ -43,9 +43,7 @@ describe('Basic tests for table elements', () => {
     cy.get(className).should('be.visible')
 
     // outerWrapper
-    cy.get(className)
-      .parent()
-      .should('have.css', 'background-color', 'rgb(255, 0, 0)')
+    cy.get(className).parent().should('have.css', 'background-color', 'rgb(255, 0, 0)')
     // element
     cy.get(className).should('have.css', 'background-color', 'rgb(0, 128, 0)')
     // element from style={}
@@ -54,14 +52,6 @@ describe('Basic tests for table elements', () => {
     // TODO innerWrapper styles for some reason moved to outerWrapper during init.
     // cy.get(className).parent().should('not.have.css', 'display', 'inline-flex')
   })
-  it('React with childAsElement and table works.', () => {
-    const className = '.react-child-table'
-    open()
-    cy.get(className).should('be.visible')
-
-    getIndicator(className, 'left', true).should('not.be.visible')
-    getIndicator(className, 'right', true).should('be.visible')
-  })
 })
 
 describe('Preserves layout with server-side rendering.', () => {
@@ -70,36 +60,40 @@ describe('Preserves layout with server-side rendering.', () => {
     open()
     cy.get(className).should('be.visible')
 
-    // Indicators are be layout preserving and will only be added on the client.
-    noIndicators(className)
+    // Initial default indicators are already rendered on the server.
+    getIndicator(className, 'right').should('be.visible')
+    getIndicator(className, 'bottom').should('be.visible')
 
     // Tiles layout kept horizontal.
     cy.get(className).invoke('height').should('be.lt', 300)
   })
-  it('Table works when rendering on the server.', () => {
-    const className = '.react-server-table'
+  it('Horizontal only works on the server.', () => {
+    const className = '.react-server-horizontal'
     open()
     cy.get(className).should('be.visible')
 
-    noIndicators(className, true)
+    getIndicator(className, 'right').should('be.visible')
+    getIndicator(className, 'bottom').should('not.be.visible')
 
     cy.get(className).invoke('height').should('be.lt', 300)
   })
-  it('childAsElement works on the server.', () => {
-    const className = '.react-server-child'
+  it('Table works when rendering on the server.', () => {
+    const className = '.react-server-table'
     open()
     cy.get(className).should('be.visible')
 
-    noIndicators(className)
+    getIndicator(className, 'right').should('be.visible')
+    getIndicator(className, 'bottom').should('be.visible')
 
     cy.get(className).invoke('height').should('be.lt', 300)
   })
-  it('Table works with childAsElement when rendering on the server.', () => {
-    const className = '.react-server-child-table'
+  it('childAsElement works on the server.', () => {
+    const className = '.react-server-child'
     open()
     cy.get(className).should('be.visible')
 
-    noIndicators(className, true)
+    getIndicator(className, 'right').should('be.visible')
+    getIndicator(className, 'bottom').should('be.visible')
 
     cy.get(className).invoke('height').should('be.lt', 300)
   })
@@ -109,28 +103,21 @@ describe('Preserves layout with server-side rendering.', () => {
     cy.get(className).should('be.visible')
 
     // outerWrapper
-    cy.get(className)
-      .parent()
-      .should('have.css', 'background-color', 'rgb(255, 0, 0)')
+    cy.get(className).parent().should('have.css', 'background-color', 'rgb(255, 0, 0)')
     // element
     cy.get(className).should('have.css', 'background-color', 'rgb(0, 128, 0)')
     // element from style={}
     cy.get(className).should('have.css', 'color', 'rgb(255, 255, 0)')
     // innerWrapper
-    cy.get(className)
-      .children()
-      .first()
-      .should('have.css', 'background-color', 'rgb(0, 0, 255)')
+    cy.get(className).children().first().should('have.css', 'background-color', 'rgb(0, 0, 255)')
   })
   it('Applies inline styles added.', () => {
     const className = '.react-server-regular-child-styles'
     open()
     cy.get(className).should('be.visible')
 
     // outerWrapper
-    cy.get(className)
-      .parent()
-      .should('have.css', 'background-color', 'rgb(255, 0, 0)')
+    cy.get(className).parent().should('have.css', 'background-color', 'rgb(255, 0, 0)')
     // element
     cy.get(className).should('have.css', 'background-color', 'rgb(0, 128, 0)')
     // element from style={}

diff --git a/cypress/integration/styles.spec.js → cypress/e2e/styles.cy.js b/cypress/integration/styles.spec.js → cypress/e2e/styles.cy.js
diff --git a/cypress/integration/table.spec.js → cypress/e2e/table.cy.js b/cypress/integration/table.spec.js → cypress/e2e/table.cy.js
diff --git a/cypress/integration/theme.spec.js → cypress/e2e/theme.cy.js b/cypress/integration/theme.spec.js → cypress/e2e/theme.cy.js
diff --git a/cypress/plugins/index.cjs b/cypress/plugins/index.cjs
diff --git a/demo/test.tsx b/demo/test.tsx
@@ -98,7 +98,6 @@ const ServerSideRendering = () => {
   const [renderedMarkup, setMarkup] = useState('')
   const reactRef = useRef()
   const reactStyleRef = useRef()
-  const reactTableRef = useRef()
 
   useEffect(() => {
     const markup = (
@@ -121,10 +120,6 @@ const ServerSideRendering = () => {
             <Tiles />
           </div>
         </Indicate>
-        {/* <h4>Table as Element</h4>
-        <Indicate ref={reactTableRef} childAsElement className="react-server-child-table">
-          <Table ref={reactTableRef} />
-        </Indicate> */}
         <h4>inlineStyles</h4>
         <Indicate
           outerStyle={{
@@ -133,6 +128,11 @@ const ServerSideRendering = () => {
           innerStyle={{
             backgroundColor: 'blue',
           }}
+          theme={{
+            element: {
+              backgroundColor: 'green',
+            },
+          }}
           style={{
             color: 'yellow',
           }}
@@ -150,6 +150,11 @@ const ServerSideRendering = () => {
           innerStyle={{
             display: 'inline-flex',
           }}
+          theme={{
+            element: {
+              backgroundColor: 'green',
+            },
+          }}
           style={{
             color: 'yellow',
           }}
@@ -369,6 +374,11 @@ export const TestCases = () => {
         innerStyle={{
           backgroundColor: 'red',
         }}
+        theme={{
+          element: {
+            backgroundColor: 'green',
+          },
+        }}
         style={{
           color: 'yellow',
         }}
@@ -378,10 +388,6 @@ export const TestCases = () => {
           <Tiles />
         </div>
       </Indicate>
-      {/* <h3>Table as Element</h3>
-      <Indicate ref={reactTableRef} childAsElement className="react-child-table">
-        <Table ref={reactTableRef} />
-      </Indicate> */}
       <h3>Server-Side Rendering</h3>
       <ServerSideRendering />
     </>

diff --git a/package.json b/package.json
@@ -41,8 +41,8 @@
     "overflow"
   ],
   "devDependencies": {
-    "@types/react": "^18.0.21",
-    "cypress": "^10.10.0",
+    "@types/react": "^18.0.23",
+    "cypress": "^10.11.0",
     "padua": "^0.6.1"
   },
   "prettier": "padua/configuration/.prettierrc.json",