Migrate components to Typescript

components/ReusableSections/DonateSection/__stories__/DonateSection.stories.tsx

@@ -5,7 +5,7 @@ import DonateSection from '../DonateSection';
 type DonateSectionStoryType = StoryObj<React.FC>;
 
 const meta: Meta<typeof DonateSection> = {
-  title: 'Reusable/DonateSection',
+  title: 'ReusableSections/DonateSection',
   component: DonateSection,
 };
 

components/ReusableSections/JoinSection/__stories__/JoinSection.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react';
+import JoinSection from '../JoinSection';
+
+type JoinSectionStoryType = StoryObj<typeof JoinSection>;
+
+const meta: Meta<typeof JoinSection> = {
+  title: 'ReusableSections/JoinSection',
+  component: JoinSection,
+};
+
+export default meta;
+
+export const Default: JoinSectionStoryType = {
+  render: () => <JoinSection />,
+};

components/ReusableSections/SponsorsSection/SponsorsSection.js → components/ReusableSections/SponsorsSection/SponsorsSection.tsx

@@ -3,10 +3,15 @@ import Heading from 'components/Heading/Heading';
 import PartnerLogoLink from 'components/PartnerLogoLink/PartnerLogoLink';
 import partners, { PARTNER_TYPES } from 'common/constants/partners';
 
-const isPaidSponsor = partner => partner.type === PARTNER_TYPES.PAID;
+type Partner = {
+  name: string;
+  type: string;
+};
+
+const isPaidSponsor = (partner: Partner): boolean => partner.type === PARTNER_TYPES.PAID;
 
 const SponsorsSection = () => (
-  <Container theme="gray">
+  <Container theme="gray" data-testid="Sponsors Section">
     <Heading text="Sponsors" hasTitleUnderline headingLevel={3} />
 
     <Heading text="Corporate Partners" headingLevel={4} />

components/ReusableSections/SponsorsSection/__stories__/SponsorSection.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react'
+import SponsorsSection from '../SponsorsSection';
+
+type SponsorsSectionStoryType = StoryObj<typeof SponsorsSection>
+
+const meta: Meta<typeof SponsorsSection> = {
+  title: 'ReusableSections/SponsorsSection',
+  component: SponsorsSection
+}
+
+export default meta
+
+export const Default: SponsorsSectionStoryType = {
+  render: () => <SponsorsSection />
+}

components/ReusableSections/SponsorsSection/__tests__/SponsorsSection.test.js → components/ReusableSections/SponsorsSection/__tests__/SponsorsSection.test.tsx

@@ -1,15 +1,22 @@
 import { render } from '@testing-library/react';
+import createSnapshotTest from 'test-utils/createSnapshotTest';
 import partners from 'common/constants/partners';
-
 import SponsorsSection from '../SponsorsSection';
 
 describe('SponsorsSection', () => {
+  it('should render', () => {
+    const { queryByTestId } = render(<SponsorsSection />);
+    expect(queryByTestId('Sponsors Section')).not.toBeNull();
+
+    createSnapshotTest(<SponsorsSection />);
+  });
+
   it('should render a secure link and image for each partner', () => {
-    const component = render(<SponsorsSection>Test</SponsorsSection>);
+    const component = render(<SponsorsSection />);
 
     partners.forEach(partner => {
-      const image = component.queryByAltText(`${partner.name} logo`);
-      const link = image.parentNode;
+      const image = component.queryByAltText(`${partner.name} logo`)!;
+      const link = image.parentNode as HTMLAnchorElement;
 
       expect(image).toBeInTheDocument();
       expect(link.href.startsWith('https://')).toStrictEqual(true);