diff --git a/extension/src/popup/components/types/__tests__/required-pill.test.ts b/extension/src/popup/components/types/__tests__/required-pill.test.ts index 5bc79d7..3ad1027 100644 --- a/extension/src/popup/components/types/__tests__/required-pill.test.ts +++ b/extension/src/popup/components/types/__tests__/required-pill.test.ts @@ -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 = '
'; }); - 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('*'); + it.each(forms)('%s form has no legacy 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'); }); }); diff --git a/extension/src/popup/styles.css b/extension/src/popup/styles.css index 9ce5127..a4d07e6 100644 --- a/extension/src/popup/styles.css +++ b/extension/src/popup/styles.css @@ -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; diff --git a/extension/src/vault/vault.css b/extension/src/vault/vault.css index 19272c7..e00dc0a 100644 --- a/extension/src/vault/vault.css +++ b/extension/src/vault/vault.css @@ -81,12 +81,6 @@ body { margin-bottom: 4px; } -.label .req { - color: #aa812a; - margin-left: 2px; - font-weight: 600; -} - .req-pill { display: inline-block; font-size: 9px;