PreviewNav: update to named export, add custom.d.ts for svg definition, and add props interface

Author: clairep94

client/components/PreviewNav.test.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { render, screen } from '../test-utils';
+import { PreviewNav } from './PreviewNav';
+
+describe('PreviewNav', () => {
+  const owner = { username: 'alice' };
+  const project = { id: '123', name: 'My Project' };
+
+  test('renders with correct links and icons using provided data-testid attributes', () => {
+    render(<PreviewNav owner={owner} project={project} />);
+
+    // Logo link to /alice/sketches
+    const iconLinkUserSketches = screen.getByTestId('icon-link_user-sketches');
+    expect(iconLinkUserSketches).toHaveAttribute(
+      'href',
+      `/${owner.username}/sketches`
+    );
+
+    // p5js logo icon presence
+    const iconP5Logo = screen.getByTestId('icon_p5-logo');
+    expect(iconP5Logo).toBeInTheDocument();
+
+    // Current project link to /alice/sketches/123
+    const linkCurrentProject = screen.getByTestId('link_current-project');
+    expect(linkCurrentProject).toHaveAttribute(
+      'href',
+      `/${owner.username}/sketches/${project.id}`
+    );
+    expect(linkCurrentProject).toHaveTextContent(project.name);
+
+    // Owner username link to /alice/sketches
+    const linkUserSketches = screen.getByTestId('link_user-sketches');
+    expect(linkUserSketches).toHaveAttribute(
+      'href',
+      `/${owner.username}/sketches`
+    );
+    expect(linkUserSketches).toHaveTextContent(owner.username);
+
+    // Edit project code link to /alice/sketches/123
+    const linkProjectCode = screen.getByTestId('link_project-code');
+    expect(linkProjectCode).toHaveAttribute(
+      'href',
+      `/${owner.username}/sketches/${project.id}`
+    );
+
+    // Code icon presence
+    const iconCode = screen.getByTestId('icon_code');
+    expect(iconCode).toBeInTheDocument();
+
+    // Check nav container presence
+    const nav = screen.getByTestId('preview-nav');
+    expect(nav).toBeInTheDocument();
+  });
+});

client/components/PreviewNav.tsx

@@ -1,61 +1,64 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
 import LogoIcon from '../images/p5js-logo-small.svg';
 import CodeIcon from '../images/code.svg';
 
-const PreviewNav = ({ owner, project }) => {
+interface PreviewNavProps {
+  owner: { username: string };
+  project: { name: string; id: string };
+}
+
+export const PreviewNav = ({ owner, project }: PreviewNavProps) => {
   const { t } = useTranslation();
   return (
-    <nav className="nav preview-nav">
-      <div className="nav__items-left">
-        <div className="nav__item-logo">
-          <Link to={`/${owner.username}/sketches`}>
+    <nav className="nav preview-nav" data-testid="preview-nav">
+      <div className="nav__items-left" data-testid="nav-items-left">
+        <div className="nav__item-logo" data-testid="nav-item-logo">
+          <Link
+            to={`/${owner.username}/sketches`}
+            data-testid="icon-link_user-sketches"
+          >
             <LogoIcon
               role="img"
               aria-label={t('Common.p5logoARIA')}
               focusable="false"
               className="svg__logo"
+              data-testid="icon_p5-logo"
             />
           </Link>
         </div>
         <Link
           className="nav__item"
           to={`/${owner.username}/sketches/${project.id}`}
+          data-testid="link_current-project"
         >
           {project.name}
         </Link>
         <p className="toolbar__project-owner">{t('PreviewNav.ByUser')}</p>
-        <Link className="nav__item" to={`/${owner.username}/sketches/`}>
+        <Link
+          className="nav__item"
+          to={`/${owner.username}/sketches`}
+          data-testid="link_user-sketches"
+        >
           {owner.username}
         </Link>
       </div>
-      <div className="nav__items-right">
+      <div className="nav__items-right" data-testid="nav-items-right">
         <Link
           to={`/${owner.username}/sketches/${project.id}`}
           aria-label={t('PreviewNav.EditSketchARIA')}
+          data-testid="link_project-code"
         >
           <CodeIcon
             className="preview-nav__editor-svg"
             focusable="false"
             aria-hidden="true"
+            data-testid="icon_code"
           />
         </Link>
       </div>
     </nav>
   );
 };
-
-PreviewNav.propTypes = {
-  owner: PropTypes.shape({
-    username: PropTypes.string.isRequired
-  }).isRequired,
-  project: PropTypes.shape({
-    name: PropTypes.string.isRequired,
-    id: PropTypes.string.isRequired
-  }).isRequired
-};
-
-export default PreviewNav;

client/custom.d.ts

@@ -0,0 +1,8 @@
+declare module '*.svg' {
+  import * as React from 'react';
+
+  const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement> & { title?: string }
+  >;
+  export default ReactComponent;
+}

client/modules/IDE/pages/FullView.jsx

@@ -3,7 +3,7 @@ import Helmet from 'react-helmet';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import PreviewFrame from '../components/PreviewFrame';
-import PreviewNav from '../../../components/PreviewNav';
+import { PreviewNav } from '../../../components/PreviewNav';
 import { getProject } from '../actions/project';
 import { startSketch } from '../actions/ide';
 import {