refactor(ext): broaden required-pill test + drop dead .label .req CSS
Code-review feedback on Task 4: - Test expanded from login-only to it.each across all 7 type forms (14 assertions total). A future revert to <span class="req">*</span> in any form now fails CI. - .label .req rule removed from popup/styles.css and vault/vault.css — zero consumers after the REQUIRED_PILL_HTML migration. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -18,15 +18,34 @@ vi.mock('../../generator-panel', () => ({
|
||||
isGeneratorPanelOpen: () => false,
|
||||
}));
|
||||
|
||||
import { renderForm } from '../login';
|
||||
import * as login from '../login';
|
||||
import * as secureNote from '../secure-note';
|
||||
import * as identity from '../identity';
|
||||
import * as card from '../card';
|
||||
import * as key from '../key';
|
||||
import * as totp from '../totp';
|
||||
import * as documentType from '../document';
|
||||
|
||||
const forms: Array<[string, (app: HTMLElement, mode: 'add' | 'edit', existing: null) => void]> = [
|
||||
['login', login.renderForm],
|
||||
['secure-note', secureNote.renderForm],
|
||||
['identity', identity.renderForm],
|
||||
['card', card.renderForm],
|
||||
['key', key.renderForm],
|
||||
['totp', totp.renderForm],
|
||||
['document', documentType.renderForm],
|
||||
];
|
||||
|
||||
describe('required-pill migration', () => {
|
||||
beforeEach(() => { document.body.innerHTML = '<div id="app"></div>'; });
|
||||
|
||||
it('login form title uses the required pill', () => {
|
||||
renderForm(document.getElementById('app')!, 'add', null);
|
||||
const titleLabel = document.querySelector('label[for="f-title"]');
|
||||
expect(titleLabel?.innerHTML).toContain('required');
|
||||
expect(titleLabel?.innerHTML).not.toContain('<span class="req">*</span>');
|
||||
it.each(forms)('%s form has no legacy <span class="req"> markup', (_name, render) => {
|
||||
render(document.getElementById('app')!, 'add', null);
|
||||
expect(document.body.innerHTML).not.toContain('class="req"');
|
||||
});
|
||||
|
||||
it.each(forms)('%s form contains the .req-pill markup on at least one label', (_name, render) => {
|
||||
render(document.getElementById('app')!, 'add', null);
|
||||
expect(document.body.innerHTML).toContain('class="req-pill">required</span>');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -81,12 +81,6 @@ body {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.label .req {
|
||||
color: var(--accent-strong);
|
||||
margin-left: 2px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.req-pill {
|
||||
display: inline-block;
|
||||
font-size: 9px;
|
||||
|
||||
Reference in New Issue
Block a user