sequenceserver 3.0.1 → 3.1.2

data/public/js/tests/search_query.spec.js

@@ -1,7 +1,6 @@
 /* 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 { AMINO_ACID_SEQUENCE, NUCLEOTIDE_SEQUENCE, FASTQ_SEQUENCE, FASTA_OF_FASTQ_SEQUENCE } from './mock_data/sequences';
 import '@testing-library/jest-dom/extend-expect';
@@ -11,14 +10,25 @@ let container;
 let inputEl;
 
 describe('SEARCH COMPONENT', () => {
+    let csrfMetaTag;
+
     beforeEach(() => {
+        csrfMetaTag = document.createElement('meta');
+        csrfMetaTag.setAttribute('name', '_csrf');
+        csrfMetaTag.setAttribute('content', 'test-token');
+        document.head.appendChild(csrfMetaTag);
         container  = render(<Form onSequenceTypeChanged={() => { }
         } />).container;
         inputEl = screen.getByRole('textbox', { name: '' });
     });
 
+    afterEach(() => {
+        // Remove the CSRF meta tag after each test to clean up
+        document.head.removeChild(csrfMetaTag);
+    });
+
     test('should render the search component textarea', () => {
-        expect(inputEl).toHaveClass('form-control');
+        expect(inputEl).toBeInTheDocument();
     });
 
     test('clear button should only become visible if textarea is not empty', () => {
@@ -33,7 +43,7 @@ describe('SEARCH COMPONENT', () => {
     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');
+        const activeNotification = container.querySelector('[data-role=notification].active');
         expect(activeNotification.id).toBe('protein-sequence-notification');
         const alertWrapper = activeNotification.children[0];
         expect(alertWrapper).toHaveTextContent('Detected: amino-acid sequence(s).');
@@ -42,7 +52,7 @@ describe('SEARCH COMPONENT', () => {
     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 activeNotification = container.querySelector('[data-role=notification].active');
         const alertWrapper = activeNotification.children[0];
         expect(activeNotification.id).toBe('nucleotide-sequence-notification');
         expect(alertWrapper).toHaveTextContent('Detected: nucleotide sequence(s).');
@@ -50,7 +60,7 @@ describe('SEARCH COMPONENT', () => {
 
     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');
+        const activeNotification = container.querySelector('[data-role=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.');
@@ -58,7 +68,7 @@ describe('SEARCH COMPONENT', () => {
 
     test('should correctly detect FASTQ and convert it to FASTA', () => {
         fireEvent.change(inputEl, { target: { value: FASTQ_SEQUENCE } });
-        const activeNotification = container.querySelector('.notification.active');
+        const activeNotification = container.querySelector('[data-role=notification].active');
         const alertWrapper = activeNotification.children[0];
         expect(activeNotification.id).toBe('fastq-sequence-notification');
         expect(alertWrapper).toHaveTextContent('Detected FASTQ and automatically converted to FASTA.');