completed chapter 8; includes examples for timeouts, computed styles,…

… checkboxes
leobooth · Jul 17, 2024 · aaa7086 · aaa7086
1 parent 7b49bd1
commit aaa7086
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 3 deletions.
diff --git a/cypress.config.js b/cypress.config.js
@@ -7,7 +7,8 @@ module.exports = defineConfig({
     },
     // baseUrl: 'https://todomvc.com/examples/react/dist/',
     // viewportHeight: 550,
-    // viewportWidth: 660
-    experimentalStudio: true
+    // viewportWidth: 660,
+    // defaultCommandTimeout: 6000,
+    experimentalStudio: true,
   },
 });
diff --git a/cypress/e2e/spec.cy.js b/cypress/e2e/spec.cy.js
@@ -14,6 +14,17 @@ function removeTodo(todoText) {
     todoItemRemoveButton.click({force: true});
 }
 
+function completeTodo(todoText) {
+    let todoCheckbox = cy.get("[data-testid='todo-item-label']").contains(todoText)
+                     .siblings("[data-testid='todo-item-toggle']");
+    todoCheckbox.check();
+}
+
+function clearCompletedTodos() {
+    let completedTodoButton = cy.get("button.clear-completed");
+    completedTodoButton.click();
+}
+
 it('add and remove a single todo item using todo item remove button', () => {
     cy.visit('https://todomvc.com/examples/react/dist/');
     addTodo('todo1');
@@ -30,4 +41,61 @@ it('should show two todo items', () => {
     cy.get("[data-testid='todo-item-label']").should('have.length', 2);
     removeTodo('todo1');
     removeTodo('todo2');
-}); 
+});
+
+it('complete todo item', () => {
+    cy.visit('https://todomvc.com/examples/react/dist/');
+    addTodo('todo1');
+    completeTodo('todo1');
+
+    let todoCheckbox = cy.get("[data-testid='todo-item-label']").contains('todo1')
+    .siblings("[data-testid='todo-item-toggle']");
+    todoCheckbox.should('be.checked');
+
+    clearCompletedTodos();
+});
+
+// computed styles version 1
+it('completed todo item label has text decoration \'line-through\'', () => {
+    cy.visit('https://todomvc.com/examples/react/dist/');
+    addTodo('todo1');
+    completeTodo('todo1');
+
+    let todoLabel = cy.get("[data-testid='todo-item-label']").contains('todo1');
+    const computedStyles = todoLabel.then( ($el) => {
+         return window.getComputedStyle($el[0])
+    });
+    computedStyles.invoke('getPropertyValue','text-decoration-line').should('equal','line-through');
+    clearCompletedTodos();
+});
+
+// computed styles version 2
+it('completed todo item label has text decoration \'line-through\'', () => {
+    cy.visit('https://todomvc.com/examples/react/dist/');
+    addTodo('todo1');
+    completeTodo('todo1');
+
+    let computedStyle = cy.get("[data-testid='todo-item-label']").contains('todo1').filter( 
+        (k, el) => {
+         const computedStyle = window.getComputedStyle(el).textDecorationLine;
+         console.log(computedStyle);
+         return computedStyle === 'line-through';
+        }
+    ).should('have.length', 1);
+
+    clearCompletedTodos();
+});
+
+it.only('changes checkbox search timeout to 6 seconds', () => {
+    cy.visit('https://todomvc.com/examples/react/dist/');
+    addTodo('todo1');
+    completeTodo('todo1');
+
+    let todoCheckboxes = cy.get("[data-testid='todo-item-label']", {timeout: 6000});
+
+    let todoCheckbox = todoCheckboxes.contains('todo1')
+    .siblings("[data-testid='todo-item-toggle']");
+    todoCheckbox.should('be.checked');
+
+    clearCompletedTodos();
+});