Skip to content

Commit 6212b66

Browse files
mitrotasiosProjectFlinn
mitrotasios
and
ProjectFlinn
authored
test: fix stories & tests (#362)
Co-authored-by: mitrotasios <[email protected]> Co-authored-by: George Flinn <[email protected]>
1 parent 83e555c commit 6212b66

File tree

11 files changed

+87
-132
lines changed

11 files changed

+87
-132
lines changed

‎src/stories/layout-elements/Divider.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const Template: ComponentStory<typeof Divider> = () => (
2020
<Divider />
2121
<SimpleCard />
2222
</div>
23-
<Title marginTop="mt-5">Desktop</Title>
23+
<Title className="mt-5">Desktop</Title>
2424
<SimpleCard />
2525
<Divider />
2626
<SimpleCard />

‎src/stories/list-elements/List.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,6 @@ const Template: ComponentStory<typeof List> = (args) => (
2727
export const Default = Template.bind({});
2828
// More on args: https://storybook.js.org/docs/react/writing-stories/args
2929
Default.args = {
30-
marginTop: "mt-5",
30+
className: "mt-5",
3131
children: undefined,
3232
};

‎src/stories/list-elements/Table.stories.tsx‎

Lines changed: 63 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import BadgeDelta from "components/icon-elements/BadgeDelta/BadgeDelta";
77
import Table from "components/list-elements/Table/Table";
88
import TableCell from "components/list-elements/Table/TableCell";
99
import TableRow from "components/list-elements/Table/TableRow";
10+
import { DeltaType } from "lib";
1011

1112
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
1213
export default {
@@ -15,114 +16,69 @@ export default {
1516
} as ComponentMeta<typeof Table>;
1617
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
1718

18-
const Template: ComponentStory<typeof Table> = (args) => (
19-
<Card>
20-
<Table {...args}>
21-
<TableHead>
22-
<TableRow>
23-
<TableHeaderCell>Name</TableHeaderCell>
24-
<TableHeaderCell>Sales ($)</TableHeaderCell>
25-
<TableHeaderCell>Region</TableHeaderCell>
26-
<TableHeaderCell>Status</TableHeaderCell>
27-
<TableHeaderCell className="text-right">Working Hours (h)</TableHeaderCell>
28-
</TableRow>
29-
</TableHead>
19+
const data = [
20+
{
21+
id: 1,
22+
name: "Peter Doe",
23+
sales: "1.000.000",
24+
region: "Region A",
25+
status: "overperforming",
26+
deltaType: "moderateIncrease",
27+
hours: 100,
28+
},
29+
{
30+
id: 2,
31+
name: "Jon Doe",
32+
sales: "2.202.000",
33+
region: "Region B",
34+
status: "overperforming",
35+
deltaType: "moderateIncrease",
36+
hours: 110,
37+
},
38+
{
39+
id: 3,
40+
name: "Peter Doe",
41+
sales: "1.505.000",
42+
region: "Region C",
43+
status: "underperforming",
44+
deltaType: "moderateDecrease",
45+
hours: 90,
46+
},
47+
];
3048

31-
<TableBody>
32-
<TableRow>
33-
<TableCell>Peter Doe</TableCell>
34-
<TableCell>1.000.000</TableCell>
35-
<TableCell>Region A</TableCell>
36-
<TableCell>
37-
<BadgeDelta deltaType="moderateIncrease" text="overperforming" size="xs" />
38-
</TableCell>
39-
<TableCell className="text-right">211</TableCell>
40-
</TableRow>
41-
<TableRow>
42-
<TableCell>Jon Doe</TableCell>
43-
<TableCell>2.202.000</TableCell>
44-
<TableCell>Region B</TableCell>
45-
<TableCell>
46-
<BadgeDelta deltaType="increase" text="overperforming" size="xs" />
47-
</TableCell>
48-
<TableCell className="text-right">320</TableCell>
49-
</TableRow>
50-
<TableRow>
51-
<TableCell>Jon Doe</TableCell>
52-
<TableCell>2.202.000</TableCell>
53-
<TableCell>Region B</TableCell>
54-
<TableCell>
55-
<BadgeDelta deltaType="moderateDecrease" text="underperforming" size="xs" />
56-
</TableCell>
57-
<TableCell className="text-right">290</TableCell>
58-
</TableRow>
59-
<TableRow>
60-
<TableCell>Jon Doe</TableCell>
61-
<TableCell>2.202.000</TableCell>
62-
<TableCell>Region B</TableCell>
63-
<TableCell>
64-
<BadgeDelta deltaType="moderateDecrease" text="underperforming" size="xs" />
65-
</TableCell>
66-
<TableCell className="text-right">340</TableCell>
67-
</TableRow>
68-
<TableRow>
69-
<TableCell>Jon Doe</TableCell>
70-
<TableCell>2.202.000</TableCell>
71-
<TableCell>Region B</TableCell>
72-
<TableCell>
73-
<BadgeDelta deltaType="unchanged" text="average" size="xs" />
74-
</TableCell>
75-
<TableCell className="text-right">430</TableCell>
76-
</TableRow>
77-
<TableRow>
78-
<TableCell>Jon Doe</TableCell>
79-
<TableCell>2.202.000</TableCell>
80-
<TableCell>Region B</TableCell>
81-
<TableCell>
82-
<BadgeDelta deltaType="moderateDecrease" text="underperforming" size="xs" />
83-
</TableCell>
84-
<TableCell className="text-right">190</TableCell>
85-
</TableRow>
86-
<TableRow>
87-
<TableCell>Jon Doe</TableCell>
88-
<TableCell>2.202.000</TableCell>
89-
<TableCell>Region B</TableCell>
90-
<TableCell>
91-
<BadgeDelta deltaType="moderateIncrease" text="overperforming" size="xs" />
92-
</TableCell>
93-
<TableCell className="text-right">3100</TableCell>
94-
</TableRow>
95-
<TableRow>
96-
<TableCell>Jon Doe</TableCell>
97-
<TableCell>2.202.000</TableCell>
98-
<TableCell>Region B</TableCell>
99-
<TableCell>
100-
<BadgeDelta deltaType="moderateDecrease" text="underperforming" size="xs" />
101-
</TableCell>
102-
<TableCell className="text-right">340</TableCell>
103-
</TableRow>
104-
<TableRow>
105-
<TableCell>Jon Doe</TableCell>
106-
<TableCell>2.202.000</TableCell>
107-
<TableCell>Region B</TableCell>
108-
<TableCell>
109-
<BadgeDelta deltaType="moderateDecrease" text="underperforming" size="lg" />
110-
</TableCell>
111-
<TableCell className="text-right">170</TableCell>
112-
</TableRow>
113-
<TableRow>
114-
<TableCell>Max Doe</TableCell>
115-
<TableCell>1.000.000</TableCell>
116-
<TableCell>Region A</TableCell>
117-
<TableCell>
118-
<BadgeDelta deltaType="moderateDecrease" text="underperforming" size="xs" />
119-
</TableCell>
120-
<TableCell className="text-right">340</TableCell>
121-
</TableRow>
122-
</TableBody>
123-
</Table>
124-
</Card>
125-
);
49+
const Template: ComponentStory<typeof Table> = (args) => {
50+
return (
51+
<Card>
52+
<Table {...args}>
53+
<TableHead>
54+
<TableRow>
55+
<TableHeaderCell>Name</TableHeaderCell>
56+
<TableHeaderCell>Sales ($)</TableHeaderCell>
57+
<TableHeaderCell>Region</TableHeaderCell>
58+
<TableHeaderCell>Status</TableHeaderCell>
59+
<TableHeaderCell className="text-right">Working Hours (h)</TableHeaderCell>
60+
</TableRow>
61+
</TableHead>
62+
63+
<TableBody>
64+
{data.map((item) => (
65+
<TableRow key={item.id}>
66+
<TableCell>{item.name}</TableCell>
67+
<TableCell>{item.sales}</TableCell>
68+
<TableCell>{item.region}</TableCell>
69+
<TableCell>
70+
<BadgeDelta deltaType={item.deltaType as DeltaType} size="xs">
71+
{item.status}
72+
</BadgeDelta>
73+
</TableCell>
74+
<TableCell className="text-right">{item.hours}</TableCell>
75+
</TableRow>
76+
))}
77+
</TableBody>
78+
</Table>
79+
</Card>
80+
);
81+
};
12682

12783
export const Default = Template.bind({});
12884
// More on args: https://storybook.js.org/docs/react/writing-stories/args

‎src/tests/icon-elements/Badge.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@ import Badge from "components/icon-elements/Badge";
66

77
describe("Badge", () => {
88
test("renders the Badge component with default props", () => {
9-
render(<Badge text={"Badge"} />);
9+
render(<Badge>Badge</Badge>);
1010
});
1111
});

‎src/tests/input-elements/Button.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@ import Button from "components/input-elements/Button";
66

77
describe("Button", () => {
88
test("renders the Button component with default props", () => {
9-
render(<Button text={"Button"} />);
9+
render(<Button>Button</Button>);
1010
});
1111
});

‎src/tests/input-elements/Dropdown.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ describe("Dropdown", () => {
88
test("renders the Dropdown component with default props", () => {
99
render(
1010
<Dropdown>
11-
<DropdownItem value={5} text={"Five"} />
12-
<DropdownItem value={3} text={"Three"} />
13-
<DropdownItem value={1} text={"One"} />
11+
<DropdownItem value="5" text="Five" />
12+
<DropdownItem value="3" text="Three" />
13+
<DropdownItem value="1" text="One" />
1414
</Dropdown>,
1515
);
1616
});

‎src/tests/input-elements/MultiSelectBox.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ describe("SelectBox", () => {
88
test("renders the SelectBox component with default props", () => {
99
render(
1010
<MultiSelectBox>
11-
<MultiSelectBoxItem value={1} text="Option One" />
12-
<MultiSelectBoxItem value={2} text="Option Two" />
13-
<MultiSelectBoxItem value={3} text="Option Three" />
11+
<MultiSelectBoxItem value="1" text="Option One" />
12+
<MultiSelectBoxItem value="2" text="Option Two" />
13+
<MultiSelectBoxItem value="3" text="Option Three" />
1414
</MultiSelectBox>,
1515
);
1616
});

‎src/tests/input-elements/SelectBox.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ describe("SelectBox", () => {
88
test("renders the SelectBox component with default props", () => {
99
render(
1010
<SelectBox>
11-
<SelectBoxItem value={1} text="Option One" />
12-
<SelectBoxItem value={2} text="Option Two" />
13-
<SelectBoxItem value={3} text="Option Three" />
11+
<SelectBoxItem value="1" text="Option One" />
12+
<SelectBoxItem value="2" text="Option Two" />
13+
<SelectBoxItem value="3" text="Option Three" />
1414
</SelectBox>,
1515
);
1616
});

‎src/tests/input-elements/Tabs.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ describe("SelectBox", () => {
88
test("renders the SelectBox component with default props", () => {
99
render(
1010
<TabList>
11-
<Tab value={1} text="Option One" />
12-
<Tab value={2} text="Option Two" />
13-
<Tab value={3} text="Option Three" />
11+
<Tab value="1" text="Option One" />
12+
<Tab value="2" text="Option Two" />
13+
<Tab value="3" text="Option Three" />
1414
</TabList>,
1515
);
1616
});

‎src/tests/input-elements/Toggle.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ describe("Toggle", () => {
88
test("renders the Toggle component with default props", () => {
99
render(
1010
<Toggle>
11-
<ToggleItem value={1} text="Option 1" />
12-
<ToggleItem value={2} text="Option 2" />
13-
<ToggleItem value={3} text="Option 3" />
11+
<ToggleItem value="1" text="Option 1" />
12+
<ToggleItem value="2" text="Option 2" />
13+
<ToggleItem value="3" text="Option 3" />
1414
</Toggle>,
1515
);
1616
});

0 commit comments

Comments
 (0)