✅ Improve assertions

And fail to test drag & drop

components/pages/Home.tsx

@@ -561,6 +561,7 @@ export const Important = ({ onLoad }: { onLoad: () => void }) => {
 					<IonReorderGroup
 						disabled={false}
 						onIonItemReorder={async event => {
+							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()

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')
+}

cypress/support/commands.ts

@@ -34,4 +34,6 @@
 //       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
 //     }
 //   }
-// }
+// }
+
+import '@4tw/cypress-drag-drop'

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",

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"
-  ]
+  ],
 }