Add tests

.github/workflows/build.yml

@@ -0,0 +1,25 @@
+name: Build & Test
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+          cache: 'yarn'
+      - run: yarn install --immutable --immutable-cache --check-cache
+      - run: yarn prod
+      - run: yarn test-coverage
+      - name: Coveralls
+        uses: coverallsapp/github-action@master
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -2,3 +2,4 @@
 mix-manifest.json
 npm-debug.log
 package-lock.json
+coverage

README.md

@@ -1,4 +1,4 @@
-# TSML UI
+# TSML UI   [![Coverage Status](https://coveralls.io/repos/github/code4recovery/tsml-ui/badge.svg?branch=main)](https://coveralls.io/github/code4recovery/tsml-ui?branch=main)
 
 TSML UI (12 Step Meeting List User Interface) is an interactive meeting finder makes the [12 Step Meeting List](https://github.com/code4recovery/12-step-meeting-list) interface available for use on any web page, regardless of platform.
 
@@ -19,18 +19,18 @@ You don't need to do anything other than enable HTTPS on your website. To ensure
 ### Add custom types
 
 Here is an example of extending the `tsml_react_config` object to include a definition for an additional meeting type.
-
-    var tsml_react_config = {
-      timezone: 'Pacific/Honolulu',
-      strings: {
-        en: {
-          types: {
-            BEACH: 'Beach Meeting',
-          },
-        },
+```js
+var tsml_react_config = {
+  timezone: 'Pacific/Honolulu',
+  strings: {
+    en: {
+      types: {
+        BEACH: 'Beach Meeting',
       },
-    };
-
+    },
+  },
+};
+```
 A list of AA meeting types can be found in the [Meeting Guide format spec](https://github.com/code4recovery/spec).
 
 ## Frequently asked questions

babel.config.js

@@ -0,0 +1,7 @@
+/** @type {import("@babel/core").TransformOptions} */
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript',
+  ],
+};

jest.config.js

@@ -0,0 +1,9 @@
+/** @type {import("@jest/types").Config.InitialOptions} */
+module.exports = {
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  collectCoverageFrom: [
+    '<rootDir>/src/**/*.(j|t)s*',
+    '!<rootDir>/src/(types|i18n)/*',
+  ],
+};

jest.setup.js

@@ -0,0 +1,18 @@
+const savedLocation = window.location;
+const savedHistory = window.history;
+
+beforeEach(() => {
+  delete window.location;
+  delete window.history;
+
+  window.history = {
+    pushState: jest.fn(),
+  };
+
+  window.location = new URL('https://test.com');
+});
+
+afterEach(() => {
+  window.location = savedLocation;
+  window.history = savedHistory;
+});

package.json

@@ -10,12 +10,18 @@
     "postprod": "rm -f mix-manifest.json",
     "prod": "mix --production",
     "watch": "mix watch",
-    "watch-poll": "mix watch -- --watch-options-poll=1000"
+    "watch-poll": "mix watch -- --watch-options-poll=1000",
+    "test": "jest",
+    "test-watch": "jest --watch",
+    "test-coverage": "jest --coverage"
   },
   "devDependencies": {
     "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.16.7",
+    "@types/jest": "^27.4.0",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
+    "jest": "^27.4.7",
     "laravel-mix": "^6.0.27",
     "sass": "^1.37.5",
     "sass-loader": "^12.1.0",

src/helpers/query-string.spec.ts

@@ -0,0 +1,39 @@
+import { getQueryString, setQueryString } from './query-string';
+import { stringify } from 'querystring';
+import { settings } from './settings';
+import { formatUrl } from './format';
+
+jest.mock('./settings', () => ({
+  settings: { filters: [], params: [] },
+}));
+
+jest.mock('./format', () => ({
+  formatUrl: jest.fn().mockReturnValue('foo'),
+}));
+
+describe('getQueryString', () => {
+  it('returns defaults correctly', () => {
+    expect(getQueryString()).toStrictEqual({});
+  });
+
+  it('reads from url correctly', () => {
+    settings.filters.push('region');
+    settings.params.push('search');
+
+    const params = { region: ['foo'], search: 'bar' };
+
+    window.location.search = stringify(params);
+
+    expect(getQueryString()).toStrictEqual(params);
+  });
+});
+
+describe('setQueryString', () => {
+  it('calls formatUrl and pushState correctly', () => {
+    const params = { search: 'foo' };
+    setQueryString(params);
+
+    expect(formatUrl).toHaveBeenCalledWith(params);
+    expect(window.history.pushState).toHaveBeenCalledWith('', '', 'foo');
+  });
+});

src/helpers/query-string.ts

@@ -28,7 +28,7 @@ export function getQueryString() {
 }
 
 //save input values to query string
-export function setQueryString(input: TSMLReactConfig['defaults']) {
+export function setQueryString(input: Partial<TSMLReactConfig['defaults']>) {
   const url = formatUrl(input);
 
   //set the query string with the history api