Skip to content

Commit

Permalink
Update to use vite + vitest
Browse files Browse the repository at this point in the history
  • Loading branch information
cbeer committed Dec 18, 2024
1 parent 3489de8 commit a3cb797
Show file tree
Hide file tree
Showing 11 changed files with 165 additions and 264 deletions.
7 changes: 4 additions & 3 deletions __tests__/CanvasDownloadLinks.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import { OSDReferences } from 'mirador';
import CanvasDownloadLinks from '../src/CanvasDownloadLinks';
import { render, screen } from './test-utils';
import { vi } from 'vitest';

/**
* Helper function to render the CanvasDownloadLinks component with custom props.
Expand Down Expand Up @@ -44,7 +45,7 @@ describe('CanvasDownloadLinks', () => {
let currentBoundsSpy;

beforeEach(() => {
currentBoundsSpy = jest.spyOn(CanvasDownloadLinks.prototype, 'currentBounds');
currentBoundsSpy = vi.spyOn(CanvasDownloadLinks.prototype, 'currentBounds');
});

afterEach(() => {
Expand Down Expand Up @@ -197,8 +198,8 @@ describe('CanvasDownloadLinks', () => {

describe('For Images Less Than 1000px Wide', () => {
it('does not render a smaller version link if image is under 1000px wide', () => {
canvas.getWidth = () => 999;
createWrapper({ canvas });
const smaller_canvas = { ...canvas, getWidth: () => 999 };
createWrapper({ canvas: smaller_canvas });

const links = screen.getAllByRole('link');
expect(links).toHaveLength(2); // Should only show full-size version and link to PDF.
Expand Down
2 changes: 1 addition & 1 deletion __tests__/MiradorDownloadDialog.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ describe('Dialog', () => {
});

it('calls the closeDialog function when the close button is clicked', async () => {
const closeDialog = jest.fn();
const closeDialog = vi.fn();
createWrapper({ closeDialog });
const closeButton = await screen.findByText(/mirador-dl-plugin\.close/);
fireEvent.click(closeButton);
Expand Down
4 changes: 2 additions & 2 deletions __tests__/miradorDownloadPlugin.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ describe('miradorDownloadPlugin', () => {

describe('MenuItem', () => {
it('triggers both openDownloadDialog and handleClose when "Download" is clicked', async () => {
const handleClose = jest.fn();
const openDownloadDialog = jest.fn();
const handleClose = vi.fn();
const openDownloadDialog = vi.fn();
createWrapper({ handleClose, openDownloadDialog });
const openDownloadDialogButton = await screen.findByText(/mirador-dl-plugin\.download/);
fireEvent.click(openDownloadDialogButton);
Expand Down
93 changes: 0 additions & 93 deletions babel.config.js

This file was deleted.

2 changes: 1 addition & 1 deletion demo/src/index.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import Mirador from 'mirador/dist/es/src/index';
import Mirador from 'mirador';
import miradorDownloadPlugins from '../../src';

const config = {
Expand Down
21 changes: 0 additions & 21 deletions jest.config.js

This file was deleted.

66 changes: 21 additions & 45 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,31 +1,24 @@
{
"name": "mirador-dl-plugin",
"version": "1.0.0-alpha.1",
"version": "1.0.0-alpha.2",
"description": "mirador-dl-plugin React component",
"main": "lib/index.js",
"module": "es/index.js",
"main": "./dist/mirador-dl-plugin.js",
"module": "./dist/mirador-dl-pugin.es.js",
"files": [
"css",
"es",
"lib",
"umd"
"dist"
],
"exports": {
"./src": "./src/index.js"
},
"scripts": {
"build": "npm run build:umd && npm run build:demo",
"build:demo": "NODE_ENV=development webpack --mode=development",
"build:umd": "NODE_ENV=production webpack --mode=production",
"build:es": "mkdir -p es && cp -r src/* es && NODE_ENV=production MODULE_FORMAT=es npx babel es -d es",
"build:cjs": "mkdir -p lib && cp -r src/* lib && NODE_ENV=production MODULE_FORMAT=cjs npx babel lib -d lib",
"clean": "rm -rf ./umd && rm -rf ./es && rm -rf ./lib && rm -rf ./demo/dist",
"lint": "eslint ./src ./__tests__",
"prepublishOnly": "npm run clean && npm run build:es && npm run build:cjs && npm run build",
"start": "NODE_ENV=development webpack serve --open",
"test": "npm run lint && jest",
"test:coverage": "jest --coverage",
"test:watch": "jest --watch"
"build": "vite build --config vite.config.js",
"clean": "rm -rf ./dist",
"lint": "npx eslint ./",
"prepublishOnly": "npm run build",
"start": "vite",
"test": "npm run lint && npx vitest run"
},
"dependencies": {
"@emotion/babel-plugin": "^11.11.0",
"@emotion/cache": "^11.11.0",
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6"
Expand All @@ -38,48 +31,31 @@
"react-dom": "18.x"
},
"devDependencies": {
"@babel/cli": "^7.17.6",
"@babel/core": "^7.17.7",
"@babel/eslint-parser": "^7.5.4",
"@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/plugin-proposal-object-rest-spread": "^7.20.7",
"@babel/plugin-proposal-private-methods": "^7.18.6",
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@babel/plugin-transform-regenerator": "^7.16.7",
"@babel/plugin-transform-runtime": "^7.24.7",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@mui/material": "^5.x",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
"@testing-library/dom": "^9.2.0",
"@testing-library/jest-dom": "^6.1.5",
"@testing-library/react": "^14.1.0",
"@testing-library/user-event": "^14.4.3",
"babel-eslint": "^10.0.3",
"babel-jest": "^24.9.0",
"babel-loader": "^9.1.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"@vitejs/plugin-react": "^4.3.4",
"@vitest/coverage-v8": "^2.1.8",
"eslint": "^8.11.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jest": "^27.1.5",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.29.4",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-testing-library": "^6.2.0",
"glob": "^10.3.0",
"happy-dom": "^15.11.7",
"html-loader": "^5.0.0",
"html-webpack-plugin": "^5.6.0",
"jest": "^29.3.1",
"jest-environment-jsdom": "^29.4.3",
"jest-puppeteer": "^9.0.2",
"lodash": "^4.17.15",
"mirador": "^4.0.0-alpha.5",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"terser-webpack-plugin": "^5.3.1",
"webpack": "^5.70.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.7.4"
"vite": "^6.0.0",
"vitest": "^2.1.4",
"vitest-fetch-mock": "^0.4.2"
},
"author": "",
"homepage": "",
Expand Down
1 change: 1 addition & 0 deletions setupJest.js → setupTest.js
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
import '@testing-library/jest-dom';
import { vi } from 'vitest';
86 changes: 86 additions & 0 deletions vite.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import fs from 'fs/promises';
import path from 'node:path';
import { fileURLToPath } from 'url';
import { globSync } from 'glob';
import pkg from './package.json';

/**
* Vite configuration
*/
export default defineConfig({
...(
process.env.NETLIFY ? {
build: {
rollupOptions: {
external: ['__tests__/*', '__mocks__/*'],
input: Object.fromEntries(
globSync('./demo/src/*.html').map((file) => [
// This remove `src/` as well as the file extension from each
// file, so e.g. src/nested/foo.js becomes nested/foo
path.relative(
'demo/src/',
file.slice(0, file.length - path.extname(file).length),
),
// This expands the relative paths to absolute paths, so e.g.
// src/nested/foo becomes /project/src/nested/foo.js
fileURLToPath(new URL(file, import.meta.url)),
]),
),
},
sourcemap: true,
},
} : {
build: {
lib: {
entry: './src/index.js',
fileName: (format) => (format === 'umd' ? 'mirador-dl-plugin.js' : 'mirador-dl-plugin.es.js'),
formats: ['es', 'umd'],
name: 'MiradorDlPlugin',
},
rollupOptions: {
external: Object.keys(pkg.peerDependencies || {}),
output: {
assetFileNames: 'mirador-dl-plugin.[ext]',
},
},
sourcemap: true,
},
}
),
esbuild: {
exclude: [],
// Matches .js and .jsx in __tests__ and .jsx in src
include: [/__tests__\/.*\.(js|jsx)$/, /src\/.*\.jsx?$/],
loader: 'jsx',
},
optimizeDeps: {
esbuildOptions: {
plugins: [
{
name: 'load-js-files-as-jsx',
// TODO: rename all our files to .jsx ...
/** */
setup(build) {
build.onLoad({ filter: /(src|__tests__)\/.*\.js$/ }, async (args) => ({
contents: await fs.readFile(args.path, 'utf8'),
loader: 'jsx',
}));
},
},
],
},
include: ['@emotion/styled'],
},
plugins: [react()],
resolve: {
alias: {
'@tests/': fileURLToPath(new URL('./__tests__', import.meta.url)),
},
},
server: {
open: '/demo/src/index.html',
port: '4444',
},
});
Loading

0 comments on commit a3cb797

Please sign in to comment.