ci: automatic lint, test, typecheck, and format action (#18)

* ci: add checking scripts

* ci: add code checking action

* fix: correctly type the useTheme hook

* test: add dummy test to make jest happy

* test: remove obsolete test snapshot

.github/workflows/check-code.yml

@@ -0,0 +1,37 @@
+name: Typecheck, lint, format and test
+
+on:
+    push:
+        branches:
+            - main
+    pull_request:
+    workflow_dispatch:
+
+jobs:
+    lint-typecheck:
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v2
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+                  cache: 'npm'
+
+            - name: Install dependencies
+              run: npm install
+
+            - name: Typecheck
+              run: npm run check:types
+
+            - name: Lint
+              run: npm run check:lint
+
+            - name: Format
+              run: npm run check:format
+
+            - name: Test
+              run: npm run check:test

.gitignore

@@ -11,6 +11,9 @@ npm-debug.*
 web-build/
 .env
 
+# Test stuff
+coverage/
+
 # macOS
 .DS_Store
 

components/__tests__/dummyTest.test.ts

@@ -0,0 +1,8 @@
+// Jest requires at least one test file in the project to run the tests.
+// This is a dummy test file to make Jest happy.
+
+describe('It should pass', () => {
+    it('should pass', () => {
+        expect(1).toBe(1);
+    });
+});

components/timetable/DateSelector.tsx

@@ -1,3 +1,4 @@
+import { DarkTheme } from '@/styles/index';
 import dayjs from 'dayjs';
 import 'dayjs/locale/en';
 import 'dayjs/locale/fi';
@@ -23,7 +24,7 @@ const DateSelector = ({
     nextVisible = true,
     previousVisible = true,
 }: DateSelectorProps) => {
-    const theme = useTheme();
+    const theme = useTheme<DarkTheme>();
 
     const { i18n } = useTranslation();
     dayjs.locale(i18n.language);

package.json

@@ -10,7 +10,11 @@
     "web": "expo start --web",
     "test": "jest --watchAll",
     "lint": "expo lint",
-    "pretty": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json}\""
+    "pretty": "prettier --write \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json}\"",
+    "check:types": "tsc --noEmit",
+    "check:lint": "expo lint",
+    "check:format": "prettier --check \"./**/*.{js,jsx,mjs,cjs,ts,tsx,json}\"",
+    "check:test": "jest --bail --ci"
   },
   "jest": {
     "preset": "jest-expo"

styles/index.ts

@@ -1,4 +1,5 @@
 import Colors from './colors';
 import Themes from './themes';
+import { DarkTheme } from './themes';
 
-export { Colors, Themes };
+export { Colors, Themes, DarkTheme };

styles/themes.ts

@@ -29,4 +29,6 @@ const Themes = {
     },
 };
 
+export type DarkTheme = (typeof Themes)['dark']['default'];
+
 export default Themes;