mirror of
https://github.com/compiler-explorer/compiler-explorer.git
synced 2025-12-27 07:04:04 -05:00
## Summary This PR makes URL serialization logic available to Node.js contexts (like Cypress tests) and replaces a hard-coded 4812-character base64 URL in tests with programmatically generated state. This builds on the shared utilities refactoring from #8246. ### Changes #### 1. Extract URL Serialization to Shared Module **Problem:** URL serialization code depended on GoldenLayout's browser-only ConfigMinifier, preventing Cypress spec files from importing it (they load in Node.js before running in browser). **Solution:** Created `shared/url-serialization.ts` with a Node-compatible ConfigMinifier reimplementation. **Technical Details:** - Reimplemented GoldenLayout's ConfigMinifier without browser dependencies - Moved serialization functions (`serialiseState`, `deserialiseState`, `risonify`, `unrisonify`) to shared module - Moved minification functions (`minifyConfig`, `unminifyConfig`) to shared module - Updated `static/url.ts` to use shared module instead of GoldenLayout - Added comprehensive test coverage in `test/url-serialization.ts` **Files:** - **New:** `shared/url-serialization.ts` (~279 lines) - **Modified:** `static/url.ts` (removed ~30 lines, eliminated GoldenLayout dependency) - **New:** `test/url-serialization.ts` (~96 lines) #### 2. Replace Hard-coded Cypress URL with Programmatic State **Before:** A hard-coded 4812-character base64 URL containing state for all panes ```typescript cy.visit('http://localhost:10240/#z:OYLghAFBqd5TB8IAsQGMD2ATApgUWwEsAXTAJwBoiQIAzIgG...'); ``` **After:** Programmatically generated state using `buildKnownGoodState()` function ```typescript const state = buildKnownGoodState(); const hash = serialiseState(state); cy.visit(`http://localhost:10240/#${hash}`, {...}); ``` **Benefits:** - Human-readable, maintainable test state - Programmatic generation from `PANE_DATA_MAP` keys - Layout optimized with 8 panes per row - Produces identical compressed URL format - Much easier to add/modify panes in the future #### 3. PANE_DATA_MAP Consistency Improvements Updated `PANE_DATA_MAP` to use component names exactly as registered with GoldenLayout: **Key renames:** - `preprocessor` → `pp` - `llvmir` → `ir` - `pipeline` → `llvmOptPipelineView` - `mir` → `rustmir` - `hir` → `rusthir` - `macro` → `rustmacroexp` - `core` → `haskellCore` - `stg` → `haskellStg` - `cmm` → `haskellCmm` - `dump` → `gccdump` - `tree` → `gnatdebugtree` - `debug` → `gnatdebug` **Added panes:** `codeEditor`, `compiler`, `conformance`, `output` (were missing from map) **Re-enabled tests:** - `yul` pane test (was commented out, now fixed) - `clojuremacroexp` pane test (was commented out, now fixed) - `cfg` pane test (had TODO, now removed) **Why this matters:** The `buildKnownGoodState()` function uses `Object.keys(PANE_DATA_MAP)` as the `componentName` property, so keys must match the actual registered component names for GoldenLayout to find them. ## Test Plan - [x] All Cypress tests pass (confirmed by @mattgodbolt) - [x] TypeScript compilation passes (`npm run ts-check`) - [x] Linting passes (`npm run lint`) - [x] URL serialization tests pass (3/3 tests) - [x] Pre-commit hooks pass - [x] Related vitest tests pass ## Dependencies - Builds on #8246 (shared utilities refactoring - already merged) 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude <noreply@anthropic.com>
225 lines
13 KiB
TypeScript
225 lines
13 KiB
TypeScript
// Copyright (c) 2025, Compiler Explorer Authors
|
|
// All rights reserved.
|
|
//
|
|
// Redistribution and use in source and binary forms, with or without
|
|
// modification, are permitted provided that the following conditions are met:
|
|
//
|
|
// * Redistributions of source code must retain the above copyright notice,
|
|
// this list of conditions and the following disclaimer.
|
|
// * Redistributions in binary form must reproduce the above copyright
|
|
// notice, this list of conditions and the following disclaimer in the
|
|
// documentation and/or other materials provided with the distribution.
|
|
//
|
|
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
|
|
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
|
|
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
|
|
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
|
|
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
|
|
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
|
|
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
|
|
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
|
|
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
|
|
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
|
|
// POSSIBILITY OF SUCH DAMAGE.
|
|
|
|
import {describe, expect, it} from 'vitest';
|
|
import {deserialiseState} from '../url.js';
|
|
|
|
describe('Historical URL Backward Compatibility', () => {
|
|
describe('Version 4 (modern minified format)', () => {
|
|
const findComponent = (content: any[], name: string): any => {
|
|
for (const item of content) {
|
|
if (item.componentName === name) return item;
|
|
if (item.content && Array.isArray(item.content)) {
|
|
const found = findComponent(item.content, name);
|
|
if (found) return found;
|
|
}
|
|
}
|
|
return null;
|
|
};
|
|
|
|
it('should deserialize uncompressed minified URL', () => {
|
|
const urlHash =
|
|
'g:!((g:!((g:!((h:codeEditor,i:(filename:%271%27,fontScale:14,fontUsePx:%270%27,j:1,lang:c%2B%2B,source:%27//+Type+your+code+here,+or+load+an+example.%0Aint+square(int+num)+%7B%0A++++return+num+*+num%3B%0A%7D%27),l:%275%27,n:%270%27,o:%27C%2B%2B+source+%231%27,t:%270%27)),k:50,l:%274%27,n:%270%27,o:%27%27,s:0,t:%270%27),(g:!((h:compiler,i:(compiler:g152,filters:(b:%270%27,binary:%271%27,binaryObject:%271%27,commentOnly:%270%27,debugCalls:%271%27,demangle:%270%27,directives:%270%27,execute:%271%27,intel:%270%27,libraryCode:%270%27,trim:%271%27,verboseDemangling:%270%27),flagsViewOpen:%271%27,fontScale:14,fontUsePx:%270%27,j:1,lang:c%2B%2B,libs:!(),options:%27%27,overrides:!(),selection:(endColumn:1,endLineNumber:1,positionColumn:1,positionLineNumber:1,selectionStartColumn:1,selectionStartLineNumber:1,startColumn:1,startLineNumber:1),source:1),l:%275%27,n:%270%27,o:%27+x86-64+gcc+15.2+(Editor+%231)%27,t:%270%27)),k:50,l:%274%27,n:%270%27,o:%27%27,s:0,t:%270%27)),l:%272%27,n:%270%27,o:%27%27,t:%270%27)),version:4';
|
|
|
|
const state = deserialiseState(urlHash);
|
|
|
|
expect(state).toBeTruthy();
|
|
expect(state.version).toBe(4);
|
|
expect(state.content).toBeTruthy();
|
|
expect(Array.isArray(state.content)).toBe(true);
|
|
|
|
const editor = findComponent(state.content, 'codeEditor');
|
|
expect(editor).toBeTruthy();
|
|
expect(editor.componentState.source).toContain('square');
|
|
|
|
const compiler = findComponent(state.content, 'compiler');
|
|
expect(compiler).toBeTruthy();
|
|
expect(compiler.componentState.compiler).toBe('g152');
|
|
});
|
|
|
|
it('should deserialize compressed minified URL', () => {
|
|
const urlHash =
|
|
'z:OYLghAFBqd5TKALEBjA9gEwKYFFMCWALugE4A0BIEAZgQDbYB2AhgLbYgDkAjF%2BTXRMiAZVQtGIHgBYBQogFUAztgAKAD24AGfgCsp5eiyahUAUgBMAIUtXyKxqiIEh1ZpgDC6egFc2TEAtZdwAZAiZsADk/ACNsUgMAB3QlYhcmL19/QNlk1OchMIjotjiEnntsRwKmESIWUiJMvwCgyur0uoaiIqjY%2BIMlesbm7Lah7t6SsqkASnt0H1JUTi4AejWAahiWTGB47d390kO9%2BK55%2Bm4AVn4Arh1ydG4PW1tNpUXl7E3LAGY%2BOQiNoLvMANYga5aQzcaT8NiQ6H3R7PLj8JQgaHAh4XchwWAoCaoME%2BJQsfaUagYNiJBjxSLsVbqAAcADYALSs6SbYCoVCbHjXAB0Fn42EIJFIBEwBkEwjEEk4MjkwmUak0OPI%2BgqDmwTnSbiYnm8LQMoXCfVKAwqeTSQlGARtKTtTCm/XK7T1NS6IxN2R1VS9nWGPQt02t9hDDsGIbdVvK8yIpGw2GlmMuNzuIKe3C6xM2ynJPwAagRsAB3A4sjlcnl8gXCiybCD4YhkX4WAHkTZeGl0k7/HizfjYnSzeZIbC7AYQDNcOHkBFQ8jI/io9GYoEg8fkCHLq5cP5ZzXrrc4%2Bb4hDwCAoam0xgUKgQO/9kDAQUWAQMIjxDEQGLZjE4QNAAntwgJAawpAgQA8jEuheuB/DUhwwgwUw9BgZqOAxD4wAeBI9AYrw/A4GwxjAJI2EEMm%2BoAG7YMRjzYOoeo%2BD%2BSGUMIVTZvQBAxKQoFeDg2ZJgQCIkeQDGkDEKTYAAItg5EmHxJjbgIRjAEopYVjBiTMJxcqiOIkjKkZaoaNm2qGBRaBvNYhj8RikDzOgiQ1MR7IwaKTzSVKODObOnr6q4EDuNG0isuQ5rFO6STOjUEVRbaNRxjMAYdEIPpNH6ASRcF3qxmGcU6lGuUgPlEyNGl1rzJ8SwrHMMJcLcK7ZqimzVpy3K8vygois2raSh2ALDmeY7goizULkuSLtdwG5Yupl43iAiSJJSz5GCY7KCKQ5HYoC4ptv5srfvE7KTtOpBMfwRkKqZsjmSolmatZSYpmmWhzq1q45lwqjJokpDoCsSifCcMHsYk7GdWy3V1n1jaDRK7aDt2vb3gcg5jaOoLkFdOAJEFB4zVNf2nhiS3npN%2B7cEebUngt434wePkU8zeM7tJqSuNIQA%3D%3D';
|
|
|
|
const state = deserialiseState(urlHash);
|
|
|
|
expect(state).toBeTruthy();
|
|
expect(state.version).toBe(4);
|
|
expect(state.content).toBeTruthy();
|
|
expect(Array.isArray(state.content)).toBe(true);
|
|
|
|
const editor = findComponent(state.content, 'codeEditor');
|
|
expect(editor).toBeTruthy();
|
|
expect(editor.componentState.source).toContain('badger');
|
|
|
|
const compiler = findComponent(state.content, 'compiler');
|
|
expect(compiler).toBeTruthy();
|
|
expect(compiler.componentState.compiler).toBe('g152');
|
|
|
|
const pp = findComponent(state.content, 'pp');
|
|
expect(pp).toBeTruthy();
|
|
|
|
const stackUsage = findComponent(state.content, 'stackusage');
|
|
expect(stackUsage).toBeTruthy();
|
|
});
|
|
});
|
|
|
|
describe('Version 2 (JSON format from 2013)', () => {
|
|
it('should deserialize ICC example with filters', () => {
|
|
// From etc/oldhash.txt
|
|
const urlHash =
|
|
'%7B%22version%22%3A2%2C%22source%22%3A%22%23include%20%3Cxmmintrin.h%3E%5Cn%5Cnvoid%20f(__m128%20a%2C%20__m128%20b)%5Cn%7B%5Cn%20%20%2F%2F%20I%20am%20a%20walrus.%5Cn%7D%22%2C%22compiler%22%3A%22%2Fhome%2Fmgodbolt%2Fapps%2Fintel-icc-oss%2Fbin%2Ficc%22%2C%22options%22%3A%22-O3%20-std%3Dc%2B%2B0x%22%2C%22filterAsm%22%3A%7B%22labels%22%3Atrue%2C%22directives%22%3Atrue%7D%7D';
|
|
|
|
const state = deserialiseState(urlHash);
|
|
|
|
expect(state).toBeTruthy();
|
|
expect(state.version).toBe(4);
|
|
expect(state.content).toBeTruthy();
|
|
expect(Array.isArray(state.content)).toBe(true);
|
|
expect(state.content.length).toBeGreaterThan(0);
|
|
|
|
const row = state.content[0];
|
|
expect(row.type).toBe('row');
|
|
expect(Array.isArray(row.content)).toBe(true);
|
|
expect(row.content.length).toBe(2);
|
|
|
|
const editor = row.content.find((c: any) => c.componentName === 'codeEditor');
|
|
expect(editor).toBeTruthy();
|
|
expect(editor.componentState.source).toContain('#include <xmmintrin.h>');
|
|
expect(editor.componentState.source).toContain('I am a walrus');
|
|
|
|
const compiler = row.content.find((c: any) => c.componentName === 'compiler');
|
|
expect(compiler).toBeTruthy();
|
|
expect(compiler.componentState.compiler).toBe('/home/mgodbolt/apps/intel-icc-oss/bin/icc');
|
|
expect(compiler.componentState.options).toBe('-O3 -std=c++0x');
|
|
|
|
const filters = compiler.componentState.filters;
|
|
expect(filters.labels).toBe(true);
|
|
expect(filters.directives).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('Version 3 (Rison format)', () => {
|
|
it('should deserialize GCC 7 widgets example', () => {
|
|
// From etc/oldhash.txt
|
|
const urlHash =
|
|
"compilers:!((compiler:g7snapshot,options:'-std%3Dc%2B%2B1z+-O3+',source:'%23include+%3Cvector%3E%0A%0Astruct+Widget+%7B%0A++int+n%3B%0A++double+x,+y%3B%0A++Widget(const+Widget%26+o)+:+x(o.x),+y(o.y),+n(o.n)+%7B%7D%0A++Widget(int+n,+double+x,+double+y)+:+n(n),+x(x),+y(y)+%7B%7D%0A%7D%3B%0A%0Astd::vector%3CWidget%3E+vector%3B%0Aconst+int+N+%3D+1002%3B%0Adouble+a+%3D+0.1%3B%0Adouble+b+%3D+0.2%3B%0A%0Avoid+demo()+%7B%0A++vector.reserve(N)%3B%0A++for+(int+i+%3D+01%3B+i+%3C+N%3B+%2B%2Bi)%0A++%7B%0A%09Widget+w+%7Bi,+a,+b%7D%3B%0A%09vector.push_back(w)%3B+//+or+vector.push_back(std::move(w))%0A++%7D%0A%7D%0A%0Aint+main()%0A%7B%0A+%0A+%0A%7D%0A')),filterAsm:(colouriseAsm:!t,commentOnly:!t,directives:!t,intel:!t,labels:!t),version:3";
|
|
|
|
const state = deserialiseState(urlHash);
|
|
|
|
expect(state).toBeTruthy();
|
|
expect(state.version).toBe(4);
|
|
expect(state.content).toBeTruthy();
|
|
expect(Array.isArray(state.content)).toBe(true);
|
|
|
|
const row = state.content[0];
|
|
expect(row.type).toBe('row');
|
|
expect(Array.isArray(row.content)).toBe(true);
|
|
expect(row.content.length).toBe(2);
|
|
|
|
const editor = row.content.find((c: any) => c.componentName === 'codeEditor');
|
|
expect(editor).toBeTruthy();
|
|
expect(editor.componentState.source).toContain('#include <vector>');
|
|
expect(editor.componentState.source).toContain('struct Widget');
|
|
expect(editor.componentState.source).toContain('std::vector<Widget> vector');
|
|
expect(editor.componentState.options.colouriseAsm).toBe(true);
|
|
|
|
const compiler = row.content.find((c: any) => c.componentName === 'compiler');
|
|
expect(compiler).toBeTruthy();
|
|
expect(compiler.componentState.compiler).toBe('g7snapshot');
|
|
expect(compiler.componentState.options).toBe('-std=c++1z -O3 ');
|
|
|
|
const filters = compiler.componentState.filters;
|
|
expect(filters.commentOnly).toBe(true);
|
|
expect(filters.directives).toBe(true);
|
|
expect(filters.intel).toBe(true);
|
|
expect(filters.labels).toBe(true);
|
|
});
|
|
|
|
it('should deserialize GCC 4.7.4 with compressed source', () => {
|
|
// From etc/oldhash.txt - compressed with lzstring
|
|
const urlHash =
|
|
'compilers:!((compiler:g474,options:%27%27,sourcez:PQKgBALgpgzhYHsBmYDGCC2AHATrGAlggHYB0pamGUx8AFlHmEgjmADY0DmEdAXACgAhiNFjxEyVOkzZw2QsVLl85WvVrVG7TolbdB7fsMmlx0xennLNsddu37Dy0%2BenXbwx8%2B7vPo/7OfoGaIMACAgS0YBhCUQAUUfBCOFyoADSUxHBodClgICApXABuAJRgAN4CYGB4EACuOMRgAIwATADcAgC%2BQAA)),filterAsm:(binary:!t,colouriseAsm:!t,commentOnly:!t,directives:!t,intel:!t,labels:!t),version:3';
|
|
|
|
const state = deserialiseState(urlHash);
|
|
|
|
expect(state).toBeTruthy();
|
|
expect(state.version).toBe(4);
|
|
expect(state.content).toBeTruthy();
|
|
expect(Array.isArray(state.content)).toBe(true);
|
|
|
|
const row = state.content[0];
|
|
expect(row.type).toBe('row');
|
|
expect(Array.isArray(row.content)).toBe(true);
|
|
expect(row.content.length).toBe(2);
|
|
|
|
const editor = row.content.find((c: any) => c.componentName === 'codeEditor');
|
|
expect(editor).toBeTruthy();
|
|
expect(editor.componentState.source).toBeTruthy();
|
|
expect(typeof editor.componentState.source).toBe('string');
|
|
expect(editor.componentState.source.length).toBeGreaterThan(0);
|
|
expect(editor.componentState.source).toContain('int');
|
|
expect(editor.componentState.options.colouriseAsm).toBe(true);
|
|
|
|
const compiler = row.content.find((c: any) => c.componentName === 'compiler');
|
|
expect(compiler).toBeTruthy();
|
|
expect(compiler.componentState.compiler).toBe('g474');
|
|
expect(compiler.componentState.options).toBe('');
|
|
|
|
const filters = compiler.componentState.filters;
|
|
expect(filters.binary).toBe(true);
|
|
expect(filters.commentOnly).toBe(true);
|
|
expect(filters.directives).toBe(true);
|
|
expect(filters.intel).toBe(true);
|
|
expect(filters.labels).toBe(true);
|
|
});
|
|
});
|
|
|
|
describe('Invalid/Edge Cases', () => {
|
|
it('should handle empty string', () => {
|
|
const state = deserialiseState('');
|
|
expect(state).toBe(false);
|
|
});
|
|
|
|
it('should handle invalid JSON', () => {
|
|
expect(() => {
|
|
deserialiseState('%7Binvalid');
|
|
}).toThrow();
|
|
});
|
|
|
|
it('should handle invalid rison', () => {
|
|
expect(() => {
|
|
deserialiseState('invalid:rison:data');
|
|
}).toThrow();
|
|
});
|
|
|
|
it('should handle corrupt lzstring data', () => {
|
|
// State with 'z' field but invalid base64
|
|
expect(() => {
|
|
deserialiseState('(z:invalid_base64_data)');
|
|
}).toThrow();
|
|
});
|
|
});
|
|
});
|