added tests and more workflows config

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "eslint:recommended", "prettier"]
 }

.gitignore

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

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run lint && npx lint-staged --concurrent false

.husky/pre-push

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged && npm run test:e2e

.prettierignore

@@ -0,0 +1,7 @@
+.prettierignore
+public/
+.gitignore
+.husky/
+.next/
+.vercel/
+node_modules/

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 80,
+  "bracketSpacing": true,
+  "bracketSameLine": true
+}

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnPaste": true
+}

__tests__/dashboard.spec.ts

@@ -0,0 +1,20 @@
+import { test, expect } from '@playwright/test'
+
+test('Should get dashboard items from API', async ({ request, page }) => {
+  // console.log(apiContext.)
+  await page.goto('/')
+  const allDashboards = await request.fetch(
+    'https://gist.githubusercontent.com/kabaros/da79636249e10a7c991a4638205b1726/raw/fa044f54e7a5493b06bb51da40ecc3a9cb4cd3a5/dashboards.json'
+  )
+  expect(allDashboards.ok()).toBeTruthy()
+  const { dashboards } = await allDashboards.json()
+  expect(dashboards).toContainEqual({
+    displayName: 'Antenatal Care',
+    id: 'nghVC4wtyzi',
+    starred: true
+  })
+
+  await expect(
+    page.getByRole('button', { name: 'Antenatal Care' })
+  ).toBeVisible()
+})

__tests__/home.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test'
+
+test('Homepage should render properly', async ({ page }) => {
+  await page.goto('/')
+
+  // expect Dashboards title to exist
+  await expect(page.getByRole('heading', { name: 'Dashboards' })).toBeVisible()
+
+  // expect filter item to exist
+  await expect(
+    page.getByRole('button', { name: 'Filter Items...' })
+  ).toBeVisible()
+})

app/layout.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'

components/DashboardWidget.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
 import { Toggle } from './ui/toggle';
 import { Dashboard } from '@/lib/data';
-import { BarChart2, BarChartBig, BarChartHorizontalBig, CandlestickChart, FileType, Gauge, LineChart, Mails, PieChart, Star, Map } from 'lucide-react';
+import { FileType, Mails, Star, Map } from 'lucide-react';
 import { renderVizTypeIcons } from '@/lib/helperWidgets';
 // import { renderContent } from '@/lib/helperWidgets';
 
@@ -20,17 +20,18 @@ const DashboardWidget = ({ allDashboards }: {
         return <li key={nodeId} className='flex flex-row items-center justify-start w-full space-x-2 text-xs py-2 leading-normal text-gray-600 '><Map size={16} color="#615c5c" /> <span>{content.map.name}</span></li>;
       case 'MESSAGES':
         return <li key={nodeId} className='flex flex-row items-center justify-start w-full space-x-2 text-xs py-2 leading-normal text-gray-600 '><Mails size={16} color="#615c5c" strokeWidth={1} /> <span>{'Messages'}</span></li>;
-      case 'TEXT':
+      case 'TEXT': {
         const title = content.text.includes('\n') ? content.text.split('\n')[0] : content.text
         return <li key={nodeId} className=' flex flex-row items-start justify-start w-full space-x-2 text-xs py-2 leading-normal text-gray-600 '><FileType size={16} color="#615c5c" /> <span>{title}</span></li>;
+      }
       default:
         return 'N/A'
     }
   }
 
   return (
     <Accordion type="single" collapsible className="w-full space-y-4" defaultValue={allDashboards[0].id}>
-      {allDashboards.map((item, _) => (
+      {allDashboards.map((item) => (
         <AccordionItem key={item.id} value={item.id} className="bg-white rounded-lg shadow-sm my-4 px-4 py-0 relative">
           <AccordionTrigger className='flex flex-row items-center w-full'>
             <p className='text-base font-semibold justify-self-start mr-auto'>{item.displayName}</p>

components/FilterWidget.tsx

@@ -20,7 +20,7 @@ const FilterWidget = () => {
   }
   return (
     <Select onValueChange={handleFilterSearch} defaultValue={searchParams.get('query')?.toString()}>
-      <SelectTrigger className="w-[180px]">
+      <SelectTrigger className="w-[180px]" role='button'>
         <SelectValue placeholder='Filter Items...' aria-placeholder="Select Type" />
       </SelectTrigger>
       <SelectContent>