add tests and api report

Signed-off-by: nikolar <reyna.nikolayev@autodesk.com>

plugins/home/report.api.md

@@ -187,6 +187,17 @@ export type LayoutConfiguration = {
 // @public
 export type Operators = '<' | '<=' | '==' | '!=' | '>' | '>=' | 'contains';
 
+// @public
+export type QuickStartCardProps = {
+  modalTitle?: string | React_2.JSX.Element;
+  docsLinkTitle?: string;
+  docsLink?: string;
+  video?: React_2.JSX.Element;
+  image: React_2.JSX.Element;
+  cardDescription?: string;
+  downloadImage?: React_2.JSX.Element;
+};
+
 // @public @deprecated (undocumented)
 export type RendererProps = RendererProps_2;
 

plugins/home/src/homePageComponents/QuickStart/Content.test.tsx

@@ -16,52 +16,59 @@
 
 import { Content } from './Content';
 import React from 'react';
-import { catalogApiRef, entityRouteRef } from '@backstage/plugin-catalog-react';
+import userEvent from '@testing-library/user-event';
 import { renderInTestApp, TestApiProvider } from '@backstage/test-utils';
-import { catalogApiMock } from '@backstage/plugin-catalog-react/testUtils';
+import ContentImage from './static/backstageSystemModel.png';
 
-const docsEntities = [
-  {
-    apiVersion: '1',
-    kind: 'Location',
-    metadata: {
-      name: 'getting-started-with-idp',
-      title: 'Getting Started Docs',
-    },
-    spec: {
-      type: 'documentation',
-    },
-  },
-];
-
-describe('<FeaturedDocsCard />', () => {
+describe('<QuickStartCard />', () => {
   const Wrapper = ({ children }: { children?: React.ReactNode }) => (
-    <TestApiProvider
-      apis={[[catalogApiRef, catalogApiMock({ entities: docsEntities })]]}
-    >
-      {children}
-    </TestApiProvider>
+    <TestApiProvider apis={[]}>{children}</TestApiProvider>
   );
-
-  it('should show expected featured doc and title', async () => {
-    const { getByTestId, getByText } = await renderInTestApp(
+  const renderContent = async () => {
+    return await renderInTestApp(
       <Wrapper>
         <Content
-          filter={{
-            'spec.type': 'documentation',
-            'metadata.name': 'getting-started-with-idp',
-          }}
-          emptyState={undefined}
+          image={
+            <img
+              src={ContentImage}
+              data-testid="quick-start-image"
+              alt="quick start"
+              width="100%"
+              height="100%"
+            />
+          }
+          docsLinkTitle="Testing docs link"
         />
       </Wrapper>,
-      {
-        mountedRoutes: {
-          '/home': entityRouteRef,
-        },
-      },
     );
-    const docsCardContent = getByTestId('docs-card-content');
-    const docsEntity = getByText('getting-started-with-idp');
-    expect(docsCardContent).toContainElement(docsEntity);
+  };
+
+  it('should have expected card content', async () => {
+    const { getByTestId } = await renderContent();
+    const docsLink = getByTestId('quick-start-link-to-docs');
+    expect(docsLink).toHaveTextContent('Testing docs link');
+    expect(docsLink).toHaveAttribute('target', '_blank');
+  });
+
+  it('clicking the link opens the modal', async () => {
+    const { getByTestId, getByText } = await renderContent();
+    // Find the link element
+    const link = getByText('Onboarding');
+    // Simulate a click event on the link
+    await userEvent.click(link);
+    // Assert that the modal is visible
+    const modal = getByTestId('content-modal-open');
+    expect(modal).toBeVisible();
+  });
+
+  it('clicking the image opens the modal', async () => {
+    const { getByTestId } = await renderContent();
+    // Find the link element
+    const link = getByTestId('quick-start-image');
+    // Simulate a click event on the link
+    await userEvent.click(link);
+    // Assert that the modal is visible
+    const modal = getByTestId('content-modal-open');
+    expect(modal).toBeVisible();
   });
 });

plugins/home/src/homePageComponents/QuickStart/Content.tsx

@@ -69,7 +69,7 @@ export const Content = (props: QuickStartCardProps): JSX.Element => {
         <Grid item>
           <Link
             to={props.docsLink || 'https://backstage.io/docs/getting-started/'}
-            data-cy="quick-start-link-to-docs"
+            data-testid="quick-start-link-to-docs"
             underline="none"
             variant="h6"
             className={styles.link}

plugins/home/src/homePageComponents/QuickStart/ContentModal.tsx

@@ -32,7 +32,7 @@ export const ContentModal = (props: Props) => {
   const [open, setOpen] = useState(false);
 
   return (
-    <div className={styles.linkText}>
+    <div className={styles.linkText} data-testid="content-modal-container">
       <Link
         to="#"
         component="button"
@@ -46,9 +46,9 @@ export const ContentModal = (props: Props) => {
         open={open}
         onClose={() => setOpen(false)}
         aria-labelledby="content-modal"
-        data-cy="content-modal"
+        data-testid="content-modal"
       >
-        <Box className={styles.contentModal} data-cy="content-modal-open">
+        <Box className={styles.contentModal} data-testid="content-modal-open">
           {modalContent}
         </Box>
       </Modal>