Pr 01 pokedex

.eslintrc.js

@@ -1,49 +1,35 @@
 module.exports = {
-  "env": {
-    "browser": true,
-    "es6": true,
-    "jest/globals": true
+  env: {
+    browser: true,
+    es6: true,
+    "jest/globals": true,
+    "cypress/globals": true,
+    node: 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"
-  ],
-  "rules": {
-    "indent": [
-      "error",
-        2
-      ],
-    "linebreak-style": [
-      "error",
-      "unix"
-    ],
-    "quotes": [
-      "error",
-      "single"
-    ],
-    "semi": [
-      "error",
-      "never"
-    ],
-    "eqeqeq": "error",
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+  plugins: ["react", "jest", "cypress"],
+  rules: {
+    indent: ["error", 2],
+    //"linebreak-style": ["error", "unix"],
+    quotes: ["off"],
+    //semi: ["error", "never"],
+    eqeqeq: "error",
     "no-trailing-spaces": "error",
-    "object-curly-spacing": [
-      "error", "always"
-    ],
-    "arrow-spacing": [
-      "error", { "before": true, "after": true }
-    ],
+    "object-curly-spacing": ["error", "always"],
+    "arrow-spacing": ["error", { before: true, after: true }],
     "no-console": "error",
-    "react/prop-types": 0
-  }
-}
+    "react/prop-types": 0,
+  },
+};

.github/workflows/hello.yml

@@ -0,0 +1,20 @@
+name: Hello World!
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  hello_world_job:
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Say hello
+        run: |
+          echo "Hello World!"
+      - name: Now it is
+        run: |
+          date
+      - name: Directory content
+        run: |
+          ls -l

.github/workflows/pipeline.yml

@@ -0,0 +1,51 @@
+name: Deployment pipeline
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches: [main]
+    types: [opened, synchronize]
+
+jobs:
+  simple_deployment_pipeline:
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+      - name: Install dependencies
+        run: npm install
+      - name: Run linter
+        run: npm run eslint
+      - name: Build prod
+        run: npm run build
+      - 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: Trigger deployment
+        if: ${{ github.event_name == 'push' && !contains(join(github.event.commits.*.message, ' '), '#skip')}}
+        run: curl https://api.render.com/deploy/srv-${{ secrets.RENDER_SERVICE_ID }}?key=${{ secrets.RENDER_API_KEY }}
+
+  tag_release:
+    needs: simple_deployment_pipeline # This ensures the job runs after the simple_deployment_pipeline job
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Fetch the entire history of the repository, including all branches and tags
+      - name: Bump version and push tag
+        if: github.ref == 'refs/heads/main' && !contains(join(github.event.commits.*.message, ' '), '#skip') # Ensure this job only runs on the main branch and if #skip is not in the commit message
+        uses: anothrNick/github-tag-action@1.70.0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          DEFAULT_BUMP: patch # Set default bump to patch
+          TAG_PREFIX: "v" # Optional: prefix for the tag
+          DRY_RUN: false

.gitignore

@@ -1,2 +1,3 @@
 dist/
-node_modules/
+node_modules/
+.env

app.js

@@ -1,11 +1,28 @@
+require("dotenv").config();
 const express = require("express");
 const app = express();
 
 // get the port from env variable
+//const PORT = process.env.PORT || 3001;
 const PORT = process.env.PORT || 5000;
 
 app.use(express.static("dist"));
 
+app.get("/version", (req, res) => {
+  res.send("666"); // change this string to ensure a new version deployed
+});
+
+app.get("/health", (req, res) => {
+  res.send("ok");
+});
+
+// app.get('/health', (req, res) => {
+//   // eslint-disable-next-line no-constant-condition
+//   if (true) throw('error...  ')
+//   res.send('ok')
+// })
+
 app.listen(PORT, () => {
+  // eslint-disable-next-line no-console
   console.log(`server started on port ${PORT}`);
 });

cypress.config.js

@@ -0,0 +1,12 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    // eslint-disable-next-line no-unused-vars
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    //baseUrl: "http://localhost:8080",
+  },
+  env: { BACKEND: "http://localhost:5000" },
+});

cypress/e2e/pokemon_app.cy.js

@@ -0,0 +1,17 @@
+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."
+    );
+  });
+
+  describe("Pokemon Page Test", function () {
+    it("Navigate to Ivysaur page which contains text chlorophyll", function () {
+      cy.visit("http://localhost:5000");
+      cy.contains("ivysaur").click();
+      cy.contains("chlorophyll");
+    });
+  });
+});

cypress/support/commands.js

@@ -0,0 +1,67 @@
+// ***********************************************
+// 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) => { ... })
+
+//   cy.request("POST", "http://localhost:3003/api/login", {
+//     username,
+//     password,
+//     failOnStatusCode: false,
+//   })
+Cypress.Commands.add("login", ({ username, password }) => {
+  cy.request({
+    url: "http://localhost:3003/api/login",
+    method: "POST",
+    body: { username, password },
+  }).then(({ body }) => {
+    localStorage.setItem("loggedBlogappUser", JSON.stringify(body));
+    cy.visit("http://localhost:5173");
+  });
+});
+
+Cypress.Commands.add("loginError", ({ username, password }) => {
+  cy.request({
+    url: "http://localhost:3003/api/login",
+    method: "POST",
+    body: { username, password },
+    failOnStatusCode: false,
+  }).then((response) => {
+    expect(response.status).to.eq(401);
+  });
+});
+
+Cypress.Commands.add("createBlog", ({ title, author, url, likes }) => {
+  cy.request({
+    url: "http://localhost:3003/api/blogs",
+    method: "POST",
+    body: { title, author, url, likes },
+    headers: {
+      Authorization: `Bearer ${
+        JSON.parse(localStorage.getItem("loggedBlogappUser")).token
+      }`,
+    },
+  });
+
+  cy.visit("http://localhost:5173");
+});

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')