test: add test for accessible radio buttons in /community (#1845)

src/routes/_api/lists.js

@@ -1,7 +1,12 @@
-import { get, DEFAULT_TIMEOUT } from '../_utils/ajax'
+import { get, DEFAULT_TIMEOUT, post, WRITE_TIMEOUT } from '../_utils/ajax'
 import { auth, basename } from './utils'
 
 export function getLists (instanceName, accessToken) {
   const url = `${basename(instanceName)}/api/v1/lists`
   return get(url, auth(accessToken), { timeout: DEFAULT_TIMEOUT })
 }
+
+export function createList (instanceName, accessToken, title) {
+  const url = `${basename(instanceName)}/api/v1/lists`
+  return post(url, { title }, auth(accessToken), { timeout: WRITE_TIMEOUT })
+}

tests/serverActions.js

@@ -11,6 +11,7 @@ import { reblogStatus } from '../src/routes/_api/reblog'
 import { submitMedia } from './submitMedia'
 import { voteOnPoll } from '../src/routes/_api/polls'
 import { POLL_EXPIRY_DEFAULT } from '../src/routes/_static/polls'
+import { createList, getLists } from '../src/routes/_api/lists'
 
 global.fetch = fetch
 global.File = FileApi.File
@@ -82,3 +83,11 @@ export async function createPollAs (username, content, options, multiple, spoile
 export async function voteOnPollAs (username, pollId, choices) {
   return voteOnPoll(instanceName, users[username].accessToken, pollId, choices.map(_ => _.toString()))
 }
+
+export async function createListAs (username, title) {
+  return createList(instanceName, users[username].accessToken, title)
+}
+
+export async function getListsAs (username) {
+  return getLists(instanceName, users[username].accessToken)
+}

tests/spec/134-community.js

@@ -0,0 +1,37 @@
+import { createListAs, getListsAs } from '../serverActions'
+import { loginAsFoobar } from '../roles'
+import {
+  communityNavButton, getCommunityPinRadioButtonIds, getUrl
+} from '../utils'
+import { Selector as $ } from 'testcafe'
+
+fixture`134-community.js`
+  .page`http://localhost:4002`
+
+test('pinnable community items have proper IDs for accessible radio buttons', async t => {
+  const lists = (await getListsAs('foobar')).map(_ => _.title)
+  if (!lists.includes('Test list 1')) {
+    await createListAs('foobar', 'Test list 1')
+  }
+  if (!lists.includes('Test list 2')) {
+    await createListAs('foobar', 'Test list 2')
+  }
+  await loginAsFoobar(t)
+  await t
+    .click(communityNavButton)
+    .expect(getUrl()).contains('community')
+    .expect($('[aria-label=Lists] li:nth-child(1)').innerText).contains('Test list 1')
+    .expect($('[aria-label=Lists] li:nth-child(2)').innerText).contains('Test list 2')
+
+  const ids = await getCommunityPinRadioButtonIds()
+  await t
+    .expect(ids.length).gt(0)
+
+  const uniqueIds = [...new Set(ids)]
+  await t
+    .expect(ids.length).eql(
+      uniqueIds.length,
+      `Expect ${JSON.stringify(ids)} to have same length as ${JSON.stringify(uniqueIds)}`
+    )
+    .expect($('[role=radiogroup]').getAttribute('aria-owns')).eql(ids.join(' '))
+})

tests/utils.js

@@ -165,6 +165,15 @@ export const getActiveElementAriaLabel = exec(() => (
   (document.activeElement && document.activeElement.getAttribute('aria-label')) || ''
 ))
 
+export const getCommunityPinRadioButtonIds = exec(() => {
+  const buttons = document.querySelectorAll('.page-list-item button')
+  const res = []
+  for (let i = 0; i < buttons.length; i++) {
+    res.push(buttons[i].id)
+  }
+  return res
+})
+
 export const getActiveElementInsideNthStatus = exec(() => {
   let element = document.activeElement
   while (element) {