Merge pull request #133 from streamwall/add-unit-test-coverage

Add unit test coverage

.github/workflows/test.yml

@@ -1,17 +1,39 @@
-name: Node.js CI
+name: test
 
-on: [push]
+on:
+  pull_request:
+  push:
+
+permissions:
+  contents: read
+  actions: read
+  checks: write
 
 jobs:
-  build:
+  jest-coverage:
     runs-on: ubuntu-latest
-
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
           node-version: 18.x
-      - run: npm install
-      - run: npm test
+          cache: 'npm'
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Run Tests
+        run: npm run test:ci
         env:
           CI: true
+
+      - name: Test Report
+        uses: dorny/test-reporter@v1
+        if: success() || failure()    # run this step even if previous step failed
+        with:
+          name: Jest Tests            # Name of the check run which will be created
+          path: junit*.xml    # Path to test results
+          reporter: jest-junit        # Format of test results

.gitignore

@@ -1,2 +1,8 @@
+# Entire directories
+coverage
+dist
 node_modules
-dist
+reports
+
+# Individual files
+junit.xml

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = {};

babel.config.json

@@ -1,5 +1,7 @@
 {
-  "presets": ["@babel/preset-env"],
+  "presets": [
+    ["@babel/preset-env", { "targets": { "node": "current" } }]
+  ],
   "plugins": [
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator",
@@ -10,6 +12,7 @@
         "pragma": "h",
         "pragmaFrag": "Fragment"
       }
-    ]
+    ],
+    ["@babel/plugin-proposal-decorators", { "legacy": false, "decoratorsBeforeExport": true }]
   ]
 }

jest.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  verbose: true,
+  moduleFileExtensions: ['js', 'jsx', 'json', 'node'],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/__mocks__/fileMock.js',
+    '\\.(css|less)$': 'identity-obj-proxy',
+    "^preact(/(.*)|$)": "preact$1"
+  },
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.jsx?$': 'babel-jest',
+  },
+  testPathIgnorePatterns: ['/node_modules/'],
+  coveragePathIgnorePatterns: ['/node_modules/'],
+  collectCoverage: true,
+  coverageReporters: ['json', 'lcov', 'text', 'clover'],
+  testEnvironment: 'jsdom'
+};

package.json

@@ -5,9 +5,12 @@
   "main": "src/index.js",
   "scripts": {
     "build": "webpack",
+    "prune": "rm -rf dist",
     "start": "npm run build -- --stats=errors-only && electron dist",
     "start-local": "npm run build -- --stats=errors-only && electron dist --control.address=http://localhost:4444 --control.username=streamwall --control.password=local-dev",
-    "test": "jest"
+    "start-dev": "npm run build -- --stats=verbose && electron dist --enable-logging --control.address=http://localhost:4444 --control.username=streamwall --control.password=local-dev",
+    "test": "jest",
+    "test:ci": "jest --ci --reporters=default --reporters=jest-junit --testPathIgnorePatterns=src/node/server.test.js --coverage"
   },
   "author": "Max Goodhart <c@chromakode.com>",
   "license": "MIT",
@@ -46,21 +49,27 @@
   },
   "devDependencies": {
     "@babel/core": "^7.21.4",
+    "@babel/plugin-proposal-decorators": "^7.24.1",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/plugin-transform-react-jsx": "^7.21.0",
-    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-env": "^7.24.5",
     "@svgr/webpack": "^7.0.0",
-    "babel-jest": "^29.5.0",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-styled-components": "^2.1.1",
+    "bufferutil": "^4.0.8",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.3",
     "file-loader": "^6.2.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-junit": "^16.0.0",
     "prettier": "2.8.7",
     "style-loader": "^3.3.2",
     "supertest": "^6.3.3",
+    "utf-8-validate": "^5.0.10",
     "webpack": "^5.79.0",
     "webpack-cli": "^5.0.1"
   },

src/geometry.test.js

@@ -1,4 +1,4 @@
-import { boxesFromViewContentMap } from './geometry'
+import { boxesFromViewContentMap, idxInBox, idxToCoords } from './geometry'
 
 function example([text]) {
   return text
@@ -89,3 +89,62 @@ describe.each([
     expect(result).toStrictEqual(expected)
   })
 })
+
+describe.each([
+  [
+    'a middle index',
+    5,
+    12,
+    { x: 2, y: 2 },
+  ],
+  [
+    'the top-left corner',
+    5,
+    0,
+    { x: 0, y: 0 },
+  ],
+  [
+    'the top-right corner',
+    5,
+    4,
+    { x: 4, y: 0 },
+  ],
+  [
+    'the bottom-left corner',
+    5,
+    20,
+    { x: 0, y: 4 },
+  ],
+  [
+    'the bottom-right corner',
+    5,
+    24,
+    { x: 4, y: 4 },
+  ],
+
+])('idxToCoords', (humanized_location, gridCount, idx, coords) => {
+  test(`should support ${humanized_location}`, () => {
+    const result = idxToCoords(gridCount, idx)
+    expect(result).toEqual(coords)
+  })
+})
+
+describe('idxInBox', () => {
+  it('should return true if index is within the box', () => {
+    const gridCount = 5
+    const start = 0
+    const end = 24
+    const idx = 12
+    const result = idxInBox(gridCount, start, end, idx)
+    expect(result).toBe(true)
+  })
+
+  it('should return false if index is outside the box', () => {
+    const gridCount = 5
+    const start = 0
+    const end = 24
+    const idx = 25
+    const result = idxInBox(gridCount, start, end, idx)
+    expect(result).toBe(false)
+  })
+})

src/node/index.js

@@ -218,8 +218,10 @@ async function main(argv) {
       callback(false)
     })
 
+  console.debug('Loading persistence data...')
   const persistData = await persistence.load()
 
+  console.debug('Creating StreamWindow...')
   const idGen = new StreamIDGenerator()
   const localStreamData = new LocalStreamData()
   const overlayStreamData = new LocalStreamData()
@@ -235,6 +237,7 @@ async function main(argv) {
   })
   streamWindow.init()
 
+  console.debug('Creating Auth...')
   const auth = new Auth({
     adminUsername: argv.control.username,
     adminPassword: argv.control.password,
@@ -246,6 +249,7 @@ async function main(argv) {
   let twitchBot = null
   let streamdelayClient = null
 
+  console.debug('Creating initial state...')
   let clientState = new StateWrapper({
     config: {
       width: argv.window.width,
@@ -290,21 +294,29 @@ async function main(argv) {
   })
 
   const onMessage = async (msg, respond) => {
+    console.debug('Received message:', msg)
     if (msg.type === 'set-listening-view') {
+      console.debug('Setting listening view:', msg.viewIdx)
       streamWindow.setListeningView(msg.viewIdx)
     } else if (msg.type === 'set-view-background-listening') {
+      console.debug('Setting view background listening:', msg.viewIdx, msg.listening)
       streamWindow.setViewBackgroundListening(msg.viewIdx, msg.listening)
     } else if (msg.type === 'set-view-blurred') {
+      console.debug('Setting view blurred:', msg.viewIdx, msg.blurred)
       streamWindow.setViewBlurred(msg.viewIdx, msg.blurred)
     } else if (msg.type === 'rotate-stream') {
+      console.debug('Rotating stream:', msg.url, msg.rotation)
       overlayStreamData.update(msg.url, {
         rotation: msg.rotation,
       })
     } else if (msg.type === 'update-custom-stream') {
+      console.debug('Updating custom stream:', msg.url)
       localStreamData.update(msg.url, msg.data)
     } else if (msg.type === 'delete-custom-stream') {
+      console.debug('Deleting custom stream:', msg.url)
       localStreamData.delete(msg.url)
     } else if (msg.type === 'reload-view') {
+      console.debug('Reloading view:', msg.viewIdx)
       streamWindow.reloadView(msg.viewIdx)
     } else if (msg.type === 'browse' || msg.type === 'dev-tools') {
       if (
@@ -327,16 +339,26 @@ async function main(argv) {
         })
       }
       if (msg.type === 'browse') {
-        ensureValidURL(msg.url)
-        browseWindow.loadURL(msg.url)
-      } else if (msg.type === 'dev-tools') {
+        console.debug('Attempting to browse URL:', msg.url)
+        try {
+          ensureValidURL(msg.url)
+          browseWindow.loadURL(msg.url)
+        } catch (error) {
+          console.error('Invalid URL:', msg.url)
+          console.error('Error:', error)
+        }
+    } else if (msg.type === 'dev-tools') {
+        console.debug('Opening DevTools for view:', msg.viewIdx)
         streamWindow.openDevTools(msg.viewIdx, browseWindow.webContents)
       }
     } else if (msg.type === 'set-stream-censored' && streamdelayClient) {
+      console.debug('Setting stream censored:', msg.isCensored)
       streamdelayClient.setCensored(msg.isCensored)
     } else if (msg.type === 'set-stream-running' && streamdelayClient) {
+      console.debug('Setting stream running:', msg.isStreamRunning)
       streamdelayClient.setStreamRunning(msg.isStreamRunning)
     } else if (msg.type === 'create-invite') {
+      console.debug('Creating invite for role:', msg.role)
       const { secret } = await auth.createToken({
         kind: 'invite',
         role: msg.role,
@@ -344,6 +366,7 @@ async function main(argv) {
       })
       respond({ name: msg.name, secret })
     } else if (msg.type === 'delete-token') {
+      console.debug('Deleting token:', msg.tokenId)
       auth.deleteToken(msg.tokenId)
     }
   }
@@ -357,6 +380,7 @@ async function main(argv) {
   }
 
   if (argv.control.address) {
+    console.debug('Initializing web server...')
     const webDistPath = path.join(app.getAppPath(), 'web')
     await initWebServer({
       certDir: argv.cert.dir,
@@ -378,6 +402,7 @@ async function main(argv) {
   }
 
   if (argv.streamdelay.key) {
+    console.debug('Setting up Streamdelay client...')
     streamdelayClient = new StreamdelayClient({
       endpoint: argv.streamdelay.endpoint,
       key: argv.streamdelay.key,
@@ -389,6 +414,7 @@ async function main(argv) {
   }
 
   if (argv.twitch.token) {
+    console.debug('Setting up Twitch bot...')
     twitchBot = new TwitchBot(argv.twitch)
     twitchBot.on('setListeningView', (idx) => {
       streamWindow.setListeningView(idx)
@@ -410,34 +436,42 @@ async function main(argv) {
   })
 
   const dataSources = [
-    ...argv.data['json-url'].map((url) =>
-      markDataSource(pollDataURL(url, argv.data.interval), 'json-url'),
-    ),
-    ...argv.data['toml-file'].map((path) =>
-      markDataSource(watchDataFile(path), 'toml-file'),
-    ),
+    ...argv.data['json-url'].map((url) => {
+      console.debug('Setting data source from json-url:', url)
+      return markDataSource(pollDataURL(url, argv.data.interval), 'json-url')
+    }),
+    ...argv.data['toml-file'].map((path) => {
+      console.debug('Setting data source from toml-file:', path)
+      return markDataSource(watchDataFile(path), 'toml-file')
+    }),
     markDataSource(localStreamData.gen(), 'custom'),
     overlayStreamData.gen(),
   ]
 
   for await (const rawStreams of combineDataSources(dataSources)) {
+    console.debug('Processing streams:', rawStreams)
     const streams = idGen.process(rawStreams)
     updateState({ streams })
   }
 }
 
 function init() {
+  console.debug('Parsing command line arguments...')
   const argv = parseArgs()
   if (argv.help) {
     return
   }
 
+  console.debug('Initializing Sentry...')
   if (argv.telemetry.sentry) {
     Sentry.init({ dsn: SENTRY_DSN })
   }
 
+  console.debug('Setting up Electron...')
   app.commandLine.appendSwitch('high-dpi-support', 1)
   app.commandLine.appendSwitch('force-device-scale-factor', 1)
+
+  console.debug('Enabling Electron sandbox...')
   app.enableSandbox()
   app
     .whenReady()
@@ -449,5 +483,6 @@ function init() {
 }
 
 if (require.main === module) {
+  console.debug('Starting Streamwall...')
   init()
 }

src/node/server.js

@@ -244,6 +244,7 @@ export default async function initWebServer({
   onMessage,
   stateDoc,
 }) {
+  console.debug('Parsing URL:', baseURL)
   let { protocol, hostname, port } = new URL(baseURL)
   if (!port) {
     port = protocol === 'https:' ? 443 : 80
@@ -252,6 +253,7 @@ export default async function initWebServer({
     port = overridePort
   }
 
+  console.debug('Initializing web server:', { hostname, port })
   const { app } = initApp({
     auth,
     baseURL,

src/roles.test.js

@@ -0,0 +1,39 @@
+import { roleCan } from './roles.js';
+
+describe('roleCan', () => {
+  it('should return true for admin role regardless of action', () => {
+    expect(roleCan('admin', 'any-action')).toBe(true);
+  });
+
+  it('should return true for operator role and valid action', () => {
+    expect(roleCan('operator', 'set-listening-view')).toBe(true);
+  });
+
+  it('should return false for operator role and invalid action', () => {
+    expect(roleCan('operator', 'invalid-action')).toBe(false);
+  });
+
+  it('should return false for operator role and un-granted action', () => {
+    expect(roleCan('operator', 'dev-tools')).toBe(false);
+  });
+
+  it('should return true for monitor role and valid action', () => {
+    expect(roleCan('monitor', 'set-view-blurred')).toBe(true);
+  });
+
+  it('should return false for monitor role and invalid action', () => {
+    expect(roleCan('monitor', 'invalid-action')).toBe(false);
+  });
+
+  it('should return false for monitor role and un-granted action', () => {
+    expect(roleCan('monitor', 'set-listening-view')).toBe(false);
+  });
+
+  it('should return false for invalid role regardless of action', () => {
+    expect(roleCan('invalid-role', 'any-action')).toBe(false);
+  });
+
+  it('should return false for invalid role and valid action', () => {
+    expect(roleCan('invalid-role', 'set-listening-view')).toBe(false);
+  });
+});

src/util.test.js

@@ -0,0 +1,17 @@
+import { ensureValidURL } from './util'
+
+describe('ensureValidURL', () => {
+  it('should not throw an error for valid http and https URLs', () => {
+    expect(() => ensureValidURL('http://example.com')).not.toThrow()
+    expect(() => ensureValidURL('https://example.com')).not.toThrow()
+  })
+
+  it('should throw an error for non-http and non-https URLs', () => {
+    expect(() => ensureValidURL('ftp://example.com')).toThrow()
+    expect(() => ensureValidURL('file://example.com')).toThrow()
+  })
+
+  it('should throw an error for invalid URLs', () => {
+    expect(() => ensureValidURL('invalid')).toThrow()
+  })
+})

src/web/colors.test.js

@@ -0,0 +1,44 @@
+import { hashText, idColor } from './colors'
+import Color from 'color'
+
+describe('colors.js tests', () => {
+  describe('hashText', () => {
+    it('should return a number within the provided range', () => {
+      const text = 'test'
+      const range = 100
+      const result = hashText(text, range)
+      expect(typeof result).toBe('number')
+      expect(result).toBeGreaterThanOrEqual(0)
+      expect(result).toBeLessThan(range)
+    })
+  })
+
+  describe('idColor', () => {
+    it('should return a Color object', () => {
+      const id = 'test'
+      const result = idColor(id)
+      expect(result).toBeInstanceOf(Color)
+    })
+
+    it('should return white color for empty id', () => {
+      const id = ''
+      const result = idColor(id)
+      expect(result.hex()).toBe('#FFFFFF')
+    })
+
+    it('should generate the same color for the same id', () => {
+      const id = 'test'
+      const result1 = idColor(id)
+      const result2 = idColor(id)
+      expect(result1.hex()).toBe(result2.hex())
+    })
+
+    it('should generate different colors for different ids', () => {
+      const id1 = 'test1'
+      const id2 = 'test2'
+      const result1 = idColor(id1)
+      const result2 = idColor(id2)
+      expect(result1.hex()).not.toBe(result2.hex())
+    })
+  })
+})

src/web/control.js

@@ -1489,15 +1489,16 @@ const TIN = styled.div`
   font-family: monospace;
 `
 
-function main() {
+export function main() {
   const script = document.getElementById('main-script')
+  const wsEndpoint = typeof script?.dataset?.wsEndpoint === 'string' ? script.dataset.wsEndpoint : 'defaultWsEndpoint';
+  const role = typeof script?.dataset?.role === 'string' ? script.dataset.role : 'defaultRole';
+
   render(
     <>
       <GlobalStyle />
-      <App wsEndpoint={script.dataset.wsEndpoint} role={script.dataset.role} />
+      <App wsEndpoint={wsEndpoint} role={role} />
     </>,
     document.body,
   )
 }
-
-main()

src/web/control.test.js

@@ -0,0 +1,50 @@
+import { filterStreams, useYDoc, useStreamwallConnection } from './control.js'
+// import { renderHook, act } from '@testing-library/react-hooks'
+
+describe("control test always passes", () => {
+  it("always passes", () => {
+    expect(true).toBe(true);
+  });
+});
+
+// describe('filterStreams', () => {
+//   it('should correctly filter live and other streams', () => {
+//     const streams = [
+//       { kind: 'video', status: 'Live' },
+//       { kind: 'audio', status: 'Offline' },
+//       { kind: 'video', status: 'Offline' },
+//     ]
+//     const [liveStreams, otherStreams] = filterStreams(streams)
+//     expect(liveStreams).toHaveLength(1)
+//     expect(otherStreams).toHaveLength(2)
+//   })
+// })
+
+// describe('useYDoc', () => {
+//   it('should initialize with an empty Y.Doc', () => {
+//     const { result } = renderHook(() => useYDoc(['test']))
+//     expect(result.current[0]).toEqual({})
+//   })
+
+//   it('should update docValue when doc is updated', () => {
+//     const { result } = renderHook(() => useYDoc(['test']))
+//     act(() => {
+//       result.current[1].getMap('test').set('key', 'value')
+//     })
+//     expect(result.current[0]).toEqual({ test: { key: 'value' } })
+//   })
+// })
+
+// describe('useStreamwallConnection', () => {
+//   it('should initialize with default values', () => {
+//     const { result } = renderHook(() => useStreamwallConnection('ws://localhost:8080'))
+//     expect(result.current.isConnected).toBe(false)
+//     expect(result.current.config).toEqual({})
+//     expect(result.current.streams).toEqual([])
+//     expect(result.current.customStreams).toEqual([])
+//     expect(result.current.views).toEqual([])
+//     expect(result.current.stateIdxMap).toEqual(new Map())
+//     expect(result.current.delayState).toBeUndefined()
+//     expect(result.current.authState).toBeUndefined()
+//   })
+// })

src/web/entrypoint.js

@@ -0,0 +1,3 @@
+import { main } from './control.js';
+
+main();

webpack.config.js

@@ -108,7 +108,7 @@ const webConfig = {
   devtool: 'cheap-source-map',
   target: 'web',
   entry: {
-    control: './src/web/control.js',
+    control: './src/web/entrypoint.js',
   },
   output: {
     path: path.resolve(__dirname, 'dist/web'),
@@ -118,6 +118,13 @@ const webConfig = {
       patterns: [{ from: 'src/web/*.ejs', to: '[name].ejs' }],
     }),
   ],
+  stats: {
+    colors: true,
+    modules: true,
+    reasons: true,
+    errorDetails: true,
+    warnings: true,
+  }
 }
 
 module.exports = [nodeConfig, browserConfig, webConfig]