Automating End-to-End Tests with Cypress

Shows how to set up and write end-to-end tests for a web application using TanStack Store with Cypress, including state verification.

describe('Todo Application Tests', () => {
  beforeEach(() => {
    // Visiting our application before each test
    cy.visit('http://localhost:3000');
  });

  it('Displays Todos from global state', () => {
    // Intercepting a request to load initial todos
    cy.intercept('GET', '/api/todos', { fixture: 'todos.json' }).as('loadTodos');
    // Waiting for the request to complete
    cy.wait('@loadTodos');
    // Asserting that todos from our fixture are displayed
    cy.get('.todo-item').should('have.length', 3);
  });

  it('Can add a new todo', () => {
    // Typing a new todo title
    cy.get('.new-todo-input').type('Learn Cypress{enter}');
    // Optimistically updates UI without waiting for server response
    cy.get('.todo-item').should('contain', 'Learn Cypress');
  });
})

This test suite is set up to run end-to-end tests for a Todo application using Cypress. It covers loading todos from a mock API and adding a new todo to verify optimistic UI updates, ensuring that the application's integration with TanStack Store for state management works as expected.

it('Can toggle a todo', () => {
  cy.get('.todo-item:first').as('firstTodo');
  cy.get('@firstTodo')
    .find('.toggle')
    .click()
    .then(() => {
      // Verifying the todo's completion status has been updated in the global state
      // This assumes the application exposes a window method to access the global state
      const isCompleted = window.store.getState().todos[0].completed;
      expect(isCompleted).to.be.true;
    });
})

This piece of code defines a test case to verify that a todo item can be toggled between completed and not completed states within the application and reflects these changes in the TanStack Global Store. The example demonstrates direct integration testing of the application's state management logic.