pinafore/tests/utils.js

import { ClientFunction as exec, Selector as $ } from 'testcafe'
import * as images from './images'
import * as blobUtils from './blobUtils'

export const settingsButton = $('nav a[aria-label=Settings]')
export const instanceInput = $('#instanceInput')
export const modalDialog = $('.modal-dialog')
export const visibleModalDialog = $('.modal-dialog:not([aria-hidden="true"])')
export const modalDialogContents = $('.modal-dialog-contents')
export const modalDialogBackdrop = $('.modal-dialog-backdrop')
export const closeDialogButton = $('.modal-dialog:not([aria-hidden="true"]) .close-dialog-button')
export const notificationsNavButton = $('nav a[href="/notifications"]')
export const homeNavButton = $('nav a[href="/"]')
export const localTimelineNavButton = $('nav a[href="/local"]')
export const searchNavButton = $('nav a[href="/search"]')
export const communityNavButton = $('nav a[href="/community"]')
export const settingsNavButton = $('nav a[href="/settings"]')
export const formError = $('.form-error-user-error')
export const composeInput = $('.compose-box-input')
export const composeContentWarning = $('.content-warning-input')
export const composeButton = $('.compose-box-button')
export const composeLengthIndicator = $('.length-indicator')
export const emojiButton = $('.compose-box-toolbar button:first-child')
export const mediaButton = $('.compose-box-toolbar button:nth-child(2)')
export const pollButton = $('.compose-box-toolbar button:nth-child(3)')
export const postPrivacyButton = $('.compose-box-toolbar button:nth-child(4)')
export const contentWarningButton = $('.compose-box-toolbar button:nth-child(5)')
export const emailInput = $('input#user_email')
export const passwordInput = $('input#user_password')
export const authorizeInput = $('button[type=submit]:not(.negative)')
export const logInToInstanceLink = $('a[href="/settings/instances/add"]')
export const searchInput = $('.search-input')
export const postStatusButton = $('.compose-box-button')
export const showMoreButton = $('.more-items-header button')
export const accountProfileName = $('.account-profile .account-profile-name')
export const accountProfileUsername = $('.account-profile .account-profile-username')
export const accountProfileFollowedBy = $('.account-profile .account-profile-followed-by')
export const accountProfileFollowButton = $('.account-profile .account-profile-follow button')
export const goBackButton = $('.dynamic-page-go-back')
export const accountProfileMoreOptionsButton = $('.account-profile-more-options button')
export const addInstanceButton = $('#submitButton')
export const mastodonLogInButton = $('button[type="submit"]')
export const followsButton = $('.account-profile-details > *:nth-child(2)')
export const followersButton = $('.account-profile-details > *:nth-child(3)')
export const avatarInComposeBox = $('.compose-box-avatar')
export const displayNameInComposeBox = $('.compose-box-display-name')
export const generalSettingsButton = $('a[href="/settings/general"]')
export const markMediaSensitiveInput = $('#choice-mark-media-sensitive')
export const neverMarkMediaSensitiveInput = $('#choice-never-mark-media-sensitive')
export const removeEmojiFromDisplayNamesInput = $('#choice-omit-emoji-in-display-names')
export const disableInfiniteScroll = $('#choice-disable-infinite-scroll')
export const disableUnreadNotifications = $('#choice-disable-unread-notification-counts')
export const leftRightChangesFocus = $('#choice-left-right-focus')
export const disableHotkeys = $('#choice-disable-hotkeys')
export const dialogOptionsOption = $('.modal-dialog button')
export const emojiSearchInput = $('.emoji-mart-search input')
export const confirmationDialogOKButton = $('.confirmation-dialog-form-flex button:nth-child(1)')
export const confirmationDialogCancelButton = $('.confirmation-dialog-form-flex button:nth-child(2)')

export const loadMoreButton = $('.loading-footer button')

export const composeModalInput = $('.modal-dialog .compose-box-input')
export const composeModalComposeButton = $('.modal-dialog .compose-box-button')
export const composeModalContentWarningInput = $('.modal-dialog .content-warning-input')
export const composeModalEmojiButton = $('.modal-dialog .compose-box-toolbar button:nth-child(1)')
export const composeModalPostPrivacyButton = $('.modal-dialog .compose-box-toolbar button:nth-child(4)')
export const composeModalMediaSensitiveCheckbox = $('.modal-dialog .compose-media-sensitive input')

export const composePoll = $('.compose-poll')
export const composePollMultipleChoice = $('.compose-poll input[type="checkbox"]')
export const composePollMultipleChoiceInDialog = $('.modal-dialog .compose-poll input[type="checkbox"]')
export const composePollExpiry = $('.compose-poll select')
export const composePollExpiryOption = $('.compose-poll select option')
export const composePollExpiryInDialog = $('.modal-dialog .compose-poll select')
export const composePollAddButton = $('.compose-poll button:last-of-type')

export const composeMediaSensitiveCheckbox = $('.compose-media-sensitive input')

export const postPrivacyDialogButtonUnlisted = $('[aria-label="Post privacy dialog"] li:nth-child(2) button')

export const accountProfileFilterStatuses = $('.account-profile-filters li:nth-child(1)')
export const accountProfileFilterStatusesAndReplies = $('.account-profile-filters li:nth-child(2)')
export const accountProfileFilterMedia = $('.account-profile-filters li:nth-child(3)')

export const notificationsTabAll = $('.notification-filters li:nth-child(1)')
export const notificationsTabMentions = $('.notification-filters li:nth-child(2)')

export const instanceSettingHomeReblogs = $('#instance-option-homeReblogs')
export const instanceSettingNotificationFollows = $('#instance-option-notificationFollows')
export const instanceSettingNotificationFavs = $('#instance-option-notificationFavs')
export const instanceSettingNotificationReblogs = $('#instance-option-notificationReblogs')
export const instanceSettingNotificationMentions = $('#instance-option-notificationMentions')

export const notificationBadge = $('#main-nav li:nth-child(2) .nav-link-badge')

export const focalPointXInput = $('.media-focal-point-inputs *:nth-child(1) input')
export const focalPointYInput = $('.media-focal-point-inputs *:nth-child(2) input')

export function getComposeModalNthMediaAltInput (n) {
  return $(`.modal-dialog .compose-media:nth-child(${n}) .compose-media-alt textarea`)
}

export function getComposeModalNthMediaListItem (n) {
  return $(`.modal-dialog .compose-media:nth-child(${n})`)
}

export const favoritesCountElement = $('.status-favs').addCustomDOMProperties({
  innerCount: el => parseInt(el.innerText, 10)
})

export const reblogsCountElement = $('.status-reblogs').addCustomDOMProperties({
  innerCount: el => parseInt(el.innerText, 10)
})

export const sleep = timeout => new Promise(resolve => setTimeout(resolve, timeout))

export const getUrl = exec(() => window.location.href)

export const getMediaScrollLeft = exec(() => document.querySelector('.media-scroll').scrollLeft || 0)

export const getActiveElementClassList = exec(() =>
  (document.activeElement && (document.activeElement.getAttribute('class') || '').split(/\s+/)) || []
)

export const getActiveElementTagName = exec(() =>
  (document.activeElement && document.activeElement.tagName) || ''
)

export const getActiveElementInnerText = exec(() =>
  (document.activeElement && document.activeElement.innerText) || ''
)

export const getActiveElementRectTop = exec(() => (
  (document.activeElement && document.activeElement.getBoundingClientRect().top) || -1
))

export const getActiveElementAriaPosInSet = exec(() => (
  (document.activeElement && document.activeElement.getAttribute('aria-posinset')) || ''
))

export const getActiveElementAriaLabel = exec(() => (
  (document.activeElement && document.activeElement.getAttribute('aria-label')) || ''
))

export const getActiveElementInsideNthStatus = exec(() => {
  let element = document.activeElement
  while (element) {
    if (element.hasAttribute('aria-posinset')) {
      return element.getAttribute('aria-posinset')
    }
    element = element.parentElement
  }
  return ''
})

export const getTitleText = exec(() => document.head.querySelector('title') && document.head.querySelector('title').innerHTML)

export const goBack = exec(() => window.history.back())

export const goForward = exec(() => window.history.forward())

export const reload = exec(() => window.location.reload())

export const forceOffline = exec(() => window.__forceOnline(false))

export const forceOnline = exec(() => window.__forceOnline(true))

export const getComposeSelectionStart = exec(() => composeInput().selectionStart, {
  dependencies: { composeInput }
})

export const getOpacity = selector => exec(() => window.getComputedStyle(document.querySelector(selector)).opacity, {
  dependencies: { selector }
})

export const getCurrentTheme = exec(() => {
  const themeLink = document.head.querySelector('link[rel=stylesheet][href^="/theme-"]')
  if (themeLink) {
    return themeLink.getAttribute('href').match(/^\/theme-(.*)\.css$/, '')[1]
  }
  return 'default'
})

export const uploadKittenImage = i => (exec(() => {
  const image = images[`kitten${i}`]
  const blob = blobUtils.base64StringToBlob(image.data, 'image/png')
  blob.name = image.name
  const fileDrop = document.querySelector('file-drop')
  const event = new Event('filedrop', { bubbles: false })
  event.files = [blob]
  fileDrop.dispatchEvent(event)
}, {
  dependencies: {
    images,
    blobUtils,
    i
  }
}))

export const focus = (selector) => (exec(() => {
  document.querySelector(selector).focus()
}, {
  dependencies: {
    selector
  }
}))

export const isNthStatusActive = (idx) => (exec(() => {
  return document.activeElement &&
    document.activeElement.getAttribute('aria-posinset') === idx.toString()
}, {
  dependencies: { idx }
}))

export const isActiveStatusPinned = exec(() => {
  const el = document.activeElement
  return el &&
    (
      (el.parentElement.getAttribute('class') || '').includes('pinned') ||
      (el.parentElement.parentElement.getAttribute('class') || '').includes('pinned')
    )
})

export const scrollToBottom = exec(() => {
  document.scrollingElement.scrollTop = document.scrollingElement.scrollHeight
})

export const scrollToTop = exec(() => {
  document.scrollingElement.scrollTop = 0
})

export const getScrollTop = exec(() => {
  return document.scrollingElement.scrollTop || 0
})

export function getNthMediaAltInput (n) {
  return $(`.compose-box .compose-media:nth-child(${n}) .compose-media-alt textarea`)
}

export function getNthComposeReplyInput (n) {
  return $(`${getNthStatusSelector(n)} .compose-box-input`)
}

export function getNthComposeReplyButton (n) {
  return $(`${getNthStatusSelector(n)} .compose-box-button`)
}

export function getNthPostPrivacyButton (n) {
  return $(`${getNthStatusSelector(n)} .compose-box-toolbar button:nth-child(4)`)
}

export function getNthStatusPollOption (n, i) {
  return $(`${getNthStatusSelector(n)} .poll li:nth-child(${i}) input`)
}

export function getNthStatusPollVoteButton (n) {
  return $(`${getNthStatusSelector(n)} .poll button`)
}

export function getNthStatusPollForm (n) {
  return $(`${getNthStatusSelector(n)} .poll form`)
}

export function getNthStatusPollResult (n, i) {
  return $(`${getNthStatusSelector(n)} .poll li:nth-child(${i})`)
}

export function getNthStatusPollRefreshButton (n) {
  return $(`${getNthStatusSelector(n)} .poll-stat button`)
}

export function getNthStatusPollVoteCount (n) {
  return $(`${getNthStatusSelector(n)} .poll .poll-stat:nth-child(1) .poll-stat-text`)
}

export function getComposePollNthInput (n) {
  return $(`.compose-poll input[type="text"]:nth-of-type(${n})`)
}

export function getComposePollNthInputInDialog (n) {
  return $(`.modal-dialog .compose-poll input[type="text"]:nth-of-type(${n})`)
}

export function getComposePollRemoveNthButton (n) {
  return $(`.compose-poll button:nth-of-type(${n})`)
}

export function getNthAutosuggestionResult (n) {
  return $(`.compose-autosuggest-list-item:nth-child(${n})`)
}

export function getSearchResultByHref (href) {
  return $(`.search-result a[href="${href}"]`)
}

export function getNthSearchResult (n) {
  return $(`.search-result:nth-child(${n}) a`)
}

export function getNthMediaListItem (n) {
  return $(`.compose-media:nth-child(${n})`)
}

export function getNthMedia (n) {
  return $(`.compose-media:nth-child(${n}) img`)
}

export function getNthDeleteMediaButton (n) {
  return $(`.compose-media:nth-child(${n}) .compose-media-delete-button`)
}

export function getNthMediaFocalPointButton (n) {
  return $(`.compose-media:nth-child(${n}) .compose-media-focal-button`)
}

export function getAriaSetSize () {
  return getNthStatus(1 + 0).getAttribute('aria-setsize')
}

export function getNthStatus (n) {
  return $(getNthStatusSelector(n))
}

export function getNthStatusSelector (n) {
  return `.list-item > article[aria-posinset="${n}"]`
}

export function getNthStatusContent (n) {
  return $(`${getNthStatusSelector(n)} .status-content`)
}

export function getNthStatusSpoiler (n) {
  return $(`${getNthStatusSelector(n)} .status-spoiler`)
}

export function getNthStatusSensitiveMediaButton (n) {
  return $(`${getNthStatusSelector(n)} .status-sensitive-media-button`)
}

export function getNthStatusMedia (n) {
  return $(`${getNthStatusSelector(n)} .status-media`)
}

export function getNthStatusMediaButton (n) {
  return $(`${getNthStatusSelector(n)} .status-media button`)
}

export function getNthStatusRelativeDate (n) {
  return $(`${getNthStatusSelector(n)} .status-relative-date`)
}

export function getNthStatusMediaImg (n) {
  return $(`${getNthStatusSelector(n)} .status-media img`)
}

export function getNthStatusHeader (n) {
  return $(`${getNthStatusSelector(n)} .status-header`)
}

export function getNthStatusAndImage (nStatus, nImage) {
  return $(`${getNthStatusSelector(nStatus)} .status-media .show-image-button:nth-child(${nImage}) img`)
}

export function getNthStatusAndSensitiveButton (nStatus, nImage) {
  return $(`${getNthStatusSelector(nStatus)} .status-sensitive-media-button:nth-child(${nImage})`)
}

export function getNthStatusAndSensitiveImage (nStatus, nImage) {
  return $(`${getNthStatusSelector(nStatus)} .status-media button:nth-child(${nImage}) img`)
}

export function getFirstVisibleStatus () {
  return $('.list-item > article[aria-posinset]').nth(0)
}

export function getNthReplyButton (n) {
  return $(`${getNthStatusSelector(n)} .status-toolbar button:nth-child(1)`)
}

export function getNthReplyContentWarningInput (n) {
  return $(`${getNthStatusSelector(n)} .content-warning-input`)
}

export function getNthReplyContentWarningButton (n) {
  return $(`${getNthStatusSelector(n)} .compose-box-toolbar button:nth-child(5)`)
}

export function getNthReplyPostPrivacyButton (n) {
  return $(`${getNthStatusSelector(n)} .compose-box-toolbar button:nth-child(4)`)
}

export function getNthPostPrivacyOptionInDialog (n) {
  return $(`.generic-dialog-list li:nth-child(${n}) button`)
}

export function getNthFavoriteButton (n) {
  return $(`${getNthStatusSelector(n)} .status-toolbar button:nth-child(3)`)
}

export function getNthStatusOptionsButton (n) {
  return $(`${getNthStatusSelector(n)} .status-toolbar button:nth-child(4)`)
}

export function getNthFavorited (n) {
  return getNthFavoriteButton(n).getAttribute('aria-pressed')
}

export function getNthShowOrHideButton (n) {
  return $(`${getNthStatusSelector(n)} .status-spoiler-button button`)
}

export function getFavoritesCount () {
  return favoritesCountElement.innerCount
}

export function getNthReblogButton (n) {
  return $(`${getNthStatusSelector(n)} .status-toolbar button:nth-child(2)`)
}

export function getNthReblogged (n) {
  return getNthReblogButton(n).getAttribute('aria-pressed')
}

export function getNthDialogOptionsOption (n) {
  return $(`.modal-dialog li:nth-child(${n}) button`)
}

export function getReblogsCount () {
  return reblogsCountElement.innerCount
}

function getNthPinnedStatusSelector (n) {
  return `.pinned-statuses article[aria-posinset="${n}"]`
}

export function getNthPinnedStatus (n) {
  return $(getNthPinnedStatusSelector(n))
}

export function getNthPinnedStatusFavoriteButton (n) {
  return $(`${getNthPinnedStatusSelector(n)} .status-toolbar button:nth-child(3)`)
}

export async function validateTimeline (t, timeline) {
  const timeout = 30000
  for (let i = 0; i < timeline.length; i++) {
    const status = timeline[i]
    // hovering forces TestCafé to scroll to that element: https://git.io/vABV2
    await t.hover(getNthStatus(1 + i))
    if (status.content) {
      await t.expect(getNthStatusContent(1 + i).innerText)
        .contains(status.content, { timeout })
    }
    if (status.spoiler) {
      await t.expect(getNthStatusSpoiler(1 + i).innerText)
        .contains(status.spoiler, { timeout })
    }
    if (status.followedBy) {
      await t.expect(getNthStatusHeader(1 + i).innerText)
        .match(new RegExp(status.followedBy + '\\s+followed you'), { timeout })
    }
    if (status.rebloggedBy) {
      await t.expect(getNthStatusHeader(1 + i).innerText)
        .match(new RegExp(status.rebloggedBy + '\\s+boosted your status'), { timeout })
    }
    if (status.favoritedBy) {
      await t.expect(getNthStatusHeader(1 + i).innerText)
        .match(new RegExp(status.favoritedBy + '\\s+favorited your status'), { timeout })
    }
  }
}

export async function scrollToStatus (t, n) {
  return scrollFromStatusToStatus(t, 1, n)
}

export async function scrollFromStatusToStatus (t, start, end) {
  const timeout = 20000
  for (let i = start; i < end; i++) {
    await t.expect(getNthStatus(i).exists).ok({ timeout })
      .hover(getNthStatus(i))
      .expect($(`${getNthStatusSelector(i)} .status-toolbar`).exists).ok({ timeout })
      .hover($(`${getNthStatusSelector(i)} .status-toolbar`))
  }
  await t
    .expect(getNthStatus(end).exists).ok({ timeout })
    .hover(getNthStatus(end))
}

export async function clickToNotificationsAndBackHome (t) {
  await t.click(notificationsNavButton)
    .expect(getUrl()).eql('http://localhost:4002/notifications')
    .click(homeNavButton)
    .expect(getUrl()).eql('http://localhost:4002/')
}

// like lodash.times but I don't want to try to figure out esm
// just to import lodash-es
export function times (n, cb) {
  const arr = []
  for (let i = 0; i < n; i++) {
    arr.push(cb(i))
  }
  return arr
}