Add simple snapshot tests for new views

Required mocking style imports.

Author: rjmunro

packages/webui/__mocks__/styleMock.js

@@ -0,0 +1 @@
+export default {}

packages/webui/jest.config.cjs

@@ -10,6 +10,7 @@ module.exports = {
 		'sha.js': 'sha.js',
 		'meteor/(.*)': '<rootDir>/src/meteor/$1',
 		'(.+)\\.js$': '$1',
+		'\\.(css|scss|sass)$': '<rootDir>/__mocks__/styleMock.js',
 	},
 	transform: {
 		'^.+\\.(ts|tsx)$': [

packages/webui/src/client/ui/ClockView/__tests__/ClockViews.test.tsx

@@ -0,0 +1,47 @@
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { BrowserRouter } from 'react-router-dom'
+import { ClockViewIndex } from '../ClockViewIndex'
+import { MultiviewScreen } from '../MultiviewScreen'
+import { protectString } from '@sofie-automation/corelib/dist/protectedString'
+
+jest.mock('react-bootstrap/esm/Container', () => ({
+	__esModule: true,
+	default: ({ children, ...props }: any) => <div {...props}>{children}</div>,
+}))
+
+jest.mock('react-i18next', () => ({
+	useTranslation: () => ({
+		t: (str: string, options?: Record<string, any>) => {
+			if (options?.studioId) {
+				return str.replace('{{studioId}}', options.studioId)
+			}
+			return str
+		},
+		i18n: {
+			changeLanguage: () => Promise.resolve(),
+		},
+	}),
+}))
+
+describe('ClockViewIndex', () => {
+	it('renders with studio ID', () => {
+		const studioId = protectString('studio0')
+		const { container } = render(
+			<BrowserRouter>
+				<ClockViewIndex studioId={studioId} />
+			</BrowserRouter>
+		)
+
+		expect(container).toMatchSnapshot()
+	})
+})
+
+describe('MultiviewScreen', () => {
+	it('renders with studio ID', () => {
+		const studioId = protectString('studio0')
+		const { container } = render(<MultiviewScreen studioId={studioId} />)
+
+		expect(container).toMatchSnapshot()
+	})
+})

packages/webui/src/client/ui/ClockView/__tests__/__snapshots__/ClockViews.test.tsx.snap

@@ -0,0 +1,150 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClockViewIndex renders with studio ID 1`] = `
+<div>
+  <div
+    class="header-clear"
+  >
+    <section
+      class="mt-5 mx-5"
+    >
+      <header
+        class="my-2"
+      >
+        <h1>
+          Available Views for Studio studio0
+        </h1>
+      </header>
+      <section
+        class="my-5"
+      >
+        <ul>
+          <li>
+            <a
+              href="/countdowns/studio0/presenter"
+            >
+              Presenter Screen
+            </a>
+          </li>
+          <li>
+            <a
+              href="/countdowns/studio0/director"
+            >
+              Director Screen
+            </a>
+          </li>
+          <li>
+            <a
+              href="/countdowns/studio0/overlay"
+            >
+              Overlay Screen
+            </a>
+          </li>
+          <li>
+            <a
+              href="/countdowns/studio0/camera"
+            >
+              Camera Screen
+            </a>
+          </li>
+          <li>
+            <a
+              href="/prompter/studio0"
+            >
+              Prompter
+            </a>
+          </li>
+          <li>
+            <a
+              href="/activeRundown/studio0"
+            >
+              Active Rundown
+            </a>
+          </li>
+          <li>
+            <a
+              href="/countdowns/studio0/multiview"
+            >
+              Multiview (All Screens)
+            </a>
+          </li>
+        </ul>
+      </section>
+    </section>
+  </div>
+</div>
+`;
+
+exports[`MultiviewScreen renders with studio ID 1`] = `
+<div>
+  <div
+    class="multiview-grid"
+  >
+    <div
+      class="multiview-item multiview-presenter"
+    >
+      <iframe
+        src="/countdowns/studio0/presenter"
+        title="Presenter Screen"
+      />
+      <div
+        class="multiview-label"
+      >
+        Presenter Screen
+      </div>
+    </div>
+    <div
+      class="multiview-item multiview-director"
+    >
+      <iframe
+        src="/countdowns/studio0/director"
+        title="Director Screen"
+      />
+      <div
+        class="multiview-label"
+      >
+        Director Screen
+      </div>
+    </div>
+    <div
+      class="multiview-item multiview-prompter"
+    >
+      <iframe
+        src="/prompter/studio0"
+        title="Prompter"
+      />
+      <div
+        class="multiview-label"
+      >
+        Prompter
+      </div>
+    </div>
+    <div
+      class="multiview-item multiview-overlay"
+    >
+      <iframe
+        src="/countdowns/studio0/overlay"
+        title="Overlay Screen"
+      />
+      <div
+        class="multiview-label"
+      >
+        Overlay Screen
+      </div>
+    </div>
+    <div
+      class="multiview-item multiview-camera"
+    >
+      <iframe
+        src="/countdowns/studio0/camera"
+        title="Camera Screen"
+      />
+      <div
+        class="multiview-label"
+      >
+        Camera Screen
+      </div>
+    </div>
+  </div>
+</div>
+`;