public/js/tests/search_query.spec.js in sequenceserver-2.1.0 vs public/js/tests/search_query.spec.js in sequenceserver-2.2.0

@@ -1,41 +1,58 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable no-undef */
 import { render, screen, fireEvent } from '@testing-library/react';
 import { SearchQueryWidget } from '../query';
 import { Form } from '../form';
-import userEvent from '@testing-library/user-event';
+import { AMINO_ACID_SEQUENCE, NUCLEOTIDE_SEQUENCE } from './mock_data/sequences';
 import '@testing-library/jest-dom/extend-expect';
 import '@testing-library/react/dont-cleanup-after-each';
 
-export const AMINO_ACID_SEQUENCE = `MNTLWLSLWDYPGKLPLNFMVFDTKDDLQAAYWRDPYSIPLAVIFEDPQPISQRLIYEIR
-TNPSYTLPPPPTKLYSAPISCRKNKTGHWMDDILSIKTGESCPVNNYLHSGFLALQMITD
-ITKIKLENSDVTIPDIKLIMFPKEPYTADWMLAFRVVIPLYMVLALSQFITYLLILIVGE
-KENKIKEGMKMMGLNDSVF
->SI2.2.0_13722 locus=Si_gnF.scaffold06207[1925625..1928536].pep_1 quality=100.00
-MSANRLNVLVTLMLAVALLVTESGNAQVDGYLQFNPKRSAVSSPQKYCGKKLSNALQIIC
-DGVYNSMFKKSGQDFPPQNKRHIAHRINGNEEESFTTLKSNFLNWCVEVYHRHYRFVFVS
-EMEMADYPLAYDISPYLPPFLSRARARGMLDGRFAGRRYRRESRGIHEECCINGCTINEL
-TSYCGP
-`;
+let container;
+let inputEl;
+
 describe('SEARCH COMPONENT', () => {
-    const getInputElement = () => screen.getByRole('textbox', { name: '' });
+    beforeEach(() => {
+        container  = render(<Form onSequenceTypeChanged={() => { }
+        } />).container;
+        inputEl = screen.getByRole('textbox', { name: '' });
+    });
+    
     test('should render the search component textarea', () => {
-        render(<SearchQueryWidget onSequenceTypeChanged={() => { }
-        } />);
-        const el = getInputElement();
-        expect(el).toHaveClass('form-control');
+        expect(inputEl).toHaveClass('form-control');
     });
 
     test('clear button should only become visible if textarea is not empty', () => {
-        render(<SearchQueryWidget onSequenceTypeChanged={() => { }
-        } />);
         const getButtonWrapper = () => screen.getByRole('button', { name: /clear query sequence\(s\)\./i }).parentElement;
         expect(getButtonWrapper()).toHaveClass('hidden');
-        const inputEl = getInputElement();
         fireEvent.change(inputEl, { target: { value: AMINO_ACID_SEQUENCE } });
         expect(getButtonWrapper()).not.toHaveClass('hidden');
         fireEvent.change(inputEl, { target: { value: '' } });
         expect(getButtonWrapper()).toHaveClass('hidden');
+    });
 
+    test('should correctly detect the amino-acid sequence type and show notification', () => {
+        // populate search
+        fireEvent.change(inputEl, { target: { value: AMINO_ACID_SEQUENCE } });
+        const activeNotification = container.querySelector('.notification.active');
+        expect(activeNotification.id).toBe('protein-sequence-notification');
+        const alertWrapper = activeNotification.children[0];
+        expect(alertWrapper).toHaveTextContent('Detected: amino-acid sequence(s).');
+    });
+
+    test('should correctly detect the nucleotide sequence type and show notification', () => {
+        // populate search
+        fireEvent.change(inputEl, { target: { value: NUCLEOTIDE_SEQUENCE } });
+        const activeNotification = container.querySelector('.notification.active');
+        const alertWrapper = activeNotification.children[0];
+        expect(activeNotification.id).toBe('nucleotide-sequence-notification');
+        expect(alertWrapper).toHaveTextContent('Detected: nucleotide sequence(s).');
+    });
+    
+    test('should correctly detect the mixed sequences and show error notification', () => {
+        fireEvent.change(inputEl, { target: { value: `${NUCLEOTIDE_SEQUENCE}${AMINO_ACID_SEQUENCE}` } });
+        const activeNotification = container.querySelector('.notification.active');
+        expect(activeNotification.id).toBe('mixed-sequence-notification');
+        const alertWrapper = activeNotification.children[0];
+        expect(alertWrapper).toHaveTextContent('Error: mixed nucleotide and amino-acid sequences detected.');
     });
 });