add more playwright tests

Author: michaelssavage

.github/workflows/playwright.yml

@@ -1,27 +1,29 @@
 name: Playwright Tests
 on:
   push:
-    branches: [ main, master ]
+    branches: [main, master]
   pull_request:
-    branches: [ main, master ]
+    branches: [main, master]
 jobs:
   test:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: lts/*
-    - name: Install dependencies
-      run: npm ci
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
-    - name: Run Playwright tests
-      run: npx playwright test
-    - uses: actions/upload-artifact@v4
-      if: ${{ !cancelled() }}
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+        env:
+          BASE_URL: https://michaelsavage.ie
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

package.json

@@ -10,7 +10,8 @@
 		"lint": "biome lint --error-on-warnings ./src",
 		"prepare": "husky",
 		"type-check": "tsc --noEmit",
-		"test": "playwright test"
+		"test": "playwright test",
+		"test:ui": "playwright test --ui"
 	},
 	"dependencies": {
 		"@emotion/react": "^11.13.3",

playwright.config.ts

@@ -26,7 +26,7 @@ export default defineConfig({
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://localhost:8888',
+    baseURL: process.env.BASE_URL || 'http://localhost:8888',
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',

src/components/atoms/Project.tsx

@@ -16,7 +16,7 @@ export const Project = ({ data, selectedTech }: Props) => {
 
 	const shouldDim = selectedTech && !data.technology.includes(selectedTech);
 	return (
-		<CardWrapper $shouldDim={shouldDim}>
+		<CardWrapper $shouldDim={shouldDim} data-testid="project-card">
 			<Card key={id} to={slug}>
 				<CardTitle main={colors.main}>{title}</CardTitle>
 				<CardBody bg={colors.bg}>{description}</CardBody>

src/components/molecules/Button/Button.tsx

@@ -30,13 +30,14 @@ export const Button = ({
 	return (
 		<ButtonStyled
 			role="button"
-			data-active={active}
 			disabled={disabled}
 			type={type}
 			onClick={onClick}
 			variant={variant}
 			active={active}
+			data-active={active}
 			selected={selected}
+			data-selected={selected}
 			styles={styles}
 		>
 			{text} {icon}

src/components/molecules/Navbar/Navbar.styled.ts

@@ -66,12 +66,6 @@ export const StyledLink = styled(Link)`
   }
 `;
 
-export const Panel = styled.section`
-  display: flex;
-  justify-content: center;
-  flex-direction: row;
-`;
-
 export const Icons = styled.div`
   display: flex;
   flex-direction: row;

src/components/molecules/Navbar/Navbar.tsx

@@ -8,7 +8,7 @@ import {
 } from "@/components/icons";
 import posthog from "posthog-js";
 import { memo } from "react";
-import { Header, Icons, Panel, StyledLink } from "./Navbar.styled";
+import { Header, Icons, StyledLink } from "./Navbar.styled";
 
 interface Props {
 	to: string;
@@ -37,7 +37,6 @@ const Navbar = () => {
 				<NavLink to="/projects" text="Projects" />
 				<NavLink to="/about" text="About" />
 			</nav>
-			<Panel>
 				<Icons>
 					<Icon
 						label="GitHub Profile"
@@ -70,7 +69,6 @@ const Navbar = () => {
 						isExternal
 					/>
 				</Icons>
-			</Panel>
 		</Header>
 	);
 };

src/routes/projects/index.lazy.tsx

@@ -54,7 +54,7 @@ function Projects() {
 			<MetaData title="My Projects" description={description} />
 			<Container>
 				<Header>
-					<p>{description}</p>
+					<p data-testid="projects-description">{description}</p>
 					<Group wrap="wrap">
 						{TECHNOLOGIES.map((tech) => (
 							<Button

src/styles/routes/blog.styled.ts

@@ -23,7 +23,7 @@ export const Heading = styled.h1`
   `)}
 `;
 
-export const Page = styled.section`
+export const Page = styled.article`
   position: relative;
   min-height: 80vh;
 `;

src/styles/routes/home.styled.ts

@@ -22,7 +22,7 @@ export const Arrow = styled(ArrowDown)`
   cursor: pointer;
 `;
 
-export const Section = styled(motion.div)<{
+export const Section = styled(motion.section)<{
 	main?: string;
 	bg?: string;
 }>`