Merge pull request #367 from mocks-server/release

Release v3.6

.github/workflows/build.yml

@@ -6,6 +6,7 @@ on:
     branches:
       - master
       - release
+      - feat-concepts
   pull_request:
 jobs:
   get-affected:

README.md

@@ -1,4 +1,4 @@
-<p align="center"><a href="https://mocks-server.org" target="_blank" rel="noopener noreferrer"><img width="120" src="https://www.mocks-server.org/img/logo_120.png" alt="Mocks Server logo"></a></p>
+<p align="center"><a href="https://www.mocks-server.org" target="_blank" rel="noopener noreferrer"><img width="120" src="https://www.mocks-server.org/img/logo_120.png" alt="Mocks Server logo"></a></p>
 
 <p align="center">
   <a href="https://github.com/mocks-server/main/actions?query=workflow%3Abuild+branch%3Amaster"><img src="https://github.com/mocks-server/main/workflows/build/badge.svg?branch=master" alt="Build Status"></a>
@@ -15,17 +15,27 @@
 
 ## Introduction
 
-This project provides a mock server that can simulate multiple responses for the same API routes. It can be added as a dependency of your project, and started simply running an NPM command.
+Node.js mock server running live, interactive mocks in place of real APIs. __It makes able to define many different responses for a same route__, so, you can change the whole mocked API behavior by simply changing the response of one or many routes while the server is running.
 
-It is easy to use both for development and testing because the responses of the mocked API and other configuration options can be changed while the server is running using:
+## Usage
 
-* Interactive command line user interface
-* REST API client
-* Other integration tools, such as [Cypress][cypress] commands
+Define your mocked API routes in JSON, JavaScript or TypeScript files. Mocks Server loads them automatically and watches for changes. Defining routes using any of the available APIs is also possible.
+
+Routes can be defined in many ways, from plain objects to Express middlewares, and they can act in different ways also, from sending a response to proxy the request to another host.
+
+## Configuration
+
+Configure the server simply modifying the configuration file at the root folder of your project, or use command line arguments, or even environment variables.
+
+For changing options while it is running, you can also use any of the available integrations tools that enable live interactions with Mocks Server.
+
+## Integrations
+
+Providing a Javascript API, an interactive command line interface and a REST API for __changing the responses of the mocked API while it is running, it is easy to use both for development and testing__. Tools providing integrations with other ecosystems are also available, such as Cypress commands.
 
 ## Documentation
 
-To check out docs, visit [mocks-server.org][website-url].
+To check out docs, visit [www.mocks-server.org][website-url].
 
 ## Ecosystem
 

mocks/admin-api-client-data-provider-e2e-mocks/mocks/mocks.json → mocks/admin-api-client-data-provider-e2e-mocks/mocks/collections.json

@@ -1,11 +1,11 @@
 [
   {
     "id": "base",
-    "routesVariants": ["get-user:1"]
+    "routes": ["get-user:1"]
   },
   {
     "id": "user2",
     "from": "base",
-    "routesVariants": ["get-user:2"]
+    "routes": ["get-user:2"]
   }
 ]

mocks/admin-api-client-data-provider-e2e-mocks/mocks/routes/users.js

@@ -6,16 +6,16 @@ module.exports = [
     variants: [
       {
         id: "1",
-        handler: "json",
-        response: {
+        type: "json",
+        options: {
           status: 200,
           body: [{ email: "foo@foo.com" }],
         },
       },
       {
         id: "2",
-        handler: "json",
-        response: {
+        type: "json",
+        options: {
           status: 200,
           body: [{ email: "foo2@foo2.com" }],
         },

mocks/admin-api-client-data-provider-e2e-react-app/src/App.js

@@ -4,7 +4,7 @@ import { storeManager } from "@data-provider/core";
 
 import About from "./modules/about";
 import Settings from "./modules/settings";
-import Mocks from "./modules/mocks";
+import Mocks from "./modules/collections";
 import CurrentRouteVariant from "./modules/current-route-variant";
 import Routes from "./modules/routes";
 import Alerts from "./modules/alerts";

mocks/admin-api-client-data-provider-e2e-react-app/src/modules/about/AboutView.js

@@ -1,19 +1,25 @@
+import { useMemo } from "react";
+
 import PropTypes from "prop-types";
 
 const format = (value) => {
   return typeof value === "boolean" ? value.toString() : value;
 };
 
 const AboutView = ({ about }) => {
-  console.log(about);
+  const versions = useMemo(() => {
+    return (about && about.versions) || {};
+  }, [about]);
+
   return (
     <div className="content">
       <p className="content__title">About</p>
       <ul>
-        {Object.keys(about).map((key) => {
+        {Object.keys(versions).map((key) => {
           return (
             <li key={key}>
-              <b>{key}</b>: <span data-testid={`about-${key}`}>{format(about[key])}</span>
+              <b>{key}</b>:
+              <span data-testid={`about-version-${key}`}>{format(versions[key])}</span>
             </li>
           );
         })}

mocks/admin-api-client-data-provider-e2e-react-app/src/modules/collections/CollectionsController.js

@@ -0,0 +1,8 @@
+import { withData } from "@data-provider/react";
+import { collections } from "@mocks-server/admin-api-client-data-provider";
+
+import CollectionsView from "./CollectionsView";
+
+const CollectionsController = withData(collections, "collections")(CollectionsView);
+
+export default CollectionsController;

mocks/admin-api-client-data-provider-e2e-react-app/src/modules/collections/CollectionsView.js

@@ -0,0 +1,28 @@
+import PropTypes from "prop-types";
+
+const CollectionsView = ({ collections }) => {
+  return (
+    <div className="content">
+      <p className="content__title">Mocks</p>
+      <ul>
+        {collections.map((collection) => {
+          return (
+            <li
+              key={collection.id}
+              data-testid={`collection-${collection.id}`}
+              className="collections-collection-item"
+            >
+              {JSON.stringify(collection)}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+CollectionsView.propTypes = {
+  collections: PropTypes.array,
+};
+
+export default CollectionsView;

mocks/admin-api-client-data-provider-e2e-react-app/src/modules/collections/index.js

@@ -0,0 +1 @@
+export { default } from "./CollectionsController";

mocks/admin-api-client-data-provider-e2e-react-app/src/modules/current-route-variant/CurrentRouteVariantController.js

@@ -1,19 +1,21 @@
 import { Selector } from "@data-provider/core";
 import { withData } from "@data-provider/react";
 import {
-  settings,
-  mocksModel,
-  mocks,
-  routesVariantsModel,
+  config,
+  collection,
+  collections,
+  variant,
 } from "@mocks-server/admin-api-client-data-provider";
 
 import CurrentRouteVariantView from "./CurrentRouteVariantView";
 
-const currentMock = new Selector(
-  settings,
-  mocks,
-  (_query, settingsResults, mocksResults) => {
-    return mocksModel.queries.byId(settingsResults.mocks.selected || mocksResults[0].id);
+const currentCollection = new Selector(
+  config,
+  collections,
+  (_query, configResults, collectionsResults) => {
+    return collection.queries.byId(
+      configResults.mock.collections.selected || collectionsResults[0].id
+    );
   },
   {
     initialState: {
@@ -23,9 +25,9 @@ const currentMock = new Selector(
 );
 
 const currentRouteVariant = new Selector(
-  currentMock,
+  currentCollection,
   (_query, mockResults) => {
-    return routesVariantsModel.queries.byId(mockResults.routesVariants[0]);
+    return variant.queries.byId(mockResults.routes[0]);
   },
   {
     initialState: {
@@ -36,7 +38,7 @@ const currentRouteVariant = new Selector(
 
 const CurrentRouteVariantController = withData(
   currentRouteVariant,
-  "routeVariant"
-)(withData(currentMock, "mock")(CurrentRouteVariantView));
+  "variant"
+)(withData(currentCollection, "collection")(CurrentRouteVariantView));
 
 export default CurrentRouteVariantController;

mocks/admin-api-client-data-provider-e2e-react-app/src/modules/current-route-variant/CurrentRouteVariantView.js

@@ -1,47 +1,50 @@
 import PropTypes from "prop-types";
-import { settings } from "@mocks-server/admin-api-client-data-provider";
+import { config } from "@mocks-server/admin-api-client-data-provider";
 
-const CurrentRouteVariantView = ({ mock, routeVariant }) => {
+const CurrentRouteVariantView = ({ collection, variant }) => {
   const setBehaviorBase = () => {
-    settings.update({
-      mocks: {
-        selected: "base",
+    config.update({
+      mock: {
+        collections: {
+          selected: "base",
+        },
       },
     });
   };
 
   const setBehaviorUser2 = () => {
-    settings.update({
-      mocks: {
-        selected: "user2",
+    config.update({
+      mock: {
+        collections: {
+          selected: "user2",
+        },
       },
     });
   };
 
   return (
     <div className="content">
       <p className="content__title">
-        Current Mock: <span data-testid="current-mock-id">{mock.id}</span>
+        Current Collection: <span data-testid="current-collection-id">{collection.id}</span>
       </p>
-      <p data-testid="current-mock">{JSON.stringify(mock)}</p>
+      <p data-testid="current-collection">{JSON.stringify(collection)}</p>
       <p className="content__title">
-        Current Route Variant:{" "}
-        <span data-testid="current-route-variant-id">{routeVariant.id}</span>
+        Current Route Variant: <span data-testid="current-variant-id">{variant.id}</span>
       </p>
-      <p data-testid="current-route-variant">{JSON.stringify(routeVariant)}</p>
-      <button onClick={setBehaviorBase} data-testid="set-mock-base">
-        Set mock base
+      <p data-testid="current-variant">{JSON.stringify(variant)}</p>
+      <button onClick={setBehaviorBase} data-testid="set-collection-base">
+        Set collection base
       </button>
-      <button onClick={setBehaviorUser2} data-testid="set-mock-user2">
-        Set mock user2
+      <button onClick={setBehaviorUser2} data-testid="set-collection-user2">
+        Set collection user2
       </button>
     </div>
   );
 };
 
 CurrentRouteVariantView.propTypes = {
-  mock: PropTypes.object,
-  routeVariant: PropTypes.object,
+  collection: PropTypes.object,
+  variant: PropTypes.object,
 };
 
 export default CurrentRouteVariantView;

mocks/admin-api-client-data-provider-e2e-react-app/src/modules/settings/SettingsController.js

@@ -1,8 +1,8 @@
 import { withData } from "@data-provider/react";
-import { settings } from "@mocks-server/admin-api-client-data-provider";
+import { config } from "@mocks-server/admin-api-client-data-provider";
 
 import SettingsView from "./SettingsView";
 
-const SettingsController = withData(settings, "settings")(SettingsView);
+const SettingsController = withData(config, "config")(SettingsView);
 
 export default SettingsController;

mocks/admin-api-client-data-provider-e2e-react-app/src/modules/settings/SettingsView.js

@@ -10,15 +10,15 @@ const format = (value) => {
   return value;
 };
 
-const SettingsView = ({ settings }) => {
+const SettingsView = ({ config }) => {
   return (
     <div className="content">
-      <p className="content__title">Current Settings</p>
+      <p className="content__title">Current Config</p>
       <ul>
-        {Object.keys(settings).map((key) => {
+        {Object.keys(config).map((key) => {
           return (
             <li key={key}>
-              <b>{key}</b>: <span data-testid={`settings-${key}`}>{format(settings[key])}</span>
+              <b>{key}</b>: <span data-testid={`config-${key}`}>{format(config[key])}</span>
             </li>
           );
         })}
@@ -28,7 +28,7 @@ const SettingsView = ({ settings }) => {
 };
 
 SettingsView.propTypes = {
-  settings: PropTypes.object,
+  config: PropTypes.object,
 };
 
 export default SettingsView;