diff --git a/README.md b/README.md index 2cb7ac7..e0bfa2b 100644 --- a/README.md +++ b/README.md @@ -22,12 +22,40 @@ An interactive dashboard to visualize GitHub user activity, including commits, p This setup aims to provide a robust starting point, allowing you to focus on building your application without the hassle of setting up a development environment from scratch. +## Features + +### 1. **Dashboard Overview** + +Provides an intuitive interface for navigating between charts and lists, giving users a comprehensive view of their GitHub data. + +![Dashboard Screenshot](./assets/dashboard.png) + +### 2. **Commit Frequency** + +Displays a bar chart visualizing commits by month to help users analyze contribution trends. + +![Commit Frequency Chart](./assets/commit-chart.png) + +### 3. **Commit List** + +Lists all commits with details such as the author, message, and commit date, allowing users to filter and view specific activity. + +![Commit List Screenshot](./assets/commit-list.png) + +### 4. **Programming Languages** + +Shows a pie chart of the programming languages used across repositories, highlighting your most frequently used languages. + +![Programming Languages Chart](./assets/language-chart.png) + ## 🚀 Initial Setup -First, install the project dependencies: +To get started, clone the repository and install dependencies: ```bash -npm install +git clone https://github.com/Jagoda11/github-insights-dashboard.git +cd github-insights-dashboard +npm install --legacy-peer-deps ``` ## ⚠️ Note on Commits diff --git a/assets/commit-chart.png b/assets/commit-chart.png new file mode 100644 index 0000000..45a6acc Binary files /dev/null and b/assets/commit-chart.png differ diff --git a/assets/commit-list.png b/assets/commit-list.png new file mode 100644 index 0000000..73b2d3c Binary files /dev/null and b/assets/commit-list.png differ diff --git a/assets/dashboard.png b/assets/dashboard.png new file mode 100644 index 0000000..0736cf3 Binary files /dev/null and b/assets/dashboard.png differ diff --git a/assets/language-chart.png b/assets/language-chart.png new file mode 100644 index 0000000..5506c64 Binary files /dev/null and b/assets/language-chart.png differ diff --git a/package-lock.json b/package-lock.json index d0c5beb..5d4085f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "license": "MIT", "dependencies": { + "@playwright/test": "^1.49.1", "autoprefixer": "^10.4.20", "axios": "^1.7.9", "chart.js": "^4.4.7", @@ -2974,6 +2975,21 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/@playwright/test": { + "version": "1.49.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.49.1.tgz", + "integrity": "sha512-Ky+BVzPz8pL6PQxHqNRW1k3mIyv933LML7HktS8uik0bUXNCdPhoS/kLihiO1tMf/egaJb4IutXd7UywvXEW+g==", + "license": "Apache-2.0", + "dependencies": { + "playwright": "1.49.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, "node_modules/@pmmmwh/react-refresh-webpack-plugin": { "version": "0.5.15", "resolved": "https://registry.npmjs.org/@pmmmwh/react-refresh-webpack-plugin/-/react-refresh-webpack-plugin-0.5.15.tgz", @@ -11656,6 +11672,50 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/playwright": { + "version": "1.49.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.49.1.tgz", + "integrity": "sha512-VYL8zLoNTBxVOrJBbDuRgDWa3i+mfQgDTrL8Ah9QXZ7ax4Dsj0MSq5bYgytRnDVVe+njoKnfsYkH3HzqVj5UZA==", + "license": "Apache-2.0", + "dependencies": { + "playwright-core": "1.49.1" + }, + "bin": { + "playwright": "cli.js" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "fsevents": "2.3.2" + } + }, + "node_modules/playwright-core": { + "version": "1.49.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.49.1.tgz", + "integrity": "sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg==", + "license": "Apache-2.0", + "bin": { + "playwright-core": "cli.js" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/playwright/node_modules/fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/popper.js": { "version": "1.16.1", "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", diff --git a/package.json b/package.json index 7d344a9..8c3c08d 100644 --- a/package.json +++ b/package.json @@ -77,6 +77,7 @@ "whatwg-fetch": "^3.6.20" }, "dependencies": { + "@playwright/test": "^1.49.1", "autoprefixer": "^10.4.20", "axios": "^1.7.9", "chart.js": "^4.4.7", diff --git a/src/App.test.tsx b/src/App.test.tsx new file mode 100644 index 0000000..3f802fb --- /dev/null +++ b/src/App.test.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import { render, screen } from '@testing-library/react' +import App from './App' + +jest.mock('./components/Auth', () => () =>
Auth Component
) +jest.mock('./components/Dashboard', () => () =>
Dashboard Component
) +jest.mock('./components/CommitList', () => () => ( +
Commit List Component
+)) + +test('renders the Auth component', () => { + render() + const authComponent = screen.getByText('Auth Component') + expect(authComponent).not.toBeNull() +}) diff --git a/src/components/CommitFrequencyChart.test.tsx b/src/components/CommitFrequencyChart.test.tsx index b065250..b69c94f 100644 --- a/src/components/CommitFrequencyChart.test.tsx +++ b/src/components/CommitFrequencyChart.test.tsx @@ -1,44 +1,26 @@ import React from 'react' import { render, screen } from '@testing-library/react' -import '@testing-library/jest-dom' -import CommitFrequencyChart from './CommitFrequencyChart' -describe('CommitFrequencyChart Component 📊', () => { - it('✅ should be defined ✨', () => { - expect(CommitFrequencyChart).toBeDefined() - }) +// Mock the `react-chartjs-2` library +jest.mock('react-chartjs-2', () => ({ + Bar: () =>
Mock Bar Chart
, +})) - it('🎨 renders the component title', () => { - render() - expect(screen.getByText('Commit Frequency')).toBeInTheDocument() - }) - - it('⏳ displays loading state when loading is true', () => { - render() - expect(screen.getByText('Loading...')).toBeInTheDocument() - }) - - it('📈 skips rendering the chart if commitData is null', () => { - render() - expect(screen.getByText('Loading...')).toBeInTheDocument() - }) +import CommitFrequencyChart from './CommitFrequencyChart' - it('✅ renders the chart when valid commitData is provided', () => { - const mockData = { - labels: ['January', 'February'], - datasets: [ - { - label: 'Commits', - data: [5, 10], - backgroundColor: 'rgba(75, 192, 192, 0.2)', - borderColor: 'rgba(75, 192, 192, 1)', - borderWidth: 1, - }, - ], - } +describe('CommitFrequencyChart', () => { + it('renders the component without crashing', () => { + const mockData = [ + { date: '2024-12-22', count: 5 }, + { date: '2024-12-23', count: 8 }, + ] render() - expect(screen.getByText('Commit Frequency')).toBeInTheDocument() + // Verify the mock chart renders + expect(screen.getByTestId('chart')).toBeTruthy() + + // Verify that the heading renders + expect(screen.getByText('Commit Frequency')).toBeTruthy() }) })