Skip to content

Commit

Permalink
refactor: omgjøre tidligere refaktorering
Browse files Browse the repository at this point in the history
  • Loading branch information
@kristianulv23
kristianulv23 committed Nov 18, 2024
1 parent f6dea42 commit aca7a93
Show file tree
Hide file tree
Showing 11 changed files with 353 additions and 392 deletions.
78 changes: 32 additions & 46 deletions packages/combobox-react/documentation/ComboboxExample.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { type LabelVariant } from "@fremtind/jkl-input-group-react";
import type { LabelVariant } from "@fremtind/jkl-input-group-react";
import React, { FC, useState } from "react";
import { ExampleComponentProps, ExampleKnobsProps } from "../../../doc-utils";
import { Combobox, type ComboboxValuePair } from "../src";
Expand All @@ -8,7 +8,7 @@ export const comboboxExampleKnobs: ExampleKnobsProps = {
"Med hjelpetekst",
"Med feil",
"Med empty state",
"Tooltip ved hover på valgt alternativ",
"Med tagHover",
],
choiceProps: [
{
Expand All @@ -25,55 +25,47 @@ export const ComboboxExample: FC<ExampleComponentProps> = ({
}) => {
const variant = choiceValues && (choiceValues["Variant"] as LabelVariant);

const options: ComboboxValuePair[] = [
{
value: "a080",
label: "A080 - Rotavirusenteritt",
selectedOptionLabel: "A080",
},
const items: ComboboxValuePair[] = [
{ value: "a080", label: "A080 - Rotavirusenteritt", tagLabel: "A080" },
{
value: "a081",
label: "A081 - Akutt gastroenteritt som skyldes norovirus",
selectedOptionLabel: "A081",
},
{
value: "a082",
label: "A082 - Adenovirusenteritt",
selectedOptionLabel: "A082",
tagLabel: "A081",
},
{ value: "a082", label: "A082 - Adenovirusenteritt", tagLabel: "A082" },
{
value: "a083",
label: "A083 - Annen virusenteritt",
selectedOptionLabel: "A083",
tagLabel: "A083",
},
{
value: "a084",
label: "A084 - Uspesifisert virusinfeksjon i mage-tarmkanalen",
selectedOptionLabel: "A084",
tagLabel: "A084",
},
{
value: "a085",
label: "A085 - Annen spesifisert mage-tarminfeksjon",
selectedOptionLabel: "A085",
tagLabel: "A085",
},
{
value: "a090",
label: "A090 - Annen eller uspesifisert gastroenteritt eller kolitt av infeksiøs årsak",
selectedOptionLabel: "A090",
tagLabel: "A090",
},
{
value: "a099",
label: "A099 - Gastroenteritt eller kolitt av uspesifisert årsak",
selectedOptionLabel: "A099",
tagLabel: "A099",
},
{
value: "a150",
label: "A150 - Lungetuberkulose bekreftet ved mikroskopi av sputum med eller uten kultur",
selectedOptionLabel: "A150",
tagLabel: "A150",
},
];

const [selectedOptions, setSelectedOptions] = useState<
const [selectedValues, setSelectedValues] = useState<
Array<ComboboxValuePair>
>([]);

Expand All @@ -89,10 +81,8 @@ export const ComboboxExample: FC<ExampleComponentProps> = ({
boolValues && boolValues["Med empty state"]
? "Ingen valg matcher søket"
: undefined;
const selectedOptionTooltip =
boolValues && boolValues["Tooltip ved hover på valgt alternativ"]
? true
: undefined;
const hasTagHover =
boolValues && boolValues["Med tagHover"] ? true : undefined;

return (
<Combobox
Expand All @@ -105,11 +95,11 @@ export const ComboboxExample: FC<ExampleComponentProps> = ({
errorLabel={errorLabel}
label="Velg sykdommer"
noMatchingOption={noMatchingOption}
selectedOptionTooltip={selectedOptionTooltip}
options={options}
selectedOptions={selectedOptions}
hasTagHover={hasTagHover}
items={items}
value={selectedValues}
onChange={(event) => {
setSelectedOptions(event.target.selectedOptions);
setSelectedValues(event.target.selectedOptions);
console.log("Change: ", event);
}}
/>
Expand Down Expand Up @@ -139,31 +129,27 @@ export const comboboxExampleCode = ({
? `"Ingen valg matcher søket"`
: `{undefined}`
}
selectedOptionTooltip=${
!!boolValues?.["Tooltip ved hover på valgt alternativ"]
? `{true}`
: `{undefined}`
}
options={[
{ value: "a080", label: "A080 - Rotavirusenteritt", selectedOptionLabel: "A080" },
{ value: "a081", label: "A081 - Akutt gastroenteritt som skyldes norovirus", selectedOptionLabel: "A081" },
{ value: "a082", label: "A082 - Adenovirusenteritt", selectedOptionLabel: "A082" },
{ value: "a083", label: "A083 - Annen virusenteritt", selectedOptionLabel: "A083" },
{ value: "a084", label: "A084 - Uspesifisert virusinfeksjon i mage-tarmkanalen", selectedOptionLabel: "A084" },
{ value: "a085", label: "A085 - Annen spesifisert mage-tarminfeksjon", selectedOptionLabel: "A085" },
hasTagHover=${!!boolValues?.["Med tagHover"] ? `{true}` : `{undefined}`}
items={[
{ value: "a080", label: "A080 - Rotavirusenteritt", tagLabel: "A080" },
{ value: "a081", label: "A081 - Akutt gastroenteritt som skyldes norovirus", tagLabel: "A081" },
{ value: "a082", label: "A082 - Adenovirusenteritt", tagLabel: "A082" },
{ value: "a083", label: "A083 - Annen virusenteritt", tagLabel: "A083" },
{ value: "a084", label: "A084 - Uspesifisert virusinfeksjon i mage-tarmkanalen", tagLabel: "A084" },
{ value: "a085", label: "A085 - Annen spesifisert mage-tarminfeksjon", tagLabel: "A085" },
{
value: "a090",
label: "A090 - Annen eller uspesifisert gastroenteritt eller kolitt av infeksiøs årsak",
selectedOptionLabel: "A090",
tagLabel: "A090",
},
{ value: "a099", label: "A099 - Gastroenteritt eller kolitt av uspesifisert årsak", selectedOptionLabel: "A099" },
{ value: "a099", label: "A099 - Gastroenteritt eller kolitt av uspesifisert årsak", tagLabel: "A099" },
{
value: "a150",
label: "A150 - Lungetuberkulose bekreftet ved mikroskopi av sputum med eller uten kultur",
selectedOptionLabel: "A150",
tagLabel: "A150",
},
]}
selectedOptions={selectedOptions}
onChange={setSelectedOptions}
value={selectedValues}
onChange={setSelectedValues}
/>
`;
78 changes: 39 additions & 39 deletions packages/combobox-react/src/Combobox.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,15 @@ describe("Combobox", () => {
it("should open when clicked", async () => {
const screen = setup(
<Combobox
name="options"
options={[
name="snoop"
items={[
{ label: "drop", value: "drop" },
{ label: "it", value: "it" },
{ label: "like", value: "like" },
{ label: "its", value: "its" },
{ label: "hot", value: "hot" },
]}
label="List of options"
label="Snoop"
onChange={() => {
return;
}}
Expand All @@ -45,15 +45,15 @@ describe("Combobox", () => {
it("should open when arrow down is pressed", async () => {
const screen = setup(
<Combobox
name="options"
options={[
name="snoop"
items={[
{ label: "drop", value: "drop" },
{ label: "it", value: "it" },
{ label: "like", value: "like" },
{ label: "its", value: "its" },
{ label: "hot", value: "hot" },
]}
label="List of options"
label="Snoop"
onChange={() => {
return;
}}
Expand All @@ -71,14 +71,14 @@ describe("Combobox", () => {
it("can be forced into compact mode", () => {
const screen = setup(
<Combobox
name="options"
name="snoop"
density="compact"
options={[
items={[
{ label: "1", value: "1" },
{ label: "2", value: "2" },
{ label: "3", value: "3" },
]}
label="List of options"
label="test"
onChange={() => {
return;
}}
Expand All @@ -94,26 +94,26 @@ describe("Combobox", () => {
it("should change the value of the combobox when selecting two options", async () => {
const onChangeSpy = jest.fn();
function WrappedCombobox() {
const [selectedOptions, setSelectedOptions] = useState<
const [selectedValues, setSelectedValues] = useState<
Array<ComboboxValuePair>
>([]);

const options: ComboboxValuePair[] = [
{ label: "Option 1", value: "1" },
{ label: "Option 2", value: "2" },
{ label: "Option 3", value: "3" },
const items: ComboboxValuePair[] = [
{ label: "Item 1", value: "1" },
{ label: "Item 2", value: "2" },
{ label: "Item 3", value: "3" },
];

return (
<Combobox
name="options"
name="items"
placeholder="Søk"
label="List of options"
options={options}
selectedOptions={selectedOptions}
label="List of items"
items={items}
value={selectedValues}
onChange={(event) => {
onChangeSpy(event);
setSelectedOptions(event.target.selectedOptions);
setSelectedValues(event.target.selectedOptions);
}}
/>
);
Expand All @@ -127,34 +127,34 @@ describe("Combobox", () => {
await userEvent.click(openDropdownButtonElement);
});

const selectOption1Element = getByRole("option", { name: "Option 1" });
const selectOption1Element = getByRole("option", { name: "Item 1" });

await act(async () => {
await userEvent.click(selectOption1Element);
});

const selectOption2Element = getByRole("option", { name: "Option 2" });
const selectOption2Element = getByRole("option", { name: "Item 2" });

await act(async () => {
await userEvent.click(selectOption2Element);
});

const selectedOptions = getAllByTestId("jkl-combobox__selected-option");
expect(selectedOptions).toHaveLength(2);
expect(selectedOptions[0]).toHaveTextContent("Option 1");
expect(selectedOptions[1]).toHaveTextContent("Option 2");
const selectedChips = getAllByTestId("jkl-chip");
expect(selectedChips).toHaveLength(2);
expect(selectedChips[0]).toHaveTextContent("Item 1");
expect(selectedChips[1]).toHaveTextContent("Item 2");

expect(onChangeSpy).toHaveBeenCalledTimes(2);
expect(onChangeSpy).toHaveBeenLastCalledWith(
expect.objectContaining({
target: expect.objectContaining({
selectedOptions: [
expect.objectContaining({
label: "Option 1",
label: "Item 1",
value: "1",
}),
expect.objectContaining({
label: "Option 2",
label: "Item 2",
value: "2",
}),
],
Expand All @@ -165,15 +165,15 @@ describe("Combobox", () => {
});

describe("a11y", () => {
it("Combobox should be a11y compliant", async () => {
test("Combobox should be a11y compliant", async () => {
const { container } = setup(
<Combobox
name="options"
name="items"
label="Combobox"
options={[
{ label: "Option 1", value: "1" },
{ label: "Option 2", value: "2" },
{ label: "Option 3", value: "3" },
items={[
{ label: "Item 1", value: "1" },
{ label: "Item 2", value: "2" },
{ label: "Item 3", value: "3" },
]}
onChange={() => {
return;
Expand All @@ -187,19 +187,19 @@ describe("a11y", () => {
expect(results).toHaveNoViolations();
});

it("compact combobox should be a11y compliant", async () => {
test("compact combobox should be a11y compliant", async () => {
const { container } = setup(
<Combobox
name="options"
name="items"
density="compact"
label="Combobox"
onChange={() => {
return;
}}
options={[
{ label: "Option 1", value: "1" },
{ label: "Option 2", value: "2" },
{ label: "Option 3", value: "3" },
items={[
{ label: "Item 1", value: "1" },
{ label: "Item 2", value: "2" },
{ label: "Item 3", value: "3" },
]}
helpLabel="Velg to eller mer"
errorLabel="Du må velge to eller mer"
Expand Down
Loading

0 comments on commit aca7a93

Please sign in to comment.