histoire/examples/vue3/cypress/e2e/layout.cy.js at a4b762feb3c1f6f5e67dd4a30a565bb0507fee5d · histoire-dev/histoire · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
/// <reference types="cypress" />

describe('Layout customization', () => {
  beforeEach(() => {
    cy.clearLocalStorage()
    cy.visit('/')
  })

  it('opens the modal via the header button', () => {
    cy.get('[data-test-id="layout-btn"]').click()
    cy.get('[data-test-id="layout-modal"]').should('be.visible')
    cy.contains('[data-test-id="layout-modal"]', 'Customize Layout')
  })

  it('toggles Story List visibility', () => {
    cy.get('.histoire-base-split-pane').should('exist')
    cy.get('[data-test-id="layout-btn"]').click()
    cy.get('[data-test-id="layout-toggle-story-list"]').click()
    cy.get('[data-test-id="layout-modal-close"]').click()
    cy.get('.histoire-base-split-pane').should('not.exist')
  })

  it('toggles Story Options visibility on a story', () => {
    cy.get('[data-test-id="story-list-item"]').contains('Controls').click()
    cy.get('[data-test-id="story-side-panel"]').should('exist')
    cy.get('[data-test-id="layout-btn"]').click()
    cy.get('[data-test-id="layout-toggle-story-options"]').click()
    cy.get('[data-test-id="layout-modal-close"]').click()
    cy.get('[data-test-id="story-side-panel"]').should('not.exist')
  })

  it('switches Story Options placement to Bottom', () => {
    cy.get('[data-test-id="story-list-item"]').contains('Controls').click()
    cy.get('[data-test-id="story-side-panel"]').should('exist')
    cy.get('[data-test-id="layout-btn"]').click()
    cy.get('[data-test-id="layout-placement-bottom"]').click()
    cy.get('[data-test-id="layout-modal-close"]').click()
    cy.get('.histoire-base-split-pane.portrait').should('exist')
  })

  it('persists settings across reload', () => {
    cy.get('[data-test-id="layout-btn"]').click()
    cy.get('[data-test-id="layout-toggle-story-list"]').click()
    cy.get('[data-test-id="layout-modal-close"]').click()
    cy.reload()
    cy.get('.histoire-base-split-pane').should('not.exist')
  })

  it('hides the Layout button on mobile', () => {
    cy.viewport(375, 667)
    cy.get('[data-test-id="layout-btn"]').should('not.exist')
  })

  it('opens and toggles via keyboard shortcut', () => {
    cy.get('body').type('{meta}{shift}l')
    cy.get('[data-test-id="layout-modal"]').should('be.visible')
    cy.get('body').type('{meta}{shift}l')
    cy.get('[data-test-id="layout-modal"]').should('not.be.visible')
  })

  it('respects per-story meta.storyOptions override', () => {
    cy.get('[data-test-id="story-list-item"]').contains('StoryOptions Override').click()
    cy.get('[data-test-id="story-side-panel"]').should('not.exist')
    cy.get('[data-test-id="story-list-item"]').contains('Controls').click()
    cy.get('[data-test-id="story-side-panel"]').should('exist')
  })

  it('closes the modal via backdrop and Esc', () => {
    cy.get('[data-test-id="layout-btn"]').click()
    cy.get('[data-test-id="layout-modal"]').should('be.visible')
    cy.get('body').click(10, 10)
    cy.get('[data-test-id="layout-modal"]').should('not.be.visible')
    cy.get('[data-test-id="layout-btn"]').click()
    cy.get('body').type('{esc}')
    cy.get('[data-test-id="layout-modal"]').should('not.be.visible')
  })
})