sequenceserver 3.0 → 3.1.0

data/public/js/query.js

@@ -5,6 +5,7 @@ import HitsOverview from './hits_overview';
 import LengthDistribution from './length_distribution'; // length distribution of hits
 import Utils from './utils';
 import { fastqToFasta } from './fastq_to_fasta';
+import CollapsePreferences from './collapse_preferences';
 
 /**
  * Query component displays query defline, graphical overview, length
@@ -59,7 +60,7 @@ export class ReportQuery extends Component {
     hitsListJSX() {
         return <div className="section-content">
             <HitsOverview key={'GO_' + this.props.query.number} query={this.props.query} program={this.props.program} collapsed={this.props.veryBig} />
-            <LengthDistribution key={'LD_' + this.props.query.id} query={this.props.query} algorithm={this.props.program} collapsed="true" />
+            <LengthDistribution key={'LD_' + this.props.query.id} query={this.props.query} algorithm={this.props.program} />
             <HitsTable key={'HT_' + this.props.query.number} query={this.props.query} imported_xml={this.props.imported_xml} />
         </div>;
     }
@@ -107,8 +108,8 @@ export class SearchQueryWidget extends Component {
         this.preProcessSequence = this.preProcessSequence.bind(this);
         this.notify = this.notify.bind(this);
 
-        this.textareaRef = createRef()
-        this.controlsRef = createRef()
+        this.textareaRef = createRef();
+        this.controlsRef = createRef();
     }
 
 
@@ -116,13 +117,14 @@ export class SearchQueryWidget extends Component {
 
     componentDidMount() {
         $('body').click(function () {
-            $('.notifications .active').hide('drop', { direction: 'up' }).removeClass('active');
+            $('[data-notifications] [data-role=notification].active').hide('drop', { direction: 'up' }).removeClass('active');
         });
     }
 
     componentDidUpdate() {
         this.hideShowButton();
         this.preProcessSequence();
+        this.props.onSequenceChanged(this.residuesCount());
 
         var type = this.type();
         if (!type || type !== this._type) {
@@ -155,6 +157,19 @@ export class SearchQueryWidget extends Component {
         }
     }
 
+    residuesCount() {
+        const sequence = this.value();
+        const lines = sequence.split('\n');
+        const residuesCount = lines.reduce((count, line) => {
+            if (!line.startsWith('>')) {
+                return count + line.length;
+            }
+            return count;
+        }, 0);
+
+        return residuesCount;
+    }
+
     /**
      * Clears textarea. Returns `this`.
      *
@@ -311,13 +326,13 @@ export class SearchQueryWidget extends Component {
     notify(type) {
         this.indicateNormal();
         clearTimeout(this.notification_timeout);
-        // $('.notifications .active').hide().removeClass('active');
+        // $('[data-notifications] [data-role=notification].active').hide().removeClass('active');
 
         if (type) {
             $('#' + type + '-sequence-notification').show('drop', { direction: 'up' }).addClass('active');
 
             this.notification_timeout = setTimeout(function () {
-                $('.notifications .active').hide('drop', { direction: 'up' }).removeClass('active');
+                $('[data-notifications] [data-role=notification].active').hide('drop', { direction: 'up' }).removeClass('active');
             }, 5000);
 
             if (type === 'mixed') {
@@ -328,14 +343,15 @@ export class SearchQueryWidget extends Component {
 
     render() {
         return (
-            <div
-                className="col-md-12">
+            <div className="relative">
                 <div
                     className="sequence">
                     <textarea
                         id="sequence" ref={this.textareaRef}
-                        className="form-control text-monospace"
+                        className="block w-full p-4 text-gray-900 border border-gray-300 rounded-l-lg rounded-tr-lg bg-gray-50 text-base text-monospace"
                         name="sequence" value={this.state.value}
+                        rows="6"
+                        required="required"
                         placeholder="Paste query sequence(s) or drag file
                         containing query sequence(s) in FASTA format here ..."
                         spellCheck="false" autoFocus
@@ -343,16 +359,16 @@ export class SearchQueryWidget extends Component {
                     </textarea>
                 </div>
                 <div
-                    className="hidden"
-                    style={{ position: 'absolute', top: '4px', right: '19px' }}
+                    className="hidden absolute top-2 right-2"
                     ref={this.controlsRef}>
                     <button
                         type="button"
-                        className="btn btn-sm btn-default" id="btn-sequence-clear"
+                        className="border border-gray-300 rounded bg-white hover:bg-gray-200" id="btn-sequence-clear"
                         title="Clear query sequence(s)."
                         onClick={this.clear}>
                         <span id="sequence-file"></span>
-                        <i className="fa fa-times"></i>
+                        <i className="fa fa-times w-6 h-6 p-1"></i>
+                        <span className="sr-only">Clear query sequence(s).</span>
                     </button>
                 </div>
             </div>
@@ -368,8 +384,14 @@ export class SearchQueryWidget extends Component {
 class HitsTable extends Component {
     constructor(props) {
         super(props);
+        this.name = 'Hit sequences producing significant alignments';
+        this.collapsePreferences = new CollapsePreferences(this);
+        this.state = {
+            collapsed: this.collapsePreferences.preferenceStoredAsCollapsed()
+        };
     }
-    render() {
+
+    tableJSX() {
         var hasName = _.every(this.props.query.hits, function (hit) {
             return hit.sciname !== '';
         });
@@ -385,54 +407,58 @@ class HitsTable extends Component {
         // column.
         if (this.props.imported_xml) seqwidth += 15;
 
+        return <table
+            className="table table-hover table-condensed tabular-view ">
+            <thead>
+                <tr>
+                    <th className="text-left">#</th>
+                    <th width={`${seqwidth}%`}>Similar sequences</th>
+                    {hasName && <th width="15%" className="text-left">Species</th>}
+                    {!this.props.imported_xml && <th width="15%" className="text-right">Query coverage (%)</th>}
+                    <th width="10%" className="text-right">Total score</th>
+                    <th width="10%" className="text-right">E value</th>
+                    <th width="10%" className="text-right">Identity (%)</th>
+                </tr>
+            </thead>
+            <tbody>
+                {
+                    _.map(this.props.query.hits, _.bind(function (hit) {
+                        return (
+                            <tr key={hit.number}>
+                                <td className="text-left">{hit.number + '.'}</td>
+                                <td className="nowrap-ellipsis"
+                                    title={`${hit.id} ${hit.title}`}
+                                    data-toggle="tooltip" data-placement="left">
+                                    <a href={'#Query_' + this.props.query.number + '_hit_' + hit.number}
+                                        className="btn-link">{hit.id} {hit.title}</a>
+                                </td>
+                                {hasName &&
+                                    <td className="nowrap-ellipsis" title={hit.sciname}
+                                        data-toggle="tooltip" data-placement="top">
+                                        {hit.sciname}
+                                    </td>
+                                }
+                                {!this.props.imported_xml && <td className="text-right">{hit.qcovs}</td>}
+                                <td className="text-right">{hit.total_score}</td>
+                                <td className="text-right">{Utils.inExponential(hit.hsps[0].evalue)}</td>
+                                <td className="text-right">{Utils.inPercentage(hit.hsps[0].identity, hit.hsps[0].length)}</td>
+                            </tr>
+                        );
+                    }, this))
+                }
+            </tbody>
+        </table>;
+    }
+
+    render() {
         return (
             <div className="table-hit-overview">
-                <h4 className="caption" data-toggle="collapse" data-target={'#Query_' + this.props.query.number + 'HT_' + this.props.query.number}>
-                    <i className="fa fa-minus-square-o"></i>&nbsp;
-                    <span>Hit sequences producing significant alignments</span>
+                <h4 className="caption" onClick={() => this.collapsePreferences.toggleCollapse()}>
+                    {this.collapsePreferences.renderCollapseIcon()}
+                    <span> {this.name}</span>
                 </h4>
-                <div className="collapsed in" id={'Query_' + this.props.query.number + 'HT_' + this.props.query.number}>
-                    <table
-                        className="table table-hover table-condensed tabular-view ">
-                        <thead>
-                            <tr>
-                                <th className="text-left">#</th>
-                                <th width={`${seqwidth}%`}>Similar sequences</th>
-                                {hasName && <th width="15%" className="text-left">Species</th>}
-                                {!this.props.imported_xml && <th width="15%" className="text-right">Query coverage (%)</th>}
-                                <th width="10%" className="text-right">Total score</th>
-                                <th width="10%" className="text-right">E value</th>
-                                <th width="10%" className="text-right">Identity (%)</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {
-                                _.map(this.props.query.hits, _.bind(function (hit) {
-                                    return (
-                                        <tr key={hit.number}>
-                                            <td className="text-left">{hit.number + '.'}</td>
-                                            <td className="nowrap-ellipsis"
-                                                title={`${hit.id} ${hit.title}`}
-                                                data-toggle="tooltip" data-placement="left">
-                                                <a href={'#Query_' + this.props.query.number + '_hit_' + hit.number}
-                                                    className="btn-link">{hit.id} {hit.title}</a>
-                                            </td>
-                                            {hasName &&
-                                                <td className="nowrap-ellipsis" title={hit.sciname}
-                                                    data-toggle="tooltip" data-placement="top">
-                                                    {hit.sciname}
-                                                </td>
-                                            }
-                                            {!this.props.imported_xml && <td className="text-right">{hit.qcovs}</td>}
-                                            <td className="text-right">{hit.total_score}</td>
-                                            <td className="text-right">{Utils.inExponential(hit.hsps[0].evalue)}</td>
-                                            <td className="text-right">{Utils.inPercentage(hit.hsps[0].identity, hit.hsps[0].length)}</td>
-                                        </tr>
-                                    );
-                                }, this))
-                            }
-                        </tbody>
-                    </table>
+                <div id={'Query_' + this.props.query.number + 'HT_' + this.props.query.number}>
+                    {!this.state.collapsed && this.tableJSX()}
                 </div>
             </div>
         );

data/public/js/report.js

@@ -300,6 +300,7 @@ class Report extends Component {
                 <div className="col-md-9">
                     {this.overviewJSX()}
                     {this.circosJSX()}
+                    {this.plugins.generateStats()}
                     {this.state.results}
                 </div>
             </div>
@@ -386,7 +387,6 @@ class Report extends Component {
             <Circos
                 queries={this.state.queries}
                 program={this.state.program}
-                collapsed="true"
             />
         ) : (
             <span></span>

data/public/js/search.js

@@ -3,6 +3,7 @@ import React, { Component } from "react";
 import { createRoot } from "react-dom/client";
 import { DnD } from "./dnd";
 import { Form } from "./form";
+import { SearchHeaderPlugin } from "search_header_plugin";
 
 /**
  * Clear sessionStorage on reload.
@@ -19,6 +20,7 @@ class Page extends Component {
   render() {
     return (
       <div>
+        <SearchHeaderPlugin />
         <DnD ref="dnd" />
         <Form ref="form" />
       </div>

data/public/js/search_button.js

@@ -12,6 +12,7 @@ export class SearchButton extends Component {
             methods: [],
             hasQuery: false,
             hasDatabases: false,
+            dropdownVisible: false,
         };
         this.inputGroup = this.inputGroup.bind(this);
         this.submitButton = this.submitButton.bind(this);
@@ -28,15 +29,17 @@ export class SearchButton extends Component {
     }
 
     shouldComponentUpdate(props, state) {
-        return !_.isEqual(state.methods, this.state.methods);
+        return !_.isEqual(state.methods, this.state.methods) || state.dropdownVisible !== this.state.dropdownVisible;
     }
 
-    componentDidUpdate() {
-        if (this.state.methods.length > 0) {
-            this.inputGroup().wiggle();
-            this.props.onAlgoChanged(this.state.methods[0]);
-        } else {
-            this.props.onAlgoChanged('');
+    componentDidUpdate(_prevProps, prevState) {
+        if (!_.isEqual(prevState.methods, this.state.methods)) {
+            if (this.state.methods.length > 0) {
+                this.inputGroup().wiggle();
+                this.props.onAlgoChanged(this.state.methods[0]);
+            } else {
+                this.props.onAlgoChanged('');
+            }
         }
     }
     // Internal helpers. //
@@ -110,6 +113,7 @@ export class SearchButton extends Component {
         methods.unshift(method);
         this.setState({
             methods: methods,
+            dropdownVisible: false,
         });
     }
 
@@ -131,64 +135,71 @@ export class SearchButton extends Component {
             });
     }
 
+    toggleDropdownVisibility = () => {
+        this.setState(prevState => ({
+            dropdownVisible: !prevState.dropdownVisible
+        }));
+    }
+
     render() {
         var methods = this.state.methods;
         var method = methods[0];
         var multi = methods.length > 1;
 
         return (
-            <div className="col-md-3">
-                <div className="form-group">
-                    <div className="col-md-12">
-                        <div
-                            className={multi ? 'input-group' : ''}
-                            id="methods"
-                            ref={this.inputGroupRef}
-                            onMouseOver={this.showTooltip}
-                            onMouseOut={this.hideTooltip}
+            <div
+                // className={multi ? 'flex' : 'flex'}
+                className="my-4 md:my-2 flex justify-end w-full md:w-auto relative"
+                id="methods"
+                ref={this.inputGroupRef}
+                onMouseOver={this.showTooltip}
+                onMouseOut={this.hideTooltip}
+            >
+                <button
+                    type="submit"
+                    className="uppercase w-full md:w-auto flex text-xl justify-center py-2 px-16 border border-transparent rounded-md shadow-sm text-white bg-seqblue hover:bg-seqorange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-seqorange"
+                    id="method"
+                    ref={this.submitButtonRef}
+                    name="method"
+                    value={method}
+                    disabled={!method}
+                >
+                    {this.decorate(method || 'blast')}
+                </button>
+
+                {multi && (
+                    <div className="ui--multi-dropdown">
+                        <button
+                            className="text-xl bg-seqblue rounded-r-md text-white p-2 border border-seqblue hover:bg-seqorange focus:outline-none focus:ring-1 focus:ring-seqorange -ml-8"
+                            type="button"
+                            onClick={this.toggleDropdownVisibility}
                         >
-                            <button
-                                type="submit"
-                                className="btn btn-primary form-control text-uppercase"
-                                id="method"
-                                ref={this.submitButtonRef}
-                                name="method"
-                                value={method}
-                                disabled={!method}
-                            >
-                                {this.decorate(method || 'blast')}
-                            </button>
-                            {multi && (
-                                <div className="input-group-btn">
-                                    <button
-                                        className="btn btn-primary dropdown-toggle"
-                                        data-toggle="dropdown"
-                                    >
-                                        <span className="caret"></span>
-                                    </button>
-                                    <ul className="dropdown-menu dropdown-menu-right">
-                                        {_.map(
-                                            methods.slice(1),
-                                            _.bind(function (method) {
-                                                return (
-                                                    <li
-                                                        key={method}
-                                                        className="text-uppercase"
-                                                        onClick={_.bind(function () {
-                                                            this.changeAlgorithm(method);
-                                                        }, this)}
-                                                    >
-                                                        {method}
-                                                    </li>
-                                                );
-                                            }, this)
-                                        )}
-                                    </ul>
-                                </div>
-                            )}
+                            <i className="fas fa-caret-down w-6 h-6 fill-current"></i>
+                            <span className="sr-only">Other methods</span>
+                        </button>
+
+                        <div id="dropdown"
+                            className={`z-10 my-2 uppercase bg-blue-300 divide-y divide-gray-100 rounded-lg shadow absolute left-0 bottom-12 w-full text-xl text-center ${this.state.dropdownVisible ? '' : 'hidden'}`}>
+                            <ul className="text-gray-700" aria-labelledby="dropdownDefaultButton">
+                                {_.map(
+                                    methods.slice(1),
+                                    _.bind(function (method) {
+                                        return (
+                                            <li
+                                                key={method}
+                                                onClick={_.bind(function () {
+                                                    this.changeAlgorithm(method);
+                                                }, this)}
+                                            >
+                                                <a href="#" className="block px-4 py-2 hover:bg-blue-400 rounded-lg">{method}</a>
+                                            </li>
+                                        );
+                                    }, this)
+                                )}
+                            </ul>
                         </div>
                     </div>
-                </div>
+                )}
             </div>
         );
     }

data/public/js/sidebar.js

@@ -198,7 +198,7 @@ export default class extends Component {
         document.body.removeChild(element);
 
         setTimeout(function () {
-            $('#copyURL')._tooltip('destroy');
+            $('#copyURL')._tooltip('hide');
         }, 3000);
     }
 

data/public/js/tests/database.spec.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable no-undef */
-import { render, screen, fireEvent, waitFor, findByText, getByText } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { Databases } from '../databases';
 import data from './mock_data/databases.json';
 
@@ -21,13 +21,13 @@ describe('DATABASES COMPONENT', () => {
     });
 
     test('clicking select all on a database should select all its children', () => {
-        const { container } = render(<Databases databases={data.database} onDatabaseTypeChanged={() => { }} />);
-        
+        const { container } = render(<Databases databases={data.database} onDatabaseTypeChanged={() => { }} onDatabaseSelectionChanged={() => { }} />);
+
         // select all nucleotide databases
         const nucleotideSelectAllBtn = screen.getByRole('heading', { name: /nucleotide databases/i }).parentElement.querySelector('button');
         fireEvent.click(nucleotideSelectAllBtn);
         const nucleotideCheckboxes = container.querySelector('.databases.nucleotide').querySelectorAll('input[type=checkbox]');
-        
+
         // all nucleotide databases should be checked
         nucleotideCheckboxes.forEach((checkbox) => {
             expect(checkbox).toBeChecked();
@@ -45,7 +45,7 @@ describe('DATABASES COMPONENT', () => {
 
     test('checking any item of a database type should disable other database type', () => {
         const mockFunction = jest.fn(() => { });
-        const { container } = render(<Databases databases={data.database} onDatabaseTypeChanged={mockFunction} />);
+        const { container } = render(<Databases databases={data.database} onDatabaseTypeChanged={mockFunction} onDatabaseSelectionChanged={mockFunction}/>);
 
         //select a proteinn database
         fireEvent.click(screen.getByRole('checkbox', { name: /2020-11 Swiss-Prot insecta/i }));

data/public/js/tests/{advanced_parameters.spec.js → form.spec.js}

@@ -11,6 +11,7 @@ import '@testing-library/react/dont-cleanup-after-each';
 export const setMockJSONResult = (result) => {
     global.$.getJSON = (_, cb) => cb(result);
 };
+
 describe('ADVANCED PARAMETERS', () => {
     const getInputElement = () => screen.getByRole('textbox', { name: '' });
     test('should not render the link to advanced parameters modal if blast algorithm is unknown', () => {
@@ -24,7 +25,7 @@ describe('ADVANCED PARAMETERS', () => {
         setMockJSONResult(data);
         const {container } =render(<Form onSequenceTypeChanged={() => { }
         } />);
-        
+
         const inputEl = getInputElement();
         // populate search and select dbs to determine blast algorithm
         fireEvent.change(inputEl, { target: { value: AMINO_ACID_SEQUENCE } });
@@ -34,3 +35,36 @@ describe('ADVANCED PARAMETERS', () => {
         expect(modalButton).not.toBeNull();
     });
 });
+
+describe('query stats', () => {
+    const getInputElement = () => screen.getByRole('textbox', { name: '' });
+
+    test('should render the query stats modal when clicked', () => {
+        const logSpy = jest.spyOn(global.console, 'log');
+
+        setMockJSONResult(data);
+        render(<Form onSequenceTypeChanged={() => { }} />);
+
+        expect(logSpy).toHaveBeenCalledTimes(1);
+
+        const inputEl = getInputElement();
+        // populate search and select dbs to determine blast algorithm
+        fireEvent.change(inputEl, { target: { value: AMINO_ACID_SEQUENCE } });
+
+        expect(logSpy).toHaveBeenCalledTimes(2);
+
+        const proteinSelectAllBtn = screen.getByRole('heading', { name: /protein databases/i }).parentElement.querySelector('button');
+        fireEvent.click(proteinSelectAllBtn);
+
+        expect(logSpy).toHaveBeenCalledTimes(4);
+        expect(logSpy).toHaveBeenCalledWith(
+          'Query stats:',
+          {
+            residuesInQuerySequence: 385,
+            numberOfDatabasesSelected: 4,
+            residuesInSelectedDbs: 4343318,
+            currentBlastMethod: 'blastp'
+          }
+        );
+    });
+});

data/public/js/tests/mock_data/databases.json

@@ -82,10 +82,10 @@
     }
   ],
   "options": {
-    "blastn": { "default": ["-task blastn", "-evalue 1e-5"] },
-    "blastp": { "default": ["-evalue 1e-5"] },
-    "blastx": { "default": ["-evalue 1e-5"] },
-    "tblastx": { "default": ["-evalue 1e-5"] },
-    "tblastn": { "default": ["-evalue 1e-5"] }
+    "blastn": { "default": { "attributes": ["-task blastn", "-evalue 1e-5"] }},
+    "blastp": { "default": { "attributes": ["-evalue 1e-5"] }},
+    "blastx": { "default": { "attributes": ["-evalue 1e-5"] }},
+    "tblastx": { "default": { "attributes": ["-evalue 1e-5"] }},
+    "tblastn": { "default": { "attributes": ["-evalue 1e-5"] }}
   }
 }

data/public/js/tests/mocks/circos.js

@@ -0,0 +1,6 @@
+const Circos = () => {
+    // console.log("Circos mock loaded");
+    return <div></div>;
+};
+
+export default Circos;

data/public/js/tests/report.spec.js

@@ -44,6 +44,7 @@ describe('REPORT PAGE', () => {
         render(<Report showErrorModal={showErrorModal} />);
         expect(showErrorModal).toHaveBeenCalledTimes(1);
     });
+
     it('it should render the report page correctly if there\'s a response provided', () => {
         setMockJSONResult({ status: 200, responseJSON: shortResponseJSON });
         const { container } = render(<Report getCharacterWidth={jest.fn()} />);
@@ -119,7 +120,7 @@ describe('REPORT PAGE', () => {
                 it('link for downloading alignment of specific number of selected hits should be disabled on initial load', () => {
                     const alignment_download_link = container.querySelector('.download-alignment-of-selected');
                     expect(alignment_download_link.classList.contains('disabled')).toBeTruthy();
-    
+
                 });
                 it('should generate a blob url and filename for downloading alignment of specific number of selected hits', () => {
                     const alignment_download_link = container.querySelector('.download-alignment-of-selected');
@@ -132,7 +133,7 @@ describe('REPORT PAGE', () => {
                     expect(alignment_download_link.download).toEqual(file_name);
                 });
             });
-    
+
             describe('FASTA DOWNLOAD', () => {
                 let fasta_download_link;
                 beforeEach(() => {
@@ -141,7 +142,7 @@ describe('REPORT PAGE', () => {
                 it('link for downloading fasta of selected number of hits should be disabled on initial load', () => {
                     expect(fasta_download_link.classList.contains('disabled')).toBeTruthy();
                 });
-    
+
                 it('link for downloading fasta of specific number of selected hits should be active after selection', () => {
                     const checkboxes = container.querySelectorAll('.hit-links input[type="checkbox"]');
                     // SELECT 5 CHECKBOXES

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';
@@ -18,7 +17,7 @@ describe('SEARCH COMPONENT', () => {
     });
 
     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 +32,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 +41,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 +49,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 +57,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.');