Merge branch 'develop' into lb/merge-mobile-upstream

tloncorp · Mar 6, 2024 · b6f2849 · b6f2849
2 parents 211f4cb + 37b7578
commit b6f2849
Show file tree

Hide file tree

Showing 17 changed files with 761 additions and 39 deletions.
diff --git a/apps/tlon-mobile/android/app/build.gradle b/apps/tlon-mobile/android/app/build.gradle
@@ -87,7 +87,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         compileSdk rootProject.ext.compileSdkVersion
-        versionCode 45
+        versionCode 48
         versionName "4.0.0"
 
         buildConfigField("boolean", "REACT_NATIVE_UNSTABLE_USE_RUNTIME_SCHEDULER_ALWAYS", (findProperty("reactNative.unstable_useRuntimeSchedulerAlways") ?: true).toString())

diff --git a/apps/tlon-mobile/app.config.ts b/apps/tlon-mobile/app.config.ts
@@ -30,14 +30,14 @@ export default ({ config }: ConfigContext): ExpoConfig => ({
   },
   ios: {
     runtimeVersion: '4.0.0',
-    buildNumber: '45',
+    buildNumber: '48',
     config: {
       usesNonExemptEncryption: false,
     },
   },
   android: {
     runtimeVersion: '4.0.0',
-    versionCode: 45,
+    versionCode: 48,
   },
   updates: {
     url: `https://u.expo.dev/${projectId}`,

diff --git a/apps/tlon-mobile/ios/Landscape.xcodeproj/project.pbxproj b/apps/tlon-mobile/ios/Landscape.xcodeproj/project.pbxproj
@@ -909,7 +909,7 @@
 				CLANG_DEBUG_INFORMATION_LEVEL = "DWARF with dSYM File";
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = Landscape/Landscape.entitlements;
-				CURRENT_PROJECT_VERSION = 45;
+				CURRENT_PROJECT_VERSION = 48;
 				DEVELOPMENT_TEAM = XU9PR2N722;
 				DISPLAY_NAME = Tlon;
 				ENABLE_BITCODE = NO;
@@ -947,7 +947,7 @@
 				CLANG_DEBUG_INFORMATION_LEVEL = "DWARF with dSYM File";
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = Landscape/Landscape.entitlements;
-				CURRENT_PROJECT_VERSION = 45;
+				CURRENT_PROJECT_VERSION = 48;
 				DEVELOPMENT_TEAM = XU9PR2N722;
 				DISPLAY_NAME = Tlon;
 				INFOPLIST_FILE = Landscape/Info.plist;
@@ -979,7 +979,7 @@
 				CLANG_DEBUG_INFORMATION_LEVEL = "DWARF with dSYM File";
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = Landscape/Landscape.entitlements;
-				CURRENT_PROJECT_VERSION = 45;
+				CURRENT_PROJECT_VERSION = 48;
 				DEVELOPMENT_TEAM = XU9PR2N722;
 				DISPLAY_NAME = "Tlon - Preview";
 				ENABLE_BITCODE = NO;
@@ -1018,7 +1018,7 @@
 				CLANG_DEBUG_INFORMATION_LEVEL = "DWARF with dSYM File";
 				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_ENTITLEMENTS = Landscape/Landscape.entitlements;
-				CURRENT_PROJECT_VERSION = 45;
+				CURRENT_PROJECT_VERSION = 48;
 				DEVELOPMENT_TEAM = XU9PR2N722;
 				DISPLAY_NAME = "Tlon - Preview";
 				INFOPLIST_FILE = Landscape/Info.plist;

diff --git a/apps/tlon-web/e2e/005-mobile-chat-options.spec.ts b/apps/tlon-web/e2e/005-mobile-chat-options.spec.ts
@@ -0,0 +1,44 @@
+import { expect, test } from '@playwright/test';
+
+import shipManifest from './shipManifest.json';
+
+const groupHostUrl = `${shipManifest['~naldeg-mardev'].webUrl}/apps/groups/`;
+const groupHost = 'mardev';
+const testGroupName = 'mardev Club';
+const testChannelName = 'mardev chat';
+const testMessageText = `hi, it's me, ~naldeg-mardev`;
+const defaultVisibleEmoji = '😇';
+
+test('Add reaction', async ({ browser }) => {
+  // authenticate as test group host
+  const hostContext = await browser.newContext({
+    storageState: shipManifest['~naldeg-mardev'].authFile,
+  });
+  const page = await hostContext.newPage();
+  await page.setViewportSize({ width: 390, height: 844 });
+  await page.goto(groupHostUrl);
+
+  // navigate to test channel
+  await page.getByRole('link', { name: testGroupName }).waitFor();
+  await page.getByRole('link', { name: testGroupName }).click();
+  await page.getByRole('link', { name: testChannelName }).waitFor();
+  await page.getByRole('link', { name: testChannelName }).click();
+
+  // open longpress menu
+  await page.getByText(testMessageText).click({ delay: 300 });
+  await page.getByTestId('chat-message-options').waitFor();
+  await expect(page.getByTestId('chat-message-options')).toBeVisible();
+
+  // open picker and add reaction
+  await page.getByTestId('react').waitFor();
+  await page.getByTestId('react').dispatchEvent('click'); // workaround for vaul intercepting the click event
+  await page.getByTestId('emoji-picker').waitFor();
+  await expect(page.getByTestId('emoji-picker')).toBeVisible();
+  await page.getByText(defaultVisibleEmoji).waitFor();
+  await page.getByText(defaultVisibleEmoji).click();
+
+  // verify reaction
+  await page.getByTestId('emoji-picker').waitFor({ state: 'detached' });
+  await page.getByText(defaultVisibleEmoji).waitFor();
+  await expect(page.getByText(defaultVisibleEmoji)).toBeVisible();
+});
diff --git a/apps/tlon-web/src/chat/ChatMessage/ChatMessageOptions.tsx b/apps/tlon-web/src/chat/ChatMessage/ChatMessageOptions.tsx
@@ -405,7 +405,12 @@ function ChatMessageOptions(props: {
   return (
     <>
       {isMobile ? (
-        <ActionMenu open={open} onOpenChange={onOpenChange} actions={actions} />
+        <ActionMenu
+          testId="chat-message-options"
+          open={open}
+          onOpenChange={onOpenChange}
+          actions={actions}
+        />
       ) : (
         <div
           className="absolute -top-5 right-2 z-10 min-h-fit"
@@ -426,7 +431,6 @@ function ChatMessageOptions(props: {
                   icon={<FaceIcon className="h-6 w-6 text-gray-400" />}
                   label="React"
                   showTooltip
-                  aria-label="React"
                   action={openPicker}
                 />
               </EmojiPicker>

diff --git a/apps/tlon-web/src/components/ActionMenu.tsx b/apps/tlon-web/src/components/ActionMenu.tsx
@@ -32,6 +32,7 @@ type ActionMenuProps = PropsWithChildren<{
   className?: string;
   triggerClassName?: string;
   contentClassName?: string;
+  testId?: string;
 }>;
 
 function classNameForType(type?: ActionType) {
@@ -58,6 +59,7 @@ const ActionMenu = React.memo(
     disabled,
     align,
     ariaLabel,
+    testId,
     className,
     triggerClassName,
     contentClassName,
@@ -81,9 +83,13 @@ const ActionMenu = React.memo(
             )}
             <Drawer.Portal>
               <Drawer.Overlay className="fixed inset-0 z-[49] bg-black/20" />
-              <Drawer.Content className="fixed bottom-0 z-[49] flex w-full flex-col rounded-t-[32px] bg-white px-[24px] pb-8 pt-4 outline-none after:!bg-transparent">
+              <Drawer.Content
+                data-testid={testId}
+                className="fixed bottom-0 z-[49] flex w-full flex-col rounded-t-[32px] bg-white px-[24px] pb-8 pt-4 outline-none after:!bg-transparent"
+              >
                 {actions.map((action) => (
                   <button
+                    data-testid={action.key}
                     key={action.key}
                     onClick={
                       action.keepOpenOnClick

diff --git a/apps/tlon-web/src/components/EmojiPicker.tsx b/apps/tlon-web/src/components/EmojiPicker.tsx
@@ -147,8 +147,9 @@ export default function EmojiPicker({
           collisionPadding={15}
           onInteractOutside={isMobile ? () => dismss() : undefined}
           data-testid="emoji-picker"
+          className="z-50"
         >
-          <div className="z-50 mx-10 flex h-96 w-72 items-center justify-center">
+          <div className="mx-10 flex h-96 w-72 items-center justify-center">
             {data ? (
               <Picker
                 data={data}

diff --git a/apps/tlon-web/src/components/IconButton.tsx b/apps/tlon-web/src/components/IconButton.tsx
@@ -1,6 +1,6 @@
 import * as Tooltip from '@radix-ui/react-tooltip';
 import cn from 'classnames';
-import React, { MouseEventHandler } from 'react';
+import React, { MouseEventHandler, useMemo } from 'react';
 
 interface IconButtonProps {
   icon: React.ReactElement;
@@ -21,6 +21,11 @@ export default function IconButton({
   small = false,
   disabled = false,
 }: IconButtonProps) {
+  const testId = useMemo(
+    () => label.toLowerCase().split(' ').join('-'),
+    [label]
+  );
+
   return (
     <div className={cn('group-two cursor-pointer', className)}>
       <Tooltip.Root delayDuration={800} disableHoverableContent>
@@ -64,6 +69,7 @@ export default function IconButton({
             )}
             onClick={action}
             aria-label={label}
+            data-testid={testId}
             disabled={disabled}
           >
             {icon}