feat(table): add unit tests to table

packages/pharos-site/initComponents.tsx

@@ -39,6 +39,7 @@ if (typeof window !== `undefined`) {
     pharos.PharosSidenavSection,
     pharos.PharosTabs,
     pharos.PharosTab,
+    pharos.PharosTable,
     pharos.PharosTabPanel,
     pharos.PharosTextInput,
     pharos.PharosTextarea,

packages/pharos/src/components/table/pharos-table.test.ts

@@ -4,49 +4,124 @@ import type { TemplateResult } from 'lit';
 import { html } from 'lit/static-html.js';
 
 import type { PharosTable } from './pharos-table';
+import type { PharosLink } from '../link/pharos-link';
+import type { PharosPagination } from '../pagination/pharos-pagination';
+import type { PharosSelect } from '../select/pharos-select';
 
 describe('pharos-table', () => {
-  let component: PharosTable;
+  let component: PharosTable, componentWithPagination: PharosTable;
+  const columns = [
+    {
+      name: 'Item',
+      field: 'item',
+    },
+    {
+      name: 'Filename',
+      field: 'filename',
+    },
+  ];
+  const rowData = [
+    {
+      item: 1,
+      filename: '12345.jpg',
+      expired_date: '2020-1-1',
+      created_on: '2010-1-1',
+      university: 'University of Michigan',
+    },
+    {
+      item: 2,
+      filename: '123456.jpg',
+      expired_date: '2020-1-1',
+      created_on: '2010-1-1',
+      university: 'University of Michigan',
+    },
+  ];
 
   beforeEach(async () => {
-    const columns = [
-      {
-        name: 'Item',
-        field: 'item',
-      },
-      {
-        name: 'Filename',
-        field: 'filename',
-      },
-    ];
-    const rowData = [
-      {
-        item: 1,
-        filename: '12345.jpg',
-        expired_date: '2020-1-1',
-        created_on: '2010-1-1',
-        university: 'University of Michigan',
-      },
-      {
-        item: 2,
-        filename: '123456.jpg',
-        expired_date: '2020-1-1',
-        created_on: '2010-1-1',
-        university: 'University of Michigan',
-      },
-    ];
     component = await fixture(html`
-      <test-pharos-table .columns="${columns}" .rowData="${rowData}"> </test-pharos-table>
+      <test-pharos-table .columns="${columns}" .rowData="${rowData}" .totalResults="${2}">
+      </test-pharos-table>
+    `);
+
+    componentWithPagination = await fixture(html`
+      <test-pharos-table
+        .columns="${columns}"
+        .rowData="${rowData}"
+        .hidePagination="${false}"
+        .totalResults="${2}"
+        .pageSizeOptions="${[1, 2]}"
+      >
+      </test-pharos-table>
     `);
   });
 
   it('is accessible', async () => {
     await expect(component).to.be.accessible();
   });
 
-  it('has 2 rows', async () => {
-    const rows = Array.prototype.slice.call(component.querySelectorAll(`tr`)) as TemplateResult[];
+  it('is accessible with pagination', async () => {
+    await expect(componentWithPagination).to.be.accessible();
+  });
+
+  it('has 3 rows', async () => {
+    const rows = Array.prototype.slice.call(
+      component.renderRoot.querySelectorAll(`tr`)
+    ) as TemplateResult[];
+    expect(rows.length).to.be.eq(3);
+  });
 
+  it('render rows according to page size', async () => {
+    const rows = Array.prototype.slice.call(
+      componentWithPagination.renderRoot.querySelectorAll(`tr`)
+    ) as TemplateResult[];
     expect(rows.length).to.be.eq(2);
   });
+
+  it('update table after page size selection', async () => {
+    let rows = Array.prototype.slice.call(
+      componentWithPagination.renderRoot.querySelectorAll(`tr`)
+    ) as TemplateResult[];
+    expect(rows.length).to.be.eq(2);
+
+    const selectDropdown = componentWithPagination.renderRoot.querySelector(
+      `pharos-select`
+    ) as PharosSelect;
+    selectDropdown['_select'].value = '2';
+    selectDropdown['_select'].dispatchEvent(new Event('change'));
+
+    await componentWithPagination.updateComplete;
+
+    rows = Array.prototype.slice.call(
+      componentWithPagination.renderRoot.querySelectorAll(`tr`)
+    ) as TemplateResult[];
+    expect(rows.length).to.be.eq(3);
+  });
+
+  it('fires a custom event pwhen go to prev and next page', async () => {
+    let prevWasFired = false;
+    let nextWasFired = false;
+    const handlePrevPage = (): void => {
+      prevWasFired = true;
+    };
+    const handleNextPage = (): void => {
+      nextWasFired = true;
+    };
+    componentWithPagination.addEventListener('pharos-table-prev-page', handlePrevPage);
+    componentWithPagination.addEventListener('pharos-table-next-page', handleNextPage);
+
+    const pagination = componentWithPagination.renderRoot.querySelector(
+      `pharos-pagination`
+    ) as PharosPagination;
+    const nextPageLink = pagination.renderRoot.querySelector(`.next`) as PharosLink;
+    nextPageLink.click();
+    await componentWithPagination.updateComplete;
+
+    expect(nextWasFired).to.be.true;
+
+    const prevPageLink = pagination.renderRoot.querySelector(`.prev`) as PharosLink;
+    prevPageLink.click();
+    await componentWithPagination.updateComplete;
+
+    expect(prevWasFired).to.be.true;
+  });
 });

packages/pharos/src/components/table/pharos-table.ts

@@ -64,34 +64,36 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
   @property({ type: Boolean, reflect: true, attribute: 'hide-pagination' })
   public hidePagination: boolean = true;
 
-  @property({ type: Number, reflect: true, attribute: 'total-number' })
+  @property({ type: Number, reflect: true, attribute: 'total-results' })
   public totalResults: number = 0;
 
   @property({ type: Array, reflect: true, attribute: 'page-size-options' })
   public pageSizeOptions: number[] = [50, 100];
 
   @state()
-  private _pageSize = 0;
+  private _pageSize = 50;
 
   @state()
   private _currentPage = 1;
 
   protected override firstUpdated(): void {
     this._pageSize = this.hidePagination ? this.rowData.length : this.pageSizeOptions[0];
-    this.totalResults = this.hidePagination ? this.rowData.length : this.totalResults;
+    this.totalResults =
+      this.hidePagination || !this.totalResults ? this.rowData.length : this.totalResults;
   }
 
   protected override updated(): void {
     this._pageSize = this.hidePagination ? this.rowData.length : this._pageSize;
-    this.totalResults = this.hidePagination ? this.rowData.length : this.totalResults;
+    this.totalResults =
+      this.hidePagination || !this.totalResults ? this.rowData.length : this.totalResults;
   }
 
   public static override get styles(): CSSResultArray {
     return [tableStyles];
   }
 
   private _onPageSizeChange(event: Event): void {
-    this._pageSize = Number((event.composedPath()[0] as Element).value);
+    this._pageSize = Number((event.composedPath()[0] as HTMLInputElement).value);
   }
 
   private _pageStartNumber(): number {
@@ -145,7 +147,14 @@ export class PharosTable extends ScopedRegistryMixin(PharosElement) {
       ? html`<div class="table-controls">
           <div class="item-per-page-wrapper">
             <span>Items per page</span>
-            <pharos-select class="item-per-page-selector" @change=${this._onPageSizeChange}>
+            <pharos-select
+              required
+              hideLabel
+              name="pharos-table-page-size-select"
+              class="item-per-page-selector"
+              @change=${this._onPageSizeChange}
+            >
+              <span slot="label">page size</span>
               ${this._renderPageSizeOptions()}
             </pharos-select>
             <span