Merge pull request #333 from EnCiv/civ-serv-listening#332

Civ serv listening#332

Author: ddfridley

.storybook/main.js

@@ -0,0 +1,56 @@
+const webpack = require('webpack')
+
+module.exports = {
+    stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+    framework: '@storybook/react',
+    core: {
+        builder: 'webpack5',
+    },
+    webpackFinal: async config => {
+        // config may or may not have these properties so we have to make sure they are there and then modify them to ensure we don't delete anything
+        if (!config.resolve) config.resolve = {}
+        if (!config.resolve.fallback) config.resolve.fallback = {}
+        Object.assign(config.resolve.fallback, {
+            fs: false,
+            buffer: require.resolve('buffer'),
+            path: require.resolve('path-browserify'),
+            stream: require.resolve('stream-browserify'),
+            os: require.resolve('os-browserify/browser'),
+            zlib: require.resolve('browserify-zlib'),
+            constants: require.resolve('constants-browserify'),
+            util: require.resolve('util'),
+        })
+        if (!config.plugins) config.plugins = []
+        config.plugins.push(new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'] }))
+        config.plugins.push(new webpack.ProvidePlugin({ process: 'process/browser' })) // fix "process is not defined" error: // (do "npm install process" before running the build)
+        for (const plugin of config.plugins) {
+            if (plugin.definitions) {
+                if (plugin.definitions['process.env']) {
+                    console.info(
+                        '.storybook/main.js: deleting process.env from',
+                        { plugin },
+                        'see comments in that file'
+                    )
+                    delete plugin.definitions['process.env']
+                    /* 
+        webpack will try to string replace process.env with what is assigned in the definition. 
+          // But if there is code in the browser side that does something like "if(process.env)" it will get replaced and cause syntax error and break the existing code
+
+        definitions{
+          ...
+          "process.env": "{\"NODE_ENV\":\"development\",\"NODE_PATH\":[],\"STORYBOOK\":\"true\",\"PUBLIC_URL\":\".\"}",
+          ...
+        }
+        
+        causes this: 
+        if (!process.env.NODE_ENV) process.env.NODE_ENV = 'development'
+        to become
+        if (!{"NODE_ENV":"development","NODE_PATH":["/usr/lib64/node_modules"],"STORYBOOK":"true","PUBLIC_URL":"."}) {"NODE_ENV":"development","NODE_PATH":["/usr/lib64/node_modules"],"STORYBOOK":"true","PUBLIC_URL":"."} = {};
+*/
+                }
+            }
+        }
+        return config
+    },
+}

.storybook/preview.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { ThemeProvider } from 'react-jss'
+import theme from '../app/theme'
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+}
+
+export const decorators = [
+  Story => {
+    if (typeof window.logger === 'undefined') window.logger = console
+    if (typeof socket === 'undefined') window.socket = {}
+    window.socket.NoSocket = true
+    return (
+      <ThemeProvider theme={theme}>
+        <div style={{ backgroundColor: theme.backgroundColorApp }}>
+          <Story />
+        </div>
+      </ThemeProvider>
+    )
+  },
+]

app/lib/__tests__/set-or-delete-with-messages.js

@@ -0,0 +1,211 @@
+import setOrDeleteWithMessages from '../set-or-delete-with-messages'
+
+test('change the value of a property', () => {
+  const dst = { a: 1 }
+  const src = { a: 2 }
+  let messages = []
+  setOrDeleteWithMessages(dst, src, messages)
+  expect(messages).toMatchInlineSnapshot(`
+    Array [
+      "a: changing 1 to 2",
+    ]
+  `)
+})
+
+test('change the value of a property and leave other property alone', () => {
+  const dst = { a: 1, b: 2 }
+  const src = { a: 2 }
+  let messages = []
+  setOrDeleteWithMessages(dst, src, messages)
+  expect(dst).toMatchObject(src)
+  expect(messages).toMatchInlineSnapshot(`
+    Array [
+      "a: changing 1 to 2",
+    ]
+  `)
+})
+
+test('adding an obj', () => {
+  const dst = { a: 1, b: 2 }
+  const src = { c: { d: 4, e: 5 } }
+  let messages = []
+  setOrDeleteWithMessages(dst, src, messages)
+  expect(dst).toMatchObject(src)
+  expect(messages).toMatchInlineSnapshot(`
+    Array [
+      "c: changing not-present to {
+      \\"d\\": 4,
+      \\"e\\": 5
+    }",
+    ]
+  `)
+})
+
+test('deleting a property', () => {
+  const dst = { a: 1, b: 2 }
+  const src = { c: 3, a: undefined }
+  let messages = []
+  setOrDeleteWithMessages(dst, src, messages)
+  expect(dst).toMatchObject({ b: 2, c: 3 })
+  expect(messages).toMatchInlineSnapshot(`
+    Array [
+      "c: changing not-present to 3",
+      "deleting a: 1",
+    ]
+  `)
+})
+
+test('make an array smaller', () => {
+  const dst = [1, 2, 3]
+  const src = [1, 2]
+  let messages = []
+  setOrDeleteWithMessages(dst, src, messages)
+  expect(dst).toMatchObject(src)
+  expect(messages).toMatchInlineSnapshot(`
+    Array [
+      "deleting [2]: 3",
+    ]
+  `)
+})
+
+test('make an array within an object smaller', () => {
+  const dst = { a: [1, 2, 3], b: 1, c: { a: 1 } }
+  const src = { a: [1, 2] }
+  let messages = []
+  setOrDeleteWithMessages(dst, src, messages)
+  expect(dst).toMatchObject({ a: [1, 2], b: 1, c: { a: 1 } })
+  expect(messages).toMatchInlineSnapshot(`
+    Array [
+      "deleting a[2]: 3",
+    ]
+  `)
+})
+
+test('can not set an object to a string', () => {
+  const dst = { a: 1 }
+  const src = "can't set"
+  let messages = []
+  setOrDeleteWithMessages(dst, src, messages)
+  expect(dst).toMatchObject(dst)
+  expect(messages).toMatchInlineSnapshot(`
+    Array [
+      "Can not change type object to string",
+    ]
+  `)
+})
+
+test('can set a deeper object to a string', () => {
+  const dst = { a: 1, b: { c: 2 } }
+  const src = { b: 'string' }
+  let messages = []
+  setOrDeleteWithMessages(dst, src, messages)
+  expect(dst).toMatchObject({ a: 1, b: 'string' })
+  expect(messages).toMatchInlineSnapshot(`
+    Array [
+      "b: changing {
+      \\"c\\": 2
+    } to \\"string\\"",
+    ]
+  `)
+})
+
+function be() {}
+function func() {}
+function b1() {
+  return 1
+}
+function newFunc() {
+  return 1
+}
+
+test('can work with functions', () => {
+  const dst = { a: 1, b: be, c: { func: func } }
+  const src = { a: 'string', b: b1, c: { newFunc: newFunc } }
+  let messages = []
+  setOrDeleteWithMessages(dst, src, messages)
+  expect(dst).toMatchObject({ a: 'string', b: b1, c: { func: func, newFunc: newFunc } })
+  expect(messages).toMatchInlineSnapshot(`
+    Array [
+      "a: changing 1 to \\"string\\"",
+      "b: changing be() to b1()",
+      "c.newFunc: changing not-present to newFunc()",
+    ]
+  `)
+})
+
+test('can work without messages', () => {
+  const dst = { a: 1, b: be, c: { func: func } }
+  const src = { a: 'string', b: b1, c: { newFunc: newFunc } }
+  setOrDeleteWithMessages(dst, src)
+  expect(dst).toMatchObject({ a: 'string', b: b1, c: { func: func, newFunc: newFunc } })
+})
+
+test('can sort of change an obj to an array', () => {
+  const dst = { 0: 'a', 1: 'b', 2: 'c' }
+  const src = ['d', 'e', 'f']
+  let messages = []
+  setOrDeleteWithMessages(dst, src, messages)
+  expect(dst).toMatchObject({ 0: 'd', 1: 'e', 2: 'f' })
+  expect(messages).toMatchInlineSnapshot(`
+    Array [
+      "0: changing \\"a\\" to \\"d\\"",
+      "1: changing \\"b\\" to \\"e\\"",
+      "2: changing \\"c\\" to \\"f\\"",
+    ]
+  `)
+})
+
+test('can change false to true and numbers to strings and vice versa', () => {
+  const dst = { a: true, b: false, c: 3, d: 'four' }
+  const src = { a: false, b: true, c: 'three', d: 4 }
+  let messages = []
+  setOrDeleteWithMessages(dst, src, messages)
+  expect(dst).toMatchObject({ a: false, b: true, c: 'three', d: 4 })
+  expect(messages).toMatchInlineSnapshot(`
+    Array [
+      "a: changing true to false",
+      "b: changing false to true",
+      "c: changing 3 to \\"three\\"",
+      "d: changing \\"four\\" to 4",
+    ]
+  `)
+})
+
+test('make changes to sparse arrays', () => {
+  const dst = { a: ['a', 'b', 'c'], b: 6 }
+  dst.a[7] = 'z'
+  const src = { a: ['a', 'b', 'c'] }
+  src.a[7] = 'zz'
+  src.a[6] = 'six'
+  const result = { a: ['a', 'b', 'c'], b: 6 }
+  result.a[6] = 'six'
+  result.a[7] = 'zz'
+  let messages = []
+  setOrDeleteWithMessages(dst, src, messages)
+  expect(dst).toMatchObject(result)
+  expect(messages).toMatchInlineSnapshot(`
+    Array [
+      "a[6]: changing not-present to \\"six\\"",
+      "a[7]: changing \\"z\\" to \\"zz\\"",
+    ]
+  `)
+})
+
+test('add a deep deep prop', () => {
+  const dst = { a: 1 }
+  const src = { b: { c: { d: { d: 2 } } } }
+  let messages = []
+  setOrDeleteWithMessages(dst, src, messages)
+  expect(dst).toMatchObject({ a: 1, b: { c: { d: { d: 2 } } } })
+  expect(messages).toMatchInlineSnapshot(`
+    Array [
+      "b: changing not-present to {
+      \\"c\\": {
+        \\"d\\": {
+          \\"d\\": 2
+        }
+      }
+    }",
+    ]
+  `)
+})