From a2402ca955b52bc76977154f935b58ca65d216bd Mon Sep 17 00:00:00 2001 From: Prateek Shourya Date: Sun, 13 Jun 2021 12:48:31 +0530 Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=AA=20Test=20cases=20for=20FlexTable?= =?UTF-8?q?=20(#98)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Remove Table Component * :tada: Add test case for FlexTable. --- __tests__/__mocks__/data.ts | 387 ++++++++++++++ .../components/FlexTable/FlexTable.spec.tsx | 484 ++++++++++++++++++ jest.config.js | 2 +- .../FlexTable.stories.tsx | 0 .../{Table => FlexTable}/FlexTable.tsx | 6 +- .../{Table => FlexTable}/MOCK_DATA.json | 0 src/components/{Table => FlexTable}/index.ts | 1 - src/components/{Table => FlexTable}/style.ts | 0 src/components/Page/Page.stories.tsx | 4 +- src/components/Table/Table.stories.tsx | 77 --- src/components/Table/Table.tsx | 151 ------ src/index.ts | 2 +- 12 files changed, 878 insertions(+), 236 deletions(-) create mode 100644 __tests__/__mocks__/data.ts create mode 100644 __tests__/components/FlexTable/FlexTable.spec.tsx rename src/components/{Table => FlexTable}/FlexTable.stories.tsx (100%) rename src/components/{Table => FlexTable}/FlexTable.tsx (95%) rename src/components/{Table => FlexTable}/MOCK_DATA.json (100%) rename src/components/{Table => FlexTable}/index.ts (55%) rename src/components/{Table => FlexTable}/style.ts (100%) delete mode 100644 src/components/Table/Table.stories.tsx delete mode 100644 src/components/Table/Table.tsx diff --git a/__tests__/__mocks__/data.ts b/__tests__/__mocks__/data.ts new file mode 100644 index 0000000..8ea4788 --- /dev/null +++ b/__tests__/__mocks__/data.ts @@ -0,0 +1,387 @@ +export default [ + { + id: 1, + first_name: 'Ninon', + last_name: 'Switsur', + email: 'nswitsur0@cbslocal.com', + gender: 'Female', + avatar: 'https://robohash.org/utquasiinventore.bmp?size=50x50&set=set1', + 'car make': 'Toyota', + 'car model': 'Yaris', + 'car model year': 2006, + }, + { + id: 2, + first_name: 'Friedrich', + last_name: 'Shefton', + email: 'fshefton1@pen.io', + gender: 'Male', + avatar: 'https://robohash.org/essequiarepellendus.png?size=50x50&set=set1', + 'car make': 'Honda', + 'car model': 'Ridgeline', + 'car model year': 2010, + }, + { + id: 3, + first_name: 'Rab', + last_name: 'Claricoates', + email: 'rclaricoates2@psu.edu', + gender: 'Male', + avatar: 'https://robohash.org/providentatcupiditate.jpg?size=50x50&set=set1', + 'car make': 'Chevrolet', + 'car model': '2500', + 'car model year': 1998, + }, + { + id: 4, + first_name: 'Efrem', + last_name: 'Tremberth', + email: 'etremberth3@acquirethisname.com', + gender: 'Male', + avatar: 'https://robohash.org/sitreprehenderitcupiditate.bmp?size=50x50&set=set1', + 'car make': 'GMC', + 'car model': 'Savana 1500', + 'car model year': 2010, + }, + { + id: 5, + first_name: 'Wynn', + last_name: 'Adacot', + email: 'wadacot4@smugmug.com', + gender: 'Male', + avatar: 'https://robohash.org/voluptatemminuset.jpg?size=50x50&set=set1', + 'car make': 'Mitsubishi', + 'car model': 'Montero', + 'car model year': 1993, + }, + { + id: 6, + first_name: 'Fredra', + last_name: 'Linkin', + email: 'flinkin5@gmpg.org', + gender: 'Female', + avatar: 'https://robohash.org/sequiadelectus.jpg?size=50x50&set=set1', + 'car make': 'Chevrolet', + 'car model': 'Sportvan G20', + 'car model year': 1993, + }, + { + id: 7, + first_name: 'Doloritas', + last_name: 'Fateley', + email: 'dfateley6@t-online.de', + gender: 'Female', + avatar: 'https://robohash.org/reprehenderitlaboredolorum.jpg?size=50x50&set=set1', + 'car make': 'Volkswagen', + 'car model': 'GTI', + 'car model year': 1993, + }, + { + id: 8, + first_name: 'Theadora', + last_name: 'Tibbs', + email: 'ttibbs7@comcast.net', + gender: 'Female', + avatar: 'https://robohash.org/etdeseruntnumquam.png?size=50x50&set=set1', + 'car make': 'Mazda', + 'car model': 'MPV', + 'car model year': 2003, + }, + { + id: 9, + first_name: 'Tresa', + last_name: 'Devennie', + email: 'tdevennie8@indiatimes.com', + gender: 'Female', + avatar: 'https://robohash.org/atqueeacumque.jpg?size=50x50&set=set1', + 'car make': 'Aston Martin', + 'car model': 'DB9', + 'car model year': 2010, + }, + { + id: 10, + first_name: 'Anatola', + last_name: 'Glazer', + email: 'aglazer9@ed.gov', + gender: 'Female', + avatar: 'https://robohash.org/eumrepellenduset.jpg?size=50x50&set=set1', + 'car make': 'Acura', + 'car model': 'TL', + 'car model year': 1995, + }, + { + id: 11, + first_name: 'Humbert', + last_name: 'Martschke', + email: 'hmartschkea@state.gov', + gender: 'Male', + avatar: 'https://robohash.org/inmolestiaeet.jpg?size=50x50&set=set1', + 'car make': 'BMW', + 'car model': '6 Series', + 'car model year': 2005, + }, + { + id: 12, + first_name: 'Garey', + last_name: 'Pallister', + email: 'gpallisterb@technorati.com', + gender: 'Male', + avatar: 'https://robohash.org/fugaullamcum.jpg?size=50x50&set=set1', + 'car make': 'Dodge', + 'car model': 'Ram Van 1500', + 'car model year': 1999, + }, + { + id: 13, + first_name: 'Karlyn', + last_name: 'Dye', + email: 'kdyec@ifeng.com', + gender: 'Female', + avatar: 'https://robohash.org/etquasiquia.png?size=50x50&set=set1', + 'car make': 'GMC', + 'car model': 'Savana 2500', + 'car model year': 2001, + }, + { + id: 14, + first_name: 'Zedekiah', + last_name: 'Matthisson', + email: 'zmatthissond@msn.com', + gender: 'Male', + avatar: 'https://robohash.org/etinciduntodio.jpg?size=50x50&set=set1', + 'car make': 'Honda', + 'car model': 'CR-V', + 'car model year': 2004, + }, + { + id: 15, + first_name: 'Elsinore', + last_name: 'Abrahart', + email: 'eabraharte@gizmodo.com', + gender: 'Female', + avatar: 'https://robohash.org/sitomnissunt.bmp?size=50x50&set=set1', + 'car make': 'BMW', + 'car model': 'M3', + 'car model year': 1998, + }, + { + id: 16, + first_name: 'Pollyanna', + last_name: 'Galiford', + email: 'pgalifordf@webnode.com', + gender: 'Female', + avatar: 'https://robohash.org/innullaaut.bmp?size=50x50&set=set1', + 'car make': 'Infiniti', + 'car model': 'G', + 'car model year': 1994, + }, + { + id: 17, + first_name: 'Jedidiah', + last_name: 'Gorner', + email: 'jgornerg@bbb.org', + gender: 'Male', + avatar: 'https://robohash.org/suscipitveritatisnisi.bmp?size=50x50&set=set1', + 'car make': 'Ford', + 'car model': 'Probe', + 'car model year': 1991, + }, + { + id: 18, + first_name: 'Jaquith', + last_name: 'Jest', + email: 'jjesth@tripadvisor.com', + gender: 'Female', + avatar: 'https://robohash.org/quastemporeut.bmp?size=50x50&set=set1', + 'car make': 'Cadillac', + 'car model': 'DeVille', + 'car model year': 1998, + }, + { + id: 19, + first_name: 'Norrie', + last_name: 'Temblett', + email: 'ntembletti@latimes.com', + gender: 'Female', + avatar: 'https://robohash.org/corporispossimusperspiciatis.bmp?size=50x50&set=set1', + 'car make': 'Volvo', + 'car model': 'C70', + 'car model year': 1999, + }, + { + id: 20, + first_name: 'Giff', + last_name: 'Richfield', + email: 'grichfieldj@chron.com', + gender: 'Male', + avatar: 'https://robohash.org/praesentiumaccusamusest.jpg?size=50x50&set=set1', + 'car make': 'Volvo', + 'car model': 'S80', + 'car model year': 1999, + }, + { + id: 21, + first_name: 'Clarisse', + last_name: 'Gallymore', + email: 'cgallymorek@phoca.cz', + gender: 'Female', + avatar: 'https://robohash.org/quaequiavoluptates.png?size=50x50&set=set1', + 'car make': 'Mitsubishi', + 'car model': 'Chariot', + 'car model year': 1992, + }, + { + id: 22, + first_name: 'Thea', + last_name: 'Hatliffe', + email: 'thatliffel@sakura.ne.jp', + gender: 'Female', + avatar: 'https://robohash.org/molestiaenesciuntvelit.bmp?size=50x50&set=set1', + 'car make': 'BMW', + 'car model': '7 Series', + 'car model year': 2006, + }, + { + id: 23, + first_name: 'Idette', + last_name: 'Elphinstone', + email: 'ielphinstonem@weather.com', + gender: 'Female', + avatar: 'https://robohash.org/autemnatustotam.jpg?size=50x50&set=set1', + 'car make': 'Volkswagen', + 'car model': 'Golf', + 'car model year': 1990, + }, + { + id: 24, + first_name: 'Saraann', + last_name: 'Andersson', + email: 'sanderssonn@uiuc.edu', + gender: 'Female', + avatar: 'https://robohash.org/voluptasdoloremvoluptatem.bmp?size=50x50&set=set1', + 'car make': 'Volkswagen', + 'car model': 'GTI', + 'car model year': 1997, + }, + { + id: 25, + first_name: 'Vinni', + last_name: 'Chapiro', + email: 'vchapiroo@telegraph.co.uk', + gender: 'Female', + avatar: 'https://robohash.org/nonvoluptasculpa.bmp?size=50x50&set=set1', + 'car make': 'Honda', + 'car model': 'Pilot', + 'car model year': 2005, + }, + { + id: 26, + first_name: 'Eugene', + last_name: 'Papps', + email: 'epappsp@intel.com', + gender: 'Male', + avatar: 'https://robohash.org/uteiusbeatae.jpg?size=50x50&set=set1', + 'car make': 'Lincoln', + 'car model': 'Navigator', + 'car model year': 2002, + }, + { + id: 27, + first_name: 'Aland', + last_name: 'Elman', + email: 'aelmanq@whitehouse.gov', + gender: 'Male', + avatar: 'https://robohash.org/perspiciatisipsaerror.jpg?size=50x50&set=set1', + 'car make': 'Oldsmobile', + 'car model': 'Intrigue', + 'car model year': 2001, + }, + { + id: 28, + first_name: 'Sylvia', + last_name: 'Passion', + email: 'spassionr@answers.com', + gender: 'Female', + avatar: 'https://robohash.org/quiadeseruntest.bmp?size=50x50&set=set1', + 'car make': 'Suzuki', + 'car model': 'SJ 410', + 'car model year': 1986, + }, + { + id: 29, + first_name: 'Abelard', + last_name: 'Wordley', + email: 'awordleys@flickr.com', + gender: 'Male', + avatar: 'https://robohash.org/aperiampossimusquibusdam.png?size=50x50&set=set1', + 'car make': 'Mercedes-Benz', + 'car model': 'CLK-Class', + 'car model year': 2008, + }, + { + id: 30, + first_name: 'Arnoldo', + last_name: 'Walby', + email: 'awalbyt@biblegateway.com', + gender: 'Male', + avatar: 'https://robohash.org/autpossimusut.bmp?size=50x50&set=set1', + 'car make': 'Cadillac', + 'car model': 'Escalade', + 'car model year': 2012, + }, + { + id: 31, + first_name: 'Mildrid', + last_name: 'Nolleau', + email: 'mnolleauu@cbc.ca', + gender: 'Female', + avatar: 'https://robohash.org/nesciuntlaboredolore.bmp?size=50x50&set=set1', + 'car make': 'Toyota', + 'car model': 'Tundra', + 'car model year': 2012, + }, + { + id: 32, + first_name: 'Evered', + last_name: 'Castledine', + email: 'ecastledinev@forbes.com', + gender: 'Male', + avatar: 'https://robohash.org/fugitperferendisodio.jpg?size=50x50&set=set1', + 'car make': 'Dodge', + 'car model': 'Ram 3500', + 'car model year': 2007, + }, + { + id: 33, + first_name: 'Bogey', + last_name: 'Guerro', + email: 'bguerrow@blogs.com', + gender: 'Male', + avatar: 'https://robohash.org/adtotamid.jpg?size=50x50&set=set1', + 'car make': 'GMC', + 'car model': 'Sierra', + 'car model year': 2012, + }, + { + id: 34, + first_name: 'Ev', + last_name: 'Dunster', + email: 'edunsterx@buzzfeed.com', + gender: 'Male', + avatar: 'https://robohash.org/ipsamillumnobis.jpg?size=50x50&set=set1', + 'car make': 'Ford', + 'car model': 'F250', + 'car model year': 1994, + }, + { + id: 35, + first_name: 'Ailee', + last_name: 'Crockley', + email: 'acrockleyy@mediafire.com', + gender: 'Female', + avatar: 'https://robohash.org/eumvoluptasad.png?size=50x50&set=set1', + 'car make': 'Mercedes-Benz', + 'car model': 'CLS-Class', + 'car model year': 2006, + }, +]; diff --git a/__tests__/components/FlexTable/FlexTable.spec.tsx b/__tests__/components/FlexTable/FlexTable.spec.tsx new file mode 100644 index 0000000..581152a --- /dev/null +++ b/__tests__/components/FlexTable/FlexTable.spec.tsx @@ -0,0 +1,484 @@ +import React from 'react'; +import { FlexTable } from '../../../src/components/FlexTable'; +import { List, ListItem } from '../../../src/components/List'; +import { Pagination } from '../../../src/components/Pagination'; + +import '@testing-library/jest-dom'; +import MOCK_DATA from '../../__mocks__/data'; +import { fireEvent, render, act } from '@testing-library/react'; + +type DataType = typeof MOCK_DATA[0]; + +const WithPagination = () => { + const [pageNumber, updatePageNumber] = React.useState(1); + const [pageSize, updatePageSize] = React.useState(10); + return ( + { + updatePageNumber(np); + updatePageSize(pg); + }} + /> + } + > + + {(data: DataType) => data.id} + + + {(data: DataType) => data.first_name} + + + {(data: DataType) => data.last_name} + + + {(data: DataType) => data.email} + + + {(data: DataType) => data['car model year']} + + + ); +}; + +describe('FlexTable', () => { + it('Should render a default flex table', () => { + render( + + + {(data: DataType) => data.id} + + + {(data: DataType) => data.first_name} + + + {(data: DataType) => data.last_name} + + + {(data: DataType) => data.email} + + + {(data: DataType) => data.gender} + + + {(data: DataType) => data['car make']} + + + {(data: DataType) => data['car model']} + + + {(data: DataType) => data['car model year']} + + , + ); + + const table = document.querySelector('ul'); + expect(table).toHaveStyle(` + overflow-x: auto; + padding: 0; + `); + expect(table).toHaveStyle(` + min-width: 100px; + `); + + expect(table.querySelectorAll('.list-item').length).toBe(3); + + const header = table.querySelector('li'); + expect(header).toHaveStyle(` + font-weight: 600; + font-size: 12px; + color: rgba(0, 0, 0, 0.54); + cursor: default; + border-bottom: 2px solid #9A9A9A1A; + text-transform: uppercase; + letter-spacing: .5px; + word-wrap: break-word; + box-sizing: border-box; + `); + expect(header).toHaveStyle(` + background: rgb(232, 234, 252); + align-items: center; + display: flex; + `); + + const headerContent = header.querySelector('.sha-el-row'); + expect(headerContent).toHaveStyle(` + align-items: stretch; + display: flex; + `); + + const headerCells = headerContent.querySelectorAll('.sha-el-col'); + expect(headerCells.length).toBe(8); + expect(headerCells[0]).toHaveStyle(` + overflow: hidden; + padding: 12px 16px; + `); + + expect(headerCells[0].innerHTML).toBe('Id'); + expect(headerCells[1].innerHTML).toBe('First Name'); + expect(headerCells[2].innerHTML).toBe('Last Name'); + expect(headerCells[3].innerHTML).toBe('Email'); + expect(headerCells[4].innerHTML).toBe('Gender'); + expect(headerCells[5].innerHTML).toBe('Car Make'); + expect(headerCells[6].innerHTML).toBe('Model'); + expect(headerCells[7].innerHTML).toBe('Year'); + + const tableRow = table.querySelectorAll('.list-item')[1]; + expect(tableRow).toHaveStyle(` + padding: 0; + cursor: pointer; + font-family: 'Fira Code',monospace; + border-bottom: 1px solid #E8EAFC; + border-collapse: collapse; + `); + expect(tableRow.querySelector('.sha-el-row')).toHaveStyle(` + align-items: stretch; + `); + + const tableCells = tableRow.querySelectorAll('.sha-el-col'); + expect(tableCells[0].innerHTML).toBe('1'); + expect(tableCells[1].innerHTML).toBe('Ninon'); + expect(tableCells[2].innerHTML).toBe('Switsur'); + expect(tableCells[3].innerHTML).toBe('nswitsur0@cbslocal.com'); + expect(tableCells[4].innerHTML).toBe('Female'); + expect(tableCells[5].innerHTML).toBe('Toyota'); + expect(tableCells[6].innerHTML).toBe('Yaris'); + expect(tableCells[7].innerHTML).toBe('2006'); + }); + + it('Should render a flex table with single header', () => { + render( + + + {(data: DataType) => data.id} + + , + ); + + const table = document.querySelector('ul'); + const header = table.querySelector('.list-item'); + + expect(header.querySelectorAll('.table-cell').length).toBe(1); + }); + + it('Should render an empty flex table', () => { + render( + + + {(data: DataType) => data.id} + + + {(data: DataType) => data.first_name} + + + {(data: DataType) => data.last_name} + + + {(data: DataType) => data.email} + + + {(data: DataType) => data['car model year']} + + , + ); + + const table = document.querySelector('ul'); + expect(table.querySelectorAll('.list-item').length).toBe(1); + + const emptyState = table.querySelector('.empty-state'); + expect(emptyState).toHaveStyle(` + color: rgba(0, 0, 0, 0.54); + background: #ffffff; + text-align: center; + padding: 50px; + font-size: 16px; + `); + expect(emptyState.querySelectorAll('div')[1].innerHTML).toBe('No Data'); + + const emptyStateImage = emptyState.querySelector('svg'); + expect(emptyStateImage.innerHTML).toContain( + // Path for GiEmptyMetalBucket + 'M256 137c-43.5 0-82.8 5.4-110.6 13.7-13.8 4.1-24.8 9.1-31.6 14-6.9 4.8-8.8 8.7-8.8 11.3 0 1.7.8 3.9 3.2 6.5 13.3-9.1 30.1-15.9 48.9-21.2C186.6 153 221.3 149 256 149s69.4 4 98.9 12.3c18.8 5.3 35.6 12.1 48.9 21.2 2.4-2.6 3.2-4.8 3.2-6.5 0-2.6-1.9-6.5-8.8-11.3-6.8-4.9-17.8-9.9-31.6-14-27.8-8.3-67.1-13.7-110.6-13.7zm0 30c-33.3 0-66.6 4-94.1 11.7-14.2 4-26.8 9.1-37 14.9 5.8 2.7 12.7 5.4 20.5 7.7 27.8 8.3 67.1 13.7 110.6 13.7s82.8-5.4 110.6-13.7c7.8-2.3 14.7-5 20.5-7.7-10.2-5.8-22.8-10.9-37-14.9C322.6 171 289.3 167 256 167zm-147.4 38.4c-.6.6-1.2 1.1-1.8 1.7l1.7 14.4c31 18.6 89.4 29.5 147.5 29.5 11.6 0 23.3-.4 34.7-1.3.2-6 .2-11.9.2-17.8-11.3.7-22.9 1.1-34.9 1.1-44.9 0-85.6-5.4-115.7-14.4-12.5-3.8-23.1-8.1-31.7-13.2zm294.8 0c-7.5 4.5-16.7 8.3-27.2 11.8-.2 5.4-.5 11-.8 16.8 10.8-3.6 20.3-7.8 28.1-12.5l1.7-14.4c-.6-.5-1.2-1.1-1.8-1.7zm-77.8 22.9c-5.4.8-11 1.5-16.7 2.1 0 5.8 0 11.7-.1 17.6 5.5-.6 11-1.4 16.3-2.2.3-5.8.4-11.7.5-17.5zm-214.5 15.1l25.5 217c6.5 8.1 21.9 16.5 42.7 21.9 22 5.7 49.3 8.7 76.7 8.7h4.5c13.9-75 26.4-149.6 29.6-223.1-11.2.7-22.7 1.1-34.1 1.1-54 0-107.9-7.7-144.9-25.6zm289.8 0c-8.2 3.9-17.1 7.4-26.7 10.4-5.7 83.6-18.9 187.9-24.8 223.1 12.3-4.9 21.4-10.8 26-16.5l25.5-217zm-76.7 21.1c-5.3.7-10.6 1.4-16 1.9-3 74.5-15.5 149.3-29.3 223.9 5.2-.3 10.3-.8 15.3-1.3 13.3-75.4 25.7-150.6 30-224.5z', + ); + }); + + it('Should render a flex table with onRowClick prop', () => { + const fn = jest.fn(); + render( + + + {(data: DataType) => data.id} + + , + ); + + const table = document.querySelector('ul'); + const tableRows = table.querySelectorAll('.list-item'); + + act(() => { + fireEvent.click(tableRows[0]); + }); + act(() => { + fireEvent.click(tableRows[1]); + }); + act(() => { + fireEvent.click(tableRows[3]); + }); + + expect(fn).toBeCalledTimes(2); // fn not called when clicked on header. + }); + + it('Should render a nested expandable table', () => { + render( + ( + + } key="Gender"> + {data.gender} + + + ), + exapandable: (data) => data['car model year'] < 2007, + }} + data={MOCK_DATA.slice(0, 2)} + > + + {(data: DataType) => data.id} + + + {(data: DataType) => data.first_name} + + + {(data: DataType) => data.last_name} + + + {(data: DataType) => data.email} + + + {(data: DataType) => data['car model year']} + + , + ); + + const table = document.querySelector('ul'); + const tableRows = table.querySelectorAll('.list-item'); + + const collapsibleColumn = tableRows[1]; + expect(collapsibleColumn).toHaveStyle(` + cursor: pointer; + `); + expect(collapsibleColumn.querySelector('svg').innerHTML).toContain('M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'); + + const nestedContent = table.querySelector('.nested-content'); + expect(nestedContent.parentElement).toHaveStyle(` + max-height: 0; + `); + + act(() => { + fireEvent.click(collapsibleColumn); + }); + + expect(nestedContent.parentElement).toHaveStyle(` + max-height: 100vh; + `); + expect(nestedContent).toHaveStyle(` + margin-left: -20px; + `); + expect(nestedContent.querySelector('ul')).toBeDefined(); + + const normalList = tableRows[3]; + expect(normalList.querySelector('svg')).toHaveStyle(` + color: rgba(0, 0, 0, 0.2); + `); + }); + + it('Should render a nested non-expandable table', () => { + render( + ( + + } key="Gender"> + {data.gender} + + + ), + }} + data={MOCK_DATA.slice(0, 1)} + > + + {(data: DataType) => data.id} + + + {(data: DataType) => data.first_name} + + + {(data: DataType) => data.last_name} + + , + ); + + const table = document.querySelector('ul'); + const tableRows = table.querySelectorAll('.list-item'); + + expect(tableRows[0].querySelector('svg')).toHaveStyle(` + color: rgba(0, 0, 0, 0.2); + `); + expect(tableRows[1].querySelector('svg')).toHaveStyle(` + color: rgba(0, 0, 0, 0.2); + `); + }); + + it('Should render a reponsive flex table', () => { + render( +
+ + + {(data: DataType) => data.id} + + + {(data: DataType) => data.first_name} + + + {(data: DataType) => data.last_name} + + + {(data: DataType) => data.email} + + + {(data: DataType) => data.gender} + + + {(data: DataType) => } + + + {(data: DataType) => data['car make']} + + + {(data: DataType) => data['car model']} + + + {(data: DataType) => data['car model year']} + + +
, + ); + + const table = document.querySelector('ul'); + expect(table).toHaveStyle(` + min-width: 900px; + `); + }); + + it('Should render a flex table with rowStyle prop', () => { + render( + ( + + } key="Gender"> + {data.gender} + + + ), + exapandable: (data) => data['car model year'] < 2007, + }} + data={MOCK_DATA.slice(0, 2)} + rowStyle={() => ({ background: 'orange' })} + > + + {(data: DataType) => data.id} + + + {(data: DataType) => data.first_name} + + + {(data: DataType) => data.last_name} + + + {(data: DataType) => data.email} + + + {(data: DataType) => data['car model year']} + + , + ); + + const table = document.querySelector('ul'); + + const tableRows = table.querySelectorAll('.list-item'); + expect(tableRows[1]).toHaveStyle(` + background: orange; + `); + expect(tableRows[2]).not.toHaveStyle(` + background: orange; + `); + expect(tableRows[3]).toHaveStyle(` + background: orange; + `); + }); + + it('Should render a loading flex table', () => { + render( + + + {(data: DataType) => data.id} + + + {(data: DataType) => data.first_name} + + + {(data: DataType) => data.last_name} + + , + ); + + const table = document.querySelector('ul'); + expect(table.querySelector('.skeleton')).toBeDefined(); + }); + + it('Should render a flex table with pagination', () => { + render(); + + const table = document.querySelector('ul'); + expect(table.querySelectorAll('.list-item').length).toBe(11); + + let firstRow = table.querySelectorAll('.list-item')[1]; + expect(firstRow.querySelector('.sha-el-col').innerHTML).toBe('1'); + + let lastRow = table.querySelectorAll('.list-item')[10]; + expect(lastRow.querySelector('.sha-el-col').innerHTML).toBe('10'); + + const pagination = table.querySelectorAll('.sha-el-row')[11]; + + const nextPage = pagination.querySelectorAll('button')[1]; + act(() => { + fireEvent.click(nextPage); + }); + + firstRow = table.querySelectorAll('.list-item')[1]; + expect(firstRow.querySelector('.sha-el-col').innerHTML).toBe('11'); + + lastRow = table.querySelectorAll('.list-item')[10]; + expect(lastRow.querySelector('.sha-el-col').innerHTML).toBe('20'); + + const previousPage = pagination.querySelectorAll('button')[0]; + act(() => { + fireEvent.click(previousPage); + }); + + firstRow = table.querySelectorAll('.list-item')[1]; + expect(firstRow.querySelector('.sha-el-col').innerHTML).toBe('1'); + + lastRow = table.querySelectorAll('.list-item')[10]; + expect(lastRow.querySelector('.sha-el-col').innerHTML).toBe('10'); + }); +}); diff --git a/jest.config.js b/jest.config.js index 4898ca0..3d10e5a 100644 --- a/jest.config.js +++ b/jest.config.js @@ -2,6 +2,6 @@ module.exports = { preset: 'ts-jest', testEnvironment: 'jsdom', coverageDirectory: './__tests__/__coverage__', - modulePathIgnorePatterns: ['lcov-report', 'setup.js'], + modulePathIgnorePatterns: ['lcov-report', 'setup.js', '__mocks__'], setupFilesAfterEnv: ['/__tests__/setup.js'], }; diff --git a/src/components/Table/FlexTable.stories.tsx b/src/components/FlexTable/FlexTable.stories.tsx similarity index 100% rename from src/components/Table/FlexTable.stories.tsx rename to src/components/FlexTable/FlexTable.stories.tsx diff --git a/src/components/Table/FlexTable.tsx b/src/components/FlexTable/FlexTable.tsx similarity index 95% rename from src/components/Table/FlexTable.tsx rename to src/components/FlexTable/FlexTable.tsx index cef20db..d362022 100644 --- a/src/components/Table/FlexTable.tsx +++ b/src/components/FlexTable/FlexTable.tsx @@ -33,7 +33,7 @@ export function FlexTable(props: FlexTableProps) { const showEmptyState = (className: string) => { if (!props.data.length) { return ( -
+
@@ -56,7 +56,7 @@ export function FlexTable(props: FlexTableProps) { padding={0} > } padding={0} @@ -86,7 +86,7 @@ export function FlexTable(props: FlexTableProps) { style={rowStyle && rowStyle(v, index)} padding={0} > -
{nested.render(v, index)}
+
{nested.render(v, index)}
); } diff --git a/src/components/Table/MOCK_DATA.json b/src/components/FlexTable/MOCK_DATA.json similarity index 100% rename from src/components/Table/MOCK_DATA.json rename to src/components/FlexTable/MOCK_DATA.json diff --git a/src/components/Table/index.ts b/src/components/FlexTable/index.ts similarity index 55% rename from src/components/Table/index.ts rename to src/components/FlexTable/index.ts index 107695e..6014c60 100644 --- a/src/components/Table/index.ts +++ b/src/components/FlexTable/index.ts @@ -1,2 +1 @@ -export { Table } from './Table'; export { FlexTable } from './FlexTable'; diff --git a/src/components/Table/style.ts b/src/components/FlexTable/style.ts similarity index 100% rename from src/components/Table/style.ts rename to src/components/FlexTable/style.ts diff --git a/src/components/Page/Page.stories.tsx b/src/components/Page/Page.stories.tsx index 8bf18f7..12a0daa 100644 --- a/src/components/Page/Page.stories.tsx +++ b/src/components/Page/Page.stories.tsx @@ -7,8 +7,8 @@ import { Textarea, Input } from '../Input'; import { MdAdd, MdArrowBack, MdHome, MdSearch } from 'react-icons/md'; import { Breadcrumb } from '../Breadcrumb'; -import { FlexTable } from '../Table'; -import MOCK_DATA from '../Table/MOCK_DATA.json'; +import { FlexTable } from '../FlexTable'; +import MOCK_DATA from '../FlexTable/MOCK_DATA.json'; import { Button } from '../Button'; type DataType = typeof MOCK_DATA[0]; diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx deleted file mode 100644 index e425a4a..0000000 --- a/src/components/Table/Table.stories.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import React from 'react'; -import { Story, Meta } from '@storybook/react'; - -import { Table } from '.'; -import { Row, Col, MenuItem, Tooltip, Pagination, Menu } from '../..'; -import { MdSort, MdSortByAlpha } from 'react-icons/md'; -import { TableProps } from './Table'; - -export default { - title: 'Display/Table', - component: Table, - argTypes: { - // backgroundColor: { control: 'color' }, - }, -} as Meta; - -export const BasicTableWithHeadersAndFooters: Story> = ( - args, -) => ( - ( - <> -
{text}
-
{obj.status}
- - ), - }, - { - header: 'age', - key: 'age', - dataIndex: 'age', - }, - ]} - header={ - - Profile Table - - } position="bottom"> - {'List'} - - - - -
- } position="bottom"> - Ascending - Descening - -
- - - - } - footer={} - /> -); - -BasicTableWithHeadersAndFooters.args = { - data: [ - { - name: 'Name 1', - age: '22', - status: 'abc', - }, - ], -}; - -export const EmptyState = BasicTableWithHeadersAndFooters.bind({}); -EmptyState.args = { - data: [], -}; diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx deleted file mode 100644 index 3c0b42c..0000000 --- a/src/components/Table/Table.tsx +++ /dev/null @@ -1,151 +0,0 @@ -import * as React from 'react'; -import { GiEmptyMetalBucket } from 'react-icons/gi'; -import { Theme, useTheme } from '../Theme/Theme'; -import { lightText, borderColor } from '../../helpers/color'; -import { Text } from '../Text'; -import { classes } from '../../helpers'; -import { css } from '@emotion/css'; - -/** - * @deprecated Will be removed in 1.0.0 - */ - -export function Table(props: TableProps) { - console.warn('This table component has been deprecated in favor of FlexTable. Please make the change.'); - - const renderRow = () => { - return props.data.map((v, index) => ( - - {props.columns.map((f) => { - return ( - - ); - })} - - )); - }; - - const showEmptyState = (css: Record<'empty' | 'icon', string>) => { - if (!props.data.length) { - return ( -
-
- -
-
No Data
-
- ); - } - }; - - const { header, columns, footer } = props; - const theme = useTheme(); - const css = style(theme); - return ( -
- {header && ( - - {header} - - )} -
- {f.render ? f.render(v[f.dataIndex], v, index) : v[f.dataIndex]} - {f.children ? f.children(v[f.dataIndex], v, index) : ''} -
- - - {columns.map((v) => ( - - ))} - - - {renderRow()} -
{v.header}
- {showEmptyState(css)} - {footer &&
{footer}
} -
- ); -} - -Table.defaultProps = { - shadow: true, - elevation: 0, -}; - -const style = (theme: Theme) => ({ - table: css({ - width: '100%', - borderCollapse: 'collapse', - background: theme.background, - fontSize: '14px', - '& thead': { - fontSize: '12px', - fontWeight: 'bolder', - color: theme.textColor, - }, - '& tr': { - borderBottom: `1px solid ${borderColor(theme.background)}`, - }, - '& th': { - padding: '15px 5px', - textAlign: 'left', - textTransform: 'capitalize', - '&:first-of-type': { - paddingLeft: '24px', - }, - '&:last-of-type': { - paddingRight: '24px', - }, - }, - '& td': { - textAlign: 'left', - fontFamily: "'Fira Code', monospace !important", - height: '50px', - padding: '5px 0', - fontWeight: 400, - '&:first-of-type': { - paddingLeft: '24px', - }, - '&:last-of-type': { - paddingRight: '24px', - }, - }, - }), - container: css({ - background: theme.background, - }), - icon: css({ - textAlign: 'center', - fontSize: '50px', - padding: '10px', - }), - empty: css({ - color: lightText(theme), - background: theme.background, - textAlign: 'center', - padding: '50px', - }), - header: css({ - padding: '12px 24px 8px', - lineHeight: '50px', - }), - footer: css({ - padding: '12px 24px 8px', - }), -}); - -export interface TableProps { - data: T[]; - columns: Colums[]; - elevation?: number; - header?: React.ReactNode; - footer?: React.ReactNode; -} - -export interface Colums { - key: string; - dataIndex?: keyof T; - header?: React.ReactNode; - render?: (text: T[keyof T], obj: T, index: number) => React.ReactNode; - children?: (text: T[keyof T], obj: T, index: number) => React.ReactNode; -} diff --git a/src/index.ts b/src/index.ts index b4e5180..909a145 100644 --- a/src/index.ts +++ b/src/index.ts @@ -14,7 +14,7 @@ export { MenuItem, Menu } from './components/Menu'; export { Modal } from './components/Modal'; export { Pagination } from './components/Pagination'; export { Popover } from './components/Popover'; -export { Table, FlexTable } from './components/Table'; +export { FlexTable } from './components/FlexTable'; export { TabPanel, Tabs, TabHeader, TabPanelContainer } from './components/Tabs'; export { Calendar } from './components/Calendar'; export { CheckBox } from './components/CheckBox';