Feature 2

.dockerignore

@@ -0,0 +1,3 @@
+dist/
+node_modules/
+.gitconfig

.eslintignore

@@ -1,3 +1,4 @@
 webpack.config.js
 node_modules/
 dist/
+cypress.config.js

.eslintrc.js

@@ -1,49 +1,30 @@
 module.exports = {
-  "env": {
-    "browser": true,
-    "es6": true,
-    "jest/globals": true
+  env: {
+    browser: true,
+    es6: true,
+    'jest/globals': true,
+    node: true,
+    'cypress/globals': true,
   },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended"
-  ],
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
+  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
     },
-    "ecmaVersion": 2018,
-    "sourceType": "module"
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  plugins: ['react', 'jest', 'cypress'],
+  rules: {
+    indent: ['error', 2],
+    'linebreak-style': ['error', 'unix'],
+    quotes: ['error', 'single'],
+    semi: ['error', 'never'],
+    eqeqeq: 'error',
+    'no-trailing-spaces': 'error',
+    'object-curly-spacing': ['error', 'always'],
+    'arrow-spacing': ['error', { before: true, after: true }],
+    'no-console': 0,
+    'react/prop-types': 0,
   },
-  "plugins": [
-    "react", "jest"
-  ],
-  "rules": {
-    "indent": [
-      "error",
-        2
-      ],
-    "linebreak-style": [
-      "error",
-      "unix"
-    ],
-    "quotes": [
-      "error",
-      "single"
-    ],
-    "semi": [
-      "error",
-      "never"
-    ],
-    "eqeqeq": "error",
-    "no-trailing-spaces": "error",
-    "object-curly-spacing": [
-      "error", "always"
-    ],
-    "arrow-spacing": [
-      "error", { "before": true, "after": true }
-    ],
-    "no-console": "error",
-    "react/prop-types": 0
-  }
 }

.github/workflows/deploy_render.yml

@@ -0,0 +1,79 @@
+name: Deployment to Render
+
+on:
+  push:
+    branches:
+      - master
+      # note that your "main" branch might be called main instead of master
+  pull_request:
+    branches: [master]
+    types: [opened, synchronize]
+
+jobs:
+  simple_deployment_pipeline:
+    name: Build & Deploy
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Check style
+        run: npm run eslint
+
+      - name: Build
+        run: npm run build
+
+      - name: Notif Fail to Discord
+        uses: rjstone/discord-webhook-notify@v1
+        if: ${{failure() && github.event_name == 'push'}}
+        with:
+          severity: error
+          description: commit
+          details: '${{ github.event.head_commit.url}} by ${{ github.actor}} broke the build :('
+          text: Build failed
+          webhookUrl: ${{ secrets.DISCORD_WEBHOOK }}
+
+      - name: Test
+        run: npm run test
+
+      - name: e2e tests
+        uses: cypress-io/github-action@v5
+        with:
+          command: npm run test:e2e
+          start: npm run start-prod
+          wait-on: http://localhost:5000
+
+      - name: Deploy to Render
+        if: ${{ github.event_name == 'push' && !contains(toJson(join(github.event.commits.*.message, ', ')), '#skip')}}
+        env:
+          deploy_url: ${{ secrets.RENDER_DEPLOY_HOOK_URL }}
+        run: curl "$deploy_url"
+
+  tag-release:
+    name: Versioning
+    needs: [simple_deployment_pipeline]
+    runs-on: ubuntu-20.04
+    permissions:
+      contents: write
+    if: ${{ github.event_name == 'push' && !contains(toJson(join(github.event.commits.*.message, ', ')), '#skip')}}
+
+    steps:
+      - uses: actions/checkout@v3
+      - name: Bump version and push tag
+        uses: anothrNick/github-tag-action@a2c70ae13a881faf2b4953baaa9e49731997ab36
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          WITH_V: false
+      - name: Notif Success to Discord
+        uses: rjstone/discord-webhook-notify@v1
+        if: ${{success() && github.event_name == 'push'}}
+        with:
+          severity: info
+          description: 'to ${{github.event.repository.homepage}} by ${{ github.actor}}'
+          text: A new version of Pokedex deployed
+          webhookUrl: ${{ secrets.DISCORD_WEBHOOK }}

.github/workflows/periodic_health_check.yml

@@ -0,0 +1,30 @@
+name: Periodic Check Health
+on:
+  schedule:
+    - cron: '00 14 * * *'
+
+jobs:
+  health_check:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Check the deployed service URL
+        uses: jtalk/url-health-check-action@v3
+        with:
+          # Check the following URLs one by one sequentially
+          url: https://pokedex-danggro.onrender.com/
+          # Follow redirects, or just report success on 3xx status codes
+          follow-redirect: false # Optional, defaults to "false"
+          # Fail this action after this many failed attempts
+          max-attempts: 3 # Optional, defaults to 1
+          # Delay between retries
+          retry-delay: 10s # Optional, only applicable to max-attempts > 1
+
+      - name: Notif Fail to Discord
+        uses: rjstone/discord-webhook-notify@v1
+        if: ${{failure()}}
+        with:
+          severity: error
+          description: error connect to
+          details: '${{github.event.repository.homepage}}'
+          text: Periodic Health Check
+          webhookUrl: ${{ secrets.DISCORD_WEBHOOK }}

.gitignore

@@ -1,2 +1,4 @@
 dist/
-node_modules/
+node_modules/
+.gitconfig
+makefile

app.js

@@ -1,11 +1,20 @@
-const express = require("express");
-const app = express();
+const express = require('express')
+const app = express()
 
 // Heroku dynamically sets a port
-const PORT = process.env.PORT || 5000;
+const PORT = process.env.PORT || 5000
 
-app.use(express.static("dist"));
+app.use(express.static('dist'))
+
+app.get('/version', (req, res) => {
+  res.send('check failure 19')
+  // res.send('in branch feature')
+})
+
+app.get('/health', (req, res) => {
+  res.send('ok')
+})
 
 app.listen(PORT, () => {
-  console.log("server started on port 5000");
-});
+  console.log('server started on port 5000')
+})

build_step.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+echo "Build script"
+
+# add the commands here

cypress.config.js

@@ -0,0 +1,9 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+})

cypress/e2e/e2etest.cy.js

@@ -0,0 +1,14 @@
+describe('Pokedex', function () {
+  it('front page can be opened', function () {
+    cy.visit('http://localhost:5000')
+    cy.contains('ivysaur')
+    cy.contains(
+      'Pokémon and Pokémon character names are trademarks of Nintendo.'
+    )
+  })
+  it('can navigate to particular pokemon', function () {
+    cy.visit('http://localhost:5000')
+    cy.contains('ivysaur').click()
+    cy.contains('chlorophyll')
+  })
+})

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

exercise1.md

@@ -0,0 +1,5 @@
+Tool for linting javascript code is ESLint. ESLint is an open source JavaScript linting utility originally created by Nicholas C. Zakas in June 2013. Code linting is a type of static analysis that is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines. There are code linters for most programming languages, and compilers sometimes incorporate linting into the compilation process. Tool for testing javascript code is Jest. Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!. Tools for build javascript code is Webpack. webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.
+
+Beside Jenkins and Github Actions there are Travis CI, TeamCity, Bamboo, GitLab, Azure Pipelines, CircleCI, Bitbucket Pieplines.
+
+This application will setup in a self-hosted environment, it because we use more than 1 language and many people involved. It's better to configure the setup to be flexible that can make people easier to deploy his code.