add unit tests

Signed-off-by: Devlin Junker <devlin.junker@gmail.com>

6 files changed, 79 insertions, 5 deletions

diff --git a/src/App.vue b/src/App.vue
index f07f5810a..2179ae8e6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -55,7 +55,7 @@ export default Vue.extend({
 	},
 	methods: {
 		stopPlaying() {
-			this.$store.commit(MUTATIONS.SET_PLAYING_ITEM, { item: undefined })
+			this.$store.commit(MUTATIONS.SET_PLAYING_ITEM, undefined)
 		},
 		stopVideo() {
 			const videoElements = document.getElementsByTagName('video')
@@ -82,6 +82,7 @@ export default Vue.extend({
 	#content-display {
 		display: flex;
 		flex-direction: row;
+		height: 100%;
 	}
 
 	#content-display.playing {
diff --git a/src/components/feed-display/FeedItemDisplay.vue b/src/components/feed-display/FeedItemDisplay.vue
index e68fa835a..d1dde278e 100644
--- a/src/components/feed-display/FeedItemDisplay.vue
+++ b/src/components/feed-display/FeedItemDisplay.vue
@@ -190,7 +190,7 @@ export default Vue.extend({
 			return false
 		},
 		playAudio(item: FeedItem) {
-			this.$store.commit(MUTATIONS.SET_PLAYING_ITEM, { item })
+			this.$store.commit(MUTATIONS.SET_PLAYING_ITEM, item)
 		},
 		stopAudio() {
 			const audioElements = document.getElementsByTagName('audio')
diff --git a/src/store/item.ts b/src/store/item.ts
index 2ff49f4d1..508b5c919 100644
--- a/src/store/item.ts
+++ b/src/store/item.ts
@@ -293,7 +293,7 @@ export const mutations = {
 	[FEED_ITEM_MUTATION_TYPES.SET_SELECTED_ITEM](state: ItemState, { id }: { id: string }) {
 		state.selectedId = id
 	},
-	[FEED_ITEM_MUTATION_TYPES.SET_PLAYING_ITEM](state: ItemState, { item }: { item?: FeedItem }) {
+	[FEED_ITEM_MUTATION_TYPES.SET_PLAYING_ITEM](state: ItemState, item?: FeedItem) {
 		state.playingItem = item
 	},
 
diff --git a/tests/javascript/unit/components/App.spec.ts b/tests/javascript/unit/components/App.spec.ts
new file mode 100644
index 000000000..135b41d40
--- /dev/null
+++ b/tests/javascript/unit/components/App.spec.ts
@@ -0,0 +1,49 @@
+import { shallowMount, createLocalVue, Wrapper } from '@vue/test-utils'
+
+import App from '../../../../src/App.vue'
+import { MUTATIONS } from '../../../../src/store'
+
+describe('FeedItemDisplay.vue', () => {
+	'use strict'
+	const localVue = createLocalVue()
+	let wrapper: Wrapper<App>
+
+	const dispatchStub = jest.fn()
+	const commitStub = jest.fn()
+	beforeAll(() => {
+		wrapper = shallowMount(App, {
+			localVue,
+			mocks: {
+				$store: {
+					state: {
+						items: {
+							playingItem: undefined,
+						},
+					},
+					dispatch: dispatchStub,
+					commit: commitStub,
+				},
+			},
+		})
+	})
+
+	beforeEach(() => {
+		dispatchStub.mockReset()
+		commitStub.mockReset()
+	})
+
+	it('should send SET_PLAYING_ITEM with undefined to stop playback', () => {
+		(wrapper.vm as any).stopPlaying()
+
+		expect(commitStub).toBeCalledWith(MUTATIONS.SET_PLAYING_ITEM, undefined)
+	})
+
+	it('should stop all video elements in page when playing video', () => {
+		const pauseStub = jest.fn()
+		document.getElementsByTagName = jest.fn().mockReturnValue([{ pause: pauseStub }]);
+
+		(wrapper.vm as any).stopVideo()
+
+		expect(pauseStub).toBeCalled()
+	})
+})
diff --git a/tests/javascript/unit/components/feed-display/FeedItemDisplay.spec.ts b/tests/javascript/unit/components/feed-display/FeedItemDisplay.spec.ts
index a75119414..7d60d4a01 100644
--- a/tests/javascript/unit/components/feed-display/FeedItemDisplay.spec.ts
+++ b/tests/javascript/unit/components/feed-display/FeedItemDisplay.spec.ts
@@ -72,7 +72,7 @@ describe('FeedItemDisplay.vue', () => {
 		expect(feed).toEqual(mockFeed)
 	})
 
-	it('toggles starred state', () => {
+	it('should toggle starred state', () => {
 		wrapper.vm.$props.item.starred = true;
 
 		(wrapper.vm as any).toggleStarred(wrapper.vm.$props.item)
@@ -88,5 +88,19 @@ describe('FeedItemDisplay.vue', () => {
 		})
 	})
 
-	// TODO: Audio/Video tests
+	it('should send SET_PLAYING_ITEM with item', () => {
+		const item = { id: 123 };
+		(wrapper.vm as any).playAudio(item)
+
+		expect(commitStub).toBeCalledWith(MUTATIONS.SET_PLAYING_ITEM, item)
+	})
+
+	it('should stop all audio elements in page when playing video', () => {
+		const pauseStub = jest.fn()
+		document.getElementsByTagName = jest.fn().mockReturnValue([{ pause: pauseStub }]);
+
+		(wrapper.vm as any).stopAudio()
+
+		expect(pauseStub).toBeCalled()
+	})
 })
diff --git a/tests/javascript/unit/store/item.spec.ts b/tests/javascript/unit/store/item.spec.ts
index b0c5fa412..f194ad223 100644
--- a/tests/javascript/unit/store/item.spec.ts
+++ b/tests/javascript/unit/store/item.spec.ts
@@ -129,6 +129,16 @@ describe('item.ts', () => {
 				expect(state.selectedId).toEqual(123)
 			})
 		})
+
+		describe('SET_PLAYING_ITEM', () => {
+			it('should update selectedId on state', async () => {
+				const state = { playingItem: undefined } as any
+				const item = { id: 123 } as any
+				mutations[FEED_ITEM_MUTATION_TYPES.SET_PLAYING_ITEM](state, item as any)
+				expect(state.playingItem).toEqual(item)
+			})
+		})
+
 		describe('SET_ITEMS', () => {
 			it('should add feeds to state', () => {
 				const state = { allItems: [] as any } as any