From 0c4ad34f19c408d815c735b7093c4cf88cb48a0b Mon Sep 17 00:00:00 2001
From: Drikus Roor <drikusroor@gmail.com>
Date: Tue, 19 Dec 2023 21:30:43 +0100
Subject: [PATCH] test: Add tests for ButtonArray component

---
 .../components/Question/_ButtonArray.test.js  | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 frontend/src/components/Question/_ButtonArray.test.js

diff --git a/frontend/src/components/Question/_ButtonArray.test.js b/frontend/src/components/Question/_ButtonArray.test.js
new file mode 100644
index 000000000..19037680a
--- /dev/null
+++ b/frontend/src/components/Question/_ButtonArray.test.js
@@ -0,0 +1,66 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import ButtonArray from './_ButtonArray';
+
+const getProps = (overrides = {}) => ({
+    question: {
+        "key": "know_song",
+        "view": "BUTTON_ARRAY",
+        "explainer": "",
+        "question": "1. Do you know this song?",
+        "result_id": 12345,
+        "is_skippable": false,
+        "submits": false,
+        "style": "boolean",
+        "choices": {
+            "yes": "Yes",
+            "unsure": "Unsure",
+            "no": "No"
+        },
+        "min_values": 1,
+    },
+    disabled: false,
+    onChange: jest.fn(),
+    value: null,
+    ...overrides,
+});
+
+describe('ButtonArray', () => {
+    it('adds the "checked" class to a button when it is selected', () => {
+        const props = getProps({ value: 'yes' });
+        const { getByText } = render(<ButtonArray {...props} />);
+
+        const button = getByText('Yes');
+
+        expect(button).toHaveClass('checked');
+    });
+
+    it('does not add the "checked" class to a button when it is not selected', () => {
+        const props = getProps({ value: 'yes' });
+        const { getByText } = render(<ButtonArray {...props} />);
+
+        const button = getByText('Unsure');
+
+        expect(button).not.toHaveClass('checked');
+    });
+
+    it('calls the onChange function when a button is clicked', () => {
+        const props = getProps();
+        const { getByText } = render(<ButtonArray {...props} />);
+
+        const button = getByText('Yes');
+        fireEvent.click(button);
+
+        expect(props.onChange).toHaveBeenCalledWith('yes');
+    });
+
+    it('does not call the onChange function when a disabled button is clicked', () => {
+        const props = getProps({ disabled: true });
+        const { getByText } = render(<ButtonArray {...props} />);
+
+        const button = getByText('Yes');
+        fireEvent.click(button);
+
+        expect(props.onChange).not.toHaveBeenCalled();
+    });
+});