feat(tests): Add mobile screenshot tests (#28391)

Author: priscilawebdev

static/app/components/acl/role.tsx

@@ -36,6 +36,7 @@ class Role extends React.Component<Props> {
     const user = ConfigStore.get('user');
     const {organization, role} = this.props;
     const {availableRoles} = organization;
+
     const currentRole = organization.role ?? '';
 
     if (!user) {

static/app/components/events/attachmentViewers/imageViewer.tsx

@@ -6,7 +6,13 @@ import {
 } from 'app/components/events/attachmentViewers/utils';
 import {PanelItem} from 'app/components/panels';
 
-function ImageViewer({className, ...props}: ViewerProps) {
+type Props = Omit<ViewerProps, 'attachment'> & {
+  attachment: Omit<ViewerProps['attachment'], 'event_id'> & {
+    event_id?: string;
+  };
+};
+
+function ImageViewer({className, ...props}: Props) {
   return (
     <Container className={className}>
       <img src={getAttachmentUrl(props, true)} />

static/app/components/events/contextSummary/item.tsx

@@ -11,7 +11,7 @@ type Props = {
 };
 
 const Item = ({children, icon, className}: Props) => (
-  <Wrapper className={classNames('context-item', className)}>
+  <Wrapper className={classNames('context-item', className)} data-test-id="context-item">
     {icon}
     {children && <Details>{children}</Details>}
   </Wrapper>

static/app/components/events/eventAttachments.tsx

@@ -13,7 +13,7 @@ import FileSize from 'app/components/fileSize';
 import {PanelTable} from 'app/components/panels';
 import {t} from 'app/locale';
 import overflowEllipsis from 'app/styles/overflowEllipsis';
-import {EventAttachment} from 'app/types';
+import {IssueAttachment} from 'app/types';
 import {Event} from 'app/types/event';
 import AttachmentUrl from 'app/utils/attachmentUrl';
 import withApi from 'app/utils/withApi';
@@ -26,8 +26,8 @@ type Props = {
   orgId: string;
   projectId: string;
   location: Location;
-  attachments: EventAttachment[];
-  onDeleteAttachment: (attachmentId: EventAttachment['id']) => void;
+  attachments: IssueAttachment[];
+  onDeleteAttachment: (attachmentId: IssueAttachment['id']) => void;
 };
 
 type State = {
@@ -41,7 +41,7 @@ class EventAttachments extends React.Component<Props, State> {
     attachmentPreviews: {},
   };
 
-  getInlineAttachmentRenderer(attachment: EventAttachment) {
+  getInlineAttachmentRenderer(attachment: IssueAttachment) {
     switch (attachment.mimetype) {
       case 'text/plain':
         return attachment.size > 0 ? LogFileViewer : undefined;
@@ -61,15 +61,15 @@ class EventAttachments extends React.Component<Props, State> {
     }
   }
 
-  hasInlineAttachmentRenderer(attachment: EventAttachment): boolean {
+  hasInlineAttachmentRenderer(attachment: IssueAttachment): boolean {
     return !!this.getInlineAttachmentRenderer(attachment);
   }
 
-  attachmentPreviewIsOpen = (attachment: EventAttachment) => {
+  attachmentPreviewIsOpen = (attachment: IssueAttachment) => {
     return !!this.state.attachmentPreviews[attachment.id];
   };
 
-  renderInlineAttachment(attachment: EventAttachment) {
+  renderInlineAttachment(attachment: IssueAttachment) {
     const Component = this.getInlineAttachmentRenderer(attachment);
     if (!Component || !this.attachmentPreviewIsOpen(attachment)) {
       return null;
@@ -86,7 +86,7 @@ class EventAttachments extends React.Component<Props, State> {
     );
   }
 
-  togglePreview(attachment: EventAttachment) {
+  togglePreview(attachment: IssueAttachment) {
     this.setState(({attachmentPreviews}) => ({
       attachmentPreviews: {
         ...attachmentPreviews,

static/app/components/events/eventDataSection.tsx

@@ -65,12 +65,13 @@ class EventDataSection extends React.Component<Props> {
       actions,
       isCentered,
       showPermalink,
+      ...props
     } = this.props;
 
     const titleNode = wrapTitle ? <h3>{title}</h3> : title;
 
     return (
-      <DataSection ref={this.dataSectionDOMRef} className={className || ''}>
+      <DataSection ref={this.dataSectionDOMRef} className={className || ''} {...props}>
         {title && (
           <SectionHeader id={type} isCentered={isCentered}>
             <Title>

static/app/components/events/eventEntries.tsx

@@ -27,9 +27,9 @@ import ExternalLink from 'app/components/links/externalLink';
 import {t, tct} from 'app/locale';
 import space from 'app/styles/space';
 import {
-  EventAttachment,
   ExceptionValue,
   Group,
+  IssueAttachment,
   Organization,
   Project,
   SharedViewOrganization,
@@ -48,7 +48,7 @@ import {projectProcessingIssuesMessages} from 'app/views/settings/project/projec
 import findBestThread from './interfaces/threads/threadSelector/findBestThread';
 import getThreadException from './interfaces/threads/threadSelector/getThreadException';
 import EventEntry from './eventEntry';
-import EventTagAndScreenshot from './eventTagsAndScreenshot';
+import EventTagsAndScreenshot from './eventTagsAndScreenshot';
 
 const MINIFIED_DATA_JAVA_EVENT_REGEX_MATCH =
   /^(([\w\$]\.[\w\$]{1,2})|([\w\$]{2}\.[\w\$]\.[\w\$]))(\.|$)/g;
@@ -88,7 +88,7 @@ const EventEntries = memo(
   }: Props) => {
     const [isLoading, setIsLoading] = useState(true);
     const [proGuardErrors, setProGuardErrors] = useState<ProGuardErrors>([]);
-    const [attachments, setAttachments] = useState<EventAttachment[]>([]);
+    const [attachments, setAttachments] = useState<IssueAttachment[]>([]);
 
     const orgSlug = organization.slug;
     const projectSlug = project.slug;
@@ -325,7 +325,7 @@ const EventEntries = memo(
       ));
     }
 
-    async function handleDeleteAttachment(attachmentId: EventAttachment['id']) {
+    async function handleDeleteAttachment(attachmentId: IssueAttachment['id']) {
       if (!event) {
         return;
       }
@@ -393,7 +393,7 @@ const EventEntries = memo(
         )}
         {showTagSummary &&
           (hasMobileScreenshotsFeature ? (
-            <EventTagAndScreenshot
+            <EventTagsAndScreenshot
               event={event}
               organization={organization as Organization}
               projectId={projectSlug}

static/app/components/events/eventTagsAndScreenshot/dataSection.tsx

@@ -13,10 +13,11 @@ type Props = {
   className?: string;
 };
 
-function DataSection({title, description, children, className}: Props) {
+function DataSection({title, description, children, className, ...props}: Props) {
   const type = kebabCase(title);
   return (
     <StyledEventDataSection
+      {...props}
       className={className}
       type={type}
       title={

static/app/components/events/eventTagsAndScreenshot/index.tsx

@@ -8,49 +8,56 @@ import Tags from './tags';
 
 type ScreenshotProps = React.ComponentProps<typeof Screenshot>;
 
-type Props = Omit<React.ComponentProps<typeof Tags>, 'projectSlug'> &
-  Pick<ScreenshotProps, 'attachments'> & {
-    projectId: string;
-    isShare: boolean;
-    isBorderless: boolean;
-    onDeleteScreenshot: ScreenshotProps['onDelete'];
-  };
+type Props = Omit<React.ComponentProps<typeof Tags>, 'projectSlug' | 'hasContext'> & {
+  projectId: string;
+  onDeleteScreenshot: ScreenshotProps['onDelete'];
+  attachments: ScreenshotProps['screenshot'][];
+  isShare?: boolean;
+  isBorderless?: boolean;
+  hasContext?: boolean;
+};
 
 function EventTagsAndScreenshots({
   projectId: projectSlug,
-  isShare,
-  hasContext,
   location,
-  isBorderless,
   event,
   attachments,
   onDeleteScreenshot,
-  ...props
+  organization,
+  isShare = false,
+  isBorderless = false,
+  hasContext = false,
 }: Props) {
   const {tags = []} = event;
 
-  if (!tags.length && !hasContext && isShare) {
+  const screenshot = attachments.find(
+    ({name}) => name === 'screenshot.jpg' || name === 'screenshot.png'
+  );
+
+  if (!tags.length && !hasContext && (isShare || !screenshot)) {
     return null;
   }
 
   return (
     <Wrapper isBorderless={isBorderless}>
-      {!isShare && !!attachments.length && (
+      {!isShare && !!screenshot && (
         <Screenshot
-          {...props}
+          organization={organization}
           event={event}
           projectSlug={projectSlug}
-          attachments={attachments}
+          screenshot={screenshot}
           onDelete={onDeleteScreenshot}
         />
       )}
-      <Tags
-        {...props}
-        event={event}
-        projectSlug={projectSlug}
-        hasContext={hasContext}
-        location={location}
-      />
+      {(!!tags.length || hasContext) && (
+        <Tags
+          organization={organization}
+          event={event}
+          projectSlug={projectSlug}
+          hasContext={hasContext}
+          location={location}
+        />
+      )}
     </Wrapper>
   );
 }

static/app/components/events/eventTagsAndScreenshot/screenshot/index.tsx

@@ -23,18 +23,13 @@ type Props = {
   event: Event;
   organization: Organization;
   projectSlug: Project['slug'];
-  attachments: EventAttachment[];
+  screenshot: EventAttachment;
   onDelete: (attachmentId: EventAttachment['id']) => void;
 };
 
-function Screenshot({event, attachments, organization, projectSlug, onDelete}: Props) {
+function Screenshot({event, organization, screenshot, projectSlug, onDelete}: Props) {
   const orgSlug = organization.slug;
 
-  function hasScreenshot(attachment: EventAttachment) {
-    const {mimetype} = attachment;
-    return mimetype === 'image/jpeg' || mimetype === 'image/png';
-  }
-
   function handleOpenVisualizationModal(
     eventAttachment: EventAttachment,
     downloadUrl: string
@@ -118,22 +113,20 @@ function Screenshot({event, attachments, organization, projectSlug, onDelete}: P
   }
 
   return (
-    <Role role={organization.attachmentsRole}>
+    <Role organization={organization} role={organization.attachmentsRole}>
       {({hasRole}) => {
-        const screenshotAttachment = attachments.find(hasScreenshot);
-
-        if (!hasRole || !screenshotAttachment) {
+        if (!hasRole) {
           return null;
         }
 
         return (
           <DataSection
-            title={t('Screenshots')}
+            title={t('Screenshot')}
             description={t(
-              'Screenshots help identify what the user saw when the event happened'
+              'Screenshot help identify what the user saw when the event happened'
             )}
           >
-            <StyledPanel>{renderContent(screenshotAttachment)}</StyledPanel>
+            <StyledPanel>{renderContent(screenshot)}</StyledPanel>
           </DataSection>
         );
       }}

static/app/components/events/eventTagsAndScreenshot/tags.tsx

@@ -26,6 +26,7 @@ function Tags({event, organization, projectSlug, location, hasContext}: Props) {
       description={t(
         'Tags help you quickly both access related events and view the tag distribution for a set of events'
       )}
+      data-test-id="event-tags"
     >
       {hasContext && <TagsHighlight event={event} />}
       <EventTags