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(
"N2JlMDMzNTU1YjNkNzhkMzE0ZmJmYTk4NWFlNzJkYmM0MTFiMTE2ZmFkNTM5ZTJlNWYwZWNmYjAzZjIwZDlkMzMwM2NlMGVmMWFhMTIyNGYwYmU4ZjkyZTI0NDIzNTIzNDA4ZTE0NWNkNDRkZDc5MTQ5ZTY2MjliZThmM2IwYTIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUXpPVGc0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ=="
);
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(
'N2JlMDMzNTU1YjNkNzhkMzE0ZmJmYTk4NWFlNzJkYmM0MTFiMTE2ZmFkNTM5ZTJlNWYwZWNmYjAzZjIwZDlkMzMwM2NlMGVmMWFhMTIyNGYwYmU4ZjkyZTI0NDIzNTIzNDA4ZTE0NWNkNDRkZDc5MTQ5ZTY2MjliZThmM2IwYTIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUXpPVGc0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ=='
);
// 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 =
'N2JlMDMzNTU1YjNkNzhkMzE0ZmJmYTk4NWFlNzJkYmM0MTFiMTE2ZmFkNTM5ZTJlNWYwZWNmYjAzZjIwZDlkMzMwM2NlMGVmMWFhMTIyNGYwYmU4ZjkyZTI0NDIzNTIzNDA4ZTE0NWNkNDRkZDc5MTQ5ZTY2MjliZThmM2IwYTIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNek5UUXpPVGc0TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ=='
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"