@forsakringskassan/devindex-menu

npm install --save-dev @forsakringskassan/devindex-menu

Menu for development mode that can be used with advantage together with fapimock-express.

Usage

The menu can be used in several types of applications. If you're using vue-cli, it can be used as follows:

require("@forsakringskassan/devindex-menu")([
    {
        key: "slow-load",
        title: "Delay",
        reloadOnChange: true,
        execOnChange: "aGlobalMethod",
        options: [
            { title: "Normal loading", value: false },
            { title: "Slow loading", value: true },
        ],
    },
]);

When execOnChange is set to a value, the global function with this name will be called on onChange of the dropdown list.

With options

The menu can have an options object as an optional second parameter.

require("@forsakringskassan/devindex-menu")(
    [
        {
            key: "example",
            title: "Example",
            options: [
                { title: "Default mock", value: "default" },
                { title: "Special mock", value: "special" },
            ],
        },
    ],
    {
        position: "right",
    },
);

API

Menu content

[
    {
        key: String,
        title: String,
        type: String (optional, default, "select")
        description: String (optional),
        reloadOnChange: Boolean (optional, default: true),
        sessionStorage: Boolean (optional, default: false),
        execOnChange: String (optional),
        options: [], Array (see types below)
    },
]

Options

[
    {
        position: "left" | "right" (optional, default: "left"), // Controls if the menu is placed on the left or the right side of the page.
    },
]

Use mocks directly

It's also possible to use mocks for @forsakringskassan/apimock-express directly. In the types MockMatcher and Mock from apimock-express there is support for metadata that is read by the devindex-menu.

When defining the mock, add meta.title and responses[i].response.label. These correspond to the dropdown label and the name of each option respectively.

 export default defineMock({
+    meta: {
+        title: "GET /dog",
+    },
     responses: [
         createResponseByCookie(
             cookie,
             "border-collie-200",
             {
+                label: "Border collie (200)",
                 body: dogBorderCollie,
             },
         ),
     ],
     defaultResponse: {
+        label: "Default – dachshund (200)",
         status: 200,
         body: dogDachshund,
     },
 );

Inside the application, the mock is then sent directly to devindexMenu.

 import devindexMenu from "@forsakringskassan/devindex-menu";
+import getDogMock from "dog-api/dist/api/private/v1/dog_get.js";

 devindexMenu([
     {
         key: "api-post-leash",
         title: "POST /leash",
         options: [{
             title: "Tracking leash (200)",
             value: "tracking-leash-200"
         }],
     },
+    getDogMock,
 ]);

Type Definitions

select (default)

{ title: String, value: String },

Links

{ title: String, href: String },

Scenario

{
    type: "scenario";
    key: string;
    title: string;
    description?: string;
    cookies: Record<string, string | undefined>;
 },

SessionStorage - Pre-filling

If you specify sessionStorage as true, the value will be saved under key in sessionStorage.

In the example below, you'll get a select with the title Pre-filling. If you make a selection, sessionStorage will get a value fk-dog-model.

import coco from "./tests/mock/prefilled/coco.json";
import fido from "./tests/mock/prefilled/fido.json";

require("@forsakringskassan/devindex-menu")([
    {
        key: "fk-dog-model",
        title: "Pre-filling",
        sessionStorage: true,
        options: [
            { title: "None", value: "" },
            { title: "Coco", value: coco },
            { title: "Fido", value: fido },
        ],
    },
]);

Examples

require("@forsakringskassan/devindex-menu")([
    {
        key: "disable-translate",
        title: "Text",
        options: [
            { title: "Translated text", value: "default" },
            { title: "Show text keys", value: "true" },
        ],
    },
    {
        type: "links",
        title: "Links",
        options: [
            {
                title: "Applicant reviews application for additional cost",
                href: "/#/review/8",
            },
        ],
    },
]);

Development

To compile styling: npm run build