From 4bd953b3aff16f202b41900305af3ae6186ef088 Mon Sep 17 00:00:00 2001 From: Matthias Giger Date: Tue, 25 Oct 2022 23:31:31 +0200 Subject: [PATCH] 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 --- cypress.config.js | 8 +++ cypress.json | 4 -- .../basic.spec.js => e2e/basic.cy.js} | 0 .../react.spec.js => e2e/react.cy.js} | 51 +++++++------------ .../styles.spec.js => e2e/styles.cy.js} | 0 .../table.spec.js => e2e/table.cy.js} | 0 .../theme.spec.js => e2e/theme.cy.js} | 0 cypress/plugins/index.cjs | 1 - demo/test.tsx | 24 +++++---- package.json | 4 +- 10 files changed, 44 insertions(+), 48 deletions(-) create mode 100644 cypress.config.js delete mode 100644 cypress.json rename cypress/{integration/basic.spec.js => e2e/basic.cy.js} (100%) rename cypress/{integration/react.spec.js => e2e/react.cy.js} (77%) rename cypress/{integration/styles.spec.js => e2e/styles.cy.js} (100%) rename cypress/{integration/table.spec.js => e2e/table.cy.js} (100%) rename cypress/{integration/theme.spec.js => e2e/theme.cy.js} (100%) delete mode 100644 cypress/plugins/index.cjs diff --git a/cypress.config.js b/cypress.config.js new file mode 100644 index 0000000..5f83fa8 --- /dev/null +++ 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 deleted file mode 100644 index d4f25df..0000000 --- a/cypress.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "chromeWebSecurity": false, - "pluginsFile": "cypress/plugins/index.cjs" -} diff --git a/cypress/integration/basic.spec.js b/cypress/e2e/basic.cy.js similarity index 100% rename from cypress/integration/basic.spec.js rename to cypress/e2e/basic.cy.js diff --git a/cypress/integration/react.spec.js b/cypress/e2e/react.cy.js similarity index 77% rename from cypress/integration/react.spec.js rename to cypress/e2e/react.cy.js index f1645b3..b94194f 100644 --- a/cypress/integration/react.spec.js +++ b/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,18 +103,13 @@ 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' @@ -128,9 +117,7 @@ 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={} diff --git a/cypress/integration/styles.spec.js b/cypress/e2e/styles.cy.js similarity index 100% rename from cypress/integration/styles.spec.js rename to cypress/e2e/styles.cy.js diff --git a/cypress/integration/table.spec.js b/cypress/e2e/table.cy.js similarity index 100% rename from cypress/integration/table.spec.js rename to cypress/e2e/table.cy.js diff --git a/cypress/integration/theme.spec.js b/cypress/e2e/theme.cy.js similarity index 100% rename from cypress/integration/theme.spec.js rename to cypress/e2e/theme.cy.js diff --git a/cypress/plugins/index.cjs b/cypress/plugins/index.cjs deleted file mode 100644 index 0c0c42d..0000000 --- a/cypress/plugins/index.cjs +++ /dev/null @@ -1 +0,0 @@ -module.exports = () => {} diff --git a/demo/test.tsx b/demo/test.tsx index a88c49a..661d6cb 100644 --- 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 = () => { - {/*

Table as Element

- - - */}

inlineStyles

{ 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 = () => { - {/*

Table as Element

- -
- */}

Server-Side Rendering

diff --git a/package.json b/package.json index 54419fb..cfd78a3 100644 --- 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",