diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml index 8e08131b..d8e4b3b0 100644 --- a/.github/workflows/lint.yml +++ b/.github/workflows/lint.yml @@ -5,7 +5,7 @@ on: - main pull_request: branches: - - "*" + - '*' jobs: test: runs-on: ubuntu-latest @@ -16,7 +16,7 @@ jobs: uses: actions/setup-node@v4 with: node-version: 20 - cache: 'npm' + cache: npm - name: Install dependencies run: npm ci - name: Lint diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml index 83a83c53..89c62475 100644 --- a/.github/workflows/playwright.yml +++ b/.github/workflows/playwright.yml @@ -5,28 +5,28 @@ on: - main pull_request: branches: - - "*" + - '*' jobs: test: timeout-minutes: 60 runs-on: ubuntu-latest steps: - - name: Checkout - uses: actions/checkout@v4 - - name: Set up Node - uses: actions/setup-node@v4 - with: - node-version: 20 - cache: npm - - name: Install dependencies - run: npm ci - - name: Install Playwright Browsers - run: npx playwright install --with-deps && npx playwright install msedge - - name: Run Playwright tests - run: npm run test:e2e - - uses: actions/upload-artifact@v4 - if: always() - with: - name: playwright-report - path: playwright-report/ - retention-days: 30 + - name: Checkout + uses: actions/checkout@v4 + - name: Set up Node + uses: actions/setup-node@v4 + with: + node-version: 20 + cache: npm + - name: Install dependencies + run: npm ci + - name: Install Playwright Browsers + run: npx playwright install --with-deps && npx playwright install msedge + - name: Run Playwright tests + run: npm run test:e2e + - uses: actions/upload-artifact@v4 + if: always() + with: + name: playwright-report + path: playwright-report/ + retention-days: 30 diff --git a/.github/workflows/unit-tests.yml b/.github/workflows/unit-tests.yml index 61cbd8bc..69ea5599 100644 --- a/.github/workflows/unit-tests.yml +++ b/.github/workflows/unit-tests.yml @@ -5,7 +5,7 @@ on: - main pull_request: branches: - - "*" + - '*' jobs: test: timeout-minutes: 60 @@ -17,7 +17,7 @@ jobs: uses: actions/setup-node@v4 with: node-version: 20 - cache: 'npm' + cache: npm - name: Install dependencies run: npm ci - name: Test diff --git a/app.vue b/app.vue index b7a2f8ad..2e311a3c 100644 --- a/app.vue +++ b/app.vue @@ -1,3 +1,11 @@ + + - - \ No newline at end of file + diff --git a/assets/icons/index.js b/assets/icons/index.js index ff652c33..d7f96359 100644 --- a/assets/icons/index.js +++ b/assets/icons/index.js @@ -1,15 +1,15 @@ import { - cilMenu, + cilArrowThickToLeft, + cilBookmark, + cilChevronLeft, cilCloudDownload, - cilPlus, + cilGlobeAlt, cilHistory, - cilShareAlt, + cilMenu, cilNoteAdd, - cilBookmark, - cilGlobeAlt, - cilArrowThickToLeft, - cilChevronLeft -} from '@coreui/icons'; + cilPlus, + cilShareAlt, +} from '@coreui/icons' export const iconsSet = { cilMenu, @@ -21,5 +21,5 @@ export const iconsSet = { cilNoteAdd, cilGlobeAlt, cilArrowThickToLeft, - cilChevronLeft -}; \ No newline at end of file + cilChevronLeft, +} diff --git a/components/AppHeader.vue b/components/AppHeader.vue index 921f0eeb..84fe86b6 100644 --- a/components/AppHeader.vue +++ b/components/AppHeader.vue @@ -1,68 +1,71 @@ + + - - diff --git a/components/SideBar.vue b/components/SideBar.vue index b9173609..ae1673e7 100644 --- a/components/SideBar.vue +++ b/components/SideBar.vue @@ -1,3 +1,19 @@ + + - - \ No newline at end of file + diff --git a/components/WebsocketConnection.client.vue b/components/WebsocketConnection.client.vue index 8ccc47e2..bd7420e6 100644 --- a/components/WebsocketConnection.client.vue +++ b/components/WebsocketConnection.client.vue @@ -1,67 +1,67 @@ - - + + \ No newline at end of file + diff --git a/components/socket.ts b/components/socket.ts index d2c3ddf2..90cfe4b4 100644 --- a/components/socket.ts +++ b/components/socket.ts @@ -3,25 +3,27 @@ // Make sure you never try to use this code during server-side rendering -import { io } from "socket.io-client"; +import { io } from 'socket.io-client' // https://dev.to/mellewynia/quick-guide-to-add-websocket-to-nuxt-3-4bi4 -const url = `${location.protocol === 'https:' ? 'wss://' : 'ws://' }${location.host}` +const url = `${location.protocol === 'https:' ? 'wss://' : 'ws://'}${location.host}` export const socket = io(url) interface SocketIOError extends Error { - description?: string; - context?: unknown; + description?: string + context?: unknown } -socket.on("connect_error", (err: SocketIOError) => { - // the reason of the error, for example "xhr poll error" - console.log(err.message); +socket.on('connect_error', (err: SocketIOError) => { + /* eslint-disable no-console */ - // some additional description, for example the status code of the initial HTTP response - console.log(err.description); + // the reason of the error, for example "xhr poll error" + console.log(err.message) - // some additional context, for example the XMLHttpRequest object - console.log(err.context); -}); + // some additional description, for example the status code of the initial HTTP response + console.log(err.description) + + // some additional context, for example the XMLHttpRequest object + console.log(err.context) +}) diff --git a/layouts/default.vue b/layouts/default.vue index 812772e7..73d29c4a 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -1,3 +1,18 @@ + + - - \ No newline at end of file + diff --git a/pages/comparison.vue b/pages/comparison.vue index 3712e8df..54951f43 100644 --- a/pages/comparison.vue +++ b/pages/comparison.vue @@ -1,9 +1,3 @@ - - + + diff --git a/pages/index.vue b/pages/index.vue index 6fcd319e..c587c42b 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -1,14 +1,16 @@ - - + + diff --git a/pages/scenario/new.vue b/pages/scenario/new.vue index 4d58f833..9843baf0 100644 --- a/pages/scenario/new.vue +++ b/pages/scenario/new.vue @@ -1,15 +1,15 @@ + + - - diff --git a/playwright.config.ts b/playwright.config.ts index 81ce5f46..83222532 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -1,11 +1,13 @@ -import { defineConfig, devices } from '@playwright/test'; +/* eslint-disable node/prefer-global/process */ +import { defineConfig, devices } from '@playwright/test' /** * Read environment variables from file. * https://github.com/motdotla/dotenv */ -import dotenv from 'dotenv'; -dotenv.config(); +import dotenv from 'dotenv' + +dotenv.config() /** * See https://playwright.dev/docs/test-configuration. @@ -71,11 +73,11 @@ export default defineConfig({ ], /* Run your local dev server before starting the tests */ - // Multiple web servers (or background processes) can be launched: https://playwright.dev/docs/api/class-testconfig#test-config-web-server + // Multiple web servers (or background processes) can be launched: https://playwright.dev/docs/api/class-testconfig#test-config-web-server webServer: { command: 'NUXT_HOST="127.0.0.1" NUXT_PORT="3000" npm run dev', url: 'http://127.0.0.1:3000', timeout: 120 * 1000, reuseExistingServer: !process.env.CI, }, -}); +}) diff --git a/plugins/coreui.ts b/plugins/coreui.ts index 0027e000..ecf0ef35 100644 --- a/plugins/coreui.ts +++ b/plugins/coreui.ts @@ -13,8 +13,6 @@ // on every page, but if you have components that are only used on certain pages, you should // import them in the page components themselves. -import { defineNuxtPlugin } from '#app' - import { CSidebar } from '@coreui/vue/src/components/sidebar/CSidebar' import { CSidebarHeader } from '@coreui/vue/src/components/sidebar/CSidebarHeader' import { CSidebarBrand } from '@coreui/vue/src/components/sidebar/CSidebarBrand' @@ -31,6 +29,7 @@ import { CHeaderNav } from '@coreui/vue/src/components/header/CHeaderNav' import { CBreadcrumb } from '@coreui/vue/src/components/breadcrumb/CBreadcrumb' import { CBreadcrumbItem } from '@coreui/vue/src/components/breadcrumb/CBreadcrumbItem' import { CProgress } from '@coreui/vue/src/components/progress/CProgress' +import { defineNuxtPlugin } from '#app' export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.component('CSidebar', CSidebar) diff --git a/server/plugins/socket.io.ts b/server/plugins/socket.io.ts index f73d7cfb..64b8d4cd 100644 --- a/server/plugins/socket.io.ts +++ b/server/plugins/socket.io.ts @@ -1,17 +1,17 @@ // This is the server side of socket.io // Copied from https://socket.io/how-to/use-with-nuxt -import type { NitroApp } from "nitropack"; -import { Server as Engine } from "engine.io"; -import { Server } from "socket.io"; -import { defineEventHandler } from "h3"; +import type { NitroApp } from 'nitropack' +import { Server as Engine } from 'engine.io' +import { Server } from 'socket.io' +import { defineEventHandler } from 'h3' export default defineNitroPlugin((nitroApp: NitroApp) => { - const engine = new Engine(); + const engine = new Engine() const io = new Server({ serveClient: false, // Since we're using the client library from node modules, we don't need to serve it. https://socket.io/docs/v4/client-installation/#installation cors: { - origin: "http://localhost:3000" // According to https://socket.io/how-to/use-with-vue + origin: 'http://localhost:3000', // According to https://socket.io/how-to/use-with-vue }, // https://socket.io/docs/v4/connection-state-recovery connectionStateRecovery: { @@ -19,45 +19,46 @@ export default defineNitroPlugin((nitroApp: NitroApp) => { maxDisconnectionDuration: 2 * 60 * 1000, // whether to skip middlewares upon successful recovery skipMiddlewares: true, - } - }); + }, + }) - io.bind(engine); + io.bind(engine) - io.on("connection", (socket) => { + io.on('connection', (socket) => { // For debugging websockets connection only: // Every 1000ms, emit a message to the client containing the current time on the server setInterval(() => { - socket.emit("time", new Date().toTimeString()); - }, 1000); - }); - - io.engine.on("connection_error", (err) => { - console.log(err.req); // the request object - console.log(err.code); // the error code, for example 1 - console.log(err.message); // the error message, for example "Session ID unknown" - console.log(err.context); // some additional error context - }); - - nitroApp.router.use("/socket.io/", defineEventHandler({ + socket.emit('time', new Date().toTimeString()) + }, 1000) + }) + + io.engine.on('connection_error', (err) => { + /* eslint-disable no-console */ + console.log(err.req) // the request object + console.log(err.code) // the error code, for example 1 + console.log(err.message) // the error message, for example "Session ID unknown" + console.log(err.context) // some additional error context + }) + + nitroApp.router.use('/socket.io/', defineEventHandler({ handler(event) { - engine.handleRequest(event.node.req, event.node.res); - event._handled = true; + engine.handleRequest(event.node.req, event.node.res) + event._handled = true }, websocket: { open(peer) { - const nodeContext = peer.ctx.node; - const req = nodeContext.req; + const nodeContext = peer.ctx.node + const req = nodeContext.req // @ts-expect-error private method - engine.prepare(req); + engine.prepare(req) - const rawSocket = nodeContext.req.socket; - const websocket = nodeContext.ws; + const rawSocket = nodeContext.req.socket + const websocket = nodeContext.ws // @ts-expect-error private method - engine.onWebSocket(req, rawSocket, websocket); - } - } - })); -}); \ No newline at end of file + engine.onWebSocket(req, rawSocket, websocket) + }, + }, + })) +}) diff --git a/tests/components/defaultLayout.spec.ts b/tests/components/defaultLayout.spec.ts index 3568fcb9..572a1d0a 100644 --- a/tests/components/defaultLayout.spec.ts +++ b/tests/components/defaultLayout.spec.ts @@ -1,15 +1,15 @@ // @vitest-environment nuxt -import { describe, it, expect } from 'vitest'; +import { describe, expect, it } from 'vitest' import { mountSuspended } from '@nuxt/test-utils/runtime' -import DefaultLayout from '../../layouts/default.vue'; +import DefaultLayout from '../../layouts/default.vue' const stubs = { SideBar: { name: 'SideBar', template: '
', - props: [ 'visible' ], + props: ['visible'], }, AppHeader: { name: 'AppHeader', @@ -18,46 +18,46 @@ const stubs = { CContainer: true, } -describe('DefaultLayout', () => { +describe('defaultLayout', () => { it('initially hides the sidebar, and can open and close it from the app header', async () => { - const component = await mountSuspended(DefaultLayout, { global: { stubs } }); + const component = await mountSuspended(DefaultLayout, { global: { stubs } }) - const sidebar = component.findComponent({ name: 'SideBar' }); - expect(sidebar.props('visible')).toBe(false); + const sidebar = component.findComponent({ name: 'SideBar' }) + expect(sidebar.props('visible')).toBe(false) - const header = component.findComponent({ name: 'AppHeader' }); - await header.vm.$emit('toggle-sidebar'); - expect(sidebar.props('visible')).toBe(true); + const header = component.findComponent({ name: 'AppHeader' }) + await header.vm.$emit('toggle-sidebar') + expect(sidebar.props('visible')).toBe(true) - await header.vm.$emit('toggle-sidebar'); - expect(sidebar.props('visible')).toBe(false); - }); + await header.vm.$emit('toggle-sidebar') + expect(sidebar.props('visible')).toBe(false) + }) it('can close the sidebar from the sidebar itself, using "toggle" emit', async () => { - const component = await mountSuspended(DefaultLayout, { global: { stubs } }); + const component = await mountSuspended(DefaultLayout, { global: { stubs } }) - const sidebar = component.findComponent({ name: 'SideBar' }); - expect(sidebar.props('visible')).toBe(false); + const sidebar = component.findComponent({ name: 'SideBar' }) + expect(sidebar.props('visible')).toBe(false) - const header = component.findComponent({ name: 'AppHeader' }); - await header.vm.$emit('toggle-sidebar'); - expect(sidebar.props('visible')).toBe(true); + const header = component.findComponent({ name: 'AppHeader' }) + await header.vm.$emit('toggle-sidebar') + expect(sidebar.props('visible')).toBe(true) - await sidebar.vm.$emit('toggle'); - expect(sidebar.props('visible')).toBe(false); - }); + await sidebar.vm.$emit('toggle') + expect(sidebar.props('visible')).toBe(false) + }) it('keeps the "visible" prop in sync with the state of the CSidebar component when "hidden" is emitted', async () => { - const component = await mountSuspended(DefaultLayout, { global: { stubs } }); + const component = await mountSuspended(DefaultLayout, { global: { stubs } }) - const sidebar = component.findComponent({ name: 'SideBar' }); - expect(sidebar.props('visible')).toBe(false); + const sidebar = component.findComponent({ name: 'SideBar' }) + expect(sidebar.props('visible')).toBe(false) - const header = component.findComponent({ name: 'AppHeader' }); - await header.vm.$emit('toggle-sidebar'); - expect(sidebar.props('visible')).toBe(true); + const header = component.findComponent({ name: 'AppHeader' }) + await header.vm.$emit('toggle-sidebar') + expect(sidebar.props('visible')).toBe(true) - await sidebar.vm.$emit('hidden'); - expect(sidebar.props('visible')).toBe(false); - }); -}); + await sidebar.vm.$emit('hidden') + expect(sidebar.props('visible')).toBe(false) + }) +}) diff --git a/tests/e2e/defaultLayout.spec.ts b/tests/e2e/defaultLayout.spec.ts index cb1f4363..08eacfef 100644 --- a/tests/e2e/defaultLayout.spec.ts +++ b/tests/e2e/defaultLayout.spec.ts @@ -1,20 +1,20 @@ -import { test, expect } from '@playwright/test' +import { expect, test } from '@playwright/test' // In this test, we're using toBeInViewport instead of toBeVisible, because when the sidebar is // off the screen, it's still 'visible' by Playwright's definition, but it's not in the viewport. // At least, that's the case on mobile devices. -test('Can open and close sidebar by use of the two buttons', async ({ page, baseURL, isMobile }) => { - await page.goto(baseURL + '/') - +test('Can open and close sidebar by use of the two buttons', async ({ page, baseURL, isMobile }) => { + await page.goto(`${baseURL}/`) + const html = await page.innerHTML('body') await expect(html).toContain('Home page') - + const sidebarToggleInSidebar = await page.getByTestId('close-sidebar-button') // Verify that the sidebar is hidden await expect(sidebarToggleInSidebar).not.toBeInViewport() - + const sidebarToggleInHeader = await page.getByTestId('toggle-sidebar-button') - + await sidebarToggleInHeader.click() await expect(sidebarToggleInSidebar).toBeInViewport() @@ -24,7 +24,8 @@ test('Can open and close sidebar by use of the two buttons', async ({ page, base // On mobile, the sidebar obscures the control in the header, so we use // the control in the sidebar to close it. await sidebarToggleInSidebar.click() - } else { + } + else { await sidebarToggleInHeader.click() } await expect(sidebarToggleInSidebar).not.toBeInViewport() diff --git a/tests/e2e/first-test.spec.ts b/tests/e2e/first-test.spec.ts index 6e637245..c94c765e 100644 --- a/tests/e2e/first-test.spec.ts +++ b/tests/e2e/first-test.spec.ts @@ -1,7 +1,7 @@ -import { test, expect } from '@playwright/test' +import { expect, test } from '@playwright/test' test('testing foo', async ({ page, baseURL }) => { - await page.goto(baseURL + '/') + await page.goto(`${baseURL}/`) const html = await page.innerHTML('body') expect(html).toContain('Home page') diff --git a/tests/ssr/first-test.spec.ts b/tests/ssr/first-test.spec.ts index 8271699a..4fd187a9 100644 --- a/tests/ssr/first-test.spec.ts +++ b/tests/ssr/first-test.spec.ts @@ -1,15 +1,15 @@ // Note, as there are no real tests in the tests/ssr/ folder, these are not yet // run on CI. -import { expect, describe, test } from 'vitest' -import { setup, $fetch } from '@nuxt/test-utils/e2e' +import { describe, expect } from 'vitest' +import { $fetch, setup } from '@nuxt/test-utils/e2e' -describe('My test', async () => { +describe('my test', async () => { await setup({ - runner: 'vitest' // this is the default value but I'm just making it explicit + runner: 'vitest', // this is the default value but I'm just making it explicit }) - test('server-rendered content', async () => { + it('server-rendered content', async () => { const html = await $fetch('/') // screen.debug() diff --git a/vitest.config.ts b/vitest.config.ts index 6d01381d..338199d9 100644 --- a/vitest.config.ts +++ b/vitest.config.ts @@ -9,11 +9,11 @@ export default defineVitestConfig({ domEnvironment: 'jsdom', overrides: { // other Nuxt config you want to pass - } - } + }, + }, }, coverage: { - exclude: ['**/*.config.ts', ...coverageConfigDefaults.exclude] + exclude: ['**/*.config.ts', ...coverageConfigDefaults.exclude], }, - } -}); + }, +})