somedevsdo · andrewbarnesweb · May 11, 2022 · May 11, 2022
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
     "lint": "next lint && prettier --check \"**/*.{ts,tsx,scss,md}\"",
     "format": "prettier --write \"**/*.{ts,tsx,scss,md}\" && eslint --fix --ext .ts --ext .tsx .",
     "playwright": "playwright test",
-    "test:ui": "start-server-and-test dev http://localhost:3000 playwright",
+    "playwright-dev": "next dev -p 3002",
+    "test:ui": "start-server-and-test playwright-dev 3002 playwright",
     "prepare": "husky install",
     "pre-commit": "pnpm test && lint-staged"
   },

diff --git a/page-stories/index.spec.tsx b/page-stories/index.spec.tsx
@@ -1,10 +1,23 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import Home from '../pages/index';
 import '@testing-library/jest-dom';
 
 describe('Home', () => {
-  it('renders link text', () => {
+  it('renders a day rate based on desired wage', () => {
     render(<Home />);
-    expect(screen.getByText('somedevsdo')).toBeInTheDocument();
+    const wageInput = screen.getByTestId('wage');
+    fireEvent.change(wageInput, { target: { value: 30000 } });
+
+    expect(screen.getByText(/135/i)).toBeInTheDocument();
+  });
+
+  it('renders a day rate based on desired wage and costs', () => {
+    render(<Home />);
+    const wageInput = screen.getByTestId('wage');
+    const costInput = screen.getByTestId('costs');
+    fireEvent.change(wageInput, { target: { value: 30000 } });
+    fireEvent.change(costInput, { target: { value: 10000 } });
+
+    expect(screen.getByText(/180/i)).toBeInTheDocument();
   });
 });
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,21 +1,84 @@
+import React, { useEffect, useState } from 'react';
 import type { NextPage } from 'next';
 import Head from 'next/head';
 
 const Home: NextPage = () => {
+  const weekDays = 260; // 52 weeks * 5
+
+  const [desiredWage, setDesiredWage] = useState<string>('');
+  const [costs, setCosts] = useState<string>('');
+  const [calculation, setCalculation] = useState<number>();
+  const [basicCalculation, setBasicCalculation] = useState<number>();
+
+  // initially, just checking if NaN and returning 0 if it is
+  const numberFormat = (value: string): number => {
+    const toNumber = parseFloat(value);
+    if (isNaN(toNumber)) {
+      return 0;
+    }
+
+    return toNumber;
+  };
+
+  useEffect(() => {
+    // these are the current defaults. They'll need to be lifted up at some point,
+    // and we might not want to default all this for the user. Pension is a bit contentious for example
+    const defaults = {
+      publicHolidays: 9, // extra one in 2022
+      annualLeave: 25,
+      sickDays: 3,
+      pension: 0,
+    };
+
+    const daysOff = defaults.annualLeave + defaults.publicHolidays + defaults.sickDays;
+    const workingDays = weekDays - daysOff;
+    const desiredWageNum = numberFormat(desiredWage);
+    const costsNum = numberFormat(costs);
+
+    // calculate how much pension will be paid
+    const pension = (defaults.pension / 100) * desiredWageNum;
+
+    if (desiredWage) {
+      setCalculation(Math.ceil((desiredWageNum + pension + costsNum) / workingDays));
+    }
+
+    setBasicCalculation(Math.ceil((desiredWageNum * 1.3) / workingDays));
+  }, [desiredWage, costs]);
+
   return (
     <div>
       <Head>
-        <title>Next.js template</title>
-        <meta name="description" content="Template for Next.js sites" />
+        <title>Freelance Calculator</title>
+        <meta name="description" content="Calculate what your day rate should be" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <main>
-        <h1>
-          Welcome to the <a href="https://somedevsdo.com">somedevsdo</a> Next.js template
-        </h1>
-        <p>
-          This repo can be used for spinning up new projects with an agreed and efficient setup.
-        </p>
+        <h1>Freelance calculator</h1>
+        <h2>Day rate: {calculation}</h2>
+        <h2>Your wage + 30%: {basicCalculation}</h2>
+        <label>
+          Desired wage:{' '}
+          <input
+            data-testid="wage"
+            type="number"
+            value={desiredWage}
+            onChange={(e) => {
+              setDesiredWage(e.target.value);
+            }}
+          />
+        </label>
+
+        <label>
+          Costs:{' '}
+          <input
+            data-testid="costs"
+            type="number"
+            value={costs}
+            onChange={(e) => {
+              setCosts(e.target.value);
+            }}
+          />
+        </label>
       </main>
     </div>
   );

diff --git a/playwright.config.ts b/playwright.config.ts
@@ -6,6 +6,7 @@ const config: PlaywrightTestConfig = {
   retries: process.env.CI ? 2 : 0,
   use: {
     trace: 'on-first-retry',
+    baseURL: 'http://localhost:3002',
   },
   testMatch: ['**/tests/*.spec.ts'],
   projects: [

diff --git a/tests/home.spec.ts b/tests/home.spec.ts
@@ -1,14 +1,8 @@
-import { test, expect } from '@playwright/test';
+import { test } from '@playwright/test';
 import { injectAxe, checkA11y } from 'axe-playwright';
 
-test('homepage test', async ({ page }) => {
-  await page.goto('http://localhost:3000');
-  const title = page.locator('a');
-  await expect(title).toHaveText('somedevsdo');
-});
-
 test('accessibility test', async ({ page }) => {
-  await page.goto('http://localhost:3000');
+  await page.goto('/');
 
   // accessibility check
   await injectAxe(page);