feat(tests): Add mobile screenshot tests

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/attachmentViewers/utils.tsx

@@ -5,7 +5,9 @@ export type ViewerProps = {
   event: Event;
   orgId: string;
   projectId: string;
-  attachment: EventAttachment;
+  attachment: Omit<EventAttachment, 'event_id'> & {
+    event_id?: string;
+  };
   className?: string;
 };
 

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/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

@@ -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;
@@ -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

@@ -19,24 +19,21 @@ import DataSection from '../dataSection';
 import ImageVisualization from './imageVisualization';
 import Modal, {modalCss} from './modal';
 
+type Screenshot = Omit<EventAttachment, 'event_id'>;
+
 type Props = {
   event: Event;
   organization: Organization;
   projectSlug: Project['slug'];
-  attachments: EventAttachment[];
-  onDelete: (attachmentId: EventAttachment['id']) => void;
+  screenshot: Screenshot;
+  onDelete: (attachmentId: Screenshot['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,
+    eventAttachment: Screenshot,
     downloadUrl: string
   ) {
     openModal(
@@ -55,7 +52,7 @@ function Screenshot({event, attachments, organization, projectSlug, onDelete}: P
     );
   }
 
-  function renderContent(screenshotAttachment: EventAttachment) {
+  function renderContent(screenshotAttachment: Screenshot) {
     const downloadUrl = `/api/0/projects/${organization.slug}/${projectSlug}/events/${event.id}/attachments/${screenshotAttachment.id}/`;
 
     return (
@@ -118,22 +115,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/screenshot/modal.tsx

@@ -17,8 +17,10 @@ import getDynamicText from 'app/utils/getDynamicText';
 
 import ImageVisualization from './imageVisualization';
 
+type Screenshot = Omit<EventAttachment, 'event_id'>;
+
 type Props = ModalRenderProps & {
-  eventAttachment: EventAttachment;
+  eventAttachment: Screenshot;
   orgSlug: Organization['slug'];
   projectSlug: Project['slug'];
   event: Event;