chore: basic tests

Author: afshinm

jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  testEnvironment: 'node',
+  testEnvironment: 'jsdom',
   globals: {
     'ts-jest': {
       tsConfig: 'tsconfig.test.json'
@@ -10,9 +10,7 @@ module.exports = {
   },
   moduleFileExtensions: [
     "ts",
-    "tsx",
     "js",
-    "jsx",
     "json",
     "node",
   ],

src/wrapper.ts

@@ -3,5 +3,7 @@ import {Grid, UserConfig} from 'gridjs';
 import $ from 'jquery';
 
 $.fn.Grid = function (userConfig?: UserConfig) {
-  new Grid(userConfig).render(this)
+  const container = $(this);
+  const grid = new Grid(userConfig);
+  grid.render(container.get(0))
 }

tests/__snapshots__/wrapper.test.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`wrapper should render the table 1`] = `"<div id=\\"wrapper\\"><div role=\\"complementary\\" class=\\"gridjs gridjs-container gridjs-loading\\" style=\\"width: 100%;\\"><div class=\\"gridjs-loading-bar\\"></div><div class=\\"gridjs-head\\"></div><div class=\\"gridjs-wrapper\\" style=\\"width: 100%; height: auto;\\"><table role=\\"grid\\" class=\\"gridjs-table\\" style=\\"width: 100%; height: auto;\\"><tbody class=\\"gridjs-tbody\\"><tr class=\\"gridjs-tr\\"><td role=\\"alert\\" colspan=\\"0\\" class=\\"gridjs-td gridjs-message gridjs-loading\\">Loading...</td></tr></tbody></table></div><div class=\\"gridjs-footer\\"></div></div><div id=\\"gridjs-temp\\" class=\\"gridjs-temp\\"></div></div>"`;

tests/setup.ts

@@ -0,0 +1,9 @@
+import * as wrapper from '../src/wrapper';
+import $ from 'jquery';
+
+// @ts-ignore
+global.$ = $;
+// @ts-ignore
+global.jQuery = $;
+// @ts-ignore
+global.wrapper = wrapper;

tests/wrapper.test.ts

@@ -0,0 +1,27 @@
+/// <reference path="../src/jquery.d.ts"/>
+
+import { Grid } from 'gridjs';
+
+describe('wrapper', () => {
+  it('should call the render method', () => {
+    document.body.innerHTML = '<div id="wrapper"></div>';
+
+    const grid = jest.spyOn(Grid.prototype, 'render');
+
+    $('div#wrapper').Grid({
+      data: [[1, 2, 3]]
+    });
+
+    expect(grid).toBeCalled();
+  });
+
+  it('should render the table', () => {
+    document.body.innerHTML = '<div id="wrapper"></div>';
+
+    $('div#wrapper').Grid({
+      data: [[1, 2, 3]]
+    });
+
+    expect(document.body.innerHTML).toMatchSnapshot();
+  });
+});