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(
  "YTRmMzE1ZGY4NjQzN2JmNDA3MGZiZWQyMGZjMWIxYWY4MDY2Y2VhNmY3NzBiNjA0MjE2ZjM2YzUyMWM2ZDYyZmU2ZWJiOTI4M2M1MGExZDViNWVjMDA4NjY3OTIzNGRhOWExYWJjY2ZjNWU3ZTk1ZmEyZTU4YjMxOGU0YTYzODIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNelF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ=="
);

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(
      'YTRmMzE1ZGY4NjQzN2JmNDA3MGZiZWQyMGZjMWIxYWY4MDY2Y2VhNmY3NzBiNjA0MjE2ZjM2YzUyMWM2ZDYyZmU2ZWJiOTI4M2M1MGExZDViNWVjMDA4NjY3OTIzNGRhOWExYWJjY2ZjNWU3ZTk1ZmEyZTU4YjMxOGU0YTYzODIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNelF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ=='
    );

    // 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 =
  'YTRmMzE1ZGY4NjQzN2JmNDA3MGZiZWQyMGZjMWIxYWY4MDY2Y2VhNmY3NzBiNjA0MjE2ZjM2YzUyMWM2ZDYyZmU2ZWJiOTI4M2M1MGExZDViNWVjMDA4NjY3OTIzNGRhOWExYWJjY2ZjNWU3ZTk1ZmEyZTU4YjMxOGU0YTYzODIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNME9EY3dNelF6TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ=='

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"