feat(next): use react-query (#320)

* ci: build next app

* feat: adding react query to fetch data

* chore: upgrade deps

* test: add e2e tests

Co-authored-by: Alan Poulain <[email protected]>

Author: malikalahfaoui

.babelrc

@@ -6,6 +6,6 @@
     "@babel/plugin-proposal-class-properties"
   ],
   "presets": [
-    "@babel/preset-env"
+    ["@babel/preset-env", { "modules": false }]
   ]
 }

.eslintrc.js renamed to .eslintrc.cjs

@@ -5,7 +5,7 @@ module.exports = {
     'node': true,
     'browser': true
   },
-  'parser': 'babel-eslint',
+  'parser': '@babel/eslint-parser',
   'parserOptions': {
     'ecmaVersion': 7,
     'sourceType': 'module'

.github/workflows/ci.yml

@@ -9,19 +9,28 @@ jobs:
   build:
     strategy:
       matrix:
-        node-version: ['14', '15']
+        node-version: ['lts/*', 'current']
 
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - name: Build Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
+      uses: actions/setup-node@v3
       with:
         node-version: ${{ matrix.node-version }}
     - run: yarn install
     - run: yarn build
     - run: yarn test
     - run: yarn lint
-    - run: yarn test-gen
+    - name: Install Playwright Browsers
+      run: yarn playwright install --with-deps
+    - run: yarn test-gen && yarn test-app
     - run: yarn test-gen-env
+    - run: yarn test-gen-openapi3
     - run: yarn check
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -1,3 +1,6 @@
 /lib/
 /node_modules/
-/tmp
+/playwright/.cache/
+/playwright-report/
+/test-results/
+/tmp/

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn lint-staged

jest.config.js

@@ -0,0 +1,3 @@
+export default {
+  runner: "jest-light-runner",
+};

package.json

@@ -9,7 +9,8 @@
     "src",
     "templates"
   ],
-  "main": "lib/index",
+  "type": "module",
+  "exports": "./lib/index.js",
   "repository": "api-platform/client-generator",
   "homepage": "https://github.com/api-platform/client-generator",
   "bugs": "https://github.com/api-platform/client-generator/issues",
@@ -18,35 +19,40 @@
   "devDependencies": {
     "@babel/cli": "^7.0.0",
     "@babel/core": "^7.0.0",
+    "@babel/eslint-parser": "^7.0.0",
     "@babel/plugin-proposal-class-properties": "^7.0.0",
     "@babel/plugin-proposal-export-default-from": "^7.0.0",
     "@babel/plugin-transform-flow-strip-types": "^7.0.0",
     "@babel/plugin-transform-runtime": "^7.0.0",
     "@babel/preset-env": "^7.6.0",
-    "babel-eslint": "^10.0.0",
-    "babel-jest": "^26.0.0",
-    "eslint": "^7.17.0",
-    "eslint-config-prettier": "^7.1.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-prettier": "^3.3.0",
-    "husky": "^4.3.6",
-    "jest": "^26.6.3",
-    "lint-staged": "^10.5.3",
+    "@playwright-testing-library/test": "4.3.0-beta.1",
+    "@playwright/test": "^1.25.0",
+    "babel-jest": "^28.1.0",
+    "eslint": "^8.22.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.2.0",
+    "husky": "^8.0.0",
+    "jest": "^28.1.0",
+    "jest-light-runner": "^0.3.0",
+    "lint-staged": "^13.0.0",
+    "start-server-and-test": "^1.14.0",
     "tmp": "^0.2.1"
   },
   "dependencies": {
-    "@api-platform/api-doc-parser": "^0.12.0",
+    "@api-platform/api-doc-parser": "^0.15.0",
     "@babel/runtime": "^7.0.0",
-    "chalk": "^4.1.0",
-    "commander": "^8.2.0",
+    "chalk": "^5.0.0",
+    "commander": "^9.4.0",
     "handlebars": "^4.0.12",
     "handlebars-helpers": "^0.10.0",
     "isomorphic-fetch": "^3.0.0",
     "mkdirp": "^1.0.4",
-    "prettier": "^2.2.1",
+    "prettier": "^2.7.0",
     "sprintf-js": "^1.1.1"
   },
   "scripts": {
+    "prepare": "husky install",
     "test": "jest src",
     "lint": "eslint src",
     "fix": "eslint --fix src",
@@ -55,16 +61,12 @@
     "watch": "babel --watch src -d lib --ignore '*.test.js'",
     "test-gen": "rm -rf ./tmp && yarn build && ./lib/index.js https://demo.api-platform.com ./tmp/react -g react && ./lib/index.js https://demo.api-platform.com ./tmp/react-native -g react-native && ./lib/index.js https://demo.api-platform.com ./tmp/next -g next && ./lib/index.js https://demo.api-platform.com ./tmp/vue -g vue",
     "test-gen-custom": "rm -rf ./tmp && yarn build && babel src/generators/ReactGenerator.js src/generators/BaseGenerator.js -d ./tmp/gens && cp -r ./templates/react ./templates/react-common ./templates/entrypoint.js ./tmp/gens && ./lib/index.js https://demo.api-platform.com ./tmp/react-custom -g \"$(pwd)/tmp/gens/ReactGenerator.js\" -t ./tmp/gens",
-    "test-gen-swagger": "rm -rf ./tmp && yarn build && ./lib/index.js  https://demo.api-platform.com/docs.json ./tmp/react -f swagger && ./lib/index.js https://demo.api-platform.com/docs.json ./tmp/react-native -g react-native -f swagger && ./lib/index.js https://demo.api-platform.com/docs.json ./tmp/vue -g vue -f swagger",
-    "test-gen-env": "rm -rf ./tmp && yarn build && API_PLATFORM_CLIENT_GENERATOR_ENTRYPOINT=https://demo.api-platform.com API_PLATFORM_CLIENT_GENERATOR_OUTPUT=./tmp ./lib/index.js"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+    "test-gen-openapi3": "rm -rf ./tmp && yarn build && ./lib/index.js https://demo.api-platform.com/docs.json ./tmp/react -f openapi3 && ./lib/index.js https://demo.api-platform.com/docs.json ./tmp/react-native -g react-native -f openapi3 && ./lib/index.js https://demo.api-platform.com/docs.json ./tmp/vue -g vue -f openapi3",
+    "test-gen-env": "rm -rf ./tmp && yarn build && API_PLATFORM_CLIENT_GENERATOR_ENTRYPOINT=https://demo.api-platform.com API_PLATFORM_CLIENT_GENERATOR_OUTPUT=./tmp ./lib/index.js",
+    "test-app": "rm -rf ./tmp/app && mkdir -p ./tmp/app && yarn create next-app --typescript ./tmp/app/next && yarn --cwd ./tmp/app/next add lodash.get lodash.has isomorphic-unfetch formik react-query && yarn --cwd ./tmp/app/next add -D @types/lodash && cp -R ./tmp/next/* ./tmp/app/next && rm ./tmp/app/next/pages/index.tsx && rm -rf ./tmp/app/next/pages/api && yarn --cwd ./tmp/app/next build && start-server-and-test 'yarn --cwd ./tmp/app/next start' http://127.0.0.1:3000/books 'yarn playwright test'"
   },
   "lint-staged": {
-    "src/**/*.js": "npm run lint"
+    "src/**/*.js": "yarn lint --fix"
   },
   "bin": {
     "generate-api-platform-client": "./lib/index.js"

playwright.config.ts

@@ -0,0 +1,107 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+import { devices } from '@playwright/test';
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+const config: PlaywrightTestConfig = {
+  testDir: './tests',
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 5000
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+      },
+    },
+
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari'],
+      },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   port: 3000,
+  // },
+};
+
+export default config;

src/generators.js

@@ -1,12 +1,12 @@
 import fs from "fs";
-import NextGenerator from "./generators/NextGenerator";
-import NuxtGenerator from "./generators/NuxtGenerator";
-import ReactGenerator from "./generators/ReactGenerator";
-import ReactNativeGenerator from "./generators/ReactNativeGenerator";
-import TypescriptInterfaceGenerator from "./generators/TypescriptInterfaceGenerator";
-import VueGenerator from "./generators/VueGenerator";
-import VuetifyGenerator from "./generators/VuetifyGenerator";
-import QuasarGenerator from "./generators/QuasarGenerator";
+import NextGenerator from "./generators/NextGenerator.js";
+import NuxtGenerator from "./generators/NuxtGenerator.js";
+import ReactGenerator from "./generators/ReactGenerator.js";
+import ReactNativeGenerator from "./generators/ReactNativeGenerator.js";
+import TypescriptInterfaceGenerator from "./generators/TypescriptInterfaceGenerator.js";
+import VueGenerator from "./generators/VueGenerator.js";
+import VuetifyGenerator from "./generators/VuetifyGenerator.js";
+import QuasarGenerator from "./generators/QuasarGenerator.js";
 
 function wrap(cl) {
   return ({ hydraPrefix, templateDirectory }) =>

src/generators/NextGenerator.js

@@ -1,7 +1,7 @@
 import chalk from "chalk";
 import handlebars from "handlebars";
-import hbh_comparison from "handlebars-helpers/lib/comparison";
-import BaseGenerator from "./BaseGenerator";
+import hbh_comparison from "handlebars-helpers/lib/comparison.js";
+import BaseGenerator from "./BaseGenerator.js";
 
 export default class NextGenerator extends BaseGenerator {
   constructor(params) {
@@ -10,6 +10,7 @@ export default class NextGenerator extends BaseGenerator {
     this.routeAddedtoServer = false;
     this.registerTemplates(`next/`, [
       // components
+      "components/common/Layout.tsx",
       "components/common/Pagination.tsx",
       "components/common/ReferenceLinks.tsx",
       "components/foo/List.tsx",
@@ -26,6 +27,7 @@ export default class NextGenerator extends BaseGenerator {
       "pages/foos/[id]/edit.tsx",
       "pages/foos/index.tsx",
       "pages/foos/create.tsx",
+      "pages/_app.tsx",
 
       // utils
       "utils/dataAccess.ts",
@@ -97,13 +99,17 @@ export default class NextGenerator extends BaseGenerator {
     // copy with regular name
     [
       // components
+      "components/common/Layout.tsx",
       "components/common/Pagination.tsx",
       "components/common/ReferenceLinks.tsx",
 
       // types
       "types/collection.ts",
       "types/item.ts",
 
+      // pages
+      "pages/_app.tsx",
+
       // utils
       "utils/dataAccess.ts",
       "utils/mercure.ts",