Add testing

.github/workflows/main.yml

@@ -1,4 +1,7 @@
-name: Test
+name: Test and Build
+
+env:
+  NEXT_PUBLIC_VERCEL_URL: http://localhost:3000
 
 on:
   push:
@@ -11,12 +14,9 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
-
     strategy:
       matrix:
         node-version: [18.17, 20.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
     steps:
     - name: Checkout repository
       uses: actions/checkout@v4
@@ -26,12 +26,36 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
-
     - name: Install dependencies
       run: npm ci
-
     - name: Check code style
       run: npm run lint
+    - name: Run unit tests
+      run: npm test
+    - name: Build project
+      run: npm run build
 
+  e2e:
+    needs: build
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: lts/*
+        cache: 'npm'
+    - name: Install dependencies
+      run: npm ci
     - name: Build project
       run: npm run build
+    - 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

.gitignore

@@ -33,3 +33,9 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

app/__tests__/home.spec.ts

@@ -0,0 +1,76 @@
+import { config } from '@/lib/config'
+import { expect, test } from '@playwright/test'
+
+test.describe('meta tags', () => {
+  test('has title', async ({ page }) => {
+    await page.goto('/')
+    await expect(page).toHaveTitle(config.appName)
+  })
+
+  test('has description', async ({ page }) => {
+    await page.goto('/')
+    await expect(
+      page.locator('head').locator('meta[name="description"]'),
+    ).toHaveAttribute('content', config.appDescription)
+  })
+})
+
+test.describe('theme toggle', () => {
+  test('dark mode', async ({ page }) => {
+    await page.goto('/')
+    await expect(page.getByText('Dark')).not.toBeVisible()
+
+    // Click on the theme toggle button
+    await page.getByTestId('theme-toggle').click()
+    await expect(page.getByText('Dark')).toBeVisible()
+
+    // Click on the Dark button
+    await page.getByText('Dark').click()
+    await expect(page.locator('html')).toHaveClass('dark')
+    await expect(page.locator('html')).not.toHaveClass('light')
+  })
+
+  test('light mode', async ({ page }) => {
+    await page.goto('/')
+    await expect(page.getByText('Light')).not.toBeVisible()
+
+    // Click on the theme toggle button
+    await page.getByTestId('theme-toggle').click()
+    await expect(page.getByText('Light')).toBeVisible()
+
+    // Click on the Light button
+    await page.getByText('Light').click()
+    await expect(page.locator('html')).toHaveClass('light')
+    await expect(page.locator('html')).not.toHaveClass('dark')
+  })
+
+  test('system default mode', async ({ page }) => {
+    // Emulate dark mode as the preferred color scheme
+    await page.emulateMedia({ colorScheme: 'dark' })
+
+    await page.goto('/')
+
+    // Set to Light mode first
+    await page.getByTestId('theme-toggle').click()
+    await page.getByText('Light').click()
+    await expect(page.locator('html')).toHaveClass('light')
+    await expect(page.getByText('Light')).not.toBeVisible()
+
+    // Open theme toggle again and set to System mode
+    await page.getByTestId('theme-toggle').click()
+    await page.getByText('System').click()
+    await expect(page.getByText('System')).toBeVisible()
+
+    // Ensure that the theme is set to the preferred color scheme (dark)
+    await expect(page.locator('html')).toHaveClass('dark')
+    await expect(page.locator('html')).not.toHaveClass('light')
+  })
+})
+
+test.describe.fixme('area selector', () => {
+  // TODO: Add tests for the area selector
+})
+
+test.describe.fixme('boundary settings', () => {
+  // TODO: Add tests for the boundary settings
+})

app/api/__mocks__/const.ts

@@ -0,0 +1,176 @@
+import { Area } from '@/lib/const'
+
+const mockProvinces = [
+  { code: '11', name: 'ACEH' },
+  { code: '12', name: 'SUMATERA UTARA' },
+  { code: '13', name: 'SUMATERA BARAT' },
+  { code: '14', name: 'RIAU' },
+  { code: '15', name: 'JAMBI' },
+  { code: '16', name: 'SUMATERA SELATAN' },
+  { code: '17', name: 'BENGKULU' },
+  { code: '18', name: 'LAMPUNG' },
+  { code: '19', name: 'KEPULAUAN BANGKA BELITUNG' },
+  { code: '21', name: 'KEPULAUAN RIAU' },
+] as const
+
+const mockRegencies = [
+  { code: '1101', name: 'KABUPATEN ACEH SELATAN', provinceCode: '11' },
+  { code: '1102', name: 'KABUPATEN ACEH TENGGARA', provinceCode: '11' },
+  { code: '1103', name: 'KABUPATEN ACEH TIMUR', provinceCode: '11' },
+  { code: '1104', name: 'KABUPATEN ACEH TENGAH', provinceCode: '11' },
+  { code: '1105', name: 'KABUPATEN ACEH BARAT', provinceCode: '11' },
+  { code: '1106', name: 'KABUPATEN ACEH BESAR', provinceCode: '11' },
+  { code: '1107', name: 'KABUPATEN PIDIE', provinceCode: '11' },
+  { code: '1108', name: 'KABUPATEN ACEH UTARA', provinceCode: '11' },
+  { code: '1109', name: 'KABUPATEN SIMEULUE', provinceCode: '11' },
+  { code: '1110', name: 'KABUPATEN ACEH SINGKIL', provinceCode: '11' },
+] as const
+
+const mockDistricts = [
+  { code: '110101', name: 'Bakongan', regencyCode: '1101' },
+  { code: '110102', name: 'Kluet Utara', regencyCode: '1101' },
+  { code: '110103', name: 'Kluet Selatan', regencyCode: '1101' },
+  { code: '110104', name: 'Labuhanhaji', regencyCode: '1101' },
+  { code: '110105', name: 'Meukek', regencyCode: '1101' },
+  { code: '110106', name: 'Samadua', regencyCode: '1101' },
+  { code: '110107', name: 'Sawang', regencyCode: '1101' },
+  { code: '110108', name: 'Tapaktuan', regencyCode: '1101' },
+  { code: '110109', name: 'Trumon', regencyCode: '1101' },
+  { code: '110110', name: 'Pasi Raja', regencyCode: '1101' },
+] as const
+
+const mockVillages = [
+  {
+    code: '1101012001',
+    districtCode: '110101',
+    name: 'Keude Bakongan',
+  },
+  { code: '1101012002', districtCode: '110101', name: 'Ujong Mangki' },
+  { code: '1101012003', districtCode: '110101', name: 'Ujong Padang' },
+  { code: '1101012004', districtCode: '110101', name: 'Gampong Drien' },
+  { code: '1101012015', districtCode: '110101', name: 'Darul Ikhsan' },
+  {
+    code: '1101012016',
+    districtCode: '110101',
+    name: 'Padang Beurahan',
+  },
+  { code: '1101012017', districtCode: '110101', name: 'Gampong Baro' },
+  { code: '1101022001', districtCode: '110102', name: 'Fajar Harapan' },
+  { code: '1101022002', districtCode: '110102', name: 'Krueng Batee' },
+  {
+    code: '1101022003',
+    districtCode: '110102',
+    name: 'Pasi Kuala Asahan',
+  },
+] as const
+
+const mockIslands = [
+  {
+    code: '110140001',
+    coordinate: '03°19\'03.44" N 097°07\'41.73" E',
+    isOutermostSmall: false,
+    isPopulated: false,
+    name: 'Pulau Batukapal',
+    regencyCode: '1101',
+    latitude: 3.317622222222222,
+    longitude: 97.12825833333332,
+  },
+  {
+    code: '110140002',
+    coordinate: '03°24\'55.00" N 097°04\'21.00" E',
+    isOutermostSmall: false,
+    isPopulated: false,
+    name: 'Pulau Batutunggal',
+    regencyCode: '1101',
+    latitude: 3.415277777777778,
+    longitude: 97.07249999999999,
+  },
+  {
+    code: '110140003',
+    coordinate: '02°52\'54.99" N 097°31\'07.00" E',
+    isOutermostSmall: false,
+    isPopulated: false,
+    name: 'Pulau Kayee',
+    regencyCode: '1101',
+    latitude: 2.8819416666666666,
+    longitude: 97.51861111111111,
+  },
+  {
+    code: '110140004',
+    coordinate: '02°54\'25.11" N 097°26\'18.51" E',
+    isOutermostSmall: false,
+    isPopulated: false,
+    name: 'Pulau Mangki',
+    regencyCode: '1101',
+    latitude: 2.906975,
+    longitude: 97.438475,
+  },
+  {
+    code: '110140005',
+    coordinate: '02°53\'16.00" N 097°30\'54.00" E',
+    isOutermostSmall: false,
+    isPopulated: false,
+    name: 'Pulau Tengku',
+    regencyCode: '1101',
+    latitude: 2.8877777777777776,
+    longitude: 97.515,
+  },
+  {
+    code: '110140006',
+    coordinate: '02°48\'34.67" N 097°35\'36.51" E',
+    isOutermostSmall: false,
+    isPopulated: false,
+    name: 'Pulau Trumon',
+    regencyCode: '1101',
+    latitude: 2.809630555555555,
+    longitude: 97.593475,
+  },
+  {
+    code: '110340001',
+    coordinate: '04°36\'48.74" N 098°00\'31.21" E',
+    isOutermostSmall: false,
+    isPopulated: false,
+    name: 'Pulau Bangka Matee',
+    regencyCode: '1103',
+    latitude: 4.613538888888889,
+    longitude: 98.00866944444445,
+  },
+  {
+    code: '110340002',
+    coordinate: '05°09\'12.80" N 097°34\'56.08" E',
+    isOutermostSmall: false,
+    isPopulated: false,
+    name: 'Pulau Gosongsungaibelah',
+    regencyCode: '1103',
+    latitude: 5.153555555555556,
+    longitude: 97.58224444444444,
+  },
+  {
+    code: '110340003',
+    coordinate: '04°36\'19.18" N 098°01\'02.04" E',
+    isOutermostSmall: false,
+    isPopulated: false,
+    name: 'Pulau Krueng Beukah',
+    regencyCode: '1103',
+    latitude: 4.605327777777777,
+    longitude: 98.01723333333334,
+  },
+  {
+    code: '110340004',
+    coordinate: '04°41\'35.16" N 097°57\'59.15" E',
+    isOutermostSmall: false,
+    isPopulated: false,
+    name: 'Pulau Kuala Parek',
+    regencyCode: '1103',
+    latitude: 4.6931,
+    longitude: 97.96643055555556,
+  },
+]
+
+export const mockData = {
+  [Area.PROVINCE]: mockProvinces,
+  [Area.REGENCY]: mockRegencies,
+  [Area.DISTRICT]: mockDistricts,
+  [Area.VILLAGE]: mockVillages,
+  [Area.ISLAND]: mockIslands,
+} as const

app/api/__mocks__/handlers.ts

@@ -0,0 +1,54 @@
+import { config } from '@/lib/config'
+import { endpoints } from '@/lib/const'
+import { objectFromEntries, objectToEntries } from '@/lib/utils'
+import { http, HttpResponse } from 'msw'
+import { mockData } from './const'
+
+const AREA_API_URL = config.dataSource.area.url
+
+// Swap key and value of endpoints object
+const areaByEndpoint = objectFromEntries(
+  objectToEntries(endpoints).map(([key, value]) => [value, key]),
+)
+
+export const handlers = [
+  http.get(`${AREA_API_URL}/:area`, ({ params, request }) => {
+    const { area: endpoint } = params
+    const url = new URL(request.url)
+    const name = url.searchParams.get('name')
+
+    if (typeof endpoint !== 'string') {
+      return HttpResponse.json({ error: 'Bad request' }, { status: 400 })
+    }
+
+    const items = mockData[areaByEndpoint[endpoint]]
+
+    if (name) {
+      return HttpResponse.json({
+        data: items.filter((item) =>
+          item.name.toLowerCase().includes(name.toLowerCase()),
+        ),
+      })
+    }
+
+    return HttpResponse.json({ data: items })
+  }),
+
+  http.get(`${AREA_API_URL}/:area/:code`, ({ params }) => {
+    const { area: endpoint, code } = params
+
+    if (typeof endpoint !== 'string') {
+      return HttpResponse.json({ error: 'Bad request' }, { status: 400 })
+    }
+
+    const data = mockData[areaByEndpoint[endpoint]].find(
+      (item) => item.code === code,
+    )
+
+    if (!data) {
+      return HttpResponse.json({ error: 'Not found' }, { status: 404 })
+    }
+
+    return HttpResponse.json({ data })
+  }),
+]

app/api/__mocks__/server.ts

@@ -0,0 +1,8 @@
+import { setupServer } from 'msw/node'
+import { handlers } from './handlers'
+
+export const mockServer = setupServer(...handlers)
+
+mockServer.events.on('request:start', async ({ request }) => {
+  console.log(`Request to ${request.url.toString()}`)
+})

components/theme-toggle.tsx

@@ -16,7 +16,7 @@ export function ThemeToggle() {
 
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger asChild>
+      <DropdownMenuTrigger asChild data-testid="theme-toggle">
         <Button variant="ghost" size="icon">
           <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />