@aquera/nile-elements 1.3.3-beta-1.4 → 1.3.3-beta-1.6

package/src/nile-calendar/nile-calendar.test.ts

@@ -1,410 +0,0 @@
-import { fixture, html, expect, oneEvent, elementUpdated, waitUntil } from '@open-wc/testing';
-import './nile-calendar';
-import { NileCalendar } from './nile-calendar';
-import Sinon from 'sinon';
-import { NileButton } from '../nile-button';
-import { NileIcon } from '../nile-icon';
-import { NileTab } from '../nile-tab';
-import { NileTabGroup } from '../nile-tab-group';
-import { NileSelect } from '../nile-select';
-import { NileInput } from '../nile-input';
-
-import './nile-calendar';
-import '../nile-input/nile-input';
-import '../nile-select/nile-select';
-import '../nile-tab-group/nile-tab-group';
-import '../nile-tab/nile-tab';
-import '../nile-button/nile-button';
-
-function wait(ms:number=50000) {
-  return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-describe('NileCalendar', () => {
-  it('renders correctly with default properties', async () => {
-    const el = await fixture<NileCalendar>(html`<nile-calendar></nile-calendar>`);
-    expect(el).shadowDom.to.equalSnapshot();
-  });
-  
-  it('should render correctly', async () => {
-    const el = await fixture<NileCalendar>(html`<nile-calendar></nile-calendar>`);
-    expect(el).to.be.instanceOf(NileCalendar);
-    expect(el.shadowRoot).not.to.be.null;
-  });
-
-  it('should initialize value on connectedCallback', async () => {
-    const el = await fixture<NileCalendar>(html`<nile-calendar value="2023-10-01"></nile-calendar>`);
-    el.connectedCallback();
-    expect(el.value?.toISOString().split('T')[0]).to.equal('2023-10-01');
-  });
-
-  it('should emit `nile-init` event on connectedCallback', async () => {
-    const el = await fixture<NileCalendar>(html`<nile-calendar></nile-calendar>`);
-    const eventSpy = Sinon.spy(el, 'emit');
-    el.connectedCallback();
-    expect(eventSpy).to.have.been.calledWith('nile-init');
-  });
-
-  it('should initialize value on connectedCallback', async () => {
-    const el = await fixture<NileCalendar>(html`<nile-calendar value="2023-10-01"></nile-calendar>`);
-    el.connectedCallback();
-    expect(el.value?.toISOString().split('T')[0]).to.equal('2023-10-01');
-  });
-
-  it('should update value when valueAttribute changes', async () => {
-    const el = await fixture<NileCalendar>(html`<nile-calendar value="2023-10-01"></nile-calendar>`);
-    el.valueAttribute = '2023-11-05';
-    await el.updateComplete;
-    expect(el.value?.toISOString().split('T')[0]).to.equal('2023-11-05');
-  });
-
-  it('should select a single date when clicked', async () => {
-    const el = await fixture<NileCalendar>(html`<nile-calendar></nile-calendar>`);
-    
-    // Get the current date element in the calendar
-    const currentDateElement = el.shadowRoot?.querySelector('div.days_container div.current__date__dot')?.parentElement?.parentElement;
-  
-    // Simulate a click on the current date after a brief timeout
-    setTimeout(() => currentDateElement?.click());
-  
-    // Wait for the 'nile-change' event to be emitted
-    const { detail: { value } } = await oneEvent(el, 'nile-change');
-  
-    // Update the element after the event
-    await elementUpdated(el);
-  
-    const emittedDate = new Date(value);
-    // Assertions
-    expect(value).to.exist;
-    expect(emittedDate.getDate()).to.equal(new Date().getDate());
-    expect(currentDateElement?.className).to.include('selected-date');
-  });
-
-  it('should change the month correctly on next and previous button click', async () => {
-    const el = await fixture<NileCalendar>(html`<nile-calendar></nile-calendar>`);
-    await elementUpdated(el);
-  
-    function getMonths() {
-      const currentDate = new Date();
-      
-      const previousMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1);
-      const currentMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
-      const nextMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1);
-  
-      return {
-          prevMonth: previousMonth.toLocaleString('default', { month: 'long', year: 'numeric' }).split(' ').at(0),
-          currMonth: currentMonth.toLocaleString('default', { month: 'long', year: 'numeric' }).split(' ').at(0),
-          nextMonth: nextMonth.toLocaleString('default', { month: 'long', year: 'numeric' }).split(' ').at(0)
-      };
-    }
-    const {prevMonth,currMonth,nextMonth}=getMonths()
-    console.log(prevMonth,currMonth,nextMonth)
-  
-    // Check initial month
-    let monthText = el.shadowRoot?.querySelector('div.calendar-header > span')?.textContent;
-    expect(monthText).to.include(currMonth);
-  
-    // Click next button and check next month
-    const [prevButton, nextButton] = el.shadowRoot?.querySelectorAll<NileIcon>('nile-icon') || [];
-    nextButton?.click();
-    await elementUpdated(el);
-    monthText = el.shadowRoot?.querySelector('div.calendar-header > span')?.textContent;
-    expect(monthText).to.include(nextMonth);
-  
-    // Click previous button twice and check previous month
-    prevButton?.click();
-    await elementUpdated(el);
-    prevButton?.click();
-    await elementUpdated(el);
-    monthText = el.shadowRoot?.querySelector('div.calendar-header > span')?.textContent;
-    expect(monthText).to.include(prevMonth);
-  })
-
-  it('should allow range selection and emit validated data on apply', async () => {
-    const el = await fixture<NileCalendar>(html`<nile-calendar range></nile-calendar>`);
-    await elementUpdated(el);
-
-    // Get day elements from the calendar, selecting two dates for range selection
-    const days = el.shadowRoot?.querySelectorAll('.days_container .day_date:not(.filler)') || [];
-    const firstDay = days[4] as HTMLElement;  // Choose the 5th day of the month
-    const lastDay = days[9] as HTMLElement;  // Choose the 10th day of the month
-
-    // Simulate click events for selecting the range (start and end date)
-    firstDay.click();
-    await elementUpdated(el); // Wait for updates after selection
-    lastDay.click();
-    await elementUpdated(el); // Wait for updates after range selection
-
-    // Ensure both dates are correctly selected in the DOM
-    expect(firstDay.classList.contains('range-start')).to.be.true;
-    expect(lastDay.classList.contains('range-end')).to.be.true;
-
-    // Find and click the "Apply" button to confirm the range
-    const applyButton = el.shadowRoot?.querySelector<NileButton>('.apply-button');
-    setTimeout(() => applyButton?.click());
-
-    // Wait for the emitted 'nile-changed' event
-    const { detail } = await oneEvent(el, 'nile-changed');
-
-    // Extract the emitted start and end dates from the event detail
-    const { startDate, endDate } = detail;
-    
-    // Validate the emitted data
-    const expectedStartDate = new Date();
-    expectedStartDate.setDate(5); // Adjust to the expected 5th day
-    const expectedEndDate = new Date();
-    expectedEndDate.setDate(10); // Adjust to the expected 10th day
-    
-    expect(startDate.getDate()).to.equal(expectedStartDate.getDate());
-    expect(endDate.getDate()).to.equal(expectedEndDate.getDate());
-  });
-
-  it('should correctly apply allowed dates range on calendar', async () => {
-    const currentMonth = new Date().getMonth();
-    const currentYear = new Date().getFullYear();
-
-    // Define a range of allowed dates (e.g., from the 5th to the 20th of the current month)
-    const allowedDates = {
-      startDate: `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-05`,
-      endDate: `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-20`
-    };
-
-    // Pass the allowed dates to the component as a property
-    const el = await fixture<NileCalendar>(html`
-      <nile-calendar allowedDates='${JSON.stringify(allowedDates)}'></nile-calendar>
-    `);
-
-    await elementUpdated(el);
-
-    // Get all day elements from the calendar
-    const days = el.shadowRoot?.querySelectorAll('.days_container .day_date') || [];
-
-    // Verify that days outside the allowed range are marked as not allowed
-    days.forEach((dayElement, index) => {
-      const dayNumber = Number(dayElement.textContent?.trim());
-
-      if (dayNumber < 5 || dayNumber > 20) {
-        expect(dayElement.classList.contains('not-allowed')).to.be.true;
-      } else {
-        expect(dayElement.classList.contains('not-allowed')).to.be.false;
-      }
-    });
-  });
-  
-  it('should select various ranges in relative calendar and emit correct data', async () => {
-    const el = await fixture<NileCalendar>(html`<nile-calendar range type="relative"></nile-calendar>`);
-    await elementUpdated(el);
-
-    // Define test cases with unit and values for the relative range selection
-    const testCases = [
-      { unit: 'minutes', value: 15 },
-      { unit: 'hours', value: 2 },
-      { unit: 'days', value: 3 },
-      { unit: 'weeks', value: 1 },
-      { unit: 'months', value: 6 }
-    ];
-
-    let index=1;
-    for (const testCase of testCases) {
-      const { unit, value } = testCase;
-
-      // Find the unit selector buttons and simulate click for the corresponding unit
-      const unitSelector = Array.from(el.shadowRoot?.querySelectorAll<HTMLElement>(`div.unit-container .duration-units:nth-child(${index*2})>div`)??[]).find(el=>Number(el.textContent?.trim())==value);
-      unitSelector?.click();
-      await elementUpdated(el);
-
-      // Simulate clicking the apply button
-      const applyButton = el.shadowRoot?.querySelector<HTMLButtonElement>('.apply-button');
-      setTimeout(() =>{ 
-        applyButton?.click();
-      });
-
-      // Wait for the emitted `nile-changed` event and get the emitted start and end dates
-      const { detail } = await oneEvent(el, 'nile-change');
-      const { startDate, endDate } = detail;
-
-      // Validate the emitted data for each unit
-      const now = new Date();
-      let expectedStartDate = new Date(now);
-      
-      switch (unit) {
-        case 'minutes':
-          expectedStartDate.setMinutes(now.getMinutes() - value);
-          break;
-        case 'hours':
-          expectedStartDate.setHours(now.getHours() - value);
-          break;
-        case 'days':
-          expectedStartDate.setDate(now.getDate() - value);
-          break;
-        case 'weeks':
-          expectedStartDate.setDate(now.getDate() - value * 7);
-          break;
-        case 'months':
-          expectedStartDate.setMonth(now.getMonth() - value);
-          break;
-      }
-
-      // Ensure the emitted startDate and endDate match the expected values
-      expect(startDate.getTime()).to.be.closeTo(expectedStartDate.getTime(), 1000); // Allowing a small time tolerance
-      expect(endDate.getTime()).to.be.closeTo(now.getTime(), 1000); // The endDate should be roughly now
-      index++;
-    }
-  });
-
-  it('should allow manual time input for from and to fields and emit correct data', async () => {
-    const el = await fixture<NileCalendar>(html`
-      <nile-calendar range showManualInputs></nile-calendar>
-    `);
-    await elementUpdated(el);
-
-    const days = el.shadowRoot?.querySelectorAll('.days_container .day_date:not(.filler)') || [];
-    const firstDay = days[4] as HTMLElement;  // Select 5th day of the month
-    const lastDay = days[9] as HTMLElement;  // Select 10th day of the month
-
-    // Simulate clicks to select the range (start and end date)
-    firstDay.click();
-    await elementUpdated(el);
-    lastDay.click();
-    await elementUpdated(el);
-
-    // Find the "From" and "To" input fields
-    const fromInput = el.shadowRoot?.querySelector<HTMLInputElement>('nile-input[label="From"]');
-    const toInput = el.shadowRoot?.querySelector<HTMLInputElement>('nile-input[label="To"]');
-
-    // Manually set the "From" and "To" time values
-    if (fromInput && toInput) {
-      // Simulate input events for both "From" and "To" time inputs
-      fromInput.dispatchEvent(new CustomEvent('nile-change',{detail:{value:'08:30:00'}}));
-      toInput.dispatchEvent(new CustomEvent('nile-change',{detail:{value:'17:00:00'}}));
-    }
-
-    await elementUpdated(el); // Wait for the DOM to update after the inputs
-
-    // Simulate clicking the "Apply" button
-    const applyButton = el.shadowRoot?.querySelector<HTMLButtonElement>('.apply-button');
-    setTimeout(()=>applyButton?.click())
-
-    // Wait for the emitted `nile-change` event
-    const { detail } = await oneEvent(el, 'nile-change');
-    const { startDate, endDate } = detail;
-
-    // Expected start and end date should include the manually entered times
-    const expectedStartDate = new Date();
-    expectedStartDate.setHours(8, 30, 0); // 08:30:00 for "From" time
-    const expectedEndDate = new Date();
-    expectedEndDate.setHours(17, 0, 0);  // 17:00:00 for "To" time
-
-    // Validate the emitted startDate and endDate
-    expect(startDate.getHours()).to.equal(expectedStartDate.getHours());
-    expect(startDate.getMinutes()).to.equal(expectedStartDate.getMinutes());
-    expect(startDate.getSeconds()).to.equal(expectedStartDate.getSeconds());
-
-    expect(endDate.getHours()).to.equal(expectedEndDate.getHours());
-    expect(endDate.getMinutes()).to.equal(expectedEndDate.getMinutes());
-    expect(endDate.getSeconds()).to.equal(expectedEndDate.getSeconds());
-  });
-
-  it('should allow setting duration and unit of time in relative mode and emit correct data', async () => {
-    const el = await fixture<NileCalendar>(html`
-      <nile-calendar type="relative" range></nile-calendar>
-    `);
-    await elementUpdated(el);
-
-    // Step 1: Manually set the "Duration" input value
-    const durationInput = el.shadowRoot?.querySelector<NileInput>('nile-input.duration-input');
-    
-    if (durationInput) {
-      durationInput.dispatchEvent(new CustomEvent('nile-change',{detail:{value:'5'}}));// Set duration to 5 (e.g., 5 hours)
-    }
-
-    await elementUpdated(el); // Wait for the DOM to update after the input
-
-    // Step 2: Select the "Unit of Time" from the select input (e.g., hours)
-    const unitSelect = el.shadowRoot?.querySelector<NileSelect>('nile-select');
-    if (unitSelect) {
-      unitSelect.dispatchEvent(new CustomEvent('nile-change',{detail:{value:'hours'}}));// Trigger change event
-    }
-
-    await elementUpdated(el); // Wait for the DOM to update after the selection
-
-    // Step 3: Simulate clicking the "Apply" button
-    const applyButton = el.shadowRoot?.querySelector<NileButton>('.apply-button');
-    setTimeout(()=>applyButton?.click())
-
-    // Step 4: Wait for the emitted `nile-change` event
-    const { detail } = await oneEvent(el, 'nile-change');
-    const { startDate, endDate } = detail;
-
-    // Step 5: Validate the emitted data
-    const now = new Date();
-    const expectedStartDate = new Date(now);
-    expectedStartDate.setHours(now.getHours() - 5); // Subtract 5 hours from the current time
-
-    // Check if the emitted startDate matches the expected start date (5 hours ago)
-    expect(startDate.getTime()).to.be.closeTo(expectedStartDate.getTime(), 1000); // Allowing small time tolerance (1000 ms)
-    
-    // Check if the emitted endDate is approximately now
-    expect(endDate.getTime()).to.be.closeTo(now.getTime(), 1000); // The end date should be roughly now
-  });
-
-  it('should allow deselection of date on clicking again on selected date', async () => {
-    const el = await fixture<NileCalendar>(html`
-      <nile-calendar showManualInput doubleClickUnselect></nile-calendar>
-    `);
-    await elementUpdated(el);
-    
-    // Get the current date element in the calendar
-    const currentDateElement = el.shadowRoot?.querySelector('div.days_container div.current__date__dot')?.parentElement?.parentElement;
-  
-    // Simulate a click on the current date after a brief timeout
-    setTimeout(() => currentDateElement?.click());
-  
-    // Wait for the 'nile-change' event to be emitted
-    const { detail: { value } } = await oneEvent(el, 'nile-change');
-  
-    // Update the element after the event
-    await elementUpdated(el);
-  
-    // Assertions
-    expect(value).to.exist;
-    expect(currentDateElement?.className).to.include('selected-date');
-
-    // Simulate a click on the current date after a brief timeout
-    currentDateElement?.click()
-    await elementUpdated(el);
-    
-    expect(currentDateElement?.className).to.not.include('selected-date');
-  })
-
-  it('should allow deselection of range on clicking on clear button', async () => {
-    const el = await fixture<NileCalendar>(html`
-      <nile-calendar range allowClear></nile-calendar>
-    `);
-    await elementUpdated(el);
-  
-    // Get day elements from the calendar, selecting two dates for range selection
-    const days = el.shadowRoot?.querySelectorAll('.days_container .day_date:not(.filler)') || [];
-    const firstDay = days[4] as HTMLElement;  // Choose the 5th day of the month
-    const lastDay = days[9] as HTMLElement;  // Choose the 10th day of the month
-
-    // Simulate click events for selecting the range (start and end date)
-    firstDay.click();
-    await elementUpdated(el); // Wait for updates after selection
-    lastDay.click();
-    await elementUpdated(el); // Wait for updates after range selection
-
-    // Ensure both dates are correctly selected in the DOM
-    expect(firstDay.classList.contains('range-start')).to.be.true;
-    expect(lastDay.classList.contains('range-end')).to.be.true;
-
-    // Find and click the "Apply" button to confirm the range
-    const clearButton = el.shadowRoot?.querySelector<NileButton>('.clear-button');
-    clearButton?.click()
-    await elementUpdated(el); // Wait for updates after range selection
-    
-    expect(firstDay.classList.contains('range-start')).to.be.false;
-    expect(lastDay.classList.contains('range-end')).to.be.false;
-  })
-});
-