Water Temperature Analysis - CSV Processing Application

A SvelteKit application for processing and analyzing water temperature data from CSV files.

Here's a short video of the component working.

Prerequisites

• Node.js (v22 or higher required)
• Git
• npm (comes with Node.js)
• (Optional) nvm for Node version management

Setup

1. Clone the repository

git clone <repository-url>
cd datastream-svelte-csv

2. Set up Node.js version

If using nvm, the correct Node.js version will be set automatically:

nvm use

Or manually install Node.js v22 if not using nvm.

3. Install dependencies

npm install

This will automatically:

• Install all Node.js dependencies
• Set up Husky git hooks (via the prepare script)
• Configure the pre-commit hook to run Prettier

4. Install Playwright browsers

Playwright requires browser binaries to be installed separately:

npx playwright install chromium

If you encounter system dependency issues on Linux, use:

npx playwright install chromium --with-deps

Development

Running the development server

npm run dev

The application will be available at http://localhost:5173

Building for production

npm run build

Static files will be generated in the build/ directory.

Previewing the production build

npm run preview

Serves the production build locally at http://localhost:4173

Code Quality

Formatting

Format all files with Prettier:

npm run format

Note: Prettier runs automatically on staged files when you commit (via pre-commit hook).

Type checking

npm run check

Run type checking in watch mode:

npm run check:watch

Testing

Run all tests

npm test

This runs both unit tests (Jest) and browser tests (Playwright) sequentially.

Unit tests (Jest)

Run unit tests only:

npm run test:unit

Unit tests are located in src/ with the pattern *.test.ts.

Browser tests (Playwright)

Run browser tests only:

npm run test:browser

Browser tests are located in tests/ with the pattern *.spec.ts.

Note: Browser tests require the application to be built first. The test script automatically builds and starts a preview server.

CI testing

npm run test:ci

This is the same as npm test and is used in the GitHub Actions workflow.

Git Hooks

This project uses Husky for git hooks:

• pre-commit: Runs lint-staged which formats staged files with Prettier

The hooks are automatically installed when you run npm install. If you need to reinstall them manually:

npx husky install

Continuous Integration

This project uses GitHub Actions for continuous integration. The workflow is defined in .github/workflows/ci.yml.

CI Workflow

The CI pipeline runs on:

• Push to main branch
• Pull requests to main branch

CI Steps

1. Checkout repository - Clones the code
2. Setup Node.js - Installs Node.js v20 with npm caching
3. Install dependencies - Runs npm ci for clean dependency installation
4. Install Playwright browsers - Installs Chromium with system dependencies
5. Run all tests - Executes npm run test:ci (unit + integration tests)
6. Upload Playwright report - If tests fail, uploads the test report as an artifact

Viewing CI Results

• Check the "Actions" tab in the GitHub repository
• Failed test runs will have downloadable Playwright reports as artifacts
• Artifacts are retained for 30 days

Technologies

• Framework: SvelteKit
• Language: TypeScript
• Unit Testing: Jest
• Integration Testing: Playwright
• Code Formatting: Prettier
• Git Hooks: Husky
• CSV Parsing: csv-parse

Troubleshooting

Pre-commit hook not running

If the pre-commit hook isn't working:

npx husky install

Playwright tests failing

Ensure Playwright browsers are installed:

npx playwright install chromium

Type errors after pulling changes

Regenerate SvelteKit types:

npx svelte-kit sync