129 openapi generator

.github/workflows/api-client.yaml

@@ -35,13 +35,27 @@ jobs:
         working-directory: ./api-client
         run: cp .env.sample .env
 
+      - name: Download a openapi_spec
+        uses: dawidd6/action-download-artifact@v2
+        with:
+          name: openapi_spec_artifact
+          workflow: openapi.yaml
+          workflow_conclusion: success
+          path: ./docs/generated
+
+      - name: Generating Typescript API
+        working-directory: ./api-client
+        run: yarn run generate-api
+
       - name: Lint
         working-directory: ./api-client
         run: yarn run lint
+        shell: bash
 
       - name: Unit tests
         working-directory: ./api-client
         run: yarn run test
+        shell: bash
 
   after-tests:
     needs: tests # run after tests

.github/workflows/openapi.yaml

@@ -0,0 +1,98 @@
+# A lot of this was inspired by https://brunoscheufler.com/blog/2022-04-24-required-github-actions-jobs-in-a-monorepo
+
+name: OpenAPI spec
+
+on:
+  pull_request:
+    paths:
+      - 'api/src/Entity'
+      - '.github/workflows/openapi.yaml'
+jobs:
+  change-detection:
+    runs-on: ubuntu-latest
+    outputs:
+      openapi: ${{ steps.changes.outputs.openapi }}
+    steps:
+      - uses: dorny/paths-filter@v2
+        id: changes
+        with:
+          list-files: shell
+          filters: |
+            openapi:
+              - 'api/src/Entity/**'
+  build:
+    needs: change-detection
+    if: needs.change-detection.outputs.openapi == 'true'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Start the containers
+        working-directory: ./api
+        run: docker-compose -f docker-compose.yml -f docker-compose.test.yml up -d --build
+
+      - name: Install composer packages
+        working-directory: ./api
+        run: docker-compose -f docker-compose.yml -f docker-compose.test.yml exec -T api composer install
+
+      - name: Run Database migrations
+        working-directory: ./api
+        run: docker-compose -f docker-compose.yml -f docker-compose.test.yml exec -T api bin/console --no-interaction doctrine:migration:migrate
+
+      - name: Generate openapi.yaml
+        working-directory: ./api
+        run: docker-compose exec -T api bash -c "bin/console api:openapi:export --yaml" > ../docs/generated/openapi.yaml
+
+      - name: Archive openapi artifacts
+        uses: actions/upload-artifact@v3
+        with:
+          name: openapi_spec_artifact
+          path: |
+            docs/generated
+
+      - name: Stop containers
+        working-directory: ./api
+        if: always()
+        run: docker-compose -f docker-compose.yml -f docker-compose.test.yml down
+
+  after-build:
+    needs: build # run after tests
+    runs-on: ubuntu-latest
+    if: success() # only run when all test have passed
+    # store success output flag for ci job
+    outputs:
+      success: ${{ steps.setoutput.outputs.success }}
+    steps:
+      - id: setoutput
+        run: echo "::set-output name=success::true"
+
+  dummy-step:
+    runs-on: ubuntu-latest
+    needs: change-detection
+    # runs if API was not changed
+    if: needs.change-detection.outputs.openapi == 'false'
+    outputs:
+      success: ${{ steps.setoutput.outputs.success }}
+    steps:
+      - id: setoutput
+        run: echo "::set-output name=success::true"
+
+
+  # step that will be used for required status check
+  # make sure it has a unique name! this will always run, but
+  # after the tests & after-tests steps or the dummy step in case
+  # the API was not modified
+  ci_openapi:
+    runs-on: ubuntu-20.04
+    if: always()
+    needs: [build, after-build, dummy-step]
+    steps:
+      - run: |
+          passed="${{ needs.after-build.outputs.success || needs.dummy-step.outputs.success }}"
+          if [[ $passed == "true" ]]; then
+            echo "Build passed"
+            exit 0
+          else
+            echo "Build failed"
+            exit 1
+          fi

api-client/.eslintrc.js

@@ -1,11 +1,14 @@
 module.exports = {
     extends: [
         'eslint:recommended',
-        'plugin:@typescript-eslint/recommended'
+        'plugin:@typescript-eslint/recommended',
+        'plugin:import/recommended',
+        'plugin:import/typescript'
     ],
     parser: '@typescript-eslint/parser',
     plugins: [
-        '@typescript-eslint'
+        '@typescript-eslint',
+        'import'
     ],
     root: true,
     ignorePatterns: [

api-client/.gitignore

@@ -1,3 +1,4 @@
 node_modules
 coverage
-.env
+.env
+src/generated

api-client/jest.config.ts

@@ -2,7 +2,7 @@ import type {Config} from '@jest/types';
 
 const config: Config.InitialOptions = {
     collectCoverage: true,
-    collectCoverageFrom: ["./src/**", "./mockData/**", "!./src/routes.json"],
+    collectCoverageFrom: ["./src/**", "!./src/generated/openapi/**", "./mockData/**", "!./src/routes.json"],
     testPathIgnorePatterns: ["./src/routes.json"],
     // TODO #88  https://github.com/howToCodeWell/code-quiz/issues/88
     // This needs to be un-commented once we reach 90% code coverage

api-client/openapitools.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "./node_modules/@openapitools/openapi-generator-cli/config.schema.json",
+  "spaces": 2,
+  "generator-cli": {
+    "version": "6.2.0"
+  }
+}

api-client/package.json

@@ -9,14 +9,18 @@
   "scripts": {
     "start": "npx ts-node src/server.ts",
     "lint": "eslint .",
-    "test": "jest"
+    "test": "jest",
+    "generate-api": "rm -rf src/generated/openapi; openapi-generator-cli generate -i ../docs/generated/openapi.yaml -g typescript-axios -o src/generated/openapi --additional-properties=npmName=restClient,supportsES6=true,npmVersion=8.19.1,withInterfaces=true,typescriptThreePlus=true"
   },
   "devDependencies": {
+    "@openapitools/openapi-generator-cli": "^2.5.2",
     "@types/jest": "^29.0.3",
     "@types/json-server": "^0.14.4",
     "@typescript-eslint/eslint-plugin": "^5.38.1",
     "@typescript-eslint/parser": "^5.38.1",
     "eslint": "^8.24.0",
+    "eslint-import-resolver-typescript": "^3.5.1",
+    "eslint-plugin-import": "^2.26.0",
     "jest": "^29.0.3",
     "json-server": "^0.17.0",
     "ts-jest": "^29.0.2"

api-client/src/api/apiClient.ts

@@ -1,15 +1,23 @@
-import axios from "axios";
 import * as dotenv from "dotenv"
+
+import {Configuration, QuestionApi, QuizApi} from "../generated/openapi/"
+
 dotenv.config()
 
-export const axiosClient = axios.create({
-    baseURL: `${process.env.API_BASE_PATH}:${process.env.API_PORT}`,
-    headers: {
-        'Accept': 'application/json',
-        'Content-Type': 'application/json'
+const configuration = new Configuration({
+    basePath: `${process.env.API_BASE_PATH}:${process.env.API_PORT}`,
+    baseOptions: {
+        headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+        }
     }
-});
+})
+
+const apiClient = {
+    quizAPI: new QuizApi(configuration),
+    questionAPI: new QuestionApi(configuration),
+    configuration: configuration
+}
 
-export default {
-    axiosClient
-};
+export default apiClient

api-client/src/api/mockClient.ts

@@ -1,7 +1,7 @@
 import * as dotenv from "dotenv"
 import * as jsonServer from "json-server"
-import data from "../mockData"
 import routes from "../routes.json"
+import data from "../mockData";
 
 export function mockApp() {
     dotenv.config()
@@ -14,6 +14,16 @@ export function mockApp() {
     const router = jsonServer.router(data)
     const middlewares = jsonServer.defaults()
 
+    server.get('/quiz/*', (req, res) => {
+        const id = (req.params[0])
+        res.jsonp(data.quiz[id -1])
+    })
+
+    server.get('/question/*', (req, res) => {
+        const id = (req.params[0])
+        res.jsonp(data.question[id -1])
+    })
+
     server.use(middlewares)
     server.use(router)
     return server.listen(process.env.API_PORT)

api-client/src/api/requestHandlers/questionRequest.ts

@@ -0,0 +1,5 @@
+import apiClient from "../apiClient";
+
+export function getById(id: string) {
+    return apiClient.questionAPI.apiQuestionIdGet(id)
+}

api-client/src/api/requestHandlers/quizRequest.ts

@@ -1,5 +1,9 @@
-import {axiosClient} from "../apiClient";
+import apiClient from "../apiClient";
+
+export function getById(id: string) {
+    return apiClient.quizAPI.apiQuizIdGet(id)
+}
 
 export function getAll() {
-    return axiosClient.get('/quiz')
+    return apiClient.quizAPI.apiQuizzesGetCollection()
 }

api-client/src/mockData/htmlQuiz/htmlQuestions.ts

@@ -1,16 +1,63 @@
-import {QuestionDTO} from "../../model/QuestionDTO"
-import {HTMLAnswerOne, HTMLAnswerTwo} from "./htmlAnswers";
+import {QuestionJsonldQuestionRead} from "../../generated/openapi"
 
-const HTMLQuestions: QuestionDTO[] = [
+const HTMLQuestions: QuestionJsonldQuestionRead[] = [
     {
-        id: "1",
+        '@context': "/api/v1/contexts/Question",
+        '@id': "/api/v1/question/1",
+        '@type': "Question",
         content: "What is the <aside> tag for?",
-        answers: HTMLAnswerOne,
+        answers: [
+            {
+                '@id': "/api/v1/answers/1",
+                '@type': "Answer",
+                content: "Primary content",
+                is_correct: false,
+            },
+            {
+                '@id': "/api/v1/answers/2",
+                '@type': "Answer",
+                content: "Empty content",
+                is_correct: false,
+            },
+            {
+                '@id': "/api/v1/answers/3",
+                '@type': "Answer",
+                content: "Indirectly related content",
+                is_correct: true,
+            },
+        ],
     },
     {
-        id: "2",
+        '@context': "/api/v1/contexts/Question",
+        '@id': "/api/v1/question/2",
+        '@type': "Question",
         content: "How many HTML heading levels are there?",
-        answers: HTMLAnswerTwo,
+        answers: [
+            {
+                '@id': "/api/v1/answers/4",
+                '@type': "Answer",
+                content: "Primary content",
+                is_correct: false,
+            },
+            {
+                '@id': "/api/v1/answers/5",
+                '@type': "Answer",
+                content: "Answer",
+                is_correct: true,
+            },
+            {
+                '@id': "/api/v1/answers/6",
+                '@type': "Answer",
+                content: "Indirectly related content",
+                is_correct: false,
+            },
+            {
+                '@id': "/api/v1/answers/7",
+                '@type': "Answer",
+                content: "Unlimited",
+                is_correct: false,
+            },
+        ],
     },
 ]