Wire-Filter e2e

assets/wire/components/WireListItem.tsx

@@ -160,6 +160,8 @@ class WireListItem extends React.Component<any, any> {
                 onClick={() => onClick(item)}
                 onDoubleClick={() => onDoubleClick(item)}
                 onKeyDown={this.onKeyDown}
+                data-test-id="wire-item"
+                data-test-value={item._id}
             >
                 <UrgencyItemBorder item={item} listConfig={listConfig} />
                 <div className={wrapClassName} tabIndex={0}>

assets/wire/components/filters/FilterItem.tsx

@@ -5,7 +5,7 @@ export default function FilterItem({bucket, group, toggleFilter, groupFilter}: a
     const isActive = groupFilter.indexOf(bucket.key) !== -1;
 
     return (
-        <div className="form-check">
+        <div className="form-check" data-test-id="filter" data-test-value={bucket.key}>
             <input
                 type="checkbox"
                 className="form-check-input"

assets/wire/components/filters/FiltersTab.tsx

@@ -141,8 +141,11 @@ class FiltersTab extends React.Component<any, any> {
                 {!isResetActive && !this.props.resultsFiltered ? null : ([
                     <div className='tab-pane__footer tab-pane__footer--inline' key='footer-buttons'>
 
-                        <button className='nh-button nh-button--secondary'
-                            onClick={this.reset}>
+                        <button
+                            className='nh-button nh-button--secondary'
+                            onClick={this.reset}
+                            data-test-id="filter-panel--clear-btn"
+                        >
                             {gettext('Clear')}
                         </button>
                         <button

e2e/cypress/e2e/wire/wire_action.cy.js

@@ -0,0 +1,76 @@
+import {setup, addDefaultResources, addResources} from '../../support/e2e';
+import {WirePage} from '../../support/pages/wire'
+import {FilterPanel} from '../../support/pages/filter_panel'
+import {NewshubLayout} from '../../support/pages/layout';
+import {WIRE_ITEMS} from '../../fixtures/wire'
+
+const WireItems = {
+    item_1: {
+        ...WIRE_ITEMS.syd_weather_1,
+        versioncreated: new Date(),
+    },
+    item_2: WIRE_ITEMS.bris_traffic_1,
+};
+
+describe('wire - filters', () => {
+    beforeEach(() => {
+        setup();
+        addDefaultResources();
+        addResources([{
+            resource: 'items',
+            use_resource_service: false,
+            items: [
+                WireItems.item_1,
+                WireItems.item_2,
+            ],
+        }]);
+        NewshubLayout.login('admin@example.com', 'admin');
+    });
+
+    it('can search using navigation & filters', () => {
+        /**
+            SEARCH
+        */
+        WirePage.openSideNav();
+        WirePage.search('Sydney');
+
+        cy.url().should('include', 'Sydney');
+
+        WirePage.item(WireItems.item_1._id).should('exist');
+        WirePage.item(WireItems.item_2._id).should('not.exist');
+
+        cy.get('[data-test-id="top-search-bar"] form input').clear().type("{enter}");
+        cy.url().should('not.include', 'Sydney');
+
+        WirePage.item(WireItems.item_1._id).should('exist');
+        WirePage.item(WireItems.item_2._id).should('exist');
+
+        /**
+            FILTERS
+        */
+        FilterPanel.openPanel();
+        FilterPanel.openFiltersTab();
+
+        /**
+            check filtering by checkboxes
+        */
+        FilterPanel.selectFilter(WireItems.item_1.service[0].name);
+        FilterPanel.button('search');
+
+        cy.url().should('include', `${WireItems.item_1.service[0].name}`);
+
+        WirePage.item(WireItems.item_1._id).should('exist');
+        WirePage.item(WireItems.item_2._id).should('not.exist');
+
+        FilterPanel.button('clear');
+
+        /**
+            check filtering by date input
+        */
+        FilterPanel.selectNowDate();
+        FilterPanel.button('search');
+
+        WirePage.item(WireItems.item_1._id).should('exist');
+        WirePage.item(WireItems.item_2._id).should('not.exist'); 
+    });
+});

e2e/cypress/support/pages/filter_panel.js

@@ -0,0 +1,23 @@
+class FilterPanelWrapper {
+    openPanel() {
+        cy.get('[data-test-id="toggle-filter-panel"]').click();
+    }
+
+    openFiltersTab() {
+        cy.get('[data-test-id="filter-panel-tab--filters"]').click();
+    }
+
+    selectFilter(value) {
+        cy.get(`[data-test-id="filter"][data-test-value="${value}"] input`).check();
+    }
+
+    button(value) {
+        cy.get(`[data-test-id="filter-panel--${value}-btn"]`).click();
+    }
+
+    selectNowDate() {
+        cy.get('[data-test-id="nav-link--today"]').click();
+    }
+}
+
+export const FilterPanel = new FilterPanelWrapper();

e2e/cypress/support/pages/wire.js

@@ -7,6 +7,10 @@ class WirePageWrapper {
         this.filterPanel = new FilterPanelContainer();
     }
 
+    item(value) {
+        return cy.get(`[data-test-id="wire-item"][data-test-value="${value}"]`);
+    }
+
     showAdvancedSearchModal() {
         cy.get('[data-test-id="show-advanced-search-panel-btn"]').click();
     }
@@ -20,6 +24,15 @@ class WirePageWrapper {
     getTopSearchBarInput() {
         return cy.get('[data-test-id="top-search-bar"] input');
     }
+
+    openSideNav() {
+        cy.get('[data-test-id="sidenav-link-wire"]').click();
+    }
+
+    search(value) {
+        cy.get('[data-test-id="top-search-bar"]').click().type(value);
+        cy.get('[data-test-id="search-submit-button"]').click();
+    }
 }
 
 export const WirePage = new WirePageWrapper();