94 configure and write tests

.github/workflows/continuous-integration.yml

@@ -1,6 +1,12 @@
 name: Continuous Integration
 
-on: pull_request
+on:
+  pull_request:
+    branches:
+      - develop
+  push:
+    branches:
+      - develop
 
 jobs:
   check:
@@ -27,5 +33,8 @@ jobs:
       - name: Run tests
         run: yarn test
 
+      - name: Submit coverage
+        uses: codecov/codecov-action@v3
+
       - name: Try to build
         run: yarn build

__mock__/file-mock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

__mock__/gatsby.js

@@ -0,0 +1,22 @@
+const React = require('react');
+const gatsby = jest.requireActual('gatsby');
+
+module.exports = {
+  ...gatsby,
+  graphql: jest.fn(),
+  Link: jest.fn().mockImplementation(
+    // these props are invalid for an `a` tag
+    ({ activeClassName, activeStyle, getProps, innerRef, partiallyActive, ref, replace, to, ...rest }) =>
+      React.createElement('a', {
+        ...rest,
+        href: to,
+      })
+  ),
+  Slice: jest.fn().mockImplementation(({ alias, ...rest }) =>
+    React.createElement('div', {
+      ...rest,
+      'data-test-slice-alias': alias,
+    })
+  ),
+  useStaticQuery: jest.fn(),
+};

gatsby-node.ts

@@ -1,7 +1,7 @@
 import { GatsbyNode } from 'gatsby';
 import { CreateGenericPages } from './src/gatsby/createPages/createGenericPages';
 import { customizeSitePageContext } from './src/gatsby/createSchemaCustomization/customizeSitePageContext';
-import { GeneratePageMetaData } from './src/gatsby/onCreatePage/generatePageMetaData';
+import { generatePageMetaData } from './src/gatsby/onCreatePage/generatePageMetaData';
 
 export const createPages: GatsbyNode['createPages'] = async args => {
   await CreateGenericPages(args);
@@ -12,5 +12,5 @@ export const createSchemaCustomization: GatsbyNode['createSchemaCustomization']
 };
 
 export const onCreatePage: GatsbyNode<Record<string, unknown>, Queries.SitePageContext>['onCreatePage'] = async args => {
-  await GeneratePageMetaData(args);
+  await generatePageMetaData(args);
 };

jest-preprocess.js

@@ -0,0 +1,4 @@
+const babelOptions = {
+  presets: ['babel-preset-gatsby', '@babel/preset-typescript', ['@babel/preset-react', { runtime: 'automatic' }]],
+};
+module.exports = require('babel-jest').default.createTransformer(babelOptions);

jest.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  transform: {
+    '^.+\\.[jt]sx?$': '<rootDir>/jest-preprocess.js',
+  },
+  moduleNameMapper: {
+    '.+\\.(css|styl|less|sass|scss)$': `identity-obj-proxy`,
+    '.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': `<rootDir>/__mocks__/file-mock.js`,
+  },
+  testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`, `<rootDir>.*/dist`],
+  transformIgnorePatterns: [`node_modules/(?!(gatsby|gatsby-script|gatsby-link)/)`],
+  globals: {
+    __PATH_PREFIX__: ``,
+  },
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    url: `http://localhost`,
+  },
+  setupFiles: [`<rootDir>/loadershim.js`],
+  setupFilesAfterEnv: ['<rootDir>/setup-test-env.js'],
+  collectCoverage: true,
+  collectCoverageFrom: [`src/**/*.{ts,tsx}`],
+};

loadershim.js

@@ -0,0 +1,3 @@
+global.___loader = {
+  enqueue: jest.fn(),
+};

package.json

@@ -37,13 +37,17 @@
   },
   "devDependencies": {
     "@babel/core": "7.20.12",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
     "@types/mdx": "^2.0.3",
     "@types/node": "18.11.18",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",
     "@typescript-eslint/eslint-plugin": "5.48.1",
     "@typescript-eslint/parser": "5.48.1",
     "babel-eslint": "10.1.0",
+    "babel-jest": "^29.3.1",
+    "babel-preset-gatsby": "^3.4.0",
     "eslint": "8.31.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "17.0.0",
@@ -54,6 +58,9 @@
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.32.0",
     "eslint-plugin-react-hooks": "4.6.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
     "prettier": "2.8.2",
     "svg-sprite": "^2.0.2",
     "ts-node": "10.9.1",
@@ -70,12 +77,13 @@
     "check:format": "eslint . --max-warnings 0",
     "check:types": "tsc --noEmit",
     "check:watch-types": "tsc --noEmit --watch",
+    "dev:test": "jest --watch",
     "develop": "gatsby develop",
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
     "start": "yarn run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"",
+    "test": "jest",
     "prestart": "yarn run build:sprite",
     "prebuild": "yarn run build:sprite"
   },

setup-test-env.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom"

src/components/Sprite.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { Sprite } from './Sprite';
+
+describe('<Sprite />', () => {
+  it('should match snapshot', () => {
+    const { asFragment } = render(<Sprite name="arrow" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

src/components/__snapshots__/Sprite.test.tsx.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Sprite /> should match snapshot 1`] = `
+<DocumentFragment>
+  <svg
+    height="10"
+    version="2.0"
+    width="9.387"
+  >
+    <use
+      href="/sprite.svg#arrow"
+    />
+  </svg>
+</DocumentFragment>
+`;

src/gatsby/onCreatePage/generatePageMetaData.test.ts

@@ -0,0 +1,182 @@
+import { generatePageMetaData } from './generatePageMetaData';
+
+const args: any = {
+  actions: {},
+  page: {},
+  reporter: {},
+};
+
+jest.mock('../../../content/i18n/de-CH.json', () => ({}), { virtual: true });
+
+describe('generatePageMetaData', () => {
+  beforeEach(() => {
+    args.actions = {
+      createPage: jest.fn(),
+      deletePage: jest.fn(),
+    };
+    args.page = {};
+    args.reporter = {
+      warn: jest.fn(),
+    };
+  });
+
+  it('returns without page context', async () => {
+    await generatePageMetaData(args);
+    expect(args.actions.deletePage).not.toBeCalled();
+    expect(args.actions.createPage).not.toBeCalled();
+  });
+
+  it('returns when is not a stateful created page', async () => {
+    args.page = {
+      context: {},
+      isCreatedByStatefulCreatePages: false,
+    };
+    await generatePageMetaData(args);
+    expect(args.actions.deletePage).not.toBeCalled();
+    expect(args.actions.createPage).not.toBeCalled();
+  });
+
+  it('returns without locale pages id', async () => {
+    args.page = {
+      context: {},
+      isCreatedByStatefulCreatePages: true,
+    };
+    await generatePageMetaData(args);
+    expect(args.actions.deletePage).not.toBeCalled();
+    expect(args.actions.createPage).not.toBeCalled();
+  });
+
+  it('returns when locale pages id is blacklisted', async () => {
+    args.page = {
+      context: {
+        localePagesId: 'dev-404-page',
+      },
+      isCreatedByStatefulCreatePages: true,
+    };
+    await generatePageMetaData(args);
+    expect(args.actions.deletePage).not.toBeCalled();
+    expect(args.actions.createPage).not.toBeCalled();
+  });
+
+  it('returns with warning when there are no messages for locale', async () => {
+    args.page = {
+      context: {
+        localePagesId: 'some.page',
+      },
+      isCreatedByStatefulCreatePages: true,
+    };
+    await generatePageMetaData(args);
+    expect(args.reporter.warn).toBeCalledWith(`Page context locale is null or couldn't find locale undefined.`);
+    expect(args.actions.deletePage).not.toBeCalled();
+    expect(args.actions.createPage).not.toBeCalled();
+  });
+
+  it('returns with warning when the key site.meta.title is not in the messages', async () => {
+    args.page = {
+      context: {
+        localePagesId: 'index',
+        locale: 'de-CH',
+      },
+      isCreatedByStatefulCreatePages: true,
+    };
+    await generatePageMetaData(args);
+    expect(args.reporter.warn).toBeCalledWith(`Missing key site.meta.title in messages.`);
+    expect(args.actions.deletePage).not.toBeCalled();
+    expect(args.actions.createPage).not.toBeCalled();
+  });
+
+  it('set the meta data with warning when the page title key is not in the messages', async () => {
+    args.page = {
+      context: {
+        localePagesId: 'some.fictional.page',
+        locale: 'en-US',
+      },
+      isCreatedByStatefulCreatePages: true,
+    };
+    await generatePageMetaData(args);
+    expect(args.reporter.warn).toBeCalledWith(`Missing key page.some.fictional.page.meta.title in messages.`);
+    expect(args.reporter.warn).toBeCalledWith(`Missing key page.some.fictional.page.meta.description in messages.`);
+    expect(args.actions.createPage).toMatchInlineSnapshot(`
+      [MockFunction] {
+        "calls": [
+          [
+            {
+              "context": {
+                "locale": "en-US",
+                "localePagesId": "some.fictional.page",
+                "metaData": {
+                  "description": undefined,
+                  "title": "openscript Ltd.",
+                },
+              },
+              "isCreatedByStatefulCreatePages": true,
+            },
+          ],
+        ],
+        "results": [
+          {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    `);
+  });
+
+  it('sets the meta data', async () => {
+    args.page = {
+      context: {
+        localePagesId: 'index',
+        locale: 'en-US',
+      },
+      isCreatedByStatefulCreatePages: true,
+    };
+    await generatePageMetaData(args);
+    expect(args.actions.deletePage).toMatchInlineSnapshot(`
+      [MockFunction] {
+        "calls": [
+          [
+            {
+              "context": {
+                "locale": "en-US",
+                "localePagesId": "index",
+              },
+              "isCreatedByStatefulCreatePages": true,
+            },
+          ],
+        ],
+        "results": [
+          {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    `);
+    expect(args.actions.createPage).toMatchInlineSnapshot(`
+      [MockFunction] {
+        "calls": [
+          [
+            {
+              "context": {
+                "locale": "en-US",
+                "localePagesId": "index",
+                "metaData": {
+                  "description": "Companions for adventures in the world of bits and bytes.",
+                  "title": "Home - openscript Ltd.",
+                },
+              },
+              "isCreatedByStatefulCreatePages": true,
+            },
+          ],
+        ],
+        "results": [
+          {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      }
+    `);
+  });
+});

src/gatsby/onCreatePage/generatePageMetaData.ts

@@ -27,7 +27,7 @@ function createPageTitle(siteTitle: string, pageTitle?: string) {
   return pageTitle ? `${pageTitle} - ${siteTitle}` : siteTitle;
 }
 
-export async function GeneratePageMetaData({ actions, page, reporter }: CreatePageArgs<Queries.SitePageContext>) {
+export async function generatePageMetaData({ actions, page, reporter }: CreatePageArgs<Queries.SitePageContext>) {
   const { createPage, deletePage } = actions;
   if (!page.context || !page.isCreatedByStatefulCreatePages) {
     return;