JS Components: Convert JetpackFooter component to TypeScript (#25295)

* [not verified] Convert JetpackFooter component to TypeScript

* [not verified] Convert JetpackFooter stories to TypeScript

* [not verified] Convert JetpackFooter tests to TypeScript

* [not verified] Add more test cases

* [not verified] Fix story source not loading

* Add changelog

* E2E tests expect React to be in scope 🤷

* Fix version

* Add default controls for story

projects/js-packages/components/changelog/update-rna-jetpack-footer-to-ts

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+JS Components: Convert JetpackFooter component to TypeScript

projects/js-packages/components/components/jetpack-footer/index.jsx → projects/js-packages/components/components/jetpack-footer/index.tsx

@@ -1,19 +1,24 @@
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import AutomatticBylineLogo from '../automattic-byline-logo';
 import './style.scss';
 import JetpackLogo from '../jetpack-logo';
+import type { JetpackFooterProps } from './types';
 
 /**
  * JetpackFooter component displays a tiny Jetpack logo with the product name on the left and the Automattic Airline "by line" on the right.
  *
- * @param {object} props - Component properties.
- * @returns {React.Component} JetpackFooter component.
+ * @param {JetpackFooterProps} props - Component properties.
+ * @returns {React.ReactNode} JetpackFooter component.
  */
-const JetpackFooter = props => {
-	const { a8cLogoHref, moduleName, className, moduleNameHref, ...otherProps } = props;
+const JetpackFooter: React.FC< JetpackFooterProps > = ( {
+	a8cLogoHref = 'https://automattic.com',
+	moduleName = __( 'Jetpack', 'jetpack' ),
+	className,
+	moduleNameHref = 'https://jetpack.com',
+	...otherProps
+} ) => {
 	return (
 		<div className={ classnames( 'jp-dashboard-footer', className ) } { ...otherProps }>
 			<div className="jp-dashboard-footer__footer-left">
@@ -43,22 +48,4 @@ const JetpackFooter = props => {
 	);
 };
 
-JetpackFooter.defaultProps = {
-	a8cLogoHref: 'https://automattic.com',
-	moduleName: __( 'Jetpack', 'jetpack' ),
-	className: '',
-	moduleNameHref: 'https://jetpack.com',
-};
-
-JetpackFooter.propTypes = {
-	/** Link for 'An Automattic Airline'. */
-	a8cLogoHref: PropTypes.string,
-	/** Name of the module, e.g. 'Jetpack Search'. */
-	moduleName: PropTypes.string,
-	/** additional className of the wrapper, `jp-dashboard-footer` always included. */
-	className: PropTypes.string,
-	/** Link that the Module name will link to (optional). */
-	moduleNameHref: PropTypes.string,
-};
-
 export default JetpackFooter;

projects/js-packages/components/components/jetpack-footer/stories/index.tsx

@@ -0,0 +1,19 @@
+import JetpackFooter from '../index';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+export default {
+	title: 'JS Packages/Components/Jetpack Footer',
+	component: JetpackFooter,
+} as ComponentMeta< typeof JetpackFooter >;
+
+const Template: ComponentStory< typeof JetpackFooter > = args => <JetpackFooter { ...args } />;
+
+const DefaultArgs = {
+	a8cLogoHref: 'https://automattic.com',
+	moduleName: 'Jetpack',
+	className: '',
+	moduleNameHref: 'https://jetpack.com',
+};
+
+export const _default = Template.bind( {} );
+_default.args = DefaultArgs;

projects/js-packages/components/components/jetpack-footer/test/component.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from '@testing-library/react';
+import JetpackFooter from '../index';
+
+describe( 'JetpackFooter', () => {
+	const testProps = {
+		className: 'sample-classname',
+	};
+
+	describe( 'Render the JetpackFooter component', () => {
+		it( 'validate the class name', () => {
+			const { container } = render( <JetpackFooter { ...testProps } /> );
+			// eslint-disable-next-line testing-library/no-node-access
+			expect( container.firstChild ).toHaveClass( 'sample-classname' );
+		} );
+
+		it( 'validates Jetpack logo', () => {
+			render( <JetpackFooter /> );
+
+			expect( screen.getByLabelText( 'Jetpack logo' ) ).toBeInTheDocument();
+		} );
+
+		it( 'tests for module name and link', () => {
+			render(
+				<JetpackFooter
+					moduleName="Test module"
+					moduleNameHref="https://jetpack.com/path/to-some-page"
+				/>
+			);
+
+			const element = screen.getByLabelText( 'Test module' );
+
+			expect( element ).toBeInTheDocument();
+			expect( element ).toBeInstanceOf( HTMLAnchorElement );
+			expect( element ).toHaveAttribute( 'href', 'https://jetpack.com/path/to-some-page' );
+		} );
+
+		it( 'validates the a8c label', () => {
+			render( <JetpackFooter /> );
+
+			for ( const element of screen.getAllByLabelText( 'An Automattic Airline' ) ) {
+				expect( element ).toBeInTheDocument();
+			}
+		} );
+	} );
+} );

projects/js-packages/components/components/jetpack-footer/types.ts

@@ -0,0 +1,21 @@
+export type JetpackFooterProps = {
+	/**
+	 * Link for 'An Automattic Airline'.
+	 */
+	a8cLogoHref?: string;
+
+	/**
+	 * Name of the module, e.g. 'Jetpack Search'.
+	 */
+	moduleName?: string;
+
+	/**
+	 * additional className of the wrapper, `jp-dashboard-footer` always included.
+	 */
+	className?: string;
+
+	/**
+	 * Link that the Module name will link to (optional).
+	 */
+	moduleNameHref?: string;
+};