feat: add plugin options validation (#63)

* feat: add plugin options validation

Note: plugin options validation requires gatsby v2.25.0 or later.

* test: add plugin options validation tests

.circleci/config.yml

@@ -16,6 +16,7 @@ jobs:
       - node/install-packages:
           pkg-manager: yarn
       - run: yarn validate
+      - run: yarn test
       - persist_to_workspace:
           root: ~/
           paths:

.eslintignore

@@ -1,4 +1,5 @@
+gatsby-node.js
 gatsby-ssr.js
-!src/gatsby-ssr.js
 theme-hydration-script-tag.js
-!src/theme-hydration-script-tag.js
+!__tests__/**
+!src/**

.eslintrc.js

@@ -1,3 +1,8 @@
 module.exports = {
-  extends: ['plugin:wkovacs64/react', 'prettier', 'prettier/react'],
+  extends: [
+    'plugin:wkovacs64/react',
+    'plugin:wkovacs64/jest',
+    'prettier',
+    'prettier/react',
+  ],
 };

.gitignore

@@ -163,7 +163,8 @@ package-lock.json
 .netlify
 
 # build output
+gatsby-node.js
 gatsby-ssr.js
-!src/gatsby-ssr.js
 theme-hydration-script-tag.js
-!src/theme-hydration-script-tag.js
+!__tests__/**
+!src/**

.prettierignore

@@ -1,5 +1,6 @@
 package.json
+gatsby-node.js
 gatsby-ssr.js
-!src/gatsby-ssr.js
 theme-hydration-script-tag.js
-!src/theme-hydration-script-tag.js
+!__tests__/**
+!src/**

__tests__/gatsby-node.js

@@ -0,0 +1,67 @@
+import { testPluginOptionsSchema } from 'gatsby-plugin-utils';
+import { pluginOptionsSchema } from '../gatsby-node';
+
+describe('plugin options schema', () => {
+  it('accepts valid options', async () => {
+    const options = {
+      classNameDark: 'dark',
+      classNameLight: 'light',
+      storageKey: 'theme',
+      minify: false,
+    };
+
+    const { isValid, errors } = await testPluginOptionsSchema(
+      pluginOptionsSchema,
+      options,
+    );
+
+    expect(isValid).toBe(true);
+    expect(errors).toEqual([]);
+  });
+
+  it('rejects extra options', async () => {
+    const options = {
+      classNameDark: 'dark',
+      classNameLight: 'light',
+      storageKey: 'theme',
+      minify: false,
+      tinyOrPickle: 'pickle',
+    };
+
+    const { isValid, errors } = await testPluginOptionsSchema(
+      pluginOptionsSchema,
+      options,
+    );
+
+    expect(isValid).toBe(false);
+    expect(errors).toMatchInlineSnapshot(`
+      Array [
+        "\\"tinyOrPickle\\" is not allowed",
+      ]
+    `);
+  });
+
+  it('rejects invalid option types', async () => {
+    const options = {
+      classNameDark: 1,
+      classNameLight: 2,
+      storageKey: 3,
+      minify: 4,
+    };
+
+    const { isValid, errors } = await testPluginOptionsSchema(
+      pluginOptionsSchema,
+      options,
+    );
+
+    expect(isValid).toBe(false);
+    expect(errors).toMatchInlineSnapshot(`
+      Array [
+        "\\"classNameDark\\" must be a string",
+        "\\"classNameLight\\" must be a string",
+        "\\"storageKey\\" must be a string",
+        "\\"minify\\" must be a boolean",
+      ]
+    `);
+  });
+});

package.json

@@ -16,6 +16,7 @@
   "main": "index.js",
   "files": [
     "index.js",
+    "gatsby-node.js",
     "gatsby-ssr.js",
     "theme-hydration-script-tag.js"
   ],
@@ -29,13 +30,15 @@
   },
   "scripts": {
     "build": "babel src --out-dir .",
-    "clean": "del-cli gatsby-ssr.js theme-hydration-script-tag.js",
+    "clean": "del-cli gatsby-node.js gatsby-ssr.js theme-hydration-script-tag.js",
     "cm": "git-cz",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,html,css,json,md,mdx,yml,yaml}\"",
     "lint": "eslint --ext \".js,.jsx,.ts,.tsx\" .",
     "prebuild": "npm run --silent clean",
     "prepare": "cross-env NODE_ENV=production npm run --silent build",
     "prepublishOnly": "npm run --silent validate",
+    "test": "jest",
+    "test:watch": "jest --watch --onlyChanged",
     "validate": "npm-run-all --silent --parallel lint build"
   },
   "config": {
@@ -64,11 +67,15 @@
     "del-cli": "3.0.1",
     "eslint": "7.13.0",
     "eslint-plugin-wkovacs64": "10.0.0",
+    "gatsby": "2.26.1",
+    "gatsby-plugin-utils": "0.4.0",
     "husky": "4.3.0",
+    "jest": "26.6.3",
     "lint-staged": "10.5.1",
     "npm-run-all": "4.1.5",
     "prettier": "2.1.2",
     "react": "17.0.1",
+    "react-dom": "17.0.1",
     "semantic-release": "17.2.3"
   },
   "peerDependencies": {

src/gatsby-node.js

@@ -0,0 +1,16 @@
+exports.pluginOptionsSchema = ({ Joi }) => {
+  return Joi.object({
+    classNameDark: Joi.string()
+      .default('dark-mode')
+      .description('CSS class name applied in dark mode'),
+    classNameLight: Joi.string()
+      .default('light-mode')
+      .description('CSS class name applied in light mode'),
+    storageKey: Joi.string()
+      .default('darkMode')
+      .description('localStorage key used to persist mode'),
+    minify: Joi.boolean()
+      .default(true)
+      .description('toggle minification of the injected script'),
+  });
+};