Skip to content

Commit 0d7935e

Browse files
AntonioVentiliiAntonioVentilii
authored
chore: Add prefix to default test IDs (#690)
# Motivation As suggested by @peterpeterparker in #686 (review), we add a prefix to all the default values of test IDs, to avoid possible conflicts with the consumers.
1 parent e42d57d commit 0d7935e

File tree

11 files changed

+31
-31
lines changed

11 files changed

+31
-31
lines changed

‎src/lib/components/Card.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
export let ariaLabel: string | undefined = undefined;
99
export let selected = false;
1010
export let disabled: boolean | undefined = undefined;
11-
export let testId = "card";
11+
export let testId = "gix-cmp-card";
1212
export let icon: "expand" | "check" | undefined = undefined;
1313
export let theme: "transparent" | "framed" | "highlighted" | undefined =
1414
undefined;

‎src/lib/components/ChipGroup.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import Chip from "./Chip.svelte";
55
66
export let chips: ChipGroupItem[] = [];
7-
export let testId = "chip-group-component";
7+
export let testId = "gix-cmp-chip-group-component";
88
99
const dispatch = createEventDispatcher();
1010
const onChipClick = ({ detail: selectedId }: CustomEvent<string>) => {

‎src/lib/components/Collapsible.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
export let id: string | undefined = undefined;
1010
export let initiallyExpanded = false;
1111
export let maxContentHeight: number | undefined = undefined;
12-
export let testId = "collapsible";
12+
export let testId = "gix-cmp-collapsible";
1313
1414
export let iconSize: "small" | "medium" = "small";
1515
export let expandButton = true;

‎src/lib/components/Popover.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
export let direction: "ltr" | "rtl" = "ltr";
1212
export let closeButton = false;
1313
export let invisibleBackdrop = false;
14-
export let testId = "popover-component";
14+
export let testId = "gix-cmp-popover-component";
1515
1616
let bottom: number;
1717
let left: number;

‎src/lib/components/Toggle.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
export let checked: boolean;
88
export let ariaLabel: string;
99
export let disabled = false;
10-
export let testId = "toggle";
10+
export let testId = "gix-cmp-toggle";
1111
1212
const dispatch = createEventDispatcher();
1313

‎src/lib/components/Tooltip.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
1010
export let id: string | undefined = undefined;
1111
export let idPrefix = "tooltip";
12-
export let testId = "tooltip-component";
12+
export let testId = "gix-cmp-tooltip-component";
1313
export let text: string | undefined = undefined;
1414
export let noWrap = false;
1515
export let top = false;

‎src/routes/(split)/components/card/+page.md‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,17 @@ Cards are surfaces that display content and optionally actions on a single topic
2020

2121
## Properties
2222

23-
| Property | Description | Type | Default |
24-
| ----------- | ------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ----------- |
25-
| `role` | The semantic role that will be rendered in the DOM when using this component. | `button` or `checkbox` `undefined` | `undefined` |
26-
| `ariaLabel` | An accessible label for the card. | `string` or `undefined` | `undefined` |
27-
| `selected` | Display the surface as `selected`. Useful if used as a on/off call to action. | `boolean` | `false` |
28-
| `disabled` | Disable clickable events. | `boolean` or `undefined` | `undefined` |
29-
| `testId` | Add a `data-tid` attribute to the DOM, useful for test purpose. | `string` | `card` |
30-
| `theme` | Display a particular theme for surface of the card. | `highlighted` or `transparent` or `framed` or `undefined` | `undefined` |
31-
| `icon` | Render an icon / call to action next within the card on the right side. | `expand` or `check` or `undefined` | `undefined` |
32-
| `href` | If the card is intended to function as a link, you can use this property to specify the URL of the linked resource. | `string` or `undefined` | `undefined` |
33-
| `noPadding` | Remove the default padding inside the card. Useful to catch onhover event with CSS from the content. | `boolean` | `false` |
23+
| Property | Description | Type | Default |
24+
| ----------- | ------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | -------------- |
25+
| `role` | The semantic role that will be rendered in the DOM when using this component. | `button` or `checkbox` `undefined` | `undefined` |
26+
| `ariaLabel` | An accessible label for the card. | `string` or `undefined` | `undefined` |
27+
| `selected` | Display the surface as `selected`. Useful if used as a on/off call to action. | `boolean` | `false` |
28+
| `disabled` | Disable clickable events. | `boolean` or `undefined` | `undefined` |
29+
| `testId` | Add a `data-tid` attribute to the DOM, useful for test purpose. | `string` | `gix-cmp-card` |
30+
| `theme` | Display a particular theme for surface of the card. | `highlighted` or `transparent` or `framed` or `undefined` | `undefined` |
31+
| `icon` | Render an icon / call to action next within the card on the right side. | `expand` or `check` or `undefined` | `undefined` |
32+
| `href` | If the card is intended to function as a link, you can use this property to specify the URL of the linked resource. | `string` or `undefined` | `undefined` |
33+
| `noPadding` | Remove the default padding inside the card. Useful to catch onhover event with CSS from the content. | `boolean` | `false` |
3434

3535
### Notes
3636

‎src/routes/(split)/components/chip-group/+page.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,10 @@ export interface ChipGroupItem {
6060

6161
## Properties
6262

63-
| Property | Description | Type | Default |
64-
| -------- | ------------------------------- | ---------------------- | ---------------------- |
65-
| `chips` | ChipGroupItem items to display. | `Array<ChipGroupItem>` | |
66-
| `testId` | Optional data-tid value. | `string` | `chip-group-component` |
63+
| Property | Description | Type | Default |
64+
| -------- | ------------------------------- | ---------------------- | ------------------------------ |
65+
| `chips` | ChipGroupItem items to display. | `Array<ChipGroupItem>` | |
66+
| `testId` | Optional data-tid value. | `string` | `gix-cmp-chip-group-component` |
6767

6868
## Events
6969

‎src/routes/(split)/components/tooltip/+page.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,14 @@ hover or tap over the target element.
2929

3030
## Properties
3131

32-
| Property | Description | Type | Default |
33-
| -------- | --------------------------------------------------------------- | --------- | --------------------- |
34-
| `id` | Used to link the target to the tooltip via `aria-describedby` | `string` | |
35-
| `testId` | Add a `data-tid` attribute to the DOM, useful for test purpose. | `string` | `"tooltip-component"` |
36-
| `text` | The text displayed in the tooltip. | `string` | `""` |
37-
| `noWrap` | Whether to prevent the tooltip text from taking mulitple lines. | `boolean` | `false` |
38-
| `top` | Whether to prevent the tooltip text from taking mulitple lines. | `boolean` | `false` |
39-
| `center` | Whether to ignore overflow logic an just center align instead. | `boolean` | `false` |
32+
| Property | Description | Type | Default |
33+
| -------- | --------------------------------------------------------------- | --------- | ----------------------------- |
34+
| `id` | Used to link the target to the tooltip via `aria-describedby` | `string` | |
35+
| `testId` | Add a `data-tid` attribute to the DOM, useful for test purpose. | `string` | `"gix-cmp-tooltip-component"` |
36+
| `text` | The text displayed in the tooltip. | `string` | `""` |
37+
| `noWrap` | Whether to prevent the tooltip text from taking mulitple lines. | `boolean` | `false` |
38+
| `top` | Whether to prevent the tooltip text from taking mulitple lines. | `boolean` | `false` |
39+
| `center` | Whether to ignore overflow logic an just center align instead. | `boolean` | `false` |
4040

4141
## Slots
4242

‎src/tests/lib/components/ChipGroup.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ describe("ChipGroup", () => {
1616
props: { chips: testChips },
1717
});
1818

19-
expect(getByTestId("chip-group-component")).not.toBeNull();
19+
expect(getByTestId("gix-cmp-chip-group-component")).not.toBeNull();
2020

2121
const chipElements = getAllByTestId("chip-component");
2222

0 commit comments

Comments
 (0)