Major fixes. Design and Functionality (#76)

* Minor fixes * Use dynamic zIndex assignment. * Update *CardHeader* to use *h6* for header. * Modal opening and closing animation fix. * Popover add classname for child element. * Fix divider test case * Fix row gutter styles * Fix Calendar error * Fix lint fail error * Fix test fail error * Fix stepper styles * Add suggested changes * Change storybook grid preview * Fix input component style * Add global margin and padding. * Add close button with datepicker if timepicker is also there. * Add fix-width for Datepicker popup. * Fix child.type undefined error * Fix list styles * Add padding & margin and some style fix * Fix performance slow issue in `padding` and `margin` global. * Fix failing test cases. * Use SurfaceProp interface and fix linter errors. * Test cases for Calendar (#77) * 🎉 Add test for calendar component. * Add key to each tooltip to remove warnings. * Add requested changes. Co-authored-by: Anit Nilay <[email protected]>
sha-el · May 29, 2021 · e03ec95 · e03ec95
1 parent 2eb39d3
commit e03ec95
Show file tree

Hide file tree

Showing 77 changed files with 3,447 additions and 1,913 deletions.
diff --git a/__tests__/components/Breadcrumb/Breadcrumb.spec.tsx b/__tests__/components/Breadcrumb/Breadcrumb.spec.tsx
@@ -31,7 +31,7 @@ describe('Breadcrumb', () => {
 
     expect(breadcrumb[2].innerHTML).toBe('<a href="#">Breadcrumb</a>');
     expect(breadcrumb[2].children[0]).toHaveStyle(`
-      color: rgb(134, 152, 254);
+      color: rgb(48, 48, 48);
     `);
   });
 

diff --git a/__tests__/components/Calendar/Calendar.spec.tsx b/__tests__/components/Calendar/Calendar.spec.tsx
@@ -0,0 +1,302 @@
+import React from 'react';
+import { Calendar } from '../../../src';
+
+import '@testing-library/jest-dom';
+import { fireEvent, render, act, screen } from '@testing-library/react';
+import { months, weeksEnum } from '../../../src/components/Calendar/Calendar';
+
+describe('Calendar', () => {
+  it('Should check cell styles', () => {
+    render(<Calendar />);
+
+    const datesArray = document.querySelectorAll('.sha-el-row')[2].querySelectorAll('.sha-el-col');
+
+    expect(datesArray[0]).toHaveStyle(`
+      border: 1px solid rgba(0,0,0,0.1);
+      color: #555;
+      display: flex;
+      position: relative;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: wrap;
+      padding: 0px 0px 0px 0px;
+      cursor: pointer;
+    `);
+  });
+
+  it('Should change month of calendar', () => {
+    render(<Calendar />);
+
+    const currentMonth = months[new Date().getMonth()];
+
+    let monthMenu = document.querySelector('.sha-el-row').querySelector('.sha-el-col').querySelector('button');
+    expect(monthMenu.innerHTML).toBe(`<span>${currentMonth}</span>`);
+
+    act(() => {
+      fireEvent.click(monthMenu);
+    });
+
+    let monthArray = document.querySelector('ul').querySelectorAll('li');
+    expect(monthArray.length).toBe(12);
+    expect(monthArray[new Date().getMonth()]).toHaveStyle(`
+      background: rgb(83, 109, 254);
+      color: rgb(255, 255, 255);
+    `);
+
+    act(() => {
+      fireEvent.click(monthArray[6]);
+    });
+
+    monthMenu = document.querySelector('.sha-el-row').querySelector('.sha-el-col').querySelector('button');
+    expect(monthMenu.innerHTML).toBe(`<span>July</span>`);
+
+    monthArray = document.querySelector('ul').querySelectorAll('li');
+    expect(monthArray[6]).toHaveStyle(`
+      background: rgb(83, 109, 254);
+      color: rgb(255, 255, 255);
+    `);
+  });
+
+  it('Should change year of calendar', () => {
+    render(<Calendar />);
+
+    const currentYear = new Date().getFullYear();
+
+    let yearMenu = document.querySelector('.sha-el-row').querySelectorAll('.sha-el-col')[1].querySelector('button');
+    expect(yearMenu.innerHTML).toBe(`<span>${currentYear}</span>`);
+
+    act(() => {
+      fireEvent.click(yearMenu);
+    });
+
+    let yearArray = document.querySelector('ul').querySelectorAll('li');
+    expect(yearArray[currentYear - 1980]).toHaveStyle(`
+      background: rgb(83, 109, 254);
+      color: rgb(255, 255, 255);
+    `);
+
+    act(() => {
+      fireEvent.click(yearArray[1993 - 1980]);
+    });
+
+    yearMenu = document.querySelector('.sha-el-row').querySelectorAll('.sha-el-col')[1].querySelector('button');
+    expect(yearMenu.innerHTML).toBe(`<span>1993</span>`);
+
+    yearArray = document.querySelector('ul').querySelectorAll('li');
+    expect(yearArray[1993 - 1980]).toHaveStyle(`
+      background: rgb(83, 109, 254);
+      color: rgb(255, 255, 255);
+    `);
+  });
+
+  it('Should check weeks of calendar', () => {
+    render(<Calendar />);
+
+    const weeks = document.querySelectorAll('.sha-el-row')[1].querySelectorAll('.sha-el-col');
+    expect(weeks.length).toBe(7);
+  });
+
+  it('Should render correct date week name', () => {
+    render(<Calendar date={new Date(2007, 6, 7)} />);
+
+    const datesArray = document.querySelectorAll('.sha-el-row')[2].querySelectorAll('.sha-el-col');
+    expect(datesArray[0].querySelector('button').innerHTML).toBe('<span>1</span>'); // 1 July 2007 -> Sunday i.e 1st Day of array.
+    expect(datesArray[30].querySelector('button').innerHTML).toBe('<span>31</span>'); // July has 31 days.
+    expect(datesArray[6].querySelector('button')).toHaveStyle(`
+      color: #ffffff;
+      background: #536DFE;
+    `);
+  });
+
+  it(`Should check today's date style`, () => {
+    render(<Calendar />);
+
+    expect(screen.getByText(`${new Date().getDate()}`).parentNode).toHaveStyle(`
+        box-shadow: none;
+        text-align: center;
+        color: #536DFE;
+        border: 1px solid #536DFE;
+        border-radius: 50%;
+    `);
+  });
+
+  it('Should change date background on click', () => {
+    const fn = jest.fn();
+    render(<Calendar date={new Date(2007, 6, 7)} onClick={fn} />);
+
+    const datesArray = document.querySelectorAll('.sha-el-row')[2].querySelectorAll('.sha-el-col');
+
+    act(() => {
+      fireEvent.click(datesArray[9].querySelector('button'));
+    });
+    expect(fn).toBeCalledTimes(1);
+    expect(datesArray[9]).toHaveStyle(`
+      color: #555555;
+    `);
+  });
+
+  it('Should re-render on month change', () => {
+    render(<Calendar date={new Date(2007, 6, 7)} />);
+
+    const datesArray = document.querySelectorAll('.sha-el-row')[2].querySelectorAll('.sha-el-col');
+    expect(datesArray[0].querySelector('button').innerHTML).toBe('<span>1</span>');
+
+    const monthMenu = document.querySelector('.sha-el-row').querySelector('.sha-el-col').querySelector('button');
+    act(() => {
+      fireEvent.click(monthMenu);
+    });
+    const monthArray = document.querySelector('ul').querySelectorAll('li');
+    act(() => {
+      fireEvent.click(monthArray[11]);
+    });
+
+    expect(datesArray[6].querySelector('button').innerHTML).toBe('<span>1</span>');
+  });
+
+  it('Should re-render on year change', () => {
+    render(<Calendar date={new Date(2007, 6, 7)} />);
+
+    const datesArray = document.querySelectorAll('.sha-el-row')[2].querySelectorAll('.sha-el-col');
+    expect(datesArray[0].querySelector('button').innerHTML).toBe('<span>1</span>');
+
+    const yearMenu = document.querySelector('.sha-el-row').querySelectorAll('.sha-el-col')[1].querySelector('button');
+    act(() => {
+      fireEvent.click(yearMenu);
+    });
+    const yearArray = document.querySelector('ul').querySelectorAll('li');
+    act(() => {
+      fireEvent.click(yearArray[2025 - 1980]);
+    });
+
+    expect(datesArray[2].querySelector('button').innerHTML).toBe('<span>1</span>');
+  });
+
+  it('Should render a calendar with cellRender prop', () => {
+    render(
+      <Calendar
+        date={new Date(2007, 6, 7)}
+        cellRender={(date: Date, week: weeksEnum) => {
+          if (week === weeksEnum.SUNDAY) {
+            return <div style={{ background: 'red', color: 'white', width: '100%' }}>{date.getDate()}</div>;
+          }
+        }}
+      />,
+    );
+
+    const datesArray = document.querySelectorAll('.sha-el-row')[2].querySelectorAll('.sha-el-col');
+    for (let i = 0; i < 31; i += 7) {
+      expect(datesArray[i].querySelector('div')).toHaveStyle(`
+        background: red;
+        color: white;
+        width: 100%;
+      `);
+    }
+  });
+
+  it('Should render a calendar with disabled dates', () => {
+    const fn = jest.fn();
+    render(<Calendar date={new Date(2007, 6, 7)} onClick={fn} disabledDate={(date: Date) => date.getDay() === 3} />);
+
+    const datesArray = document.querySelectorAll('.sha-el-row')[2].querySelectorAll('.sha-el-col');
+    for (let i = 3; i < 31; i += 7) {
+      act(() => {
+        fireEvent.click(datesArray[i].querySelector('button'));
+      });
+
+      expect(fn).toBeCalledTimes(0);
+      expect(datesArray[i].querySelector('button')).toHaveStyle(`
+        background: transparent;
+        cursor: not-allowed;
+        color: rgba(0, 0, 0, 0.20);
+      `);
+    }
+  });
+
+  it('Should render a calendar with events', () => {
+    render(
+      <Calendar
+        date={new Date(2007, 6, 7)}
+        calendarEvents={[
+          {
+            startDate: new Date(2007, 6, 5),
+            endDate: new Date(2007, 6, 6),
+            eventName: 'Event 1',
+            color: '#fcf',
+          },
+          {
+            startDate: new Date(2007, 6, 6),
+            endDate: new Date(2007, 6, 7),
+            eventName: 'Event 2',
+          },
+        ]}
+      />,
+    );
+
+    const datesArray = document.querySelectorAll('.sha-el-row')[2].querySelectorAll('.sha-el-col');
+
+    const event1 = datesArray[4].querySelector('div').querySelector('div');
+    expect(event1).toHaveStyle(`
+      background: rgb(255, 204, 255);
+      box-shadow: 0 10px 14px rgba(255, 204, 255, 0.6);
+      height: 10px;
+      min-width: 100%;
+      cursor: pointer;
+      margin: 2px 0;
+    `);
+
+    const event2 = datesArray[6].querySelector('div').querySelector('div');
+    expect(event2).toHaveStyle(`
+      background: rgb(255, 204, 204);
+      box-shadow: 0 10px 14px rgba(255, 204, 204, 0.6);
+      height: 10px;
+      min-width: 100%;
+      cursor: pointer;
+      margin: 2px 0;
+    `);
+
+    const multipleEvent = datesArray[5].querySelector('div').querySelectorAll('div');
+    expect(multipleEvent[0]).toHaveStyle(`
+      background: rgb(255, 204, 255);
+      box-shadow: 0 10px 14px rgba(255, 204, 255, 0.6);
+      height: 10px;
+      min-width: 100%;
+      cursor: pointer;
+      margin: 2px 0;
+    `);
+    expect(multipleEvent[1]).toHaveStyle(`
+      background: rgb(255, 204, 204);
+      box-shadow: 0 10px 14px rgba(255, 204, 204, 0.6);
+      height: 10px;
+      min-width: 100%;
+      cursor: pointer;
+      margin: 2px 0;
+    `);
+  });
+
+  it('Should render tooltip when hover on an event', () => {
+    render(
+      <Calendar
+        date={new Date(2007, 6, 7)}
+        calendarEvents={[
+          {
+            startDate: new Date(2007, 6, 4),
+            endDate: new Date(2007, 6, 8),
+            eventName: 'Event 1',
+            color: '#fcf',
+          },
+        ]}
+      />,
+    );
+
+    const datesArray = document.querySelectorAll('.sha-el-row')[2].querySelectorAll('.sha-el-col');
+
+    for (let i = 3; i < 8; i++) {
+      act(() => {
+        fireEvent.mouseEnter(datesArray[i].querySelector('div').querySelector('div'));
+      });
+
+      const eventTooltip = document.querySelector('.rc-tooltip-inner');
+      expect(eventTooltip.innerHTML).toBe('Event 1');
+    }
+  });
+});
diff --git a/__tests__/components/Input/input.spec.tsx b/__tests__/components/Input/input.spec.tsx
@@ -39,12 +39,10 @@ describe('BaseInputComponent', () => {
     expect(input).toHaveStyle(`
       color: rgb(85, 85, 85);
       height: 36px;
-      display: inline;
+      display: inline-block;
       outline: none;
       padding: 9px 14px;
       font-size: 14px;
-      max-width: 100%;
-      min-width: 100%;
       background: transparent;
       box-sizing: border-box;
       line-height: 12px;
@@ -64,12 +62,10 @@ describe('BaseInputComponent', () => {
     expect(textarea).toHaveStyle(`
       color: rgb(85, 85, 85);
       height: 36px;
-      display: inline;
+      display: inline-block;
       outline: none;
       padding: 9px 14px;
       font-size: 14px;
-      max-width: 100%;
-      min-width: 100%;
       background: transparent;
       box-sizing: border-box;
       line-height: 12px;

diff --git a/__tests__/components/Radio/Radio.spec.tsx b/__tests__/components/Radio/Radio.spec.tsx
@@ -12,7 +12,6 @@ describe('Radio', () => {
 
     expect(container).toHaveStyle(`
       cursor: pointer;
-      margin: 0 5px;
     `);
     const radio = document.querySelector('.radio-circle');