// cypress/pages/LoginPage.ts
export class LoginPage {
  visit() {
    cy.visit('/login');
  }

  fillEmail(email: string) {
    cy.get('[data-testid="email-input"]').clear().type(email);
  }

  fillPassword(password: string) {
    cy.get('[data-testid="password-input"]').clear().type(password);
  }

  submit() {
    cy.get('[data-testid="login-btn"]').click();
  }

  errorMessage() {
    return cy.get('[data-testid="login-error"]');
  }
}

// cypress/e2e/login.cy.ts
import { LoginPage } from '../pages/LoginPage';

const login = new LoginPage();

describe('Login', () => {
  beforeEach(() => {
    cy.intercept('POST', '/api/auth/login').as('loginRequest');
    login.visit();
  });

  it('redirects to dashboard on valid credentials', () => {
    cy.intercept('POST', '/api/auth/login', { fixture: 'auth/success.json' }).as('loginRequest');
    login.fillEmail('user@example.com');
    login.fillPassword('password123');
    login.submit();
    cy.wait('@loginRequest');
    cy.url().should('include', '/dashboard');
  });

  it('shows error on invalid credentials', () => {
    cy.intercept('POST', '/api/auth/login', { statusCode: 401, body: { error: 'Invalid credentials' } }).as('loginRequest');
    login.fillEmail('wrong@example.com');
    login.fillPassword('wrongpass');
    login.submit();
    cy.wait('@loginRequest');
    login.errorMessage().should('be.visible').and('contain', 'Invalid credentials');
  });
});

// cypress/fixtures/products.json
// { "items": [{ "id": 1, "name": "Widget", "price": 9.99 }] }

describe('Product listing', () => {
  it('renders products from API', () => {
    cy.intercept('GET', '/api/products', { fixture: 'products.json' }).as('getProducts');
    cy.visit('/products');
    cy.wait('@getProducts');
    cy.get('[data-testid="product-card"]').should('have.length', 1);
    cy.contains('Widget').should('be.visible');
  });

  it('shows empty state when no products', () => {
    cy.intercept('GET', '/api/products', { body: { items: [] } }).as('getProducts');
    cy.visit('/products');
    cy.wait('@getProducts');
    cy.get('[data-testid="empty-state"]').should('be.visible');
  });

  it('shows error state on 500', () => {
    cy.intercept('GET', '/api/products', { statusCode: 500 }).as('getProducts');
    cy.visit('/products');
    cy.wait('@getProducts');
    cy.get('[data-testid="error-banner"]').should('be.visible');
  });
});

// cypress/support/commands.ts
Cypress.Commands.add('login', (email: string, password: string) => {
  cy.session(
    [email, password],
    () => {
      cy.request('POST', '/api/auth/login', { email, password })
        .its('body.token')
        .then((token) => {
          window.localStorage.setItem('auth_token', token);
        });
    },
    { cacheAcrossSpecs: true }
  );
});

Cypress.Commands.add('dataCy', (selector: string) => {
  return cy.get(`[data-testid="${selector}"]`);
});

// cypress/support/index.d.ts
declare namespace Cypress {
  interface Chainable {
    login(email: string, password: string): Chainable<void>;
    dataCy(selector: string): Chainable<JQuery<HTMLElement>>;
  }
}

// Usage in spec
cy.login('user@example.com', 'password123');
cy.dataCy('submit-btn').click();

// cypress.config.ts
import { defineConfig } from 'cypress';
import { devServer } from '@cypress/vite-dev-server';

export default defineConfig({
  component: {
    devServer: {
      framework: 'react',
      bundler: 'vite',
    },
    specPattern: 'src/**/*.cy.{ts,tsx}',
  },
});

// src/components/Button/Button.cy.tsx
import React from 'react';
import { Button } from './Button';

describe('Button', () => {
  it('calls onClick when clicked', () => {
    const onClick = cy.stub().as('onClick');
    cy.mount(<Button onClick={onClick}>Submit</Button>);
    cy.get('button').click();
    cy.get('@onClick').should('have.been.calledOnce');
  });

  it('is disabled when loading', () => {
    cy.mount(<Button loading>Submit</Button>);
    cy.get('button').should('be.disabled');
    cy.get('[data-testid="spinner"]').should('be.visible');
  });
});

// cypress/support/commands.ts
Cypress.Commands.add('loginByApi', (role: 'admin' | 'user' = 'user') => {
  const credentials = {
    admin: { email: 'admin@example.com', password: Cypress.env('ADMIN_PASSWORD') },
    user: { email: 'user@example.com', password: Cypress.env('USER_PASSWORD') },
  };

  cy.session(
    role,
    () => {
      cy.request({
        method: 'POST',
        url: `${Cypress.env('API_URL')}/auth/login`,
        body: credentials[role],
      }).then(({ body }) => {
        localStorage.setItem('token', body.token);
      });
    },
    {
      validate: () => {
        cy.request(`${Cypress.env('API_URL')}/auth/me`).its('status').should('eq', 200);
      },
      cacheAcrossSpecs: true,
    }
  );
});

// In specs
beforeEach(() => {
  cy.loginByApi('admin');
});

// Requires cypress-image-diff: cy.compareSnapshot(name, threshold)
it('matches dashboard baseline', () => {
  cy.loginByApi();
  cy.intercept('GET', '/api/dashboard', { fixture: 'dashboard.json' }).as('getDashboard');
  cy.visit('/dashboard');
  cy.wait('@getDashboard');
  cy.get('[data-testid="dashboard-chart"]').should('be.visible');
  cy.get('[data-testid="current-time"]').invoke('text', '12:00 PM'); // freeze dynamic text
  cy.compareSnapshot('dashboard-full', 0.1); // 10% pixel threshold
});

undefined

---