feat: Semaine 13

Semaine_13/Jour_03/.gitlab-ci.yml

@@ -0,0 +1,107 @@
+stages:
+  - install
+  - scan
+  - test
+  - build&deploy
+
+# Install JavaScript dependencies
+
+frontend_install:
+  stage: install
+  image: node:latest
+  script:
+    - npm install
+  cache:
+    key:
+      files:
+        - package-lock.json
+    paths:
+      - node_modules/
+
+# Scan project (linter & security)
+
+eslint_1_4:
+  stage: scan
+  image: node:lts
+  cache:
+    key:
+      files:
+        - package-lock.json
+    paths:
+      - node_modules/
+  script:
+    - npm run lint
+
+variables:
+  SONAR_USER_HOME: "${CI_PROJECT_DIR}/.sonar"  # Defines the location of the analysis task cache
+  GIT_DEPTH: "0"  # Tells git to fetch all the branches of the project, required by the analysis task
+sonarcloud-check:
+  stage: scan
+  image:
+    name: sonarsource/sonar-scanner-cli:latest
+    entrypoint: [""]
+  cache:
+    - key: "${CI_JOB_NAME}"
+      paths:
+        - .sonar/cache
+    - key:
+        files:
+          - package-lock.json
+      paths:
+        - node_modules/
+  script:
+    - sonar-scanner
+
+# Test project (functiunality & charge)
+
+jest_3_4:
+  stage: test
+  image: node:lts
+  cache:
+    key:
+      files:
+        - package-lock.json
+    paths:
+      - node_modules/
+  dependencies:
+    - sonarcloud-check
+  script:
+    - npm run test
+
+cypress_4_4:
+  stage: test
+  image: cypress/browsers:latest
+  dependencies:
+    - jest_3_4
+  script:
+    - npm install
+    - npm run dev &
+    - npx cypress run --browser firefox --spec "cypress/e2e/experience.cy.js"
+    - npx cypress run --browser chrome --spec "cypress/e2e/experience.cy.js"
+
+
+# Build & Deploy project
+
+pages:
+  stage: build&deploy
+  image: node:lts
+  cache:
+    key:
+      files:
+        - package-lock.json
+    paths:
+      - node_modules/
+  script:
+    - npm run build
+    - mv build public
+  artifacts:
+    paths:
+      # The folder that contains the files to be exposed at the Page URL
+      - public
+  rules:
+    # This ensures that only pushes to the default branch will trigger
+    # a pages deploy
+    - if: $CI_MERGE_REQUEST_TARGET_BRANCH_NAME == "preprod"
+
+
+  

Semaine_13/Jour_03/cypress.config.js

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

Semaine_13/Jour_03/cypress/e2e/experience.cy.js

@@ -0,0 +1,44 @@
+function makeRandomString(length) {
+  let string = '';
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  const charactersLength = characters.length;
+  let counter = 0;
+  while (counter < length) {
+    string += characters.charAt(Math.floor(Math.random() * charactersLength));
+    counter += 1;
+  }
+  return string;
+};
+
+const frontendUrl = process.env.FRONTEND_URL;
+
+describe('Frontend Morning News', () => {
+  beforeEach("Site frontal", () => {
+    cy.visit('http://localhost:3001')
+  });
+  
+  it("Inscription", () => {
+    const username = makeRandomString(6)
+    const password = makeRandomString(10)
+    cy.contains('Bookmarks');
+    cy.get('.Header_linkContainer__hNrE8 > :nth-child(2)').click();
+    cy.wait(500);
+    cy.get('[class*="Header_userSection"]').click();
+    cy.wait(500);
+    cy.contains('Sign-up');
+    cy.get('#signUpUsername').type(username);
+    cy.wait(500);
+    cy.get('#signUpPassword').type(password);
+    cy.wait(500);
+    cy.get('#register').click();
+    cy.wait(500);
+    cy.contains(username);
+  });
+/*
+  it("Marque-pages", () => {
+    cy.contains('Articles');
+    cy.get(':nth-child(1) > [class*="Article_articleHeader] > fa-eye-slash > path').click();
+  });
+*/
+})
+

Semaine_13/Jour_03/cypress/fixtures/example.json

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

Semaine_13/Jour_03/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) => { ... })

Semaine_13/Jour_03/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')

Semaine_13/Jour_03/eslint.config.js

@@ -0,0 +1,23 @@
+const globals = require("globals");
+const babelParser = require("@babel/eslint-parser");
+
+module.export = [
+  {files: ["**/*.{js,mjs,cjs,jsx}"]},
+  {files: ["**/*.js"], languageOptions: {sourceType: "commonjs"}},
+  {languageOptions: {
+    globals: globals.browser,
+    parser: babelParser,
+    parserOptions: {
+      "ecmaFeatures": {
+        "jsx": true,
+        "modules": true
+      },
+      requireConfigFile: false,
+      babelOptions: {
+        babelrc: false,
+        configFile: false,
+        presets: ["@babel/preset-env"]
+      }
+    }
+  }},
+];

Semaine_13/Jour_03/jest.config.js

@@ -0,0 +1,12 @@
+const nextJest = require('next/jest');
+
+const createJestConfig = nextJest({
+  dir: './',
+});
+
+const customJestConfig = {
+  moduleDirectories: ['node_modules', '<rootDir>/'],
+  testEnvironment: 'jest-environment-jsdom',
+};
+
+module.exports = createJestConfig(customJestConfig);

Semaine_13/Jour_03/next.config.js

@@ -0,0 +1,14 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    reactStrictMode: true,
+    images: {
+      domains: ['cdn.vox-cdn.com'],
+    },
+    eslint: {
+      // Warning: This allows production builds to successfully complete even if
+      // your project has ESLint errors.
+      ignoreDuringBuilds: true,
+    },
+  };
+  
+module.exports = nextConfig;

Semaine_13/Jour_03/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "morningnews-frontend-part5",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev -p 3001",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "test": "jest --config ./jest.config.js --collectCoverage --coverageDirectory='./coverage' --ci --reporters=default --watchAll=false"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
+    "@reduxjs/toolkit": "^1.8.2",
+    "antd": "^4.21.2",
+    "moment": "^2.29.3",
+    "next": "^12.1.6",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-moment": "^1.1.2",
+    "react-redux": "^8.0.2",
+    "redux-persist": "^6.0.0"
+  },
+  "devDependencies": {
+    "@next/eslint-plugin-next": "^15.0.2",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.2.0",
+    "cypress": "^13.15.1",
+    "eslint": "8.0.0",
+    "eslint-config-next": "15.0.2",
+    "eslint-plugin-react": "^7.37.2",
+    "globals": "^15.11.0",
+    "jest": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
+    "node-fetch": "2"
+  }
+}

Semaine_13/Jour_03/sonar-project.properties

@@ -0,0 +1,16 @@
+sonar.projectKey=cbolloretti_mediachad-frontend
+sonar.organization=cbolloretti
+
+# This is the name and version displayed in the SonarCloud UI.
+sonar.projectName=MediaCHAD-FrontEnd
+sonar.projectVersion=1.0
+
+
+# Path is relative to the sonar-project.properties file. Replace "\" by "/" on Windows.
+sonar.sources=.
+
+# Encoding of the source code. Default is default system encoding
+sonar.sourceEncoding=UTF-8
+
+# Option verbeuse pour déboguage
+sonar.verbose=true

Semaine_13/Jour_03/tests/index.test.js

@@ -0,0 +1,5 @@
+let bonjour = "Hello World from Jest !"
+
+test('Hello World', () => {
+    expect(bonjour).toBe("Hello World from Jest !");
+});