From 849139c04ce15b9821b1a8f823567613281c7b82 Mon Sep 17 00:00:00 2001 From: Daniel Metcalfe Date: Thu, 22 Aug 2024 21:05:35 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20Improve=20assertions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit And fail to test drag & drop --- components/pages/Home.tsx | 1 + cypress/e2e/spec.cy.ts | 77 ++++++++++++++++++++++++++++++++++++- cypress/support/commands.ts | 4 +- package-lock.json | 11 ++++++ package.json | 1 + tsconfig.json | 8 +++- 6 files changed, 98 insertions(+), 4 deletions(-) diff --git a/components/pages/Home.tsx b/components/pages/Home.tsx index a530878..69d2cde 100644 --- a/components/pages/Home.tsx +++ b/components/pages/Home.tsx @@ -561,6 +561,7 @@ export const Important = ({ onLoad }: { onLoad: () => void }) => { { + console.log({ event }) // We don't use this to reorder for us because it results in a flash of 'unordered' content. // Instead we re-order right away, calculate the new order ourselves, and update the DB. event.detail.complete() diff --git a/cypress/e2e/spec.cy.ts b/cypress/e2e/spec.cy.ts index a16b12b..9e119f0 100644 --- a/cypress/e2e/spec.cy.ts +++ b/cypress/e2e/spec.cy.ts @@ -18,6 +18,8 @@ it('works', () => { cy.contains('Confirm').click() }) + assertLists([], [], ['take the bins out']) + cy.get('#view-menu-button').click() cy.contains('ion-button', 'Edit roles') // For some reason clicking edit roles doesn't work so we hard-navigate @@ -73,6 +75,12 @@ it('works', () => { }) cy.get('ion-modal').contains('Confirm').click() + assertLists( + [], + [], + ['plan birthday day out', 'be silly together', 'take the bins out'], + ) + cy.get('#icebox').contains('take the bins out').click() cy.get('#todo-action-sheet').contains('Move to important').click() cy.get('#important').contains('take the bins out') @@ -88,9 +96,76 @@ it('works', () => { cy.get('#important').contains('plan birthday day out') cy.get('#todo-action-sheet').should('not.exist') + assertLists( + [], + ['take the bins out', 'be silly together', 'plan birthday day out'], + [], + ) + + // reorderImportantTodo(0, 2) + // cy.get('#important .todo') + // .first() + // .find('ion-reorder') + // .shadow() + // .find('.reorder-icon') + // .shadow() + // .find('svg') + // .drag('#important .todo:nth-child(3)') + // assertLists( + // [], + // ['be silly together', 'plan birthday day out', 'take the bins out'], + // [], + // ) + // reorderImportantTodo(1, -1) + // assertLists( + // [], + // ['plan birthday day out', 'be silly together', 'take the bins out'], + // [], + // ) + // cy.reload() + // assertLists( + // [], + // ['plan birthday day out', 'be silly together', 'take the bins out'], + // [], + // ) + cy.get('#important') .contains('.todo', 'take the bins out') .find('ion-checkbox') .click() - cy.get('#log').contains('take the bins out') + + assertLists( + ['take the bins out'], + ['be silly together', 'plan birthday day out'], + [], + ) }) + +function assertLists(log: string[], important: string[], icebox: string[]) { + cy.get('#log .todo') + .should('have.length', log.length) + .invoke('toArray') + .invoke('map', item => item.textContent) + .should('deep.equal', log) + cy.get('#important .todo') + .should('have.length', important.length) + .invoke('toArray') + .invoke('map', item => item.textContent) + .should('deep.equal', important) + cy.get('#icebox .todo') + .should('have.length', icebox.length) + .invoke('toArray') + .invoke('map', item => item.textContent) + .should('deep.equal', icebox) +} + +function reorderImportantTodo(todoIndex: number, places: number) { + cy.get(`#important .todo`) + .eq(todoIndex) + .find('ion-reorder') + .shadow() + .find('.reorder-icon') + .trigger('mousedown', { which: 1 }) + .trigger('mousemove', { screenX: 936, screenY: 287 + 49 }) + .trigger('mouseup') +} diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts index 698b01a..0fead5f 100644 --- a/cypress/support/commands.ts +++ b/cypress/support/commands.ts @@ -34,4 +34,6 @@ // visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable // } // } -// } \ No newline at end of file +// } + +import '@4tw/cypress-drag-drop' diff --git a/package-lock.json b/package-lock.json index 2b65c02..5eb27b8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,6 +35,7 @@ "react-router-dom": "5.3.4" }, "devDependencies": { + "@4tw/cypress-drag-drop": "^2.2.5", "@capacitor/cli": "^6.0.0", "@types/node": "20.11.25", "@types/react": "18.2.64", @@ -59,6 +60,16 @@ "node": "20.x" } }, + "node_modules/@4tw/cypress-drag-drop": { + "version": "2.2.5", + "resolved": "https://registry.npmjs.org/@4tw/cypress-drag-drop/-/cypress-drag-drop-2.2.5.tgz", + "integrity": "sha512-3ghTmzhOmUqeN6U3QmUnKRUxI7OMLbJA4hHUY/eS/FhWJgxbiGgcaELbolWnBAOpajPXcsNQGYEj9brd59WH6A==", + "dev": true, + "license": "GPL-3.0", + "peerDependencies": { + "cypress": "2 - 13" + } + }, "node_modules/@alloc/quick-lru": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", diff --git a/package.json b/package.json index ca91b4c..466bad2 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "react-router-dom": "5.3.4" }, "devDependencies": { + "@4tw/cypress-drag-drop": "^2.2.5", "@capacitor/cli": "^6.0.0", "@types/node": "20.11.25", "@types/react": "18.2.64", diff --git a/tsconfig.json b/tsconfig.json index b88034a..0af5398 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,7 +23,11 @@ "name": "next" } ], - "strictNullChecks": true + "strictNullChecks": true, + "types": [ + "cypress", + "@4tw/cypress-drag-drop" + ] }, "include": [ "next-env.d.ts", @@ -33,5 +37,5 @@ ], "exclude": [ "node_modules" - ] + ], }