Skip to content

Commit

Permalink
README.md
Browse files Browse the repository at this point in the history 
cover 100%
  • Loading branch information
@piglovesyou
piglovesyou committed Jan 4, 2024
1 parent c501343 commit 49bd434
Show file tree
Hide file tree
Showing 4 changed files with 176 additions and 143 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# merge-cells [![Node.js CI](https://github.com/piglovesyou/merge-cells/actions/workflows/node.js.yml/badge.svg)](https://github.com/piglovesyou/merge-cells/actions/workflows/node.js.yml)
# merge-cells [![Node.js CI](https://github.com/piglovesyou/merge-cells/actions/workflows/node.js.yml/badge.svg)](https://github.com/piglovesyou/merge-cells/actions/workflows/node.js.yml) [![npm version](https://badge.fury.io/js/merge-cells.svg)](https://badge.fury.io/js/merge-cells) [![npm](https://img.shields.io/npm/dw/merge-cells)](https://www.npmjs.com/package/merge-cells) [![Codecov](https://img.shields.io/codecov/c/github/piglovesyou/merge-cells)](https://app.codecov.io/github/piglovesyou/merge-cells)

Provide JavaScript/TypeScript functions to help you merge cells with vertically the same values.

Expand Down Expand Up @@ -53,7 +53,7 @@ function mergeCells(tableEl: HTMLTableElement, columnIndexes?: number[], options

### `calcRowspanFromObjectArray`

Calculate the `rowspan` of each cell in JavaScript object rows. Useful for flexible usage such as in server-side
Calculate the `rowspan` of each cell in JavaScript object rows. Useful in a context of server-side
rendering. Signature:

```ts
Expand Down
2 changes: 2 additions & 0 deletions jest.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,8 @@ const config = {

// Whether to use watchman for file crawling
// watchman: true,

prettierPath: null,
}

module.exports = config
271 changes: 168 additions & 103 deletions src/merge-cells.test.ts
View file
Original file line number Diff line number Diff line change
@@ -1,114 +1,179 @@
import { calcRowspanFromObjectArray } from './merge-cells'
import { calcRowspanFromObjectArray, calcRowspanWithTableRows, mergeCells } from './merge-cells'
import { JSDOM } from 'jsdom'

describe('lib.test.ts', () => {
test('merge two on top', () => {
expect(
calcRowspanFromObjectArray(
[
{ c_1: 'a', c_2: 'a' },
{ c_1: 'a', c_2: 'a' },
{ c_1: 'b', c_2: 'a' },
],
['c_1', 'c_2'],
),
).toStrictEqual([
{ c_1: 2, c_2: 2 },
{ c_1: 0, c_2: 0 },
{ c_1: 1, c_2: 1 },
])
})
describe('calcRowspanFromObjectArray', () => {
test('merge two on top', () => {
expect(
calcRowspanFromObjectArray(
[
{ c_1: 'a', c_2: 'a' },
{ c_1: 'a', c_2: 'a' },
{ c_1: 'b', c_2: 'a' },
],
['c_1', 'c_2'],
),
).toStrictEqual([
{ c_1: 2, c_2: 2 },
{ c_1: 0, c_2: 0 },
{ c_1: 1, c_2: 1 },
])
})

test('merge two on bottom', () => {
expect(
calcRowspanFromObjectArray(
[
{ c_1: 'a', c_2: 'a' },
{ c_1: 'b', c_2: 'a' },
{ c_1: 'b', c_2: 'a' },
],
['c_1', 'c_2'],
),
).toStrictEqual([
{ c_1: 1, c_2: 1 },
{ c_1: 2, c_2: 2 },
{ c_1: 0, c_2: 0 },
])
})
test('merge two on bottom', () => {
expect(
calcRowspanFromObjectArray(
[
{ c_1: 'a', c_2: 'a' },
{ c_1: 'b', c_2: 'a' },
{ c_1: 'b', c_2: 'a' },
],
['c_1', 'c_2'],
),
).toStrictEqual([
{ c_1: 1, c_2: 1 },
{ c_1: 2, c_2: 2 },
{ c_1: 0, c_2: 0 },
])
})

test('merge two on top and bottom', () => {
expect(
calcRowspanFromObjectArray(
[
{ c_1: 'a', c_2: 'a' },
{ c_1: 'a', c_2: 'a' },
{ c_1: 'b', c_2: 'a' },
{ c_1: 'c', c_2: 'a' },
{ c_1: 'c', c_2: 'a' },
],
['c_1', 'c_2'],
),
).toStrictEqual([
{ c_1: 2, c_2: 2 },
{ c_1: 0, c_2: 0 },
{ c_1: 1, c_2: 1 },
{ c_1: 2, c_2: 2 },
{ c_1: 0, c_2: 0 },
])
})
test('merge two on top and bottom', () => {
expect(
calcRowspanFromObjectArray(
[
{ c_1: 'a', c_2: 'a' },
{ c_1: 'a', c_2: 'a' },
{ c_1: 'b', c_2: 'a' },
{ c_1: 'c', c_2: 'a' },
{ c_1: 'c', c_2: 'a' },
],
['c_1', 'c_2'],
),
).toStrictEqual([
{ c_1: 2, c_2: 2 },
{ c_1: 0, c_2: 0 },
{ c_1: 1, c_2: 1 },
{ c_1: 2, c_2: 2 },
{ c_1: 0, c_2: 0 },
])
})

test('merge 1st level when values are different on 2nd level', () => {
expect(
calcRowspanFromObjectArray(
[
{ c_1: 'a', c_2: 'a' },
{ c_1: 'a', c_2: 'b' },
{ c_1: 'b', c_2: 'a' },
{ c_1: 'b', c_2: 'b' },
],
['c_1', 'c_2'],
),
).toStrictEqual([
{ c_1: 2, c_2: 1 },
{ c_1: 0, c_2: 1 },
{ c_1: 2, c_2: 1 },
{ c_1: 0, c_2: 1 },
])
test('merge 1st level when values are different on 2nd level', () => {
expect(
calcRowspanFromObjectArray(
[
{ c_1: 'a', c_2: 'a' },
{ c_1: 'a', c_2: 'b' },
{ c_1: 'b', c_2: 'a' },
{ c_1: 'b', c_2: 'b' },
],
['c_1', 'c_2'],
),
).toStrictEqual([
{ c_1: 2, c_2: 1 },
{ c_1: 0, c_2: 1 },
{ c_1: 2, c_2: 1 },
{ c_1: 0, c_2: 1 },
])
})

test('not merge 2nd level when values are different on 1st level', () => {
expect(
calcRowspanFromObjectArray(
[
{ c_1: 'a', c_2: 'a' },
{ c_1: 'b', c_2: 'a' },
{ c_1: 'c', c_2: 'a' },
],
['c_1', 'c_2'],
),
).toStrictEqual([
{ c_1: 1, c_2: 1 },
{ c_1: 1, c_2: 1 },
{ c_1: 1, c_2: 1 },
])
})

test('respectColumnLevels: false to merge vertically regardless of column levels', () => {
expect(
calcRowspanFromObjectArray(
[
{ c_1: 'a', c_2: 'a', c_3: 'c' },
{ c_1: 'a', c_2: 'b', c_3: 'c' },
{ c_1: 'b', c_2: 'b', c_3: 'a' },
],
['c_1', 'c_2', 'c_3'],
{
respectColumnLevels: false,
},
),
).toStrictEqual([
{ c_1: 2, c_2: 1, c_3: 2 },
{ c_1: 0, c_2: 2, c_3: 0 },
{ c_1: 1, c_2: 0, c_3: 1 },
])
})
})

test('not merge 2nd level when values are different on 1st level', () => {
expect(
calcRowspanFromObjectArray(
[
{ c_1: 'a', c_2: 'a' },
{ c_1: 'b', c_2: 'a' },
{ c_1: 'c', c_2: 'a' },
],
['c_1', 'c_2'],
),
).toStrictEqual([
{ c_1: 1, c_2: 1 },
{ c_1: 1, c_2: 1 },
{ c_1: 1, c_2: 1 },
])
describe('mergeCells', () => {
test('merge cells', () => {
document.body.innerHTML = `<!DOCTYPE html>
<table>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
</table>`
const table = document.querySelector('table') as HTMLTableElement
mergeCells(table)
expect(table.innerHTML).toMatchInlineSnapshot(`
"
<tbody><tr>
<td rowspan="3">1</td>
<td rowspan="2">1</td>
</tr>
<tr>
<td style="display: none;">1</td>
<td style="display: none;">1</td>
</tr>
<tr>
<td style="display: none;">1</td>
<td rowspan="1">2</td>
</tr>
<tr>
<td rowspan="1">2</td>
<td rowspan="1">2</td>
</tr>
</tbody>"
`)
})

test('pass with an empty table', () => {
document.body.innerHTML = `<!DOCTYPE html>
<table></table>`
const table = document.querySelector('table') as HTMLTableElement
mergeCells(table)
expect(table.innerHTML).toMatchInlineSnapshot(`""`)
})
})

test('merge vertically regardless of levels', () => {
expect(
calcRowspanFromObjectArray(
[
{ c_1: 'a', c_2: 'a', c_3: 'c' },
{ c_1: 'a', c_2: 'b', c_3: 'c' },
{ c_1: 'b', c_2: 'b', c_3: 'a' },
],
['c_1', 'c_2', 'c_3'],
{
respectColumnLevels: false,
},
),
).toStrictEqual([
{ c_1: 2, c_2: 1, c_3: 2 },
{ c_1: 0, c_2: 2, c_3: 0 },
{ c_1: 1, c_2: 0, c_3: 1 },
])
describe('calcRowspanWithTableRows', () => {
test('pass with empty rows', () => {
expect(calcRowspanWithTableRows({} as HTMLCollectionOf<HTMLTableRowElement>, undefined, {})).toStrictEqual(
[],
)
})
})
})
Loading

0 comments on commit 49bd434

Please sign in to comment.