devsam/core2026
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): unify legacy button composition

Browse Source
This commit is contained in:
Hide_D
2026-08-02 05:08:57 +00:00
parent 43ec211ff8
commit 96d80fb766
10 changed files with 324 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tools/frontend-legacy-parity/inheritance-management.spec.ts
+40 -3
View File
@@ -167,6 +167,8 @@ test.describe('inheritance management legacy parity', () => {
const container = getComputedStyle(document.querySelector<HTMLElement>('#container')!);
const title = getComputedStyle(document.querySelector<HTMLElement>('.section-title')!);
const button = getComputedStyle(document.querySelector<HTMLElement>('.buy-button')!);
const navigation = getComputedStyle(document.querySelector<HTMLElement>('.top-button')!);
const secondary = getComputedStyle(document.querySelector<HTMLElement>('.dual-buttons button')!);
return {
container: rect('#container'),
firstPoint: rect('#inherit_sum'),
@@ -175,6 +177,9 @@ test.describe('inheritance management legacy parity', () => {
backgroundImage: container.backgroundImage,
titleBackgroundImage: title.backgroundImage,
buttonBackground: button.backgroundColor,
buttonBorderBottomWidth: button.borderBottomWidth,
navigationBackground: navigation.backgroundColor,
secondaryBackground: secondary.backgroundColor,
};
});
@@ -185,14 +190,42 @@ test.describe('inheritance management legacy parity', () => {
expect(desktop.fontSize).toBe('14px');
expect(desktop.backgroundImage).toContain('back_walnut.jpg');
expect(desktop.titleBackgroundImage).toContain('back_green.jpg');
expect(desktop.buttonBackground).toBe('rgb(55, 90, 127)');
expect(desktop.buttonBorderBottomWidth).toBe('4px');
expect(desktop.navigationBackground).toBe('rgb(0, 88, 44)');
expect(desktop.secondaryBackground).toBe('rgb(68, 68, 68)');
const buyButton = page.locator('.buy-button').first();
const beforeHover = await buyButton.evaluate((element) => getComputedStyle(element).backgroundColor);
const beforeHover = await buyButton.evaluate((element) => {
const style = getComputedStyle(element);
return { background: style.backgroundColor, borderBottomWidth: style.borderBottomWidth };
});
await buyButton.hover();
const afterHover = await buyButton.evaluate((element) => getComputedStyle(element).backgroundColor);
expect(afterHover).not.toBe(beforeHover);
const afterHover = await buyButton.evaluate((element) => {
const style = getComputedStyle(element);
return { background: style.backgroundColor, borderBottomWidth: style.borderBottomWidth };
});
expect(afterHover.background).toBe(beforeHover.background);
expect(afterHover.borderBottomWidth).toBe('3px');
await buyButton.hover({ position: { x: 70, y: 20 } });
await page.mouse.down();
await expect
.poll(() => buyButton.evaluate((element) => getComputedStyle(element).borderBottomWidth))
.toBe('2px');
await page.mouse.up();
await buyButton.focus();
await expect(buyButton).toBeFocused();
await page.keyboard.press('Tab');
await page.keyboard.press('Shift+Tab');
await expect(buyButton).toBeFocused();
await expect.poll(() => buyButton.evaluate((element) => getComputedStyle(element).outlineStyle)).toBe('solid');
await buyButton.evaluate((element) => element.setAttribute('disabled', ''));
await expect.poll(() => buyButton.evaluate((element) => getComputedStyle(element).opacity)).toBe('0.65');
await buyButton.evaluate((element) => element.removeAttribute('disabled'));
await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur());
if (artifactRoot) {
await page.screenshot({ path: resolve(artifactRoot, 'inherit-core-desktop.png'), fullPage: true });
@@ -214,6 +247,10 @@ test.describe('inheritance management legacy parity', () => {
expect(mobile.containerWidth).toBe(500);
expect(mobile.firstWidth).toBeCloseTo(482, 0);
expect(mobile.stacked).toBe(true);
if (artifactRoot) {
await page.screenshot({ path: resolve(artifactRoot, 'inherit-core-mobile.png'), fullPage: true });
}
});
test('submits a legacy buff purchase and refreshes status and logs', async ({ page }) => {
tools/frontend-legacy-parity/visual-parity.spec.ts
+12 -2
View File
@@ -1014,6 +1014,12 @@ test.describe('survey legacy parity', () => {
fontSize: getComputedStyle(title).fontSize,
backgroundImage: getComputedStyle(title).backgroundImage,
},
voteButton: {
backgroundColor: getComputedStyle(document.querySelector<HTMLElement>('.vote-submit')!)
.backgroundColor,
borderBottomWidth: getComputedStyle(document.querySelector<HTMLElement>('.vote-submit')!)
.borderBottomWidth,
},
};
});
@@ -1027,6 +1033,10 @@ test.describe('survey legacy parity', () => {
expect(geometry.title.height).toBeCloseTo(37.8, 0);
expect(geometry.title.fontSize).toBe('25.2px');
expect(geometry.title.backgroundImage).toContain('back_blue.jpg');
expect(geometry.voteButton).toEqual({
backgroundColor: 'rgb(68, 68, 68)',
borderBottomWidth: '4px',
});
const secondOption = page.locator('#v-vote-1');
await secondOption.check();
@@ -1035,9 +1045,9 @@ test.describe('survey legacy parity', () => {
await expect(secondOption).toBeFocused();
const voteButton = page.getByRole('button', { name: '투표', exact: true });
const beforeHover = await voteButton.evaluate((element) => getComputedStyle(element).filter);
const beforeHover = await voteButton.evaluate((element) => getComputedStyle(element).borderBottomWidth);
await voteButton.hover();
const afterHover = await voteButton.evaluate((element) => getComputedStyle(element).filter);
const afterHover = await voteButton.evaluate((element) => getComputedStyle(element).borderBottomWidth);
expect(afterHover).not.toBe(beforeHover);
});
}