11# GitHub Actions pour HTML/CSS/JS
22
3- Une démonstration complète et didactique de l'intégration des GitHub Actions pour automatiser les tests, le linting et la validation de code dans un projet web front-end. Ce projet sert d'exemple pratique pour mettre en place une pipeline CI/CD robuste .
3+ Exemple pratique d'automatisation des tests et du linting pour projets web avec GitHub Actions. Pipeline CI/CD complète avec Jest, Deno et Super-Linter .
44
5- ## 🔧 Statut des Actions GitHub
5+ ## 🔧 Statut des Actions
66
77![ Tests Unitaires] ( https://github.com/Y-Picot/github-actions-html-css-js/workflows/unit_tests/badge.svg )
88![ Linting] ( https://github.com/Y-Picot/github-actions-html-css-js/workflows/super_linter_hcjs/badge.svg )
@@ -11,206 +11,74 @@ Une démonstration complète et didactique de l'intégration des GitHub Actions
1111
1212## 🚀 Technologies utilisées
1313
14- - ** HTML5** - Structure sémantique des pages web
15- - ** CSS3** - Styles et mise en page responsive
16- - ** JavaScript ES6+** - Logique interactive côté client
17- - ** Jest** - Framework de tests unitaires
18- - ** Deno** - Runtime JavaScript moderne et sécurisé
19- - ** GitHub Actions** - Pipeline CI/CD automatisée
20- - ** Super-Linter** - Validation multi-langages
14+ - ** HTML5/CSS3/JavaScript** - Technologies front-end
15+ - ** Jest & Deno** - Frameworks de tests
16+ - ** GitHub Actions** - Pipeline CI/CD
17+ - ** Super-Linter** - Validation de code
2118
2219## ✨ Fonctionnalités
2320
24- - ** Tests automatisés** - Exécution de tests unitaires avec Jest et Deno
25- - ** Linting continu** - Vérification automatique du code avec Super-Linter
26- - ** Pipeline CI/CD** - Intégration et déploiement continus via GitHub Actions
27- - ** Multi-environnements** - Support des runtimes Node.js et Deno
28- - ** Badges de statut** - Visualisation en temps réel de l'état du projet
29- - ** Documentation complète** - Guide détaillé pour l'utilisation et la contribution
21+ - ** Tests automatisés** - Jest et Deno en parallèle
22+ - ** Linting continu** - Validation automatique du code
23+ - ** Multi-environnements** - Support Node.js et Deno
24+ - ** Badges de statut** - Suivi visuel en temps réel
3025
3126## 📦 Prérequis
3227
33- - ** Node.js** (version 16 ou supérieure)
34- - ** npm** ou ** yarn** pour la gestion des dépendances
35- - ** Deno** (optionnel, pour les tests Deno)
36- - ** Git** pour le contrôle de version
37- - Compte ** GitHub** avec accès aux Actions
28+ - Node.js (version 16+) et npm
29+ - Deno (optionnel pour tests Deno)
30+ - Compte GitHub avec Actions activées
3831
3932## 🛠️ Installation
4033
41- 1 . ** Cloner le dépôt**
42- ``` bash
43- git clone https://github.com/Y-Picot/github-actions-html-css-js.git
44- ```
45-
46- 2 . ** Naviguer dans le dossier**
47- ``` bash
48- cd github-actions-html-css-js
49- ```
50-
51- 3 . ** Installer les dépendances**
52- ``` bash
53- npm install
54- ```
55-
56- 4 . ** Vérifier l'installation**
57- ``` bash
58- npm run test-jest
59- ```
60-
61- ## 💡 Utilisation
62-
63- ### Exécution des tests
64-
65- #### Tests Jest (Node.js)
6634``` bash
35+ git clone https://github.com/Y-Picot/github-actions-html-css-js.git
36+ cd github-actions-html-css-js
37+ npm install
6738npm run test-jest
6839```
69- Exécute la suite complète de tests unitaires avec Jest et génère un rapport de couverture.
70-
71- #### Tests Deno
72- ``` bash
73- npm run test-deno
74- ```
75- ou directement avec Deno :
76- ``` bash
77- deno test
78- ```
79-
80- ### Validation du code
81-
82- #### Linting automatique
83- Le linting s'exécute automatiquement lors des pushs sur la branche ` main ` via GitHub Actions.
84-
85- #### Linting local (si configuré)
86- ``` bash
87- npm run lint
88- ```
8940
90- ### Scripts disponibles
41+ ## 💡 Scripts disponibles
9142
9243| Commande | Description |
9344| ----------| -------------|
9445| ` npm run test-jest ` | Tests unitaires avec Jest |
9546| ` npm run test-deno ` | Tests unitaires avec Deno |
96- | ` npm run lint ` | Vérification du code (si configuré) |
97- | ` npm start ` | Démarre le serveur de développement (si configuré) |
47+ | ` deno test ` | Tests Deno directement |
9848
9949## 📁 Structure du projet
10050
10151```
10252github-actions-html-css-js/
103- ├── .github/
104- │ └── workflows/ # Fichiers de configuration GitHub Actions
105- │ ├── unit_tests.yml # Pipeline de tests Jest
106- │ ├── super_linter_hcjs.yml # Pipeline de linting
107- │ └── deno_lint.yml # Pipeline de tests Deno
108- ├── src/ # Code source
109- │ ├── index.html # Page principale
110- │ ├── style.css # Feuilles de style
111- │ └── script.js # Scripts JavaScript
112- ├── tests/ # Tests unitaires
113- │ ├── jest/ # Tests Jest
114- │ └── deno/ # Tests Deno
53+ ├── .github/workflows/ # GitHub Actions
54+ ├── src/ # Code source HTML/CSS/JS
55+ ├── tests/ # Tests Jest et Deno
11556├── package.json # Configuration npm
116- ├── .gitignore # Fichiers à ignorer
117- ├── README.md # Documentation
118- └── LICENSE # Licence du projet
57+ └── README.md # Documentation
11958```
12059
121- ## ⚙️ Configuration des GitHub Actions
122-
123- ### Workflows automatisés
124-
125- 1 . ** Tests Unitaires** (` unit_tests.yml ` )
126- - Exécution des tests Jest
127- - Génération de rapports de couverture
128- - Compatible multi-OS (Ubuntu, Windows, macOS)
129-
130- 2 . ** Super-Linter** (` super_linter_hcjs.yml ` )
131- - Validation HTML, CSS, JavaScript
132- - Détection d'erreurs de syntaxe
133- - Vérification des bonnes pratiques
134-
135- 3 . ** Tests Deno** (` deno_lint.yml ` )
136- - Tests avec le runtime Deno
137- - Validation TypeScript native
138- - Sécurité renforcée
139-
140- ## 🎨 Conventions de développement
141-
142- ### HTML
143- - ** Nommage** : Classes et IDs en ` kebab-case `
144- - ** Structure** : HTML5 sémantique
145- - ** Accessibilité** : Attributs ARIA appropriés
146-
147- ### CSS
148- - ** Méthodologie** : BEM (Block Element Modifier)
149- - ** Nommage** : Classes en ` kebab-case `
150- - ** Organisation** : Feuilles de style modulaires
151-
152- ### JavaScript
153- - ** Variables/Fonctions** : ` camelCase `
154- - ** Classes** : ` PascalCase `
155- - ** Constantes** : ` UPPER_SNAKE_CASE `
156- - ** Fichiers** : ` kebab-case.js `
157-
158- ### Dépôt
159- - ** Nom** : Format ` kebab-case `
160- - ** Branches** : ` feature/nom-fonctionnalite `
161- - ** Commits** : Messages descriptifs en français
162-
163- ## 🚫 Fichiers ignorés
60+ ## ⚙️ GitHub Actions configurées
16461
165- Le projet exclut automatiquement :
166- - ` node_modules/ ` - Dépendances Node.js
167- - ` *.log ` - Fichiers de logs
168- - ` .deno_modules/ ` , ` .deno_test_cache/ ` - Cache Deno
169- - ` .DS_Store ` , ` Thumbs.db ` - Fichiers système
170- - ` coverage/ ` - Rapports de couverture
171- - ` build/ ` , ` dist/ ` - Dossiers de build
62+ - ** Tests Jest** - Tests unitaires Node.js avec couverture
63+ - ** Super-Linter** - Validation HTML/CSS/JS automatique
64+ - ** Tests Deno** - Tests avec runtime sécurisé Deno
17265
17366## 🤝 Contribution
17467
175- Les contributions sont encouragées ! Pour contribuer :
176-
177- 1 . ** Fork** le projet
178- 2 . ** Créez** votre branche (` git checkout -b feature/amelioration ` )
179- 3 . ** Testez** vos modifications (` npm run test-jest ` )
180- 4 . ** Committez** (` git commit -m 'Ajout d'une fonctionnalité' ` )
181- 5 . ** Poussez** (` git push origin feature/amelioration ` )
182- 6 . ** Ouvrez** une Pull Request
183-
184- ### Checklist avant PR
185- - [ ] Tests passent localement
186- - [ ] Code respecte les conventions
187- - [ ] Documentation mise à jour
188- - [ ] Badges de statut fonctionnels
189-
190- ### Suggestions d'améliorations
191- - Ajout de tests end-to-end avec Playwright
192- - Intégration de Lighthouse pour les performances
193- - Pipeline de déploiement automatique
194- - Analyse de sécurité avec CodeQL
195- - Support de TypeScript
196-
197- ## 🎯 Objectifs pédagogiques
198-
199- Ce projet démontre :
200- - ** Configuration CI/CD** avec GitHub Actions
201- - ** Tests multi-environnements** (Node.js vs Deno)
202- - ** Automatisation du linting** et validation
203- - ** Intégration continue** et bonnes pratiques
204- - ** Documentation technique** complète
68+ 1 . Fork le projet
69+ 2 . Créez votre branche (` git checkout -b feature/amelioration ` )
70+ 3 . Testez (` npm run test-jest ` )
71+ 4 . Committez (` git commit -m 'Nouvelle fonctionnalité' ` )
72+ 5 . Ouvrez une Pull Request
20573
20674## 📄 Licence
20775
208- Ce projet est sous licence MIT. Voir le fichier [ LICENSE] ( LICENSE ) pour plus de détails.
76+ Licence MIT - voir [ LICENSE] ( LICENSE ) pour les détails.
20977
21078## 👤 Auteur
21179
21280** Y-Picot** - [ GitHub] ( https://github.com/Y-Picot )
21381
21482---
21583
216- ⭐ N'hésitez pas à donner une étoile si ce projet vous aide à comprendre GitHub Actions !
84+ ⭐ Projet utile ? N'hésitez pas à lui donner une étoile !
0 commit comments