Add tests and snapshots

Author: ryanhefner

src/Timecode.test.js

@@ -0,0 +1,154 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import { Timecode } from './Timecode'
+
+describe('<Timecode />', () => {
+  test('render markup - default component', async () => {
+    const { container, getByText } = render(<Timecode />)
+
+    expect(getByText('0:00')).toBeInTheDocument()
+    expect(container).toMatchSnapshot()
+  })
+
+  test('render markup - custom component', async () => {
+    const { container } = render(<Timecode as="p" />)
+
+    expect(container.firstChild.nodeName).toBe('P')
+  })
+
+  test('render format - H:?m:ss (default)', async () => {
+    const { getByText } = render(<Timecode />)
+
+    expect(getByText('0:00')).toBeInTheDocument()
+  })
+
+  test('render format - H:?mm:ss', async () => {
+    const { getByText } = render(<Timecode format="H:?mm:ss" />)
+
+    expect(getByText('00:00')).toBeInTheDocument()
+  })
+
+  test('render format - HH:mm:ss.SSS', async () => {
+    const { getByText } = render(<Timecode format="HH:mm:ss.SSS" />)
+
+    expect(getByText('00:00:00.000')).toBeInTheDocument()
+  })
+
+  test('render format - H:mm:ss.SSS', async () => {
+    const { getByText } = render(<Timecode format="H:mm:ss.SSS" />)
+
+    expect(getByText('0:00:00.000')).toBeInTheDocument()
+  })
+
+  test('render format - H:?mm:ss.SSS', async () => {
+    const { getByText } = render(<Timecode format="H:?mm:ss.SSS" />)
+
+    expect(getByText('00:00.000')).toBeInTheDocument()
+  })
+
+  test('render format - H:?m:ss.SSS', async () => {
+    const { getByText } = render(<Timecode format="H:?m:ss.SSS" />)
+
+    expect(getByText('0:00.000')).toBeInTheDocument()
+  })
+
+  test('render format - HH:mm:ss', async () => {
+    const { getByText } = render(<Timecode format="HH:mm:ss" />)
+
+    expect(getByText('00:00:00')).toBeInTheDocument()
+  })
+
+  test('render format - H:mm:ss', async () => {
+    const { getByText } = render(<Timecode format="H:mm:ss" />)
+
+    expect(getByText('0:00:00')).toBeInTheDocument()
+  })
+
+  test('render format - H:?mm:ss', async () => {
+    const { getByText } = render(<Timecode format="H:?mm:ss" />)
+
+    expect(getByText('00:00')).toBeInTheDocument()
+  })
+
+  test('render format - H:mm', async () => {
+    const { getByText } = render(<Timecode format="H:mm" />)
+
+    expect(getByText('0:00')).toBeInTheDocument()
+  })
+
+  test('render format - s.SSS', async () => {
+    const { getByText } = render(<Timecode format="s.SSS" />)
+
+    expect(getByText('0.000')).toBeInTheDocument()
+  })
+
+  test('render format - s.SS', async () => {
+    const { getByText } = render(<Timecode format="s.SS" />)
+
+    expect(getByText('0.00')).toBeInTheDocument()
+  })
+
+  test('render format w/ time - H:?m:ss (default)', async () => {
+    const { getByText } = render(<Timecode time={3600000} />)
+
+    expect(getByText('1:00:00')).toBeInTheDocument()
+  })
+
+  test('render format w/ time - H:?mm:ss.SSS', async () => {
+    const { getByText } = render((
+      <Timecode
+        format="H:?mm:ss.SSS"
+        time={3600000}
+      />
+    ))
+
+    expect(getByText('1:00:00.000')).toBeInTheDocument()
+  })
+
+  test('render format w/ time - H:?m:ss.SSS', async () => {
+    const { getByText } = render((
+      <Timecode
+        format="H:?m:ss.SSS"
+        time={3600000}
+      />
+    ))
+
+    expect(getByText('1:00:00.000')).toBeInTheDocument()
+  })
+
+  test('render format w/ time - H:?mm:ss', async () => {
+    const { getByText } = render((
+      <Timecode
+        format="H:?mm:ss"
+        time={3600000}
+      />
+    ))
+
+    expect(getByText('1:00:00')).toBeInTheDocument()
+  })
+
+  test('render format w/ minutes - H:?m:ss (default)', async () => {
+    const { getByText } = render(<Timecode time={5400000} />)
+
+    expect(getByText('1:30:00')).toBeInTheDocument()
+  })
+
+  test('render format w/ seconds - H:?m:ss (default)', async () => {
+    const { getByText } = render(<Timecode time={5430000} />)
+
+    expect(getByText('1:30:30')).toBeInTheDocument()
+  })
+
+  test('render prefix', async () => {
+    const { getByText } = render(<Timecode prefix="-" />)
+
+    expect(getByText('-0:00')).toBeInTheDocument()
+  })
+
+  test('render postfix', async () => {
+    const { getByText } = render(<Timecode postfix="/left" />)
+
+    expect(getByText('0:00/left')).toBeInTheDocument()
+  })
+})

src/__snapshots__/Timecode.test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Timecode /> render markup - default component 1`] = `
+<div>
+  <span>
+    0:00
+  </span>
+</div>
+`;

src/utils.test.js

@@ -0,0 +1,52 @@
+import { parseTime, pad, formatMilliseconds, formatTimecode } from './utils'
+
+describe('utils', () => {
+  test('parseTime', async () => {
+    expect(parseTime(0)).toEqual({ hours: 0, minutes: 0, seconds: 0, milliseconds: 0 })
+    expect(parseTime(1000)).toEqual({ hours: 0, minutes: 0, seconds: 1, milliseconds: 0 })
+    expect(parseTime(1100)).toEqual({ hours: 0, minutes: 0, seconds: 1, milliseconds: 100 })
+    expect(parseTime(1120)).toEqual({ hours: 0, minutes: 0, seconds: 1, milliseconds: 120 })
+    expect(parseTime(1123)).toEqual({ hours: 0, minutes: 0, seconds: 1, milliseconds: 123 })
+    expect(parseTime(60000)).toEqual({ hours: 0, minutes: 1, seconds: 0, milliseconds: 0 })
+    expect(parseTime(3600000)).toEqual({ hours: 1, minutes: 0, seconds: 0, milliseconds: 0 })
+    expect(parseTime(3661000)).toEqual({ hours: 1, minutes: 1, seconds: 1, milliseconds: 0 })
+    expect(parseTime(3661123)).toEqual({ hours: 1, minutes: 1, seconds: 1, milliseconds: 123 })
+  })
+
+  test('pad', async () => {
+    expect(pad(0)).toBe('00')
+    expect(pad(0, 2)).toBe('00')
+    expect(pad(0, 1)).toBe('0')
+    expect(pad(1)).toBe('01')
+    expect(pad(1, 2)).toBe('01')
+    expect(pad(1, 1)).toBe('1')
+    expect(pad(10)).toBe('10')
+    expect(pad(10, 2)).toBe('10')
+    expect(pad(10, 1)).toBe('10')
+    expect(pad(100)).toBe('100')
+    expect(pad(100, 2)).toBe('100')
+    expect(pad(100, 1)).toBe('100')
+  })
+
+  test('formatMilliseconds', async () => {
+    expect(formatMilliseconds(0)).toBe('000')
+    expect(formatMilliseconds(0, 2)).toBe('00')
+    expect(formatMilliseconds(0, 1)).toBe('0')
+    expect(formatMilliseconds(1000)).toBe('1000')
+    expect(formatMilliseconds(1000, 2)).toBe('1000')
+    expect(formatMilliseconds(1000, 1)).toBe('1000')
+  })
+
+  test('formatTimecode', async () => {
+    expect(formatTimecode({ format: 'H:?m:ss', time: 0 })).toBe('0:00')
+    expect(formatTimecode({ format: 'H:?mm:ss', time: 0 })).toBe('00:00')
+    expect(formatTimecode({ format: 'mm:ss', time: 0 })).toBe('00:00')
+    expect(formatTimecode({ format: 'mm:ss', time: 3600000 })).toBe('60:00')
+    expect(formatTimecode({ format: 'HH:mm:ss.SSS', time: 0 })).toBe('00:00:00.000')
+    expect(formatTimecode({ format: 'H:mm:ss.SSS', time: 0 })).toBe('0:00:00.000')
+    expect(formatTimecode({ format: 'H:?mm:ss.SSS', time: 0 })).toBe('00:00.000')
+    expect(formatTimecode({ format: 'H:?m:ss.SSS', time: 0 })).toBe('0:00.000')
+    expect(formatTimecode({ format: 'HH:mm:ss', time: 0 })).toBe('00:00:00')
+    expect(formatTimecode({ format: 'H:mm:ss', time: 0 })).toBe('0:00:00')
+  })
+})