diff --git a/README.md b/README.md index 65d40f1..91eac9e 100644 --- a/README.md +++ b/README.md @@ -10,8 +10,8 @@ Dead simple WebSocket communication for both Node.js and in-browser. * Automatic reconnections * Automatic connection support * [Subscription support](#subscriptions) -* ES7 / Async support -* [Vue](https://vuejs.org/) plugin support (Vue 3 supported!) +* Async support +* [Vue](https://vuejs.org/) plugin support * Fully tested ##### Contents @@ -129,20 +129,6 @@ client.send('unsubscribe', ['specialMessage', 'anotherAction']) When creating your app: -##### Vue 2 - -```javascript -import { Client } from 'ws-plus' - -// Create your client -const socketClient = new Client('ws://localhost:8082') - -// Make socket available to all components -Vue.use(socketClient, { name: 'ws' }) -``` - -##### Vue 3 - ```javascript import { createSocket } from 'ws-plus/vue' @@ -153,7 +139,7 @@ const socketClient = createSocket('ws://localhost:8082') app.use(socketClient) ``` -#### Usage in a Component +#### Usage in a Component (Options API) ```javascript export default { @@ -164,7 +150,7 @@ export default { } ``` -#### Using with the Vue 3 Component API +#### Using in a Component (Composition API) The [`listen` helper](#listenactions--object-options---name--string-subscribe--boolean-) automatically calls `.on` and `.off` for specified actions when the component is mounted and unmounted. Subscriptions can also be made automatically if desired. @@ -172,20 +158,16 @@ The [`listen` helper](#listenactions--object-options---name--string-subscribe--b import { inject } from 'vue' import { listen } from 'ws-plus/vue' -export default { - setup() { - function receive({ ticket }) { - console.info(`Ticket received: ${ticket}`) - } +function receive({ ticket }) { + console.info(`Ticket received: ${ticket}`) +} - listen({ - 'ticket/receive': receive - }) +listen({ + 'ticket/receive': receive +}) - const ws = inject('$ws') - ws.send('ticket/request', { data: ... }) - } -} +const ws = inject('$ws') +ws.send('ticket/request', { data: ... }) ``` #### Multiple Clients diff --git a/test/vue-plugin-behavior.test.js b/test/vue-plugin-behavior.test.js deleted file mode 100644 index 67b0383..0000000 --- a/test/vue-plugin-behavior.test.js +++ /dev/null @@ -1,22 +0,0 @@ -import { watch } from 'vue' - -import { createSocket } from '../vue' -import { MockSocket } from './mocks/socket' -import { jest } from '@jest/globals' - -global.WebSocket = MockSocket - -const delay = ms => new Promise(res => setTimeout(res, ms)) - -describe('Vue 3 Plugin', () => { - describe('Behavior', () => { - it('makes the connected attribute reactive', async() => { - const client = createSocket('ws://localhost:8888') - const listener = jest.fn() - watch(() => client.connected, listener) - await delay(100) - expect(client.connected).toBe(true) - expect(listener).toHaveBeenCalledWith(true, false, expect.anything()) - }) - }) -}) \ No newline at end of file diff --git a/test/vue-plugin.test.js b/test/vue-plugin.test.js index bd30e8e..444eefb 100644 --- a/test/vue-plugin.test.js +++ b/test/vue-plugin.test.js @@ -1,6 +1,8 @@ import { jest } from '@jest/globals' import { JSDOM } from 'jsdom' +import { MockSocket } from './mocks/socket' + // Set up DOM globals before importing any modules that need it const dom = new JSDOM('
') global.window = dom.window @@ -8,33 +10,13 @@ global.Element = dom.window.Element global.SVGElement = dom.window.SVGElement global.document = dom.window.document global.WebSocket = dom.window.WebSocket -const { createApp } = await import('vue') -const { Client, Server } = await import('..') +const { createApp, watch } = await import('vue') +const { Server } = await import('..') const { createSocket, listen } = await import('../vue.js') const delay = ms => new Promise(res => setTimeout(res, ms)) -describe('Vue 2 Plugin', () => { - let MockFramework - beforeEach(() => { - MockFramework = class {} - MockFramework.util = { defineReactive: () => {} } - }) - it('can be installed', () => { - const client = new Client('ws://localhost:8888', { autoConnect: false, verbosity: 0 }) - client.install(MockFramework) - const app = new MockFramework() - expect(app.$ws).toBe(client) - }) - it('allows overriding global reference name', () => { - const client = new Client('ws://localhost:8888', { autoConnect: false, verbosity: 0 }) - client.install(MockFramework, { name: 'anotherSocket' }) - const app = new MockFramework() - expect(app.$anotherSocket).toBe(client) - }) -}) - -describe('Vue 3 Plugin', () => { +describe('Vue Plugin', () => { let server, app afterEach(async() => { app.unmount() @@ -139,4 +121,16 @@ describe('Vue 3 Plugin', () => { client2.close() await Promise.all([closing, closing2]) }) +}) + +describe('Vue Plugin Behavior', () => { + it('makes the connected attribute reactive', async() => { + global.WebSocket = MockSocket + const client = createSocket('ws://localhost:8888') + const listener = jest.fn() + watch(() => client.connected, listener) + await delay(100) + expect(client.connected).toBe(true) + expect(listener).toHaveBeenCalledWith(true, false, expect.anything()) + }) }) \ No newline at end of file