after.js

import { config } from '../config'
import { start, login } from '../flows/login'

context('Logging in to an existing account', () => {
    beforeEach(() => start())

    it('should load the page', () => {
        login(
            config.params.creatorLogin.user,
            config.params.creatorLogin.password,
        )
        cy.getPath().should('contain', '/home')
    })
})

after_flow.js

import { config } from '../config'

export const DEFAULT_PATRON_POST_BODY_TEXT = 'I am making a test patron post'
export const postEditorButtonSelector = '[name="post-btn"]'
export const postEditorBodyFieldSelector = 'textarea[name=text]'
export const pledgeButtonSelector = '[name=become-a-patron]'
let patronPostBody = undefined

export const visit = () => {
    cy.visitRelative(`user/community?u=${config.params.creatorLogin.id}`)
}

export const patronPostBodyForCurrentTestPass = () => {
    if (!patronPostBody) {
        patronPostBody = `${DEFAULT_PATRON_POST_BODY_TEXT} at ${Date.now()}`
    }
    return patronPostBody
}

export const enterPostInformation = postBodyText =>
    cy.get(postEditorBodyFieldSelector).focus().type(postBodyText)

export const clickPublishPatronPostButton = () =>
    cy.get(postEditorButtonSelector).click()

export const getPatronPostInFeed = postBody =>
    cy.contains('[data-tag=post-card]', postBody)

export const clickEditPatronPostButton = postBody => {
    getPatronPostInFeed(postBody).within(() => {
        cy.get('a').debug()
        cy.get("a[href*='/edit']").click()
    })
}

before.js

import { expect } from 'chai'
import { createBrowser } from '../browser'
import run from '../helpers/runner'
import config from '../helpers/config'

import * as LoginPage from '../pages/login_page'

describe('login page', function() {
    this.retries(1)
    const browser = createBrowser('login')

    after(
        run(browser, async () => {
            await browser.end()
        }),
    )
    // TODO: Need to debug once the mastercard fire is out and deploy velocity requirements are not as urgent
    it(
        'allows a registered user to log in',
        run(browser, async () => {
            await browser
                .use(LoginPage.get())
                .screenshot('loaded')
                .use(
                    LoginPage.enterLogin(
                        config.params.login.user,
                        config.params.login.password,
                    ),
                )
                .screenshot('inputted')

            await browser
                .use(LoginPage.clickSubmit())
                .screenshot('submitted')
                .waitForPath('/home')

            const homeTarget = await browser.getElement('#reactTarget')
            expect(homeTarget).to.exist

            await browser.use(LoginPage.logout())
        }),
    )
})

before_flow.js

import config from '../helpers/config'

const pageTitleText = 'Test Creator'

let patronPostBody = undefined
let basePatronPostBody = 'I am making a test patron post'

export const patronPostBodyForCurrentTestPass = () => {
    if (!patronPostBody) {
        patronPostBody = `${basePatronPostBody} at ${Date.now()}`
    }
    return patronPostBody
}

export const postEditorButtonSelector = '[name=post-btn]'
export const postEditorBodyFieldSelector = 'textarea[name=text]'
export const pledgeButtonSelector = '[name=become-a-patron]'

export const get = () => nightmare =>
    nightmare
        .goto(`/user/community?u=${config.params.creatorLogin.id}`)
        .waitForStringInBody(pageTitleText)

export const waitForPatronPostInFeedToBeVisible = (
    postBody = basePatronPostBody,
) => nightmare =>
    nightmare.waitForElementWithTextToBeVisible(
        '[data-tag=post-card]',
        postBody,
    )

export const getPatronPostInFeed = (
    postBody = basePatronPostBody,
) => nightmare => nightmare.getElementWithText('[data-tag=post-card]', postBody)

export const waitForPledgeButtonToBeVisible = () => nightmare =>
    nightmare.waitForElementToBeVisible(pledgeButtonSelector)

export const waitForPostEditorInFeedToBeVisible = () => nightmare =>
    nightmare.waitForElementToBeVisible(postEditorButtonSelector)

export const enterPostInformation = postBodyText => nightmare =>
    nightmare
        .waitForElementToExist(postEditorBodyFieldSelector)
        .insert(postEditorBodyFieldSelector, postBodyText)

export const clickPublishPatronPostButton = () => nightmare =>
    nightmare
        .waitForElementToExist(postEditorButtonSelector)
        .click(postEditorButtonSelector)

const _clickEditPatronPostButtonElement = postBodyText => {
    // NOTE: this is copy/pasted from _getEditPatronPostButtonElement
    // because `nightmare.evaluate()` doesn't let you pass functions into the browser scope

    // Find the post card with the specified post body in the stream
    const postCardCandidates = Array.prototype.filter.call(
        document.querySelectorAll('[data-tag=post-card]'),
        el => {
            return el.innerText.indexOf(postBodyText) !== -1
        },
    )
    if (postCardCandidates.length === 0) {
        return null
    }
    const postCard = postCardCandidates[0]
    // Find the edit button inside that post card
    // TODO: put a data-tag on the edit button to make this easier
    const editButtonCandidates = Array.prototype.filter.call(
        postCard.querySelectorAll('a'),
        el => {
            const href = el.getAttribute('href')
            if (href) {
                return href.indexOf('/edit') !== -1
            }
            return false
        },
    )
    if (editButtonCandidates.length === 0) {
        return null
    }

    // Okay, here's where it actually gets different
    const buttonElement = editButtonCandidates[0]
    document.activeElement.blur()
    let event = document.createEvent('MouseEvent')
    event.initEvent('click', true, true)
    buttonElement.dispatchEvent(event)
}

export const clickEditPatronPostButton = (
    postBodyText = basePatronPostBody,
) => nightmare =>
    nightmare.evaluate(_clickEditPatronPostButtonElement, postBodyText)