added cypress test for check-list page (#4383)

* added cypress test for check-list page

* Update cypress/integration/checkLists.ts

Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>

* Update cypress/integration/checkLists.ts

Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>

* Update cypress/integration/checkLists.ts

Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>

* Added beforeEach() call

* moved the checkLists.ts example to the examples folder

Co-authored-by: Tim Buckley <timothypbuckley@gmail.com>

cypress/integration/examples/checkLists.ts

@@ -0,0 +1,35 @@
+describe('Check-lists example', () => {
+  beforeEach(() => {
+    cy.visit('examples/check-lists')
+  })
+
+  it('checks the bullet when clicked', () => {
+    const slateNodeElement = 'div[data-slate-node="element"]'
+
+    cy.get(slateNodeElement).should('have.length', 6)
+
+    cy.get(slateNodeElement)
+      .eq(3)
+      .should('contain', 'Criss-cross!')
+      .find('span')
+      .eq(1)
+      .should('have.css', 'text-decoration-line', 'line-through')
+
+    // Unchecking the checkboxes should un-cross the corresponding text.
+    cy.get(slateNodeElement)
+      .eq(3)
+      .should('contain', 'Criss-cross!')
+      .find('span')
+      .eq(0)
+      .find('input')
+      .uncheck()
+      .get(slateNodeElement)
+      .eq(3)
+      .should('contain', 'Criss-cross!')
+      .find('span')
+      .eq(1)
+      .should('have.css', 'text-decoration-line', 'none')
+
+    cy.get('p[data-slate-node="element"]').should('have.length', 2)
+  })
+})

site/examples/check-lists.tsx

@@ -176,7 +176,7 @@ const CheckListItemElement = ({ attributes, children, element }) => {
         className={css`
           flex: 1;
           opacity: ${checked ? 0.666 : 1};
-          text-decoration: ${checked ? 'none' : 'line-through'};
+          text-decoration: ${!checked ? 'none' : 'line-through'};
 
           &:focus {
             outline: none;