Adding tests.
parent
7b2f5d0228
commit
9ed17d942f
@ -0,0 +1,10 @@
|
||||
const { defineConfig } = require("cypress");
|
||||
|
||||
module.exports = defineConfig({
|
||||
e2e: {
|
||||
baseUrl: 'http://localhost:3000',
|
||||
setupNodeEvents(on, config) {
|
||||
// implement node event listeners here
|
||||
}
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,31 @@
|
||||
describe('Podcast episode page', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/podcast/mechanics-of-react-a-beginners-intro-to-react')
|
||||
})
|
||||
|
||||
it('loads correctly', () => {
|
||||
// Check that the page title is correct
|
||||
cy.title().should('equal', `Mechanics of React: A Beginner's Intro To React | The React Show`)
|
||||
|
||||
// Check that the date is displayed
|
||||
cy.get('[data-cy=date]').should('contain', 'March 31, 2023')
|
||||
|
||||
// Check that the YouTube video is embedded and playable
|
||||
cy.get('iframe[src^="https://www.youtube.com/embed/"]').should('be.visible')
|
||||
|
||||
// Check that the title is correct
|
||||
cy.get('[data-cy=title]').should('contain', `[87] Mechanics of React: A Beginner's Intro To React`)
|
||||
|
||||
// Check that the description is correct
|
||||
cy.get('[data-cy=description]').should('contain', 'Learn the fundamentals of React')
|
||||
|
||||
// Check that the transcript is correct
|
||||
cy.get('[data-cy=transcript]').should('contain', '00:00:05 Brought to you from occupied Miwok territory by me')
|
||||
})
|
||||
|
||||
it('should play the audio player when the "Listen" button is clicked', () => {
|
||||
cy.get('[data-cy=audio-player-button]').first().should('have.attr', 'aria-label', 'Play')
|
||||
cy.get('[data-cy=audio-player-button]').first().click()
|
||||
cy.get('[data-cy=audio-player-button]').first().should('have.attr', 'aria-label', 'Pause')
|
||||
})
|
||||
})
|
||||
@ -0,0 +1,26 @@
|
||||
describe('Episodes component', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/')
|
||||
})
|
||||
|
||||
it.only('should render the component with episodes data', () => {
|
||||
cy.get('[data-cy=episode-entry]').should('have.length', 15)
|
||||
|
||||
cy.get('[data-cy=episode-title]').first().should('contain', `[87] Mechanics of React: A Beginner's Intro To React`)
|
||||
cy.get('[data-cy=episode-description]').first().should('contain', 'Learn the fundamentals of React by')
|
||||
cy.get('[data-cy=episode-date]').first().should('contain', 'March 31, 2023')
|
||||
|
||||
cy.get('[data-cy=episode-title]').last().should('contain', '[73] A Fundamentally New React: My Journey with React Server Components')
|
||||
cy.get('[data-cy=episode-description]').last().should('contain', 'React Sever Components are')
|
||||
})
|
||||
|
||||
it('should navigate to the show notes page when the "Show notes" link is clicked', () => {
|
||||
cy.get('[data-cy=show-notes-link]').first().click()
|
||||
cy.url().should('include', '/podcast/mechanics-of-react-a-beginners-intro-to-react')
|
||||
})
|
||||
|
||||
it('should navigate to the transcript section when the "Transcript" link is clicked', () => {
|
||||
cy.get('[data-cy=transcript-link]').last().click()
|
||||
cy.url().should('include', '/podcast/a-fundamentally-new-react-my-journey-with-react-server-components#transcript')
|
||||
})
|
||||
})
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"name": "Using fixtures to represent data",
|
||||
"email": "hello@cypress.io",
|
||||
"body": "Fixtures are a great way to mock data for responses to routes"
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
// ***********************************************
|
||||
// This example commands.js shows you how to
|
||||
// create various custom commands and overwrite
|
||||
// existing commands.
|
||||
//
|
||||
// For more comprehensive examples of custom
|
||||
// commands please read more here:
|
||||
// https://on.cypress.io/custom-commands
|
||||
// ***********************************************
|
||||
//
|
||||
//
|
||||
// -- This is a parent command --
|
||||
// Cypress.Commands.add('login', (email, password) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a child command --
|
||||
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a dual command --
|
||||
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This will overwrite an existing command --
|
||||
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
|
||||
@ -0,0 +1,20 @@
|
||||
// ***********************************************************
|
||||
// This example support/e2e.js is processed and
|
||||
// loaded automatically before your test files.
|
||||
//
|
||||
// This is a great place to put global configuration and
|
||||
// behavior that modifies Cypress.
|
||||
//
|
||||
// You can change the location of this file or turn off
|
||||
// automatically serving support files with the
|
||||
// 'supportFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/configuration
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import './commands'
|
||||
|
||||
// Alternatively you can use CommonJS syntax:
|
||||
// require('./commands')
|
||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue