diff --git a/components/data-table/data-table.cy.tsx b/components/data-table/data-table.cy.tsx index bcb6f82e..d9988896 100644 --- a/components/data-table/data-table.cy.tsx +++ b/components/data-table/data-table.cy.tsx @@ -1,5 +1,4 @@ import React from 'react' -import { mount } from 'cypress/react18' import type { QueryConfig } from '@/lib/types/query-config' @@ -21,7 +20,7 @@ describe('', () => { { col1: 'val3', col2: 'val3' }, ] - mount() + cy.mount() cy.get('h1').contains('Test Table') cy.get('table').should('have.length', 1) @@ -40,7 +39,7 @@ describe('', () => { data.push({ col1: `val${i}`, col2: `val${i}` }) } - mount( + cy.mount( ', () => { it('render paging, click on next page', () => { let data = [] - for (let i = 0; i < 100; i++) { + for (let i = 0; i < 10; i++) { data.push({ col1: `val${i}`, col2: `val${i}` }) } - mount( + cy.mount( ) // Page 1 of 2 - cy.get('div').contains('Page 1 of 2') + cy.get('div').contains('Page 1 of 5') // "Go to next page" button should be enabled cy.get('button') @@ -96,10 +95,10 @@ describe('', () => { .click() // Page 2 of 2 - cy.get('div').contains('Page 2 of 2') + cy.get('div').contains('Page 2 of 5') }) - it('should adjust column visibility', () => { + it('should adjust column visibility, hide col1', () => { // Define some mock data const data = [ { col1: 'val1', col2: 'val1' }, @@ -107,42 +106,85 @@ describe('', () => { { col1: 'val3', col2: 'val3' }, ] - mount() + cy.mount() + + const $optionBtn = cy.get('button[aria-label="Column Options"]') // Before click: table should contains 2 columns cy.get('thead tr th').should('have.length', 2) // Click on "Column Options" button, should showing 2 checkboxes: col1 and col2 // Click on col1 to toggle hide it - cy.get('button[aria-label="Column Options"]').click() - cy.get('[role="checkbox"]').should('have.length', 2) - cy.get('[role="checkbox"]').contains('col1').click() + $optionBtn.click().then(() => { + cy.get('[role="checkbox"]').should('have.length', 2) + cy.get('[role="checkbox"]').contains('col1').click() - // After click: table should contains only col2 - cy.get('thead tr th').should('have.length', 1) + // After click: table should contains only col2 + cy.get('thead tr th').should('have.length', 1) + }) + }) + + it('should adjust column visibility, hide col2', () => { + // Define some mock data + const data = [ + { col1: 'val1', col2: 'val1' }, + { col1: 'val2', col2: 'val2' }, + { col1: 'val3', col2: 'val3' }, + ] + + cy.mount() + + cy.get('button[aria-label="Column Options"]').as('btn') + + // Before click: table should contains 2 columns + cy.get('thead tr th').should('have.length', 2) // Click on "Column Options" button, should showing 2 checkboxes: col1 and col2 // Click on col2 to toggle hide it - cy.get('button[aria-label="Column Options"]').click() + cy.get('@btn').click() cy.get('[role="checkbox"]').should('have.length', 2) cy.get('[role="checkbox"]').contains('col2').click() // After click: table should contains no column - cy.get('thead tr th').should('have.length', 0) + cy.get('thead tr th').should('have.length', 1) + }) - // Click on "Column Options" button, should showing 2 checkboxes: col1 and col2 - // Click on col2 to toggle show it again - cy.get('button[aria-label="Column Options"]').click() - cy.get('[role="checkbox"]').should('have.length', 2) - cy.get('[role="checkbox"]').contains('col1').click() - cy.get('button[aria-label="Column Options"]').click() - cy.get('[role="checkbox"]').contains('col2').click() + it('should adjust column visibility, hide both col1 and col2', () => { + // Define some mock data + const data = [ + { col1: 'val1', col2: 'val1' }, + { col1: 'val2', col2: 'val2' }, + { col1: 'val3', col2: 'val3' }, + ] + + cy.mount() + + cy.get('button[aria-label="Column Options"]').as('btn') + // Before click: table should contains 2 columns cy.get('thead tr th').should('have.length', 2) + + // Click on "Column Options" button, should showing 2 checkboxes: col1 and col2 + // Click on col1 to toggle hide it + cy.get('@btn').click() + // Uncheck col1 + cy.get('[role="checkbox"][aria-checked="true"][aria-label="col1"]').click() + + // After click: table should contains no column + cy.get('thead tr th').should('have.length', 1) + + // Uncheck col2 + cy.get('@btn').click({ force: true }) + cy.get('[role="checkbox"][aria-checked="true"][aria-label="col2"]') + .should('be.visible') + .click({ force: true }) + + // After click: table should contains no column + cy.get('thead tr th').should('have.length', 0) }) it('should have "Show Code" button when showSQL={true}', () => { - mount( + cy.mount( ) @@ -150,7 +192,7 @@ describe('', () => { }) it('should not have "Show Code" button when showSQL={false}', () => { - mount( + cy.mount( ) @@ -165,7 +207,7 @@ describe('', () => { { col1: 'val3', col2: 'val3' }, ] - mount( + cy.mount( ({
- +
- \ No newline at end of file + diff --git a/cypress/support/component.ts b/cypress/support/component.ts index c6f4dbc8..5e1f8eca 100644 --- a/cypress/support/component.ts +++ b/cypress/support/component.ts @@ -15,6 +15,7 @@ // Import commands.js using ES2015 syntax: import './commands' +import '../../app/globals.css' // Alternatively you can use CommonJS syntax: // require('./commands') diff --git a/yarn.lock b/yarn.lock index 75755e0d..b090144c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1286,16 +1286,16 @@ integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ== "@types/node@*", "@types/node@^20": - version "20.9.3" - resolved "https://registry.yarnpkg.com/@types/node/-/node-20.9.3.tgz#e089e1634436f676ff299596c9531bd2b59fffc6" - integrity sha512-nk5wXLAXGBKfrhLB0cyHGbSqopS+nz0BUgZkUQqSHSSgdee0kssp1IAqlQOu333bW+gMNs2QREx7iynm19Abxw== + version "20.9.4" + resolved "https://registry.yarnpkg.com/@types/node/-/node-20.9.4.tgz#cc8f970e869c26834bdb7ed480b30ede622d74c7" + integrity sha512-wmyg8HUhcn6ACjsn8oKYjkN/zUzQeNtMy44weTJSM6p4MMzEOuKbA3OjJ267uPCOW7Xex9dyrNTful8XTQYoDA== dependencies: undici-types "~5.26.4" "@types/node@^18.17.5": - version "18.18.9" - resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.9.tgz#5527ea1832db3bba8eb8023ce8497b7d3f299592" - integrity sha512-0f5klcuImLnG4Qreu9hPj/rEfFq6YRc5n2mAjSsH+ec/mJL+3voBH0+8T7o8RpFjH7ovc+TRsL/c7OYIQsPTfQ== + version "18.18.12" + resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.12.tgz#0c40e52e5ff2569386b160f6f6bb019ff1361cb4" + integrity sha512-G7slVfkwOm7g8VqcEF1/5SXiMjP3Tbt+pXDU3r/qhlM2KkGm786DUD4xyMA2QzEElFrv/KZV9gjygv4LnkpbMQ== dependencies: undici-types "~5.26.4" @@ -1305,9 +1305,9 @@ integrity sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng== "@types/react-dom@^18": - version "18.2.16" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.16.tgz#028f44b08f8cc3401c37dde4c2a5e36ddf9cb5b0" - integrity sha512-766c37araZ9vxtYs25gvY2wNdFWsT2ZiUvOd0zMhTaoGj6B911N8CKQWgXXJoPMLF3J82thpRqQA7Rf3rBwyJw== + version "18.2.17" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.2.17.tgz#375c55fab4ae671bd98448dcfa153268d01d6f64" + integrity sha512-rvrT/M7Df5eykWFxn6MYt5Pem/Dbyc1N8Y0S9Mrkw2WFCRiqUgw9P7ul2NpwsXCSM1DVdENzdG9J5SreqfAIWg== dependencies: "@types/react" "*" @@ -1321,9 +1321,9 @@ csstype "^3.0.2" "@types/scheduler@*": - version "0.16.7" - resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.7.tgz#d62f1bd54724c84089f51f9218393930ba4abcf4" - integrity sha512-8g25Nl3AuB1KulTlSUsUhUo/oBgBU6XIXQ+XURpeioEbEJvkO7qI4vDfREv3vJYHHzqXjcAHvoJy4pTtSQNZtA== + version "0.16.8" + resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff" + integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A== "@types/sinonjs__fake-timers@8.1.1": version "8.1.1" @@ -1331,9 +1331,9 @@ integrity sha512-0kSuKjAS0TrGLJ0M/+8MaFkGsQhZpB6pxOmvS3K8FYI72K//YmdfoW9X2qPsAKh1mkwxGD5zib9s1FIFed6E8g== "@types/sizzle@^2.3.2": - version "2.3.6" - resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.6.tgz#e39b7123dac4631001939bd4c2a26d46010f2275" - integrity sha512-m04Om5Gz6kbjUwAQ7XJJQ30OdEFsSmAVsvn4NYwcTRyMVpKKa1aPuESw1n2CxS5fYkOQv3nHgDKeNa8e76fUkw== + version "2.3.8" + resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.8.tgz#518609aefb797da19bf222feb199e8f653ff7627" + integrity sha512-0vWLNK2D5MT9dg0iOo8GlKguPAU02QjmZitPEsXRuJXU/OGIOt9vT9Fc26wtYuavLxtO45v9PGleoL9Z0k1LHg== "@types/yauzl@^2.9.1": version "2.10.3" @@ -2025,9 +2025,9 @@ csstype@^3.0.2: integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== cypress@^13.5.1: - version "13.5.1" - resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.5.1.tgz#8b19bf0b9f31ea43f78980b2479bd3f25197d5cc" - integrity sha512-yqLViT0D/lPI8Kkm7ciF/x/DCK/H/DnogdGyiTnQgX4OVR2aM30PtK+kvklTOD1u3TuItiD9wUQAF8EYWtyZug== + version "13.6.0" + resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.6.0.tgz#b98b7b837679012ed09c7ecee5565bf7b31d4982" + integrity sha512-quIsnFmtj4dBUEJYU4OH0H12bABJpSujvWexC24Ju1gTlKMJbeT6tTO0vh7WNfiBPPjoIXLN+OUqVtiKFs6SGw== dependencies: "@cypress/request" "^3.0.0" "@cypress/xvfb" "^1.2.4"