feat: add PATCH support (#2)

Author: bahmutov

.github/workflows/ci.yml

@@ -1,7 +1,7 @@
 name: ci
 on: push
 jobs:
-  lint:
+  test:
     runs-on: ubuntu-24.04
     steps:
       - name: Checkout 🛎

README.md

@@ -25,6 +25,7 @@ describe('Todos', { rest: { todos: 'todos.json' } }, () => {
   // GET /todos
   // POST /todos
   // DELETE /todos/:id
+  // PATCH /todos/:id
 ```
 
 See [todos.cy.js](./cypress/e2e/todos.cy.js) for examples

app/app.js

@@ -47,6 +47,14 @@ function appStart() {
         let todos = state.todos
         todos.splice(todos.indexOf(todo), 1)
       },
+      UPDATE_TODO(state, updatedTodo) {
+        const index = state.todos.findIndex(
+          (todo) => todo.id === updatedTodo.id,
+        )
+        if (index !== -1) {
+          state.todos.splice(index, 1, updatedTodo)
+        }
+      },
       CLEAR_NEW_TODO(state) {
         state.newTodo = ''
       },
@@ -121,6 +129,11 @@ function appStart() {
         }
         commit('SET_TODOS', remainingTodos)
       },
+      updateTodo({ commit }, todo) {
+        axios.patch(`/todos/${todo.id}`, todo).then(() => {
+          commit('UPDATE_TODO', todo)
+        })
+      },
       clearNewTodo({ commit }) {
         commit('CLEAR_NEW_TODO')
       },

app/index.html

@@ -68,7 +68,8 @@ <h1 data-cy="app-title">todos</h1>
               <input
                 class="toggle"
                 type="checkbox"
-                v-model="todo.completed"
+                :checked="todo.completed"
+                @change="$store.dispatch('updateTodo', { ...todo, completed: !todo.completed })"
               />
               <label>{{ todo.title }}</label>
               <button

cypress/e2e/todos.cy.js

@@ -42,6 +42,10 @@ describe('Todos', { rest: { todos: 'todos.json' } }, () => {
         .to.be.an('array')
         .and.have.length(4)
     })
+
+    cy.log('reload the page')
+    cy.reload()
+    cy.get('li.todo').should('have.length', 4)
   })
 
   it('allows accessing individual items', () => {
@@ -57,4 +61,28 @@ describe('Todos', { rest: { todos: 'todos.json' } }, () => {
         expect(todos).to.be.an('array').and.have.length(2)
       })
   })
+
+  it('supports PATCH', () => {
+    cy.get('li.todo').first().find('.toggle').click()
+    cy.get('li.todo').first().should('have.class', 'completed')
+    cy.wait('@patchTodos')
+      .its('response.statusCode')
+      .should('eq', 204)
+    cy.get('@patchTodos')
+      .its('request.body')
+      .should('deep.include', {
+        completed: true,
+      })
+      .then(() => {
+        const todos = Cypress.env('todos')
+        expect(todos, 'todos array')
+          .to.be.an('array')
+          .and.have.length(3)
+        expect(todos[0].completed, 'first todo completed').to.be.true
+      })
+
+    cy.log('reload the page')
+    cy.reload()
+    cy.get('li.todo').first().should('have.class', 'completed')
+  })
 })

src/index.js

@@ -12,9 +12,15 @@ beforeEach(function prepareRestApi() {
       // conver the first letter to uppercase
       const resourceNameCapitalized =
         resourceName.charAt(0).toUpperCase() + resourceName.slice(1)
-      cy.intercept('GET', resourceName, data).as(
-        `get${resourceNameCapitalized}`,
-      )
+
+      // GET resources
+      cy.intercept('GET', resourceName, (req) =>
+        req.reply(200, data),
+      ).as(`get${resourceNameCapitalized}`)
+
+      // TODO: add GET /:id
+
+      // POST resources
       cy.intercept('POST', resourceName, (req) => {
         const item = req.body
         // modify the id?
@@ -32,6 +38,21 @@ beforeEach(function prepareRestApi() {
         }
         req.reply(204)
       }).as(`delete${resourceNameCapitalized}`)
+
+      // PATCH resources
+      cy.intercept('PATCH', resourceName + '/*', (req) => {
+        const id = req.url.split('/').pop()
+        const index = data.findIndex((item) => item.id === id)
+        if (index === -1) {
+          return req.reply(404)
+        }
+        if (index >= data.length) {
+          return req.reply(404)
+        }
+
+        Object.assign(data[index], req.body)
+        req.reply(204)
+      }).as(`patch${resourceNameCapitalized}`)
     })
   })
 })