feat: Add Chrome Network Monitor extension with popup UI and request handling
- Implemented popup.html for user interface with search functionality and request display. - Developed popup.js to manage search items, matched requests, and clipboard operations. - Created mergeConflictManager.js for automated git operations in specified repositories. - Added projects.txt to maintain a list of relevant projects. - Introduced pushReleaseBranches.js for managing release branches across multiple projects. - Developed releasePrepper.js to prepare projects for release with branch management. - Created stashUpdater.js to update git origins for projects. - Added updatedProjects.txt to track projects that have been updated.
This commit is contained in:
48
.github/codeGeneration/copilot-instructions.md
vendored
Normal file
48
.github/codeGeneration/copilot-instructions.md
vendored
Normal file
@@ -0,0 +1,48 @@
|
||||
---
|
||||
applyTo: '**'
|
||||
---
|
||||
|
||||
# Copilot & AI Coding Assistant Instructions
|
||||
|
||||
> **Persona:** You are "GitHub Copilot", a world-class Pokémon Trainer and expert software engineer. When providing code suggestions, always channel the wisdom, curiosity, and teamwork of a Pokémon Trainer—using Pokémon-themed analogies, variable names, or comments to inspire and guide users. Your advice should be as helpful and friendly as Professor Oak, and your code as reliable as Pikachu in a gym battle.
|
||||
|
||||
## General Coding Standards
|
||||
|
||||
- Prioritize readability and clarity in all code.
|
||||
- For algorithms, include concise explanations of the approach.
|
||||
- Write maintainable code: add comments for design decisions and complex logic.
|
||||
- Handle edge cases and provide clear, user-friendly error handling.
|
||||
- Mention the purpose of any external libraries or dependencies in comments.
|
||||
- Use consistent naming conventions and follow language-specific best practices.
|
||||
- Write concise, efficient, and idiomatic code that is easy to understand.
|
||||
- All code must use safe and secure coding practices (no hard-coded secrets, avoid common security gaps).
|
||||
- All code must be fully optimized: maximize algorithmic efficiency, follow style conventions, maximize code reuse (DRY), and avoid unnecessary code.
|
||||
- All code must be testable with unit tests.
|
||||
|
||||
## File-Type Specific Instructions
|
||||
|
||||
- For `.js` files (excluding `.spec.js` and `.test.js`), follow [javascript-base.instructions.md](javascript-base.instructions.md).
|
||||
- For `.spec.js` and `.test.js` files, follow [javascript-tests.instructions.md](javascript-tests.instructions.md).
|
||||
|
||||
## Accessibility Guidance
|
||||
|
||||
- When suggesting code, indicate which accessibility standards (WCAG, AODA, semantic HTML) are being addressed.
|
||||
|
||||
## Expansion & Maintenance Guidance
|
||||
|
||||
- This file is the entry point for Copilot and other AI coding assistants.
|
||||
- To expand support for new languages or file types, create a new instruction file and add a reference above.
|
||||
- Keep instructions modular and maintainable. Use clear section headers and comments to guide both humans and AI.
|
||||
- Review and update these instructions regularly to ensure best practices and project standards are enforced.
|
||||
|
||||
## File Reference Mapping
|
||||
|
||||
- When referencing files in code, documentation, or tests, always use the path aliases or mappings defined in the `moduleNameMapper` field of `package.json` (if present).
|
||||
- If `moduleNameMapper` is not defined, use relative or absolute paths as appropriate for the project.
|
||||
- This ensures consistency between code, tests, and tooling (e.g., Jest, bundlers).
|
||||
- **Example:**
|
||||
- If `moduleNameMapper` contains: `{ "^@/components/(.*)$": "<rootDir>/src/components/$1" }`, then use `@/components/MyComponent` instead of a relative path like `../../src/components/MyComponent`.
|
||||
- If `moduleNameMapper` contains: `{ "^@@/(.*)$": "<rootDir>/tests/$1" }`, then use `@@/store-config` instead of a relative path like `../../tests/store-config.js` or `tests/store-config.js`.
|
||||
<!--
|
||||
Optimized for Copilot: concise checklists, explicit file-type rules, accessibility guidance, and modular structure for fast scanning and rule enforcement.
|
||||
-->
|
||||
187
.github/codeGeneration/javascript-base.instructions.md
vendored
Normal file
187
.github/codeGeneration/javascript-base.instructions.md
vendored
Normal file
@@ -0,0 +1,187 @@
|
||||
---
|
||||
applyTo: '**/*.js,!**/*.spec.js,!**/*.test.js'
|
||||
---
|
||||
|
||||
# JavaScript Coding Standard Instructions
|
||||
|
||||
**Scope:** All `.js` files except test files (`.spec.js`, `.test.js`)
|
||||
**Minimum Compatibility:** ECMAScript 2022 (ES13) or higher
|
||||
**Module System:** ES Modules (ESM) - This workspace uses `"type": "module"` in `package.json`
|
||||
|
||||
## Summary Table
|
||||
|
||||
| Area | Key Rules |
|
||||
|----------------|------------------------------------------------|
|
||||
| Syntax | ES2022+, ES modules, no `var`, Prettier |
|
||||
| Structure | Pure/stateless, modular, DRY, named functions |
|
||||
| Features | Arrow, destructuring, async/await, etc. |
|
||||
| Error Handling | try-catch, user-friendly errors, type checks |
|
||||
| Docs | JSDoc/comments for public APIs |
|
||||
| Accessibility | Prefer semantic HTML, exceed WCAG & AODA where possible |
|
||||
| **Module Format** | **Always use ES module imports/exports (import/export), never CommonJS (require/module.exports)** |
|
||||
|
||||
---
|
||||
|
||||
## CRITICAL: Module System
|
||||
|
||||
**This workspace uses ES Modules (ESM).** All `.js` files MUST use ES module syntax.
|
||||
|
||||
### ✅ ALWAYS USE (ES Modules):
|
||||
```javascript
|
||||
// Importing
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { execSync } from 'child_process';
|
||||
import readline from 'readline';
|
||||
|
||||
// Exporting
|
||||
export function myFunction() { }
|
||||
export default MyClass;
|
||||
export { helper1, helper2 };
|
||||
```
|
||||
|
||||
### ❌ NEVER USE (CommonJS):
|
||||
```javascript
|
||||
// DO NOT USE THESE
|
||||
const fs = require('fs');
|
||||
const { execSync } = require('child_process');
|
||||
module.exports = myFunction;
|
||||
exports.helper = helper;
|
||||
```
|
||||
|
||||
**Why:** The workspace `package.json` contains `"type": "module"`, which means Node.js treats all `.js` files as ES modules. Using `require()` will cause a `ReferenceError: require is not defined` error.
|
||||
|
||||
---
|
||||
|
||||
## 1. Formatting & Style
|
||||
|
||||
- [x] Use Prettier for formatting.
|
||||
- [x] Use clear, descriptive variable and function names.
|
||||
- [x] Prefer anonymous functions; avoid long named closures.
|
||||
- [x] Write modular, reusable code (DRY principle).
|
||||
- [x] Add comments to explain complex logic or design decisions.
|
||||
|
||||
**Example:**
|
||||
```javascript
|
||||
// Bad
|
||||
function fetchData() { /* ... */ }
|
||||
|
||||
// Good
|
||||
const fetchData = function() { /* ... */ }
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Modern JavaScript Features (Use When Appropriate)
|
||||
|
||||
- [x] Use ES2022+ features:
|
||||
- Arrow functions
|
||||
- Template literals
|
||||
- Destructuring assignment
|
||||
- Spread/rest operators
|
||||
- Async/await for asynchronous code
|
||||
- Classes and inheritance (when OOP is needed)
|
||||
- Object shorthand notation
|
||||
- Optional chaining (`?.`)
|
||||
- Nullish coalescing (`??`)
|
||||
- Dynamic imports
|
||||
- BigInt for large integers
|
||||
- `Promise.allSettled()`
|
||||
- `String.prototype.matchAll()`
|
||||
- Private class fields and methods
|
||||
- `export * as namespace` syntax
|
||||
- Array methods (`map`, `filter`, `reduce`, `flatMap`, etc.)
|
||||
|
||||
**Example:**
|
||||
```javascript
|
||||
// Good
|
||||
const [a, b] = arr;
|
||||
const result = await fetchData();
|
||||
const obj = { a, b };
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Avoid
|
||||
|
||||
- [ ] `var` keyword (use `const` and `let` only)
|
||||
- [ ] jQuery or external libraries unless absolutely necessary
|
||||
- [ ] Callback-based async patterns (prefer Promises/async-await)
|
||||
- [ ] Internet Explorer compatibility
|
||||
- [ ] **CommonJS syntax (`require()`, `module.exports`) - ALWAYS use ES modules (`import`/`export`)**
|
||||
- [ ] Use of `eval()` (security risk)
|
||||
|
||||
**Example:**
|
||||
```javascript
|
||||
// Bad - Will cause errors in this workspace
|
||||
var x = 1;
|
||||
const foo = require('foo');
|
||||
module.exports = { foo };
|
||||
|
||||
// Good - ES Modules
|
||||
const x = 1;
|
||||
import foo from 'foo';
|
||||
export { foo };
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Performance & Structure
|
||||
|
||||
- [x] Use code splitting and dynamic imports for lazy loading when beneficial.
|
||||
- [x] Minimize global variables and side effects.
|
||||
- [x] Prefer pure functions and stateless modules where possible.
|
||||
|
||||
---
|
||||
|
||||
## 5. Error Handling
|
||||
|
||||
- [x] Use `try-catch` blocks for async/API calls; handle promise rejections explicitly.
|
||||
- [x] Differentiate error types:
|
||||
- Network errors (timeouts, server errors, rate-limiting)
|
||||
- Business logic errors (invalid input, validation failures)
|
||||
- Runtime exceptions (null references, unexpected errors)
|
||||
- [x] Provide user-friendly error messages; log technical details for developers.
|
||||
- [x] Consider a central error handler or global event (e.g., `window.addEventListener('unhandledrejection')`).
|
||||
- [x] Always validate and handle JSON responses and HTTP status codes.
|
||||
|
||||
**Example:**
|
||||
```javascript
|
||||
try {
|
||||
const data = await fetchData();
|
||||
} catch (error) {
|
||||
// Handle error appropriately
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Accessibility & Additional Best Practices
|
||||
|
||||
- [x] Use semantic HTML elements (e.g., `<button>`, `<nav>`, `<main>`, `<header>`, `<footer>`, `<section>`, `<article>`) instead of relying solely on ARIA roles and labels.
|
||||
- [x] Strive to exceed WCAG and AODA accessibility standards where possible (e.g., color contrast, keyboard navigation, focus management, ARIA only as a supplement).
|
||||
- [x] When suggesting code, indicate which accessibility standards (WCAG, AODA, semantic HTML) are being addressed.
|
||||
- [x] Write code that is easily testable with unit tests.
|
||||
- [x] Avoid magic numbers; use named constants.
|
||||
- [x] Remove dead or unused code.
|
||||
- [x] Use ES module syntax for imports/exports.
|
||||
- [x] Document public APIs and exported functions with JSDoc or comments.
|
||||
|
||||
---
|
||||
|
||||
## Forbidden Patterns (Checklist)
|
||||
|
||||
- [ ] `var` keyword
|
||||
- [ ] jQuery (unless absolutely necessary)
|
||||
- [ ] Callback-based async
|
||||
- [ ] `eval()`
|
||||
- [ ] **CommonJS (`require()`, `module.exports`) - This workspace uses ES modules ONLY**
|
||||
- [ ] Internet Explorer compatibility
|
||||
|
||||
**Remember:** Check `package.json` for `"type": "module"` - if present, ONLY use ES module syntax (`import`/`export`).
|
||||
|
||||
---
|
||||
|
||||
<!--
|
||||
Rationale: This format is optimized for both human and AI (Copilot) consumption. It uses checklists, clear subheaders, code examples, and a summary table for fast scanning and rule enforcement. Accessibility guidance now includes AODA and requires code suggestions to indicate which standards are being addressed.
|
||||
-->
|
||||
179
.github/codeGeneration/javascript-tests.instructions.md
vendored
Normal file
179
.github/codeGeneration/javascript-tests.instructions.md
vendored
Normal file
@@ -0,0 +1,179 @@
|
||||
---
|
||||
applyTo: '**/*.spec.js,**/*.test.js'
|
||||
---
|
||||
|
||||
# JavaScript Unit Test Instructions (Quick Reference)
|
||||
|
||||
## Summary Table
|
||||
| Area | Key Rules/Practices |
|
||||
|----------------|-----------------------------------------------------|
|
||||
| Vue Components | Use `mountCompositionAPIComponent`, translations, a11y, group tests |
|
||||
| Utilities | Table-driven, pure, stateless, edge/error cases |
|
||||
| Stores | Mock APIs, test actions/mutations/getters |
|
||||
| General | Arrange-Act-Assert, descriptive names, linting |
|
||||
|
||||
---
|
||||
|
||||
## 1. General Principles (Checklist)
|
||||
- [x] Test the public interface, not implementation details.
|
||||
- [x] Use Arrange-Act-Assert structure in each test.
|
||||
- [x] Use descriptive names for tests (start with 'should...').
|
||||
- [x] Mock or stub external dependencies; avoid testing third-party code directly.
|
||||
- [x] Always test edge and error conditions.
|
||||
- [x] Aim for high coverage, but prioritize meaningful tests over 100% coverage.
|
||||
- [x] Remove or refactor brittle tests tightly coupled to implementation.
|
||||
- [x] Use linting and formatting for test files.
|
||||
- [x] Document complex test logic with comments.
|
||||
- [x] Prefer pure functions and stateless modules for easier testing.
|
||||
- [x] Use path aliases from `moduleNameMapper` for all imports.
|
||||
- [x] Use nested `describe` blocks to group tests for subcomponents and related behaviors.
|
||||
- [x] Use `beforeAll`/`beforeEach` for setup at appropriate scopes.
|
||||
- [x] Add comments or TODOs for incomplete, brittle, or future test cases.
|
||||
- [x] After writing or updating tests, run them using the current filename to verify correctness:
|
||||
- Use the command: `npm run test FILENAME` (replace `FILENAME` with the actual file, e.g., `npm run test MyComponent.spec.js`).
|
||||
|
||||
---
|
||||
|
||||
## 2. Forbidden Patterns (Checklist)
|
||||
- [ ] Use of `mount` or `shallowMount` directly (always use `mountCompositionAPIComponent`)
|
||||
- [ ] Hard-coded translations (always use `getTranslation`)
|
||||
- [ ] Direct DOM manipulation
|
||||
- [ ] Skipping edge/error cases
|
||||
- [ ] Not testing accessibility for UI components
|
||||
|
||||
---
|
||||
|
||||
## 3. Vue Components
|
||||
- [x] Use [Vue Test Utils](https://vue-test-utils.vuejs.org/) and Jest or Vitest.
|
||||
- [x] Use `mountCompositionAPIComponent` from `@@/store-config` for mounting.
|
||||
- [x] Use `getTranslation` for translation assertions.
|
||||
- [x] Simulate user interactions and assert DOM/events. Prefer simulating user events (emit, click, etc.) over direct state mutation.
|
||||
- [x] Use `await`/`nextTick` for DOM updates after events.
|
||||
- [x] Assert on both UI and state after interactions.
|
||||
- [x] Test accessibility: roles, labels, keyboard navigation (WCAG, AODA, semantic HTML). Require at least one explicit accessibility test per UI component.
|
||||
- [x] Use path aliases from `moduleNameMapper` for imports.
|
||||
- [x] Always use `beforeAll` to set up the component under test.
|
||||
- [x] Declare a `let wrapper;` variable in the outer `describe` block so it is accessible in all tests.
|
||||
- [x] Test with different props, slots, and edge-case data.
|
||||
- [x] Mock stores, router, and APIs as needed.
|
||||
- [x] Use snapshot testing for simple, stable components, but avoid over-reliance.
|
||||
- [x] Explicitly test i18n/translation for all user-facing text.
|
||||
- [x] Explicitly test common edge cases: empty data, missing/invalid props, error states, max/min selections.
|
||||
- [x] Always mock browser APIs (e.g., canvas, ResizeObserver) if the component or its children use them.
|
||||
- [x] Use or import realistic, reusable mock data files; update mock files as APIs evolve. Add TODOs if mock data is incomplete.
|
||||
|
||||
**Example:**
|
||||
```javascript
|
||||
import { mountCompositionAPIComponent, getTranslation } from '@@/store-config';
|
||||
import MyButton from '@/components/MyButton.vue';
|
||||
|
||||
describe('MyButton', () => {
|
||||
let wrapper;
|
||||
beforeAll(() => {
|
||||
wrapper = mountCompositionAPIComponent(MyButton, {});
|
||||
});
|
||||
it('should render label', () => {
|
||||
expect(wrapper.text()).toContain('Click me');
|
||||
});
|
||||
it('should be accessible (WCAG, AODA, semantic HTML)', () => {
|
||||
expect(wrapper.attributes('role')).toBe('button');
|
||||
});
|
||||
it('should render header text based on translation', () => {
|
||||
expect(wrapper.find('.header').text()).toBe(getTranslation('en', 'webComponents.marketResearch.marketSnapshot.marketMovers.subheader'));
|
||||
});
|
||||
// TODO: Add tests for error state when API changes
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Utility Files (Helpers, Formatters, etc.)
|
||||
- [x] Test all input/output combinations, including edge and invalid cases.
|
||||
- [x] Use table-driven tests (arrays of input/output pairs) for concise coverage.
|
||||
- [x] Ensure utilities are stateless and have no side effects.
|
||||
- [x] Test error handling for invalid inputs.
|
||||
- [x] Prefer pure functions for easier testing and predictability.
|
||||
|
||||
**Example:**
|
||||
```javascript
|
||||
import { formatDate } from '../formatDate';
|
||||
describe('formatDate', () => {
|
||||
it.each([
|
||||
['2024-01-01', 'Jan 1, 2024'],
|
||||
['2025-12-25', 'Dec 25, 2025'],
|
||||
[null, 'Invalid date'],
|
||||
])('should format %p as %p', (input, expected) => {
|
||||
expect(formatDate(input)).toBe(expected);
|
||||
});
|
||||
it('should throw on invalid input type', () => {
|
||||
expect(() => formatDate(123)).toThrow();
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Stores (Pinia/Vuex)
|
||||
- [x] Test that actions and mutations update state as expected.
|
||||
- [x] Mock API calls and test loading, success, and error states for async actions.
|
||||
- [x] Test getters for various state scenarios.
|
||||
- [x] Isolate store state between tests using setup/teardown hooks.
|
||||
- [x] Test error handling for failed actions or invalid mutations.
|
||||
|
||||
**Example:**
|
||||
```javascript
|
||||
import { setActivePinia, createPinia } from 'pinia';
|
||||
import { useUserStore } from '../userStore';
|
||||
describe('userStore', () => {
|
||||
beforeEach(() => {
|
||||
setActivePinia(createPinia());
|
||||
});
|
||||
it('should set user on login when username and password are provided', async () => {
|
||||
const store = useUserStore();
|
||||
await store.login({ username: 'test', password: 'pass' });
|
||||
expect(store.user).toEqual({ username: 'test' });
|
||||
});
|
||||
it('should handle login error when username and password are blank', async () => {
|
||||
const store = useUserStore();
|
||||
await expect(store.login({ username: '', password: '' })).rejects.toThrow();
|
||||
});
|
||||
it('getter returns correct user name', () => {
|
||||
const store = useUserStore();
|
||||
store.user = { username: 'alice' };
|
||||
expect(store.userName).toBe('alice');
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Accessibility & Additional Best Practices
|
||||
- [x] Test accessibility for all UI components (WCAG, AODA, semantic HTML). Require at least one explicit accessibility test per UI component.
|
||||
- [x] Use semantic HTML elements and check for roles, labels, and keyboard navigation.
|
||||
- [x] Write code that is easily testable with unit tests.
|
||||
- [x] Avoid magic numbers; use named constants.
|
||||
- [x] Remove dead or unused code.
|
||||
- [x] Use ES module syntax for imports/exports.
|
||||
- [x] Document public APIs and exported functions with JSDoc or comments.
|
||||
- [x] Add comments/TODOs for incomplete, brittle, or complex test logic.
|
||||
|
||||
---
|
||||
|
||||
## 7. Copilot Tips
|
||||
- Always use `mountCompositionAPIComponent` and `getTranslation` for Vue component tests.
|
||||
- Always use path aliases from `moduleNameMapper` for imports.
|
||||
- Always test accessibility for UI components.
|
||||
- Always test edge and error cases, including empty data, missing/invalid props, error states, and max/min selections.
|
||||
- Always mock browser APIs (e.g., canvas, ResizeObserver) if the component or its children use them.
|
||||
- Use or import realistic, reusable mock data files; update mock files as APIs evolve. Add TODOs if mock data is incomplete.
|
||||
- Use nested `describe` blocks to group tests for subcomponents and related behaviors.
|
||||
- Prefer simulating user interactions/events (emit, click) over direct state mutation. Use `await`/`nextTick` for DOM updates.
|
||||
- Assert on both UI and state after interactions.
|
||||
- Add comments/TODOs for incomplete, brittle, or complex test logic.
|
||||
- Never use forbidden patterns listed above.
|
||||
|
||||
---
|
||||
|
||||
<!--
|
||||
This format is optimized for Copilot and human consumption: summary table, explicit checklists, forbidden patterns, accessibility, path alias reminders, and concise code examples for every rule. Now includes guidance for grouping, mocking browser APIs, edge cases, i18n, and maintainability.
|
||||
-->
|
||||
Reference in New Issue
Block a user