Add tests to the app generated by create-react-admin with ra-data-fakerest

jest.config.js

@@ -25,6 +25,7 @@ module.exports = {
         '/lib/',
         '/esm/',
         '/examples/simple/',
+        '/packages/create-react-admin/templates',
     ],
     transformIgnorePatterns: [
         '[/\\\\]node_modules[/\\\\](?!(@hookform)/).+\\.(js|jsx|mjs|ts|tsx)$',

packages/create-react-admin/src/app.tsx

@@ -122,7 +122,11 @@ export default function App(props: Props) {
         ...InitialProjectConfiguration,
         dataProvider: props.dataProvider,
         authProvider: props.authProvider,
-        resources: props.resources?.includes('skip') ? [] : props.resources,
+        resources: props.resources?.includes('skip')
+            ? []
+            : props.dataProvider === 'ra-data-fakerest'
+            ? ['posts', 'comments']
+            : props.resources,
         installer: props.install,
         name: sanitizedName,
     };

packages/create-react-admin/src/generateProject.ts

@@ -1,6 +1,7 @@
 import path from 'path';
 import fs from 'fs';
 import fsExtra from 'fs-extra';
+import merge from 'lodash/merge';
 import { ProjectConfiguration } from './ProjectState.js';
 
 export const generateProject = async (state: ProjectConfiguration) => {
@@ -19,15 +20,15 @@ export const generateProject = async (state: ProjectConfiguration) => {
     if (state.dataProvider !== 'none') {
         copyDirectoryFiles(
             path.join(__dirname, '../templates', state.dataProvider),
-            path.join(path.join(projectDirectory, 'src')),
+            projectDirectory,
             ['package.json', '.env', 'README.md', 'help.txt']
         );
     }
 
     if (state.authProvider !== 'none') {
         copyDirectoryFiles(
             path.join(__dirname, '../templates', state.authProvider),
-            path.join(path.join(projectDirectory, 'src')),
+            projectDirectory,
             ['package.json', '.env', 'README.md', 'help.txt']
         );
     }
@@ -114,26 +115,17 @@ const generatePackageJson = (
     projectDirectory: string,
     state: ProjectConfiguration
 ) => {
-    const dataProviderDeps = getTemplateDependencies(state.dataProvider);
-    const authProviderDeps = getTemplateDependencies(state.authProvider);
-    const allDeps = {
-        ...BasePackageJson.dependencies,
-        ...dataProviderDeps,
-        ...authProviderDeps,
-    };
-    const allDepsNames = Object.keys(allDeps).sort();
-    const dependencies = allDepsNames.reduce(
-        (acc, depName) => ({
-            ...acc,
-            [depName]: allDeps[depName],
-        }),
-        {}
+    const basePackageJson = getTemplatePackageJson('common');
+    const dataProviderPackageJson = getTemplatePackageJson(state.dataProvider);
+    const authProviderPackageJson = getTemplatePackageJson(state.authProvider);
+    const packageJson = merge(
+        basePackageJson,
+        dataProviderPackageJson,
+        authProviderPackageJson,
+        {
+            name: state.name,
+        }
     );
-    const packageJson = {
-        name: state.name,
-        ...BasePackageJson,
-        dependencies,
-    };
 
     fs.writeFileSync(
         path.join(projectDirectory, 'package.json'),
@@ -142,9 +134,9 @@ const generatePackageJson = (
 };
 
 const generateGitIgnore = (projectDirectory: string) => {
-    fs.writeFileSync(
-        path.join(projectDirectory, '.gitignore'),
-        defaultGitIgnore
+    fs.copyFileSync(
+        path.join(__dirname, '../templates/common/gitignore'),
+        path.join(projectDirectory, '.gitignore')
     );
 };
 
@@ -182,39 +174,7 @@ const getTemplateEnv = (template: string) => {
     return undefined;
 };
 
-const BasePackageJson = {
-    private: true,
-    scripts: {
-        dev: 'vite',
-        build: 'vite build',
-        serve: 'vite preview',
-        'type-check': 'tsc --noEmit',
-        lint: 'eslint --fix --ext .js,.jsx,.ts,.tsx ./src',
-        format: 'prettier --write ./src',
-    },
-    dependencies: {
-        react: '^18.2.0',
-        'react-admin': '^4.16.0',
-        'react-dom': '^18.2.0',
-    },
-    devDependencies: {
-        '@typescript-eslint/parser': '^5.60.1',
-        '@typescript-eslint/eslint-plugin': '^5.60.1',
-        '@types/node': '^20.10.7',
-        '@types/react': '^18.0.22',
-        '@types/react-dom': '^18.0.7',
-        '@vitejs/plugin-react': '^4.0.1',
-        eslint: '^8.43.0',
-        'eslint-config-prettier': '^8.8.0',
-        'eslint-plugin-react': '^7.32.2',
-        'eslint-plugin-react-hooks': '^4.6.0',
-        prettier: '^2.8.8',
-        typescript: '^5.1.6',
-        vite: '^4.3.9',
-    },
-};
-
-const getTemplateDependencies = (template: string) => {
+const getTemplatePackageJson = (template: string) => {
     if (template === 'none' || template === '') {
         return {};
     }
@@ -226,7 +186,7 @@ const getTemplateDependencies = (template: string) => {
     );
     if (fs.existsSync(packageJsonPath)) {
         const packageJson = fs.readFileSync(packageJsonPath, 'utf-8');
-        return JSON.parse(packageJson).dependencies;
+        return JSON.parse(packageJson);
     }
     return {};
 };
@@ -344,29 +304,3 @@ const replaceTokensInFile = (filePath: string, state: ProjectConfiguration) => {
     fileContent = replaceTokens(fileContent, state);
     fs.writeFileSync(filePath, fileContent);
 };
-
-const defaultGitIgnore = `# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-dist
-dist-ssr
-*.local
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-`;

packages/create-react-admin/templates/common/.eslintrc.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
     "extends": [
         "eslint:recommended",
         "plugin:react/recommended",
@@ -10,7 +10,8 @@ module.exports = {
     "plugins": ["@typescript-eslint"],
     "env": {
         "browser": true,
-        "es2021": true
+        "es2021": true,
+        "node": true
     },
     "settings": {
         "react": {

packages/create-react-admin/templates/common/gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/create-react-admin/templates/common/package.json

@@ -0,0 +1,31 @@
+{
+    "private": true,
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "serve": "vite preview",
+        "type-check": "tsc --noEmit",
+        "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx ./src",
+        "format": "prettier --write ./src"
+    },
+    "dependencies": {
+        "react": "^18.2.0",
+        "react-admin": "^4.16.0",
+        "react-dom": "^18.2.0"
+    },
+    "devDependencies": {
+        "@typescript-eslint/parser": "^5.60.1",
+        "@typescript-eslint/eslint-plugin": "^5.60.1",
+        "@types/node": "^20.10.7",
+        "@types/react": "^18.0.22",
+        "@types/react-dom": "^18.0.7",
+        "@vitejs/plugin-react": "^4.0.1",
+        "eslint": "^8.43.0",
+        "eslint-config-prettier": "^8.8.0",
+        "eslint-plugin-react": "^7.32.2",
+        "eslint-plugin-react-hooks": "^4.6.0",
+        "prettier": "^2.8.8",
+        "typescript": "^5.1.6",
+        "vite": "^4.3.9"
+    }
+}

packages/create-react-admin/templates/ra-data-fakerest/package.json

@@ -1,5 +1,13 @@
 {
+    "scripts": {
+        "test": "vitest"
+    },
     "dependencies": {
         "ra-data-fakerest": "^4.16.0"
+    },
+    "devDependencies": {
+        "@testing-library/react": "^14.1.2",
+        "jsdom": "^23.1.0",
+        "vitest": "^1.1.3"
     }
 }

packages/create-react-admin/templates/ra-data-fakerest/src/App.spec.tsx

@@ -0,0 +1,32 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { App } from "./App";
+
+test("should pass", async () => {
+	vi.spyOn(window, "scrollTo").mockImplementation(() => {});
+	render(<App />);
+
+	// Sign in
+	fireEvent.change(await screen.findByLabelText("Username *"), {
+		target: { value: "janedoe" },
+	});
+	fireEvent.change(await screen.findByLabelText("Password *"), {
+		target: { value: "password" },
+	});
+	fireEvent.click(await screen.findByText("Sign in"));
+
+	// Test posts
+	fireEvent.click(await screen.findByText("Post 1"));
+	fireEvent.change(await screen.findByDisplayValue("Post 1"), {
+		target: { value: "Post 1 edited" },
+	});
+	fireEvent.click(await screen.findByText("Save"));
+	await screen.findByText("Post 1 edited");
+
+	// Test comments
+	fireEvent.click(await screen.findByText("Comments"));
+	fireEvent.click(await screen.findByText("Comment 1"));
+	fireEvent.click(await screen.findByDisplayValue("#0"));
+	fireEvent.click(await screen.findByText("#11"));
+	fireEvent.click(await screen.findByText("Save"));
+	await screen.findByText("#11", { selector: "a *" });
+});

packages/create-react-admin/templates/ra-data-fakerest/src/dataProvider.ts

@@ -0,0 +1,4 @@
+import fakeRestDataProvider from 'ra-data-fakerest';
+import data from './data.json';
+
+export const dataProvider = fakeRestDataProvider(data, process.env.NODE_ENV !== 'test');

packages/create-react-admin/templates/ra-data-fakerest/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["vitest/globals"]
+  },
+  "include": [
+    "src"
+  ]
+}

packages/create-react-admin/templates/ra-data-fakerest/vite.config.ts

@@ -0,0 +1,19 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()],
+    define: {
+        'process.env': process.env,
+    },
+    server: {
+        host: true,
+    },
+    base: './',
+    test: {
+        globals: true,
+        environment: 'jsdom'
+    }
+});