/// <reference types="cypress" />
// Component Test for Button
import Button from '../../src/components/Button.vue';
describe('Button Component Test', () => {
it('renders with text and responds to click', () => {
const onClick = cy.stub();
cy.mount(<Button onClick={onClick}>Submit</Button>);
cy.get('[data-cy=button]').should('be.visible').and('have.text', 'Submit');
cy.get('[data-cy=button]').click().then(() => {
expect(onClick).to.have.been.calledOnce;
});
});
});
// E2E Test for Login Flow
describe('Login Flow E2E Test', () => {
it('logs in and redirects to dashboard', () => {
cy.visit('/login');
cy.get('[data-cy=email-input]').type('user@example.com');
cy.get('[data-cy=password-input]').type('Password123');
cy.get('[data-cy=login-button]').click();
cy.url().should('include', '/dashboard');
cy.get('[data-cy=welcome-text]').should('contain.text', 'Welcome, user!');
});
});The solution has two parts: component test and E2E test.
In the component test, we mount the Button component using Cypress component testing. We pass a stub function to track clicks. We check the button text and simulate a click, then verify the click handler was called once.
In the E2E test, we visit the login page URL. We fill the email and password fields using selectors with data-cy attributes. We click the login button, then verify the URL changed to the dashboard. Finally, we check the dashboard page shows the welcome message.
This separation shows how component testing focuses on a small piece in isolation, while E2E tests the full user flow in the real app.
