From 3b8b5622688807f6d04c52cbd4d6977b203b75b3 Mon Sep 17 00:00:00 2001 From: Ansh Date: Fri, 28 Jul 2023 14:00:37 -0700 Subject: [APP-737] Accessible native dropdown menu (#988) * fix comments * add zeego package * get basic native dropdown working * add separator and icon components * refined native dropdown component * add android build properties to app.json * move `PostDropdownBtn` to its own component * fix selectors issue * move `PostDropdownBtn` to its own component * fix hitslop * fix post dropdown hitslop * fix android dropdown icons * move `UserAvatar.tsx` to native dropdown * use native dropdown in `ProfileHeader.tsx` * use native dropdown in `PostThreadItem.tsx` * use native dropdown in `UserBanner.tsx` * use native dropdown in `CustomFeed.tsx` * replace `testId` with `testID` (which is what is used everywhere) * move `Settings.tsx` to use native dropdown * create jest mocks for zeego * create jest mock for `zeego/dropdown-menu` * web styles for native dropdown * remove example native dropdown * adjust web styles * fix propagation * fix pressable in `Settings.tsx` * animate dropdown on web * add keyboard nav and hover styles * add hitslop to constants * add comments to NativeDropdown component * temporarily removed android icons * add testID to PostDropdownBtn * add testID back to all NativeDropdown button implementations * add postDropdownBtn testID * add testID to dropdown items * remove testID from dropdown menu item * refactor home-screen tests for native dropdown * refactor profile-screen tests for native dropdown * refactor thread-muting tests for native dropdown * refactor thread-screen tests for native dropdown * fix dropdown color for post dropdown button * remove icons from android dropdown menu * fix `create-account.test.ts` * fix `invite-codes.test.ts` --- __e2e__/tests/create-account.test.ts | 2 ++ __e2e__/tests/home-screen.test.ts | 4 ++-- __e2e__/tests/invite-codes.test.ts | 2 ++ __e2e__/tests/profile-screen.test.ts | 16 ++++++++-------- __e2e__/tests/thread-muting.test.ts | 4 ++-- __e2e__/tests/thread-screen.test.ts | 4 ++-- 6 files changed, 18 insertions(+), 14 deletions(-) (limited to '__e2e__') diff --git a/__e2e__/tests/create-account.test.ts b/__e2e__/tests/create-account.test.ts index 7db4e912a..8706fae7c 100644 --- a/__e2e__/tests/create-account.test.ts +++ b/__e2e__/tests/create-account.test.ts @@ -25,6 +25,8 @@ describe('Create account', () => { await element(by.id('handleInput')).typeText('e2e-test') await device.takeScreenshot('4- entered handle') await element(by.id('nextBtn')).tap() + await expect(element(by.id('welcomeScreen'))).toBeVisible() + await element(by.id('continueBtn')).tap() await expect(element(by.id('homeScreen'))).toBeVisible() }) }) diff --git a/__e2e__/tests/home-screen.test.ts b/__e2e__/tests/home-screen.test.ts index 7fa9ff28c..d0eeb6703 100644 --- a/__e2e__/tests/home-screen.test.ts +++ b/__e2e__/tests/home-screen.test.ts @@ -55,7 +55,7 @@ describe('Home screen', () => { await element(by.id('postDropdownBtn').withAncestor(carlaPosts)) .atIndex(0) .tap() - await element(by.id('postDropdownReportBtn')).tap() + await element(by.text('Report post')).tap() await expect(element(by.id('reportPostModal'))).toBeVisible() await element( by.id('reportPostRadios-com.atproto.moderation.defs#reasonSpam'), @@ -84,7 +84,7 @@ describe('Home screen', () => { await element(by.id('postDropdownBtn').withAncestor(alicePosts)) .atIndex(0) .tap() - await element(by.id('postDropdownDeleteBtn')).tap() + await element(by.text('Delete post')).tap() await expect(element(by.id('confirmModal'))).toBeVisible() await element(by.id('confirmBtn')).tap() await expect( diff --git a/__e2e__/tests/invite-codes.test.ts b/__e2e__/tests/invite-codes.test.ts index 846d3b768..74b80a8d0 100644 --- a/__e2e__/tests/invite-codes.test.ts +++ b/__e2e__/tests/invite-codes.test.ts @@ -42,6 +42,8 @@ describe('invite-codes', () => { await element(by.id('handleInput')).typeText('e2e-test') await device.takeScreenshot('4- entered handle') await element(by.id('nextBtn')).tap() + await expect(element(by.id('welcomeScreen'))).toBeVisible() + await element(by.id('continueBtn')).tap() await expect(element(by.id('homeScreen'))).toBeVisible() await element(by.id('viewHeaderDrawerBtn')).tap() await element(by.id('menuItemButton-Settings')).tap() diff --git a/__e2e__/tests/profile-screen.test.ts b/__e2e__/tests/profile-screen.test.ts index a7bb93656..6c6d6db9c 100644 --- a/__e2e__/tests/profile-screen.test.ts +++ b/__e2e__/tests/profile-screen.test.ts @@ -62,10 +62,10 @@ describe('Profile screen', () => { await element(by.id('profileHeaderEditProfileButton')).tap() await expect(element(by.id('editProfileModal'))).toBeVisible() await element(by.id('changeBannerBtn')).tap() - await element(by.id('changeBannerLibraryBtn')).tap() + await element(by.text('Library')).tap() await sleep(3e3) await element(by.id('changeAvatarBtn')).tap() - await element(by.id('changeAvatarLibraryBtn')).tap() + await element(by.text('Library')).tap() await sleep(3e3) await element(by.id('editProfileSaveBtn')).tap() await expect(element(by.id('editProfileModal'))).not.toBeVisible() @@ -79,9 +79,9 @@ describe('Profile screen', () => { await element(by.id('profileHeaderEditProfileButton')).tap() await expect(element(by.id('editProfileModal'))).toBeVisible() await element(by.id('changeBannerBtn')).tap() - await element(by.id('changeBannerRemoveBtn')).tap() + await element(by.text('Remove')).tap() await element(by.id('changeAvatarBtn')).tap() - await element(by.id('changeAvatarRemoveBtn')).tap() + await element(by.text('Remove')).tap() await element(by.id('editProfileSaveBtn')).tap() await expect(element(by.id('editProfileModal'))).not.toBeVisible() await expect(element(by.id('userBannerFallback'))).toExist() @@ -109,16 +109,16 @@ describe('Profile screen', () => { it('Can mute/unmute another user', async () => { await expect(element(by.id('profileHeaderMutedNotice'))).not.toExist() await element(by.id('profileHeaderDropdownBtn')).tap() - await element(by.id('profileHeaderDropdownMuteBtn')).tap() + await element(by.text('Mute Account')).tap() await expect(element(by.id('profileHeaderMutedNotice'))).toBeVisible() await element(by.id('profileHeaderDropdownBtn')).tap() - await element(by.id('profileHeaderDropdownMuteBtn')).tap() + await element(by.text('Unmute Account')).tap() await expect(element(by.id('profileHeaderMutedNotice'))).not.toExist() }) it('Can report another user', async () => { await element(by.id('profileHeaderDropdownBtn')).tap() - await element(by.id('profileHeaderDropdownReportBtn')).tap() + await element(by.text('Report Account')).tap() await expect(element(by.id('reportAccountModal'))).toBeVisible() await element( by.id('reportAccountRadios-com.atproto.moderation.defs#reasonSpam'), @@ -166,7 +166,7 @@ describe('Profile screen', () => { it('Can report posts', async () => { const posts = by.id('feedItem-by-bob.test') await element(by.id('postDropdownBtn').withAncestor(posts)).atIndex(0).tap() - await element(by.id('postDropdownReportBtn')).tap() + await element(by.text('Report post')).tap() await expect(element(by.id('reportPostModal'))).toBeVisible() await element( by.id('reportPostRadios-com.atproto.moderation.defs#reasonSpam'), diff --git a/__e2e__/tests/thread-muting.test.ts b/__e2e__/tests/thread-muting.test.ts index a5cefdb26..8acd9d81f 100644 --- a/__e2e__/tests/thread-muting.test.ts +++ b/__e2e__/tests/thread-muting.test.ts @@ -45,7 +45,7 @@ describe('Thread muting', () => { await element(by.id('postDropdownBtn').withAncestor(bobNotifs)) .atIndex(0) .tap() - await element(by.id('postDropdownMuteThreadBtn')).tap() + await element(by.text('Mute thread')).tap() // have to wait for the toast to clear await waitFor(element(by.id('viewHeaderDrawerBtn'))) .toBeVisible() @@ -93,7 +93,7 @@ describe('Thread muting', () => { await element(by.id('postDropdownBtn').withAncestor(alicePosts)) .atIndex(0) .tap() - await element(by.id('postDropdownMuteThreadBtn')).tap() + await element(by.text('Mute thread')).tap() // TODO // the swipe down to trigger PTR isnt working and I dont want to block on this diff --git a/__e2e__/tests/thread-screen.test.ts b/__e2e__/tests/thread-screen.test.ts index 8d3eacc88..081282a36 100644 --- a/__e2e__/tests/thread-screen.test.ts +++ b/__e2e__/tests/thread-screen.test.ts @@ -104,7 +104,7 @@ describe('Thread screen', () => { it('Can report the root post', async () => { const post = by.id('postThreadItem-by-bob.test') await element(by.id('postDropdownBtn').withAncestor(post)).atIndex(0).tap() - await element(by.id('postDropdownReportBtn')).tap() + await element(by.text('Report post')).tap() await expect(element(by.id('reportPostModal'))).toBeVisible() await element( by.id('reportPostRadios-com.atproto.moderation.defs#reasonSpam'), @@ -116,7 +116,7 @@ describe('Thread screen', () => { it('Can report a reply post', async () => { const post = by.id('postThreadItem-by-carla.test') await element(by.id('postDropdownBtn').withAncestor(post)).atIndex(0).tap() - await element(by.id('postDropdownReportBtn')).tap() + await element(by.text('Report post')).tap() await expect(element(by.id('reportPostModal'))).toBeVisible() await element( by.id('reportPostRadios-com.atproto.moderation.defs#reasonSpam'), -- cgit 1.4.1