describe('Slot Component Testing', () => {
beforeEach(() => {
cy.visit('/slot-component-page')
})
it('should display default slot content', () => {
cy.get('[data-testid="default-slot"]').should('be.visible').and('contain.text', 'Default Slot Content')
})
it('should display named slot content', () => {
cy.get('[data-testid="named-slot"]').should('be.visible').and('contain.text', 'Named Slot Content')
})
it('should trigger event and update UI when button inside slot is clicked', () => {
cy.get('[data-testid="slot-button"]').click()
cy.get('[data-testid="event-result"]').should('be.visible').and('contain.text', 'Event Triggered')
})
})This Cypress test suite checks the slot component on the page.
beforeEach loads the page before each test.
The first test verifies the default slot content is visible and contains expected text using cy.get with a data-testid selector for reliability.
The second test checks the named slot content similarly.
The third test clicks a button inside the slot and verifies that an event triggers a UI update by checking the presence and text of an element that shows the event result.
Using data-testid attributes helps keep selectors stable and clear. Cypress commands handle waiting and retries automatically, so no manual waits are needed.
