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"