Cypress testing of Storybook

storybook_spec.js

// Tests built around our Storybook
describe('Storybook', () => {
    beforeEach(() => {
        // Visiting our app before each test removes any state build up from
        // previous tests. Visiting acts as if we closed a tab and opened a fresh one.
        // In this case, we are using the publicly accessible AirBnB react-dates Storybook
        cy.visit('http://airbnb.io/react-dates/')
    })
    // Let's build some tests around the DateRangePicker
    context('DateRangePicker', () => {
        it('should visit the default story in this collection', () => {
            cy.get('a[data-name="default"]').click()
            // NB - In storybook 3.1.x, you'd need to do this instead
            //   cy.get('a[title="Open default"]').click()  

            // Now get the iframe for the components and make assertions on that.
            cy.get('#storybook-preview-iframe').then(($iframe) => {
                const doc = $iframe.contents();
                iget(doc, "#startDate").click();
                iget(doc, "#root > div > div:nth-child(2) > div > a").should('have.text', "Show Info");
            })
        })
    })

    // Now let's build some tests around DayPicker
    context("DayPicker", () => {
        // Since the DayPicker isn't the default story, we need to open it each time...
        beforeEach(() => {
            cy.get('div[data-name="DayPicker"]').click();
            // NB - In Storybook v3.1.x, you'd need to do this instead
            //   cy.get('a[title="Open DayPicker"]').click();
        })
        it('should visit the vertical day picker', () => {
            cy.get('a[data-name="vertical"]').click();
            // NB - In Storybook v3.1.x, you'd need to do this instead
            //   cy.get('a[title="Open vertical"]').click();

            // Now get the iframe for the components and make assertions on that.
            cy.get('#storybook-preview-iframe').then(($iframe) => {
                const doc = $iframe.contents();
                // This is an implicit assertion that this element exists
                iget(doc, 'div[aria-label="Calendar"]');
            })
        })
    })
})

function iget(doc, selector) {
    return cy.wrap(doc.find(selector));
}

The following visits an iframe directly removing the need to interact with the navigation to activate a specific story.

// Tests built around our Storybook
describe('Storybook', () => {
    // Let's build some tests around the DateRangePicker
    context('DateRangePicker', () => {
        it('should visit the default story in this collection', () => {
            cy.visit('http://airbnb.io/react-dates/iframe.html?id=daterangepicker-drp--default')

            cy.get("#startDate").click();
            // Perhaps there's a more semantic selector based on aria roles or something?
            cy.get("#root > div > div:nth-child(2) > div > a").should('have.text', "Show Info");
        })
    })

    // Now let's build some tests around DayPicker
    context("DayPicker", () => {
        beforeEach(() => {
            cy.visit('http://airbnb.io/react-dates/iframe.html?id=daypicker--vertical')
        })
        it('should visit the vertical day picker', () => {
            cy.get('div[aria-label="Calendar"]').should("exist");
        })
    })
})