Skip to content

Commit

Permalink
update tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrisdholt
chrisdholt committed Jun 17, 2024
1 parent 3e909f4 commit 63773a5
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 52 deletions.
33 changes: 27 additions & 6 deletions packages/web-components/docs/api-report.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,9 +133,13 @@ export const accordionTemplate: ElementViewTemplate<Accordion>;
// @public (undocumented)
export class AnchorButton extends BaseAnchor {
appearance?: AnchorButtonAppearance | undefined;
appearanceChanged(prev: AnchorButtonAppearance | undefined, next: AnchorButtonAppearance | undefined): void;
iconOnly: boolean;
iconOnlyChanged(prev: boolean, next: boolean): void;
shape?: AnchorButtonShape | undefined;
shapeChanged(prev: AnchorButtonShape | undefined, next: AnchorButtonShape | undefined): void;
size?: AnchorButtonSize;
sizeChanged(prev: AnchorButtonSize | undefined, next: AnchorButtonSize | undefined): void;
}

// @internal
Expand All @@ -147,7 +151,6 @@ export const AnchorButtonAppearance: {
readonly primary: "primary";
readonly outline: "outline";
readonly subtle: "subtle";
readonly secondary: "secondary";
readonly transparent: "transparent";
};

Expand Down Expand Up @@ -374,9 +377,15 @@ export const AvatarTemplate: ElementViewTemplate<Avatar>;
// @public
export class Badge extends FASTElement {
appearance: BadgeAppearance;
appearanceChanged(prev: BadgeAppearance | undefined, next: BadgeAppearance | undefined): void;
color: BadgeColor;
colorChanged(prev: BadgeColor | undefined, next: BadgeColor | undefined): void;
// @internal
elementInternals: ElementInternals;
shape?: BadgeShape;
shapeChanged(prev: BadgeShape | undefined, next: BadgeShape | undefined): void;
size?: BadgeSize;
sizeChanged(prev: BadgeSize | undefined, next: BadgeSize | undefined): void;
}

// @internal
Expand Down Expand Up @@ -468,6 +477,7 @@ export const borderRadiusXLarge = "var(--borderRadiusXLarge)";
export class Button extends FASTElement {
constructor();
appearance?: ButtonAppearance;
appearanceChanged(prev: ButtonAppearance | undefined, next: ButtonAppearance | undefined): void;
autofocus: boolean;
// @internal
clickHandler(e: Event): boolean | void;
Expand All @@ -479,7 +489,7 @@ export class Button extends FASTElement {
// @internal
disabledFocusableChanged(previous: boolean, next: boolean): void;
// @internal
protected elementInternals: ElementInternals;
elementInternals: ElementInternals;
get form(): HTMLFormElement | null;
formAction?: string;
static readonly formAssociated = true;
Expand All @@ -491,13 +501,16 @@ export class Button extends FASTElement {
formNoValidate?: boolean;
formTarget?: ButtonFormTarget;
iconOnly: boolean;
iconOnlyChanged(prev: boolean, next: boolean): void;
keypressHandler(e: KeyboardEvent): boolean | void;
get labels(): ReadonlyArray<Node>;
name?: string;
protected press(): void;
resetForm(): void;
shape?: ButtonShape;
shapeChanged(prev: ButtonShape | undefined, next: ButtonShape | undefined): void;
size?: ButtonSize;
sizeChanged(prev: ButtonSize | undefined, next: ButtonSize | undefined): void;
type: ButtonType;
// @internal
typeChanged(previous: ButtonType, next: ButtonType): void;
Expand All @@ -513,7 +526,6 @@ export const ButtonAppearance: {
readonly primary: "primary";
readonly outline: "outline";
readonly subtle: "subtle";
readonly secondary: "secondary";
readonly transparent: "transparent";
};

Expand Down Expand Up @@ -1668,7 +1680,6 @@ export const CompoundButtonAppearance: {
readonly primary: "primary";
readonly outline: "outline";
readonly subtle: "subtle";
readonly secondary: "secondary";
readonly transparent: "transparent";
};

Expand Down Expand Up @@ -1712,19 +1723,26 @@ export const CompoundButtonTemplate: ElementViewTemplate<CompoundButton>;
// @public
export class CounterBadge extends FASTElement {
appearance?: CounterBadgeAppearance;
appearanceChanged(prev: CounterBadgeAppearance | undefined, next: CounterBadgeAppearance | undefined): void;
color?: CounterBadgeColor;
colorChanged(prev: CounterBadgeColor | undefined, next: CounterBadgeColor | undefined): void;
count: number;
// (undocumented)
protected countChanged(): void;
dot: boolean;
dotChanged(prev: boolean | undefined, next: boolean | undefined): void;
// @internal
elementInternals: ElementInternals;
overflowCount: number;
// (undocumented)
protected overflowCountChanged(): void;
// @internal
setCount(): string | void;
shape?: CounterBadgeShape;
shapeChanged(prev: CounterBadgeShape | undefined, next: CounterBadgeShape | undefined): void;
showZero: boolean;
size?: CounterBadgeSize;
sizeChanged(prev: CounterBadgeSize | undefined, next: CounterBadgeSize | undefined): void;
}

// @internal
Expand Down Expand Up @@ -2125,9 +2143,14 @@ export const ImageTemplate: ElementViewTemplate<Image_2>;
// @public
export class Label extends FASTElement {
disabled: boolean;
disabledChanged(prev: boolean | undefined, next: boolean | undefined): void;
// @internal
elementInternals: ElementInternals;
required: boolean;
size?: LabelSize;
sizeChanged(prev: LabelSize | undefined, next: LabelSize | undefined): void;
weight?: LabelWeight;
weightChanged(prev: LabelWeight | undefined, next: LabelWeight | undefined): void;
}

// @public
Expand Down Expand Up @@ -2293,7 +2316,6 @@ export const MenuButtonAppearance: {
readonly primary: "primary";
readonly outline: "outline";
readonly subtle: "subtle";
readonly secondary: "secondary";
readonly transparent: "transparent";
};

Expand Down Expand Up @@ -3301,7 +3323,6 @@ export const ToggleButtonAppearance: {
readonly primary: "primary";
readonly outline: "outline";
readonly subtle: "subtle";
readonly secondary: "secondary";
readonly transparent: "transparent";
};

Expand Down
55 changes: 9 additions & 46 deletions packages/web-components/src/label/label.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,34 +21,31 @@ test.describe('Label', () => {
await page.close();
});

test('should set default attribute values', async () => {
await expect(element).toHaveAttribute('size', 'medium');
await expect(element).toHaveJSProperty('size', 'medium');

await expect(element).toHaveAttribute('weight', 'regular');
await expect(element).toHaveJSProperty('weight', 'regular');
});

test('should reflect size attribute', async () => {
await element.evaluate((node: Label) => {
node.size = 'small';
});

await expect(element).toHaveAttribute('size', 'small');
await expect(element).toHaveJSProperty('size', 'small');
expect(await element.evaluate((node: Label) => node.elementInternals.states.has('small'))).toBe(true);

await element.evaluate((node: Label) => {
node.size = 'medium';
});

await expect(element).toHaveAttribute('size', 'medium');
await expect(element).toHaveJSProperty('size', 'medium');
expect(await element.evaluate((node: Label) => node.elementInternals.states.has('small'))).toBe(false);
expect(await element.evaluate((node: Label) => node.elementInternals.states.has('medium'))).toBe(true);

await element.evaluate((node: Label) => {
node.size = 'large';
});
await expect(element).toHaveAttribute('size', 'large');
await expect(element).toHaveJSProperty('size', 'large');
expect(await element.evaluate((node: Label) => node.elementInternals.states.has('medium'))).toBe(false);
expect(await element.evaluate((node: Label) => node.elementInternals.states.has('large'))).toBe(true);
});

test('should reflect weight attribute', async () => {
Expand All @@ -57,12 +54,15 @@ test.describe('Label', () => {
});
await expect(element).toHaveAttribute('weight', 'regular');
await expect(element).toHaveJSProperty('weight', 'regular');
expect(await element.evaluate((node: Label) => node.elementInternals.states.has('regular'))).toBe(true);

await element.evaluate((node: Label) => {
node.weight = 'semibold';
});
await expect(element).toHaveAttribute('weight', 'semibold');
await expect(element).toHaveJSProperty('weight', 'semibold');
expect(await element.evaluate((node: Label) => node.elementInternals.states.has('regular'))).toBe(false);
expect(await element.evaluate((node: Label) => node.elementInternals.states.has('semibold'))).toBe(true);
});

test('should reflect disabled attribute', async () => {
Expand All @@ -74,6 +74,7 @@ test.describe('Label', () => {

await expect(element).toHaveAttribute('disabled', '');
await expect(element).toHaveJSProperty('disabled', true);
expect(await element.evaluate((node: Label) => node.elementInternals.states.has('disabled'))).toBe(true);
});

test('should reflect required attribute and show asterisk', async () => {
Expand Down Expand Up @@ -102,42 +103,4 @@ test.describe('Label', () => {
await expect(element).toHaveJSProperty('required', false);
await expect(asterisk).toBeHidden();
});

test('should reflect changes in size, weight, disabled, and required attributes', async () => {
await root.evaluate(node => {
node.innerHTML = /* html */ `
<fluent-label size="medium" weight="regular">Label</fluent-label>
`;
});
await expect(element).toHaveAttribute('size', 'medium');
await expect(element).toHaveJSProperty('size', 'medium');

await expect(element).toHaveAttribute('weight', 'regular');
await expect(element).toHaveJSProperty('weight', 'regular');

await expect(element).not.toHaveAttribute('disabled', '');
await expect(element).toHaveJSProperty('disabled', false);

await expect(element).not.toHaveAttribute('required', '');
await expect(element).toHaveJSProperty('required', false);

await element.evaluate((node: Label) => {
node.size = 'large';
node.weight = 'semibold';
node.disabled = true;
node.required = true;
});

await expect(element).toHaveAttribute('size', 'large');
await expect(element).toHaveJSProperty('size', 'large');

await expect(element).toHaveAttribute('weight', 'semibold');
await expect(element).toHaveJSProperty('weight', 'semibold');

await expect(element).toHaveAttribute('disabled', '');
await expect(element).toHaveJSProperty('disabled', true);

await expect(element).toHaveAttribute('required', '');
await expect(element).toHaveJSProperty('required', true);
});
});

0 comments on commit 63773a5

Please sign in to comment.