Tests

Below are some simple tests using different technologies.

React

Folder structure

- src
 - components
  - Jspreadsheet.js
  - Jspreadsheet.test.js

Jspreadsheet.js file

import { useEffect, useRef } from "react";
import jspreadsheet from "jspreadsheet";

import "jspreadsheet/dist/jspreadsheet.css";

jspreadsheet.setLicense(
  "NDQ2NWFjNWMyYmEyYzRhOTU4MDYxZTk2NDYzYzJhYmYxOWQ3YzI0NWQyNjJmYjljMmZkNzdkMTNlMGQwNDAxMjI1N2RjMzAyZjliY2RiYWNhNTc0OTc4MWQ2MmE2MzMwMzQxZjk0ZWMxYjNjMDIwNzRmM2FkODM1Y2FmODI5MzIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalV3TXpjNE1pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09"
);

function Jspreadsheet() {
  const jssDiv = useRef(null);
  const jssInstance = useRef(null);

  useEffect(() => {
    jssInstance.current = jspreadsheet(jssDiv.current, {
      worksheets: [
        {
          data: [["teste 1", "teste 2", "teste 3"]],
        },
      ],
    });
  }, []);

  return <div ref={jssDiv}></div>;
}

export default Jspreadsheet;

Jspreadsheet.test.js

import { render, screen } from "@testing-library/react";
import Jspreadsheet from "./Jspreadsheet";

test("renders simple table", () => {
  render(<Jspreadsheet />);

  const firstValue = screen.getByText("teste 1");
  expect(firstValue).toBeInTheDocument();

  const secondValue = screen.getByText("teste 2");
  expect(secondValue).toBeInTheDocument();

  const thirdValue = screen.getByText("teste 3");
  expect(thirdValue).toBeInTheDocument();
});

Test script

"test": "react-scripts test"

Angular

Folder structure

- src
 - app
  - app.component.html
  - app.component.ts
  - app.component.spec.ts

app.component.html

<div #spreadsheet></div>

app.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import jspreadsheet from 'jspreadsheet';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild('spreadsheet') spreadsheet: ElementRef;

  ngAfterViewInit() {
    // License for Formula Plugin
    jspreadsheet.setLicense(
      'NDQ2NWFjNWMyYmEyYzRhOTU4MDYxZTk2NDYzYzJhYmYxOWQ3YzI0NWQyNjJmYjljMmZkNzdkMTNlMGQwNDAxMjI1N2RjMzAyZjliY2RiYWNhNTc0OTc4MWQ2MmE2MzMwMzQxZjk0ZWMxYjNjMDIwNzRmM2FkODM1Y2FmODI5MzIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalV3TXpjNE1pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'
    );

    // Create spreadsheet
    jspreadsheet(this.spreadsheet.nativeElement, {
      worksheets: [
        {
          data: [[]],
          minDimensions: [6, 4],
          columns: [
            {
              type: 'dropdown',
              width: 100,
              source: ['Y', 'N'],
            },
            {
              type: 'color',
              width: 100,
              render: 'square',
            },
          ],
        },
      ],
    });
  }
}

app.component.spec.ts

import { AppComponent } from './app.component';

describe('AppComponent', () => {
  it('should create the app', () => {
    const component = new AppComponent();

    expect(component).toBeTruthy();
  });
});

Test script

"test": "ng test"

Vue

Folder structure

- src
 - components
  - JspreadsheetComponent.vue
  - __tests__
    - JspreadsheetComponent.spec.js

JspreadsheetComponent.vue

<template>
  <Spreadsheet ref="spreadsheet" :license="license">
    <Worksheet :data="data" :columns="columns" />
  </Spreadsheet>
  <input type="button" value="getData" @click="getData()" />
</template>

<script>
import { Spreadsheet, Worksheet } from '@jspreadsheet/vue'

const license =
  'NDQ2NWFjNWMyYmEyYzRhOTU4MDYxZTk2NDYzYzJhYmYxOWQ3YzI0NWQyNjJmYjljMmZkNzdkMTNlMGQwNDAxMjI1N2RjMzAyZjliY2RiYWNhNTc0OTc4MWQ2MmE2MzMwMzQxZjk0ZWMxYjNjMDIwNzRmM2FkODM1Y2FmODI5MzIsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalV3TXpjNE1pd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'

export default {
  components: {
    Spreadsheet,
    Worksheet
  },
  data() {
    // Worksheet data
    const data = [
      ['US', 'Cheese', '2019-02-12'],
      ['CA', 'Apples', '2019-03-01'],
      ['CA', 'Carrots', '2018-11-10'],
      ['BR', 'Oranges', '2019-01-12']
    ]

    // Columns
    const columns = [{ width: '300px' }, { width: '200px' }, { width: '200px' }]

    return {
      data,
      columns,
      license
    }
  }
}
</script>

JspreadsheetComponent.spec.js

import { describe, it, expect } from 'vitest'

import { mount } from '@vue/test-utils'
import JspreadsheetComponent from '../JspreadsheetComponent.vue'

describe('JspreadsheetComponent', () => {
  it('renders properly', () => {
    const component = mount(JspreadsheetComponent)

    expect(component.find('td[data-x="1"][data-y="3"]').text()).toContain('Oranges')
  })
})

Test script

"test:unit": "vitest"