Hera Zhao
a27c30ea7c
Some checks failed
PR Preview / teardown-preview (pull_request) Has been skipped
Test / unit-test (push) Successful in 4s
Test / build-check (push) Successful in 4s
PR Preview / test (pull_request) Successful in 5s
PR Preview / deploy-preview (pull_request) Successful in 13s
Test / e2e-test (push) Has been cancelled
- Grep pattern now matches full filenames (demo-walkthrough, visual-check) - Updated all test files to use .oil-chip (new OilReference class name) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
77 lines
2.1 KiB
JavaScript
77 lines
2.1 KiB
JavaScript
describe('Responsive Design', () => {
|
|
describe('Mobile viewport (375x667)', () => {
|
|
beforeEach(() => {
|
|
cy.viewport(375, 667)
|
|
})
|
|
|
|
it('loads the app on mobile', () => {
|
|
cy.visit('/')
|
|
cy.get('.app-header').should('be.visible')
|
|
cy.contains('doTERRA').should('be.visible')
|
|
})
|
|
|
|
it('nav tabs are scrollable', () => {
|
|
cy.visit('/')
|
|
cy.get('.nav-tabs').should('have.css', 'overflow-x', 'auto')
|
|
})
|
|
|
|
it('recipe cards stack in single column', () => {
|
|
cy.visit('/')
|
|
cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
|
|
// On mobile, cards should be full width
|
|
cy.get('.recipe-card').first().then($card => {
|
|
const width = $card.outerWidth()
|
|
expect(width).to.be.gte(300)
|
|
})
|
|
})
|
|
|
|
it('search input is usable on mobile', () => {
|
|
cy.visit('/')
|
|
cy.get('input[placeholder*="搜索"]').should('be.visible')
|
|
cy.get('input[placeholder*="搜索"]').type('薰衣草')
|
|
cy.get('input[placeholder*="搜索"]').should('have.value', '薰衣草')
|
|
})
|
|
|
|
it('oil reference page works on mobile', () => {
|
|
cy.visit('/oils')
|
|
cy.contains('精油价目').should('be.visible')
|
|
cy.get('.oil-chip').should('have.length.gte', 1)
|
|
})
|
|
})
|
|
|
|
describe('Tablet viewport (768x1024)', () => {
|
|
beforeEach(() => {
|
|
cy.viewport(768, 1024)
|
|
})
|
|
|
|
it('loads and shows recipe grid', () => {
|
|
cy.visit('/')
|
|
cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
|
|
})
|
|
|
|
it('oil grid shows multiple columns', () => {
|
|
cy.visit('/oils')
|
|
cy.get('.oil-chip', { timeout: 10000 }).should('have.length.gte', 1)
|
|
})
|
|
})
|
|
|
|
describe('Wide viewport (1920x1080)', () => {
|
|
beforeEach(() => {
|
|
cy.viewport(1920, 1080)
|
|
})
|
|
|
|
it('content is centered with max-width', () => {
|
|
cy.visit('/')
|
|
cy.get('.main').then($main => {
|
|
const width = $main.outerWidth()
|
|
expect(width).to.be.lte(960)
|
|
})
|
|
})
|
|
|
|
it('recipe grid shows multiple columns', () => {
|
|
cy.visit('/')
|
|
cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
|
|
})
|
|
})
|
|
})
|