refactor: reorganize components for testability (#3)

Author: mcous

package.json

@@ -10,7 +10,7 @@
   "license": "MIT",
   "type": "module",
   "scripts": {
-    "all": "concurrently -g pnpm:check:* pnpm:build",
+    "all": "concurrently -g pnpm:check:* pnpm:coverage pnpm:build",
     "start": "vite dev",
     "build": "vite build",
     "preview": "vite build && vite preview",

src/components/__tests__/header.test.tsx

@@ -0,0 +1,88 @@
+import { describe, it, expect } from 'vitest'
+import { render, within, screen } from '@testing-library/preact'
+
+import * as subject from '../header.tsx'
+
+describe('header component', () => {
+  it('should have my name as the main title, in a link to go home', () => {
+    render(<subject.Header />)
+
+    const link = screen
+      .getAllByRole('link')
+      .find((element) => element.getAttribute('href') === '/')
+
+    const title = within(link!).getByRole('heading', { level: 1 })
+
+    expect(title).toHaveTextContent(/michael ?cousins/i)
+  })
+
+  it('should have my description', () => {
+    render(<subject.Header />)
+
+    const description = screen.getByText('/[a-z]+ware engineer/')
+    const caveat = screen.getByText('* warranty void if coffee is removed')
+
+    expect(description).toBeInTheDocument()
+    expect(caveat).toBeInTheDocument()
+  })
+
+  it('should have my GitHub profile', () => {
+    render(<subject.Header />)
+
+    const result = screen.getByRole('link', { name: 'GitHub' })
+    const resultIcon = within(result).getByRole('img', { hidden: true })
+
+    expect(result).toHaveAttribute('href', 'https://github.com/mcous')
+    expect(resultIcon).toHaveClass('i-fa6-brands-github')
+  })
+
+  it('should have my resume', () => {
+    render(<subject.Header />)
+
+    const result = screen.getByRole('link', { name: 'Résumé' })
+    const resultIcon = within(result).getByRole('img', { hidden: true })
+
+    expect(result).toHaveAttribute('href', 'http://mike.cousins.io/resume/')
+    expect(resultIcon).toHaveClass('i-fa6-regular-file-lines')
+  })
+
+  it('should have my email', () => {
+    render(<subject.Header />)
+
+    const result = screen.getByRole('link', { name: 'Email' })
+    const resultIcon = within(result).getByRole('img', { hidden: true })
+
+    expect(result).toHaveAttribute('href', 'mailto:michael@cousins.io')
+    expect(resultIcon).toHaveClass('i-fa6-regular-envelope')
+  })
+
+  it('should have my LinkedIn', () => {
+    render(<subject.Header />)
+
+    const result = screen.getByRole('link', { name: 'LinkedIn' })
+    const resultIcon = within(result).getByRole('img', { hidden: true })
+
+    expect(result).toHaveAttribute('href', 'https://www.linkedin.com/in/mcous/')
+    expect(resultIcon).toHaveClass('i-fa6-brands-linkedin-in')
+  })
+
+  it('should have a minimal mode', () => {
+    render(<subject.Header mode="minimal" />)
+
+    expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument()
+    expect(screen.queryByText(/engineer/)).not.toBeInTheDocument()
+    expect(screen.queryByText(/warranty void/)).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole('link', { name: 'GitHub' })
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole('link', { name: 'Résumé' })
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole('link', { name: 'Email' })
+    ).not.toBeInTheDocument()
+    expect(
+      screen.queryByRole('link', { name: 'LinkedIn' })
+    ).not.toBeInTheDocument()
+  })
+})

src/components/__tests__/layout.test.tsx

@@ -0,0 +1,18 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen, within } from '@testing-library/preact'
+
+import * as subject from '../layout.tsx'
+
+describe('default content layout', () => {
+  it('should define the main content', () => {
+    render(
+      <subject.Layout metadata={{ title: '', description: '' }}>
+        <span data-testid="contents" />
+      </subject.Layout>
+    )
+
+    const result = screen.getByRole('main')
+
+    expect(within(result).getByTestId('contents')).toBeInTheDocument()
+  })
+})

src/components/app.tsx

@@ -0,0 +1,39 @@
+import type { ComponentType } from 'preact'
+
+import type {
+  LayoutProps,
+  PageProps,
+  Metadata,
+} from '../renderer/page-context.ts'
+
+import { Header, type HeaderProps } from './header.tsx'
+import { Layout as DefaultLayout } from './layout.tsx'
+
+export interface AppState {
+  headerProps?: HeaderProps | undefined
+  metadata: Metadata
+  Layout?: ComponentType<LayoutProps> | undefined
+  Page: ComponentType<PageProps>
+}
+
+export interface AppProps {
+  state: { value: AppState }
+}
+
+export function App(props: AppProps) {
+  const {
+    headerProps = {},
+    metadata,
+    Layout = DefaultLayout,
+    Page,
+  } = props.state.value
+
+  return (
+    <>
+      <Header {...headerProps} />
+      <Layout metadata={metadata}>
+        <Page />
+      </Layout>
+    </>
+  )
+}

src/components/atoms.tsx

@@ -0,0 +1,107 @@
+import type { FunctionComponent, RenderableProps } from 'preact'
+
+type Atom<E extends HTMLElement> = FunctionComponent<JSX.HTMLAttributes<E>>
+
+export const parseProps = <
+  P extends RenderableProps<JSX.HTMLAttributes<never>>
+>(
+  props: P
+): { className: string; otherProps: Omit<P, 'class'> } => {
+  const { class: className, ...otherProps } = props
+
+  if (!className) return { className: '', otherProps }
+  if (typeof className === 'string') return { className, otherProps }
+  return { className: className.value ?? '', otherProps }
+}
+
+export const Link: Atom<HTMLAnchorElement> = (props) => {
+  const { className, otherProps } = parseProps(props)
+
+  return (
+    <a
+      class={`text-blue-700 visited:text-purple-700 hover:underline ${className}`}
+      {...otherProps}
+    />
+  )
+}
+
+export const HoverLink: Atom<HTMLAnchorElement> = (props) => {
+  const { className, otherProps } = parseProps(props)
+
+  return (
+    <a
+      class={`transition-color hover:text-blue-700 hover:visited:text-purple-700 ${className}`}
+      {...otherProps}
+    />
+  )
+}
+
+export const Copy: Atom<HTMLParagraphElement> = (props) => {
+  const { className, otherProps } = parseProps(props)
+
+  return (
+    <p class={`text-base leading-relaxed mt4 ${className}`} {...otherProps} />
+  )
+}
+
+export const Heading1: Atom<HTMLHeadingElement> = (props) => {
+  const { className, otherProps } = parseProps(props)
+
+  return <h1 class={`mt-8 text-2xl text-center ${className}`} {...otherProps} />
+}
+
+export const Heading2: Atom<HTMLHeadingElement> = (props) => {
+  const { className, otherProps } = parseProps(props)
+
+  return <h2 class={`mt-4 text-xl ${className}`} {...otherProps} />
+}
+
+export const Heading3: Atom<HTMLHeadingElement> = (props) => {
+  const { className, otherProps } = parseProps(props)
+
+  return <h2 class={`mt-4 text-lg ${className}`} {...otherProps} />
+}
+
+export const OrderedList: Atom<HTMLOListElement> = (props) => {
+  const { className, otherProps } = parseProps(props)
+
+  return (
+    <ol class={`mt-4 list-decimal mt-4 pl-8 ${className}`} {...otherProps} />
+  )
+}
+export const UnorderedList: Atom<HTMLUListElement> = (props) => {
+  const { className, otherProps } = parseProps(props)
+
+  return <ul class={`mt-4 list-disc mt-4 pl-8 ${className}`} {...otherProps} />
+}
+
+export const ListItem: Atom<HTMLLIElement> = (props) => {
+  const { className, otherProps } = parseProps(props)
+
+  return <li class={`text-base leading-relaxed ${className}`} {...otherProps} />
+}
+
+export const PreformattedText: Atom<HTMLPreElement> = (props) => {
+  const { className, otherProps } = parseProps(props)
+
+  return (
+    <pre
+      class={`mt-4 text-xs sm:text-sm w-160 max-w-screen self-center ${className}`}
+      {...otherProps}
+    />
+  )
+}
+
+export const Code: Atom<HTMLElement> = (props) => {
+  const { className, otherProps } = parseProps(props)
+  const isBlock = className.includes('hljs')
+
+  return (
+    <code
+      class={`font-mono ${
+        isBlock ? 'rounded-lg' : 'rounded px-1 py-0.5 bg-slate-200'
+      } ${className}`}
+      {...otherProps}
+    />
+  )
+}

src/components/header.tsx

@@ -0,0 +1,36 @@
+import { SocialsNav } from './socials-nav.tsx'
+
+export const HEADER_HERO = 'hero'
+export const HEADER_MINIMAL = 'minimal'
+
+export interface HeaderProps {
+  mode?: typeof HEADER_HERO | typeof HEADER_MINIMAL
+}
+
+export function Header(props: HeaderProps): JSX.Element {
+  const { mode = HEADER_HERO } = props
+  const isHero = mode === HEADER_HERO
+
+  return (
+    <header
+      class={`flex flex-col items-center text-center mx-auto ${
+        isHero ? 'mt-32' : 'mt-8'
+      }`}
+    >
+      <a href="/" class="w-32 h-32 border border-current border-2 rounded-full">
+        <h1 class="pt-8.5 text-2xl leading-tight">
+          michael
+          <br />
+          cousins
+        </h1>
+      </a>
+      {isHero && (
+        <div class="mt-4">
+          <p class="text-xl">/[a-z]+ware engineer/</p>
+          <p class="font-light">* warranty void if coffee is removed</p>
+          <SocialsNav class="mt-8 max-h-16" />
+        </div>
+      )}
+    </header>
+  )
+}

src/components/layout.tsx

@@ -0,0 +1,7 @@
+import type { LayoutProps } from '../renderer/page-context.tsx'
+
+export function Layout(props: LayoutProps) {
+  const { children } = props
+
+  return <main class="max-w-96 mt-8 mx-auto">{children}</main>
+}

src/components/socials-nav.tsx

@@ -11,7 +11,7 @@ const SOCIAL_LINKS: IconLinksProps[] = [
   },
   {
     title: 'Email',
-    href: 'mailto:mike@cousins.io',
+    href: 'mailto:michael@cousins.io',
     icon: 'i-fa6-regular-envelope',
   },
   {
@@ -32,7 +32,7 @@ function IconLink(props: IconLinksProps): JSX.Element {
 
   return (
     <a
-      class="mx-2 p-3 border border-current border-2 inline-flex items-center justify-center transition-opacity hover:opacity-50"
+      class="mx-2 p-3 border border-current border-2 inline-flex items-center justify-center transition-color hover:text-blue-700"
       title={title}
       href={href}
     >
@@ -42,12 +42,14 @@ function IconLink(props: IconLinksProps): JSX.Element {
 }
 
 export interface SocialsNavProps {
-  class: string
+  class?: string
 }
 
 export function SocialsNav(props: SocialsNavProps): JSX.Element {
+  const { class: extraClass = '' } = props
+
   return (
-    <nav class={props.class}>
+    <nav class={`text-2xl leading-none ${extraClass}`}>
       {SOCIAL_LINKS.map((linkProps, index) => (
         <IconLink key={index} {...linkProps} />
       ))}

src/pages/index.page.tsx

@@ -1,32 +1,10 @@
-import { SocialsNav } from '../components/socials-nav.tsx'
-
-export const title = 'Michael Cousins'
-
-export const description = `
-  Michael Cousins is a software engineer working
-  in JavaScript, Python, and [insert language here].
-  He's powered by caffeine and semantically versioned.
-`.trim()
+export const metadata = {
+  title: 'Michael Cousins',
+  description: `Michael Cousins is a software engineer working
+in JavaScript, Python, Go, and [insert language here].
+He's powered by caffeine and semantically versioned.`,
+}
 
 export function Page(): JSX.Element {
-  return (
-    <div class="pt-32 text-center">
-      <div class="w-32 h-32 mx-auto border border-current border-2 rounded-full">
-        <h1 class="my-0 pt-8 text-2xl leading-tight font-normal">
-          mike
-          <br />
-          cousins
-        </h1>
-      </div>
-
-      <div class="mt-4 mb-8 text-xl leading-normal ">
-        <p class="my-0">/[a-z]+ware engineer/</p>
-        <p class="my-0 text-base font-light">
-          * warranty void if coffee is removed
-        </p>
-      </div>
-
-      <SocialsNav class="my-8 text-2xl leading-none" />
-    </div>
-  )
+  return <></>
 }