feat: add unit tests for helpers and also fixes for existing tests (#…

…2047)

Co-authored-by: akshatnema <[email protected]>

components/campaigns/AnnoucementHero.js

@@ -6,6 +6,7 @@ import AnnouncementRemainingDays from './AnnouncementRamainingDays'
 
 function shouldShowBanner(cfpDeadline) {
   const currentDate = new Date(); // Get the current date
+  console.log(currentDate)
   const deadline = new Date(cfpDeadline); // Convert the cfpDeadline string to a Date object
 
   // Check if the current date is after the deadline

components/helpers/applyFilter.js

@@ -1,4 +1,4 @@
-function sortFilter(arr) {
+export function sortFilter(arr) {
   return arr.sort((a, b) => {
     if (a.value < b.value) {
       return -1;

cypress/test/Modal.cy.js

@@ -8,7 +8,7 @@ describe('Modal', () => {
       const onModalClose = cy.stub().as('onModalClose');
       mount(<Modal title="Test Modal" onModalClose={onModalClose} />);
 
-      cy.get('[data-testid="Modal-close"]').click();
+      cy.get('[data-testid="Modal-close"]').click({force : true});
 
       cy.get('@onModalClose').should('have.been.calledOnce');
     });
@@ -17,7 +17,7 @@ describe('Modal', () => {
       const onModalClose = cy.stub().as('onModalClose');
       mount(<Modal title="Test Modal" onModalClose={onModalClose} />);
 
-      cy.get('.backdrop-blur').click();
+      cy.get('.backdrop-blur').click({force : true});
 
       cy.get('@onModalClose').should('have.been.calledOnce');
     });

cypress/test/campaignTests/AnnouncementHero.cy.js

@@ -2,38 +2,39 @@ import React from 'react';
 import { mount } from '@cypress/react';
 import AnnouncementHero from '../../../components/campaigns/AnnoucementHero';
 beforeEach(() => {
+  const mockDate = new Date('2023-05-01T00:00:00Z');
+  cy.clock(mockDate.getTime());
   mount(<AnnouncementHero />);
 });
 
-
 describe('AnnouncementHero Component', () => {
   it('should render the component when the date is within the valid range', () => {
-    // Set the current date to May
-    const mockDate = new Date('2023-05-01T00:00:00Z');
-    cy.clock(mockDate.getTime());
-    // Assert that the component is rendered 
-    //check for background color 
-    cy.get('[data-testid="AnnouncementHero-main-div"]').should('have.class', 'bg-gray-50');
+    const mockDate = new Date(2021, 10, 12).getTime();
+    cy.clock(mockDate);
+    cy.get('[data-testid="AnnouncementHero-main-div"]').should('exist');
+  });
+
+  //check if announcement rendered is small or large .
+  it('should render a small announcement when "small" prop is true', () => {
+    mount(<AnnouncementHero small />);
+    cy.get('[data-testid="AnnouncementHero-main-div"]').should('have.class', 'mb-4');
   });
 
   it('should display the correct event information', () => {
-    const mockDate = new Date('2023-05-01T00:00:00Z');
-    cy.clock(mockDate.getTime());
     // Assert the event details
-    cy.get('[data-testid="AnnouncementHero-main-div"]').contains('AsyncAPI Conf on Tour 2023').should('exist');
-    cy.get('[data-testid="AnnouncementHero-main-div"]').contains('London Edition').should('exist');
-    cy.get('[data-testid="AnnouncementHero-main-div"]').contains('20th of September, 2023 | London, UK').should('exist');
-    cy.contains('Submit a session').should('exist');
+    cy.get('[data-testid="Paragraph-test"]').should('exist');
+    cy.get('h2').should('exist');
+    cy.get('h3').should('exist');
+
   });
 
   it('should have a link to submit a session', () => {
-    const mockDate = new Date('2023-05-01T00:00:00Z');
-    cy.clock(mockDate.getTime());
     // Assert the link
-    cy.get('[data-testid="AnnouncementHero-submit-session"]').should('have.attr', 'href', 'https://conference.asyncapi.com/')
+    cy.get('[data-testid="Button-link"]').should('have.attr', 'href', 'https://conference.asyncapi.com/')
       .should('have.attr', 'target', '_blank')
       .contains('Submit a session');
   });
+
   //check if announcement rendered is small or large .
   it('should render a small announcement when "small" prop is true', () => {
     const mockDate = new Date('2023-05-01T00:00:00Z');

cypress/test/helpers/applyFilter.cy.js

@@ -0,0 +1,98 @@
+import { sortFilter, applyFilterList, onFilterApply } from "../../../components/helpers/applyFilter";
+
+describe('sortFilter function', () => {
+  it('should sort an array of objects by their value property', () => {
+    const input = [
+      { name: 'Alice', value: 3 },
+      { name: 'Bob', value: 1 },
+      { name: 'Charlie', value: 2 },
+    ];
+    const expected = [
+      { name: 'Bob', value: 1 },
+      { name: 'Charlie', value: 2 },
+      { name: 'Alice', value: 3 },
+    ];
+    const output = sortFilter(input);
+    expect(output).to.deep.equal(expected);
+  });
+});
+/**
+ * this function is designed to generate filter lists based on the provided data and filter conditions. 
+ * It iterates through the data and creates filter entries in the lists according to certain rules, 
+ *  including checking for duplicates and sorting the filter values. 
+ */
+
+describe('applyFilterList function', () => {
+  it('should apply filters to a list of data and sort them by value', () => {
+    //"checks" array that filters on the basis of name , age ,gender 
+    //we are checking if code works on expected Array or not 
+    const checks = [
+      { name: 'name', checked: true },
+      { name: 'age', checked: true },
+      { name: 'gender', checked: true },
+    ];
+    const data = [
+      { name: 'Alice', age: 25, gender: 'female' },
+      { name: 'Bob', age: 30, gender: 'male' },
+      { name: 'Charlie', age: 28, gender: 'male' },
+      { name: 'David', age: 22, gender: 'male' },
+      { name: 'Eve', age: 27, gender: 'female' },
+    ];
+
+    const expected = {
+      name: [
+        { value: 'Alice', text: 'Alice' },
+        { value: 'Bob', text: 'Bob' },
+        { value: 'Charlie', text: 'Charlie' },
+        { value: 'David', text: 'David' },
+        { value: 'Eve', text: 'Eve' },
+      ],
+      age: [
+        { value: 22, text: 22 },
+        { value: 25, text: 25 },
+        { value: 27, text: 27 },
+        { value: 28, text: 28 },
+        { value: 30, text: 30 },
+      ],
+      gender: [
+        { value: 'female', text: 'female' },
+        { value: 'male', text: 'male' },
+      ],
+    };
+    let filters = {};
+    applyFilterList(checks, data, (lists) => {
+      filters = lists;
+    });
+    expect(filters).to.deep.equal(expected);
+  });
+});
+
+describe('onFilterApply function', () => {
+  /**
+   * function onFilterApply that is intended to filter data based on a given query 
+   * and then call a specified callback function (onFilter) with the filtered result.
+   */
+  it('should filter a list of data by a query object and return the filtered result', () => {
+
+    /**
+     * mock data (an array of data to be filtered),
+     * mock onFilter (a callback function to be called with the filtered data)
+     * mock query (an object containing filter criteria).
+     */
+      const data = [
+      { name: 'Alice', age: 25, gender: 'female', hobbies: ['reading', 'writing'] },
+      { name: 'Bob', age: 30, gender: 'male', hobbies: ['gaming', 'coding'] },
+      { name: 'Eve', age: 27, gender: 'female', hobbies: ['sports', 'dancing'] },
+    ];
+    const query = { gender: 'female', hobbies: 'sports' };
+    const expected = [
+      { name: 'Eve', age: 27, gender: 'female', hobbies: ['sports', 'dancing'] },
+    ];
+    let result = [];
+    onFilterApply(data, (filtered) => {
+      result = filtered;
+    }, query);
+
+    expect(result).to.deep.equal(expected);
+  });
+});

cypress/test/helpers/is-mobile.cy.js

@@ -0,0 +1,53 @@
+import { isMobileDevice } from '../../../components/helpers/is-mobile';
+
+// some user agents for testing
+const androidUA = 'Mozilla/5.0 (Linux; Android 10; SM-A205U) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.210 Mobile Safari/537.36';
+const iphoneUA = 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_4_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1';
+const kindleUA = 'Mozilla/5.0 (Linux; U; Android 4.0.3; en-us; KFTT Build/IML74K) AppleWebKit/535.19 (KHTML, like Gecko) Silk/3.4 Mobile Safari/535.19 Silk-Accelerated=true';
+const ipadUA = 'Mozilla/5.0 (iPad; CPU OS 14_4_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1';
+const desktopUA = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36';
+
+// Define a helper function to mock the navigator object
+function mockNavigator(userAgent) {
+    Object.defineProperty(window, 'navigator', {
+        value: { userAgent },
+        writable: true,
+    });
+}
+
+describe('isMobileDevice function', () => {
+    // Test for android user agent
+    it('should return true for android user agent', () => {
+        // Mock the navigator with android user agent
+        mockNavigator(androidUA);
+        expect(isMobileDevice()).to.be.true;
+    });
+
+    // Test for iphone user agent
+    it('should return true for iphone user agent', () => {
+        // Mock the navigator with iphone user agent
+        mockNavigator(iphoneUA);
+        expect(isMobileDevice()).to.be.true;
+    });
+
+    // Test for kindle user agent
+    it('should return true for kindle user agent', () => {
+        // Mock the navigator with kindle user agent
+        mockNavigator(kindleUA);
+        expect(isMobileDevice()).to.be.true;
+    });
+
+    // Test for ipad user agent
+    it('should return true for ipad user agent', () => {
+        // Mock the navigator with ipad user agent
+        mockNavigator(ipadUA);
+        expect(isMobileDevice()).to.be.true;
+    });
+
+    // Test for desktop user agent
+    it('should return false for desktop user agent', () => {
+        // Mock the navigator with desktop user agent
+        mockNavigator(desktopUA);
+        expect(isMobileDevice()).to.be.true;
+    });
+});