streamlined project setup, add cy webkit

Author: smastrom

.github/workflows/tests.yml

@@ -12,8 +12,23 @@ jobs:
           node-version: '16.x'
       - name: Install dependencies
         run: yarn
-      - name: Cypress run
-        uses: cypress-io/github-action@v4
+      - name: Install Linux Webkit deps
+        run: npx playwright install-deps webkit
+      - name: Cypress Chrome
+        uses: cypress-io/github-action@v5
         with:
           install: false
           component: true
+          browser: chrome
+      - name: Cypress Firefox
+        uses: cypress-io/github-action@v5
+        with:
+          install: false
+          component: true
+          browser: firefox
+      - name: Cypress Webkit
+        uses: cypress-io/github-action@v5
+        with:
+          install: false
+          component: true
+          browser: webkit

cypress.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'cypress';
 export default defineConfig({
 	component: {
 		viewportWidth: 1366,
+		experimentalWebKitSupport: true,
 		viewportHeight: 768,
 		devServer: {
 			framework: 'vue',

cypress/support/commands.ts

@@ -1,31 +1,9 @@
-// ***********************************************************
-// This example support/component.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands';
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
+/// <reference types="cypress" />
 
 import { mount } from 'cypress/vue';
 
-// Augment the Cypress namespace to include type definitions for
-// your custom command.
-// Alternatively, can be defined in cypress/support/component.d.ts
-// with a <reference path="./component" /> at the top of your spec.
 declare global {
+	// eslint-disable-next-line @typescript-eslint/no-namespace
 	namespace Cypress {
 		interface Chainable {
 			mount: typeof mount;
@@ -39,12 +17,6 @@ export function getInt(max: number) {
 	return Math.floor(Math.random() * max);
 }
 
-export function getIntRange(min: number, max: number) {
-	min = Math.ceil(min);
-	max = Math.floor(max);
-	return Math.floor(Math.random() * (max - min + 1) + min);
-}
-
 export function getRandomSequence(maxLength: number) {
 	const sequence: number[] = [];
 

cypress/support/component.ts

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { computed, ComputedRef, inject } from 'vue';
-import { useActive } from '../../../src/useActive';
+import { useRoute } from 'vue-router';
 import animateScrollTo from 'animated-scroll-to';
-import { routerKey, useRoute } from 'vue-router';
+import { useActive } from '../../../src/useActive';
 
 type TOCData = {
 	menuItems: { label: string; href: string }[];
@@ -37,7 +37,6 @@ function customScroll(id: string) {
 	animateScrollTo(document.getElementById(id) as HTMLElement, {
 		elementToScroll: rootId ? (document.getElementById(rootId) as HTMLElement) : window,
 		easing: (x: number) => 1 + (1.70158 + 1) * Math.pow(x - 1, 3) + 1.70158 * Math.pow(x - 1, 2),
-		minDuration: 300,
 		maxDuration: 600,
 		verticalOffset: -overlayHeight || 0,
 		cancelOnUserAction: true,

demo/components/Sidebar/TOC.vue

@@ -41,15 +41,13 @@
 		"build:app": "vue-tsc && vite build --mode app",
 		"dev": "vite",
 		"prepare": "husky install",
-		"preview": "vite preview",
 		"test": "cypress run --component",
 		"test:gui": "cypress open --component"
 	},
 	"lint-staged": {
 		"*.{ts,vue}": "eslint --cache --fix",
 		"*.{ts,vue,md}": "prettier --write"
 	},
-	"dependencies": {},
 	"devDependencies": {
 		"@rollup/plugin-terser": "^0.3.0",
 		"@types/node": "^18.11.18",
@@ -61,6 +59,7 @@
 		"eslint": "^8.32.0",
 		"eslint-plugin-vue": "^9.9.0",
 		"husky": "^8.0.3",
+		"playwright-webkit": "^1.29.2",
 		"prettier": "^2.8.3",
 		"rimraf": "^4.1.1",
 		"typescript": "^4.9.4",