fix: MessageRow click won't trigger rowClick event

grid-js · Dec 10, 2020 · 5e13468 · 5e13468
1 parent 8058c3b
commit 5e13468
Show file tree

Hide file tree

Showing 9 changed files with 152 additions and 4 deletions.
diff --git a/packages/gridjs/src/view/table/messageRow.tsx b/packages/gridjs/src/view/table/messageRow.tsx
@@ -15,10 +15,11 @@ export interface MessageRowProps extends BaseProps {
 export class MessageRow extends BaseComponent<MessageRowProps, {}> {
   render() {
     return (
-      <TR>
+      <TR stylingRow={true}>
         <TD
           role="alert"
           colSpan={this.props.colSpan}
+          stylingCell={true}
           cell={new Cell(this.props.message)}
           className={classJoin(
             className('message'),

diff --git a/packages/gridjs/src/view/table/td.tsx b/packages/gridjs/src/view/table/td.tsx
@@ -10,11 +10,12 @@ import { PluginRenderer } from '../../plugin';
 
 export interface TDProps
   extends BaseProps,
-    JSX.HTMLAttributes<HTMLTableCellElement> {
+  JSX.HTMLAttributes<HTMLTableCellElement> {
   cell: Cell;
   row?: Row;
   column?: TColumn;
   style?: CSSDeclaration;
+  stylingCell?: boolean;
 }
 
 export class TD extends BaseComponent<TDProps> {
@@ -47,6 +48,8 @@ export class TD extends BaseComponent<TDProps> {
   }
 
   private handleClick(e: JSX.TargetedMouseEvent<HTMLTableCellElement>): void {
+    if (this.props.stylingCell)
+      return;
     this.config.eventEmitter.emit(
       'cellClick',
       e,

diff --git a/packages/gridjs/src/view/table/tr.tsx b/packages/gridjs/src/view/table/tr.tsx
@@ -11,6 +11,7 @@ import Header from '../../header';
 export interface TRProps extends BaseProps {
   row?: Row;
   header?: Header;
+  stylingRow?: boolean;
 }
 
 export class TR extends BaseComponent<TRProps, {}> {
@@ -27,6 +28,8 @@ export class TR extends BaseComponent<TRProps, {}> {
   }
 
   private handleClick(e: JSX.TargetedMouseEvent<HTMLTableRowElement>): void {
+    if (this.props.stylingRow)
+      return;
     this.config.eventEmitter.emit('rowClick', e, this.props.row);
   }
 

diff --git a/packages/gridjs/tests/view/table/__snapshots__/message-row.test.tsx.snap b/packages/gridjs/tests/view/table/__snapshots__/message-row.test.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`MessageRow component should match the snapshot 1`] = `"<tr class=\\"gridjs-tr\\"><td role=\\"alert\\" class=\\"gridjs-td gridjs-message\\">boo</td></tr>"`;
diff --git a/packages/gridjs/tests/view/table/__snapshots__/tr.test.tsx.snap b/packages/gridjs/tests/view/table/__snapshots__/tr.test.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TR component should match the snapshot 1`] = `"<tr class=\\"gridjs-tr\\"><td class=\\"gridjs-td\\">boo</td></tr>"`;
diff --git a/packages/gridjs/tests/view/table/message-row.test.tsx b/packages/gridjs/tests/view/table/message-row.test.tsx
@@ -0,0 +1,42 @@
+import { mount } from 'enzyme';
+import { createContext, h } from 'preact';
+import { Config } from '../../../src/config';
+import { EventEmitter } from '../../../src/util/eventEmitter';
+import { TableEvents } from '../../../src/view/table/events';
+import { MessageRow } from '../../../src/view/table/messageRow';
+
+describe('MessageRow component', () => {
+  let config: Config;
+  const configContext = createContext(null);
+
+  beforeEach(() => {
+    config = new Config();
+  });
+
+  it('should match the snapshot', () => {
+    const td = mount(
+      <configContext.Provider value={config}>
+        <MessageRow message="boo" />
+      </configContext.Provider>,
+    );
+    expect(td.html()).toMatchSnapshot();
+  });
+
+  it('should prevent emit rowClick', async () => {
+    config.eventEmitter = new EventEmitter<TableEvents>();
+    const onClick = jest.fn();
+
+    const rows = mount(
+      <configContext.Provider value={config}>
+        <MessageRow message="boo" />
+      </configContext.Provider>,
+    ).find('tr');
+
+    config.eventEmitter.on('rowClick', onClick)
+    rows.map(tr => tr.simulate('click'));
+
+    expect(rows.length).toEqual(1);
+    expect(onClick).toHaveBeenCalledTimes(0);
+  });
+});
+
diff --git a/packages/gridjs/tests/view/table/table.test.tsx b/packages/gridjs/tests/view/table/table.test.tsx
@@ -13,6 +13,8 @@ import { Translator } from '../../../src/i18n/language';
 import Tabular from '../../../src/tabular';
 import { html } from '../../../src/util/html';
 import Row from '../../../src/row';
+import { EventEmitter } from '../../../src/util/eventEmitter';
+import { TableEvents } from '../../../src/view/table/events';
 
 describe('Table component', () => {
   let config: Config;
@@ -504,8 +506,8 @@ describe('Table component', () => {
           attributes: (cell: TCell) =>
             cell === 'b'
               ? {
-                  'data-row-c': true,
-                }
+                'data-row-c': true,
+              }
               : {},
         },
         {
@@ -575,4 +577,28 @@ describe('Table component', () => {
     expect(table.find('th').text()).toBe('e');
     expect(table.find('th').length).toBe(1);
   });
+
+  it('should emit rowClick', async () => {
+    const header = Header.fromUserConfig({
+      columns: ['h1', 'h2', 'h3'],
+    });
+    config.eventEmitter = new EventEmitter<TableEvents>();
+    const onClick = jest.fn();
+
+    const table = mount(
+      <configContext.Provider value={config}>
+        <Table
+          data={await config.pipeline.process()}
+          header={header}
+          status={Status.Rendered}
+          width={config.width}
+          height={config.height}
+        />
+      </configContext.Provider>,
+    );
+    config.eventEmitter.on('rowClick', onClick)
+    table.find('tbody tr').map(tr => tr.simulate('click'));
+
+    expect(onClick).toHaveBeenCalledTimes(config.data.length);
+  });
 });
diff --git a/packages/gridjs/tests/view/table/td.test.tsx b/packages/gridjs/tests/view/table/td.test.tsx
@@ -3,6 +3,8 @@ import { createContext, h } from 'preact';
 import { TD } from '../../../src/view/table/td';
 import Cell from '../../../src/cell';
 import { Config } from '../../../src/config';
+import { EventEmitter } from '../../../src/util/eventEmitter';
+import { TableEvents } from '../../../src/view/table/events';
 
 describe('TD component', () => {
   let config: Config;
@@ -20,4 +22,21 @@ describe('TD component', () => {
     );
     expect(td.html()).toMatchSnapshot();
   });
+
+  it('should emit cellClick', async () => {
+    config.eventEmitter = new EventEmitter<TableEvents>();
+    const onClick = jest.fn();
+
+    const cells = mount(
+      <configContext.Provider value={config}>
+        <TD cell={new Cell('boo')} />
+      </configContext.Provider>,
+    ).find('td');
+
+    config.eventEmitter.on('cellClick', onClick)
+    cells.map(td => td.simulate('click'));
+
+    expect(cells.length).toEqual(1);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/packages/gridjs/tests/view/table/tr.test.tsx b/packages/gridjs/tests/view/table/tr.test.tsx
@@ -0,0 +1,48 @@
+
+import { mount } from 'enzyme';
+import { createContext, h } from 'preact';
+import { Cell } from '../../..';
+import { Config } from '../../../src/config';
+import { EventEmitter } from '../../../src/util/eventEmitter';
+import { TableEvents } from '../../../src/view/table/events';
+import { TD } from '../../../src/view/table/td';
+import { TR } from '../../../src/view/table/tr';
+
+describe('TR component', () => {
+  let config: Config;
+  const configContext = createContext(null);
+
+  beforeEach(() => {
+    config = new Config();
+  });
+
+  it('should match the snapshot', () => {
+    const tr = mount(
+      <configContext.Provider value={config}>
+        <TR >
+          <TD cell={new Cell('boo')} />
+        </TR>
+      </configContext.Provider>,
+    );
+    expect(tr.html()).toMatchSnapshot();
+  });
+
+  it('should emit rowClick', async () => {
+    config.eventEmitter = new EventEmitter<TableEvents>();
+    const onClick = jest.fn();
+
+    const rows = mount(
+      <configContext.Provider value={config}>
+        <TR >
+          <TD cell={new Cell('boo')} />
+        </TR>
+      </configContext.Provider>,
+    ).find('tr');
+
+    config.eventEmitter.on('rowClick', onClick)
+    rows.map(tr => tr.simulate('click'));
+
+    expect(rows.length).toEqual(1);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+});