example: add jquery example

nvh95 · Aug 8, 2022 · be13236 · be13236
1 parent c260560
commit be13236
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 0 deletions.
diff --git a/examples/jquery/README.md b/examples/jquery/README.md
@@ -0,0 +1,7 @@
+# jquery
+
+This example demonstrates how to use `jest-preview` with `jquery`.
+
+## Installation and Usage
+
+Please refer to [Installation](https://www.jest-preview.com/docs/getting-started/installation/) and [Usage](https://www.jest-preview.com/docs/getting-started/usage/).
diff --git a/examples/jquery/jest.config.js b/examples/jquery/jest.config.js
@@ -0,0 +1,24 @@
+/** @type {import('@jest/types').Config.InitialOptions} */
+
+module.exports = {
+  roots: ['<rootDir>/src'],
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
+  testEnvironment: 'jsdom',
+  modulePaths: ['<rootDir>/src'],
+  transform: {
+    '^.+\\.(ts|js|tsx|jsx)$': '@swc/jest',
+    '^.+\\.(css|scss|sass)$': 'jest-preview/transforms/css',
+    '^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)':
+      'jest-preview/transforms/file',
+  },
+  transformIgnorePatterns: [
+    '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$',
+  ],
+  modulePaths: ['<rootDir>/src'],
+  moduleFileExtensions: ['js'],
+  watchPlugins: [
+    'jest-watch-typeahead/filename',
+    'jest-watch-typeahead/testname',
+  ],
+  resetMocks: true,
+};
diff --git a/examples/jquery/package.json b/examples/jquery/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "jquery",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "serve src",
+    "jest-preview": "jest-preview",
+    "test": "NODE_ENV=test jest --watch",
+    "test:nc": "npm run test -- --no-cache",
+    "test:debug": "npm-run-all -p test jest-preview"
+  },
+  "dependencies": {
+    "jquery": "^3.6.0"
+  },
+  "devDependencies": {
+    "@swc/core": "^1.2.154",
+    "@swc/jest": "^0.2.20",
+    "jest": "^27.5.1",
+    "jest-preview": "file:../..",
+    "jest-watch-typeahead": "^1.0.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.6.0",
+    "serve": "^14.0.1"
+  }
+}
diff --git a/examples/jquery/src/app.js b/examples/jquery/src/app.js
@@ -0,0 +1,4 @@
+$('#button').on('click', () => {
+  const currentCount = $('#count').text();
+  $('#count').text(parseInt(currentCount) + 1);
+});
diff --git a/examples/jquery/src/app.test.js b/examples/jquery/src/app.test.js
@@ -0,0 +1,24 @@
+import { debug } from 'jest-preview';
+
+describe('jquery', () => {
+  beforeAll(() => {
+    document.body.innerHTML = `
+    <div>
+      Count =
+      <span id="count">0</span>
+    </div>
+    <button id="button">Increase</button>`;
+    const $ = require('jquery');
+    require('./app');
+  });
+
+  it('should increase count when clicking on button', () => {
+    $('#button').click();
+    $('#button').click();
+    expect($('#count').text()).toEqual('2');
+
+    // Open http://localhost:3336 to see preview
+    // Require to run `jest-preview` server before
+    debug();
+  });
+});
diff --git a/examples/jquery/src/index.html b/examples/jquery/src/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>jquery App</title>
+  </head>
+
+  <body>
+    <div>
+      Count =
+      <span id="count">0</span>
+    </div>
+    <button id="button">Increase</button>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="./app.js"></script>
+  </body>
+</html>
diff --git a/examples/jquery/src/setupTests.js b/examples/jquery/src/setupTests.js
@@ -0,0 +1,9 @@
+import { jestPreviewConfigure } from 'jest-preview';
+
+jestPreviewConfigure({
+  autoPreview: true,
+});
+
+const $ = require('jquery');
+
+window.$ = $;