Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: replace chromatic visual test with playwright #4232

Merged
merged 34 commits into from
Feb 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
dae185b
test(Accordion): replace chromatic test with playwright
mainframev Jan 16, 2024
e31feda
test(AirportIllustration): replace chromatic visual test with playwright
mvidalgarcia Feb 5, 2024
c201071
test(Badge): replace chromatic visual tests with playwright
mainframev Jan 16, 2024
fc4181e
test(BadgeList): replace chromatic visual test with playwright
mainframev Jan 16, 2024
49b4a4d
test(BaggageStepper): replace chromatic visual test with playwright
mainframev Jan 16, 2024
2dc1e18
test(Breadcrumbs): replace chromatic visual test with playwright
mainframev Jan 16, 2024
1abd2e0
test(Button): replace chromatic visual test with playwright
mainframev Jan 16, 2024
4f21b10
test(ButtonGroup): replace chromatic visual test with playwright
mainframev Jan 18, 2024
62aee31
test(ButtonLink): replace chromatic visual test with playwright
mainframev Jan 18, 2024
752ee4b
test(ButtonMobileStore): replace chromatic visual test with playwright
mainframev Jan 18, 2024
1121ac7
test(CallOutBanner): replace chromatic visual test with playwright
mainframev Jan 18, 2024
c232b43
test(Card): replace chromatic visual test with playwright
mainframev Jan 18, 2024
ca8aae6
test(CarrierLogo): replace chromatic visual test with playwright
mainframev Jan 18, 2024
2e7554c
test(Checkbox): replace chromatic visual test with playwright
mainframev Jan 18, 2024
b34ade4
test(ChoiceGroup): replace chromatic visual test with playwright
mainframev Jan 18, 2024
ef52d91
test(Collapse): replace chromatic visual test with playwright
mainframev Jan 18, 2024
1ea5003
test(Coupon): replace chromatic visual test with playwright
mainframev Jan 18, 2024
9de4999
test(Dialog): replace chromatic visual test with playwright
mainframev Jan 18, 2024
160c53d
test(Drawer): replace chromatic visual test with playwright
mainframev Jan 18, 2024
d7949da
test(FeatureIcon): replace chromatic visual test with playwright
mainframev Jan 18, 2024
6a2b767
test(Heading): replace chromatic visual test with playwright
mainframev Jan 18, 2024
67b1895
test(HorizontalScroll): replace chromatic visual test with playwright
mainframev Jan 18, 2024
c2f1e09
test(Illustration): replace chromatic visual test with playwright
mvidalgarcia Feb 7, 2024
4624b5a
test(ListChoice): replace chromatic visual test with playwright
mainframev Jan 18, 2024
1b8988c
test(Modal): replace chromatic visual test with playwright
mainframev Jan 18, 2024
5b97b8e
test(NotificationBadge): replace chromatic visual test with playwright
mainframev Jan 18, 2024
a868612
test(Separator): replace chromatic visual test with playwright
mainframev Jan 18, 2024
9decc91
test(Skeleton): replace chromatic visual test with playwright
mainframev Jan 18, 2024
e25fd98
test(Tile): replace chromatic visual test with playwright
mainframev Jan 18, 2024
6d1b18c
test(TileGroup): replace chromatic visual test with playwright
mainframev Jan 18, 2024
4d81c7a
test(Truncate): replace chromatic visual test with playwright
mainframev Jan 18, 2024
8b47126
test(Tag): replace chromatic visual test with playwright
mainframev Jan 26, 2024
0860d17
chore: remove pkg script leftover
mvidalgarcia Feb 2, 2024
89b6903
test: add linux screenshots
mainframev Jan 18, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@
"postinstall": "lerna run postinstall --stream",
"prepare": "husky install",
"prettier:test": "prettier --check '**/*.md'",
"publish-packages": "zx scripts/publish.mjs",
"size:build": "yarn tokens build && yarn tailwind-preset build && yarn components size:build",
"size": "yarn size:build && size-limit",
"test-ci": "jest --ci --maxWorkers=2 && lerna run test",
Expand Down
46 changes: 46 additions & 0 deletions packages/orbit-components/src/Accordion/Accordion.ct-story.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import React from "react";

import Button from "../Button";
import Text from "../Text";

import Accordion, { AccordionSection } from ".";

/* eslint-disable orbit-components/unique-id */

export default function AccordionVisualTest() {
return (
<div className="space-y-md">
<Accordion>
<AccordionSection id="0X0" header={<Text type="primary">Expandable</Text>}>
<Text type="primary">This is a content text</Text>
</AccordionSection>
<AccordionSection id="0X2" expandable={false} header={<Text type="primary">Static</Text>}>
<Text type="primary">This is a content text</Text>
</AccordionSection>
<AccordionSection
id="0X3"
header={<Text type="primary">Custom action</Text>}
actions={<Button>Button</Button>}
>
<Text type="primary">This is a content text</Text>
</AccordionSection>
</Accordion>

<Accordion expandedSection="1">
<AccordionSection id="1" header={<Text type="primary">Expanded</Text>}>
<Text type="primary">This is a content text</Text>
</AccordionSection>
</Accordion>

<Accordion expandedSection="1">
<AccordionSection
id="1"
header={<Text type="primary">Expanded</Text>}
footer={<Text type="primary">Footer</Text>}
>
<Text type="primary">This is a content text</Text>
</AccordionSection>
</Accordion>
</div>
);
}
12 changes: 12 additions & 0 deletions packages/orbit-components/src/Accordion/Accordion.ct.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import * as React from "react";
import { test, expect } from "@playwright/experimental-ct-react";

import AccordionVisualTest from "./Accordion.ct-story";

test.describe("visual Accordion", () => {
test(`Accordion default`, async ({ mount }) => {
const component = await mount(<AccordionVisualTest />);

await expect(component).toHaveScreenshot();
});
});
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from "react";

// eslint-disable-next-line import/extensions
import { NAMES } from "./consts.mjs";

import AirportIllustration from ".";

export default function AirportIllustrationStory() {
return (
<div className="space-y-sm flex flex-col">
{NAMES.map(illustration => (
<div className="bg-white-normal min-h-[80px] w-full">
<AirportIllustration key={illustration} name={illustration} />
</div>
))}
</div>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import * as React from "react";
import { test, expect } from "@playwright/experimental-ct-react";

import AirportIllustration from "./AirportIllustration.ct-story";

test.describe("visual AirportIllustration", () => {
test(`AirportIllustration`, async ({ mount }) => {
const component = await mount(<AirportIllustration />);

await expect(component).toHaveScreenshot();
});
});
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@ export const NAMES = [
"NCEFastTrack",
"PRGSmartPass",
"VCESmartPass",
];
] as const;
18 changes: 18 additions & 0 deletions packages/orbit-components/src/Badge/Badge.ct-story.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from "react";

import Airplane from "../icons/Airplane";
import { TYPE_OPTIONS } from "./consts";

import Badge from ".";

export default function BadgeVisualTest() {
return (
<div className="gap-sm flex flex-wrap">
{Object.values(TYPE_OPTIONS).map(type => (
<Badge type={type} icon={<Airplane />}>
Badge
</Badge>
))}
</div>
);
}
12 changes: 12 additions & 0 deletions packages/orbit-components/src/Badge/Badge.ct.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import * as React from "react";
import { test, expect } from "@playwright/experimental-ct-react";

import Badge from "./Badge.ct-story";

test.describe("visual Badge", () => {
test("Badge", async ({ mount }) => {
const component = await mount(<Badge />);

await expect(component).toHaveScreenshot();
});
});
37 changes: 37 additions & 0 deletions packages/orbit-components/src/BadgeList/BadgeList.ct-story.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React from "react";

import BadgeListItem from "./BadgeListItem";
import { TYPE_OPTIONS, SIZE_OPTIONS } from "./consts";
import KiwicomGuarantee from "../icons/KiwicomGuarantee";

import BadgeList from ".";

export default function BadgeListVisualStory() {
return (
<div className="space-y-md">
<div className="space-y-xs">
{Object.values(TYPE_OPTIONS).map(type => (
<BadgeList>
<BadgeListItem icon={<KiwicomGuarantee />} type={type}>
List type {type} item #1
</BadgeListItem>
<BadgeListItem icon={<KiwicomGuarantee />} type={type}>
List type {type} item #2
</BadgeListItem>
</BadgeList>
))}
</div>

{Object.values(SIZE_OPTIONS).map(size => (
<BadgeList>
<BadgeListItem icon={<KiwicomGuarantee />} size={size}>
List size {size} item #1
</BadgeListItem>
<BadgeListItem icon={<KiwicomGuarantee />} size={size}>
List size {size} item #2
</BadgeListItem>
</BadgeList>
))}
</div>
);
}
12 changes: 12 additions & 0 deletions packages/orbit-components/src/BadgeList/BadgeList.ct.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import * as React from "react";
import { test, expect } from "@playwright/experimental-ct-react";

import BadgeList from "./BadgeList.ct-story";

test.describe("visual BadgeList", () => {
test("BadgeList", async ({ mount }) => {
const component = await mount(<BadgeList />);

await expect(component).toHaveScreenshot();
});
});
14 changes: 14 additions & 0 deletions packages/orbit-components/src/BaggageStepper/BaggageStepper.ct.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import * as React from "react";
import { test, expect } from "@playwright/experimental-ct-react";

import BaggageStepper from ".";

test.describe("visual BaggageStepper", () => {
test("BaggageStepper default", async ({ mount }) => {
const component = await mount(
<BaggageStepper titleIncrement="Add stuff" titleDecrement="Remove stuff" />,
);

await expect(component).toHaveScreenshot();
});
});
24 changes: 24 additions & 0 deletions packages/orbit-components/src/Breadcrumbs/Breadcrumbs.ct.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import * as React from "react";
import { test, expect } from "@playwright/experimental-ct-react";

import Breadcrumbs, { BreadcrumbsItem } from ".";

test.describe("visual Breadcrumbs", () => {
test("Breadcrumbs default", async ({ mount }) => {
const component = await mount(
<Breadcrumbs onGoBack={() => {}}>
<BreadcrumbsItem href="https://kiwi.com" onClick={() => {}}>
Kiwi.com
</BreadcrumbsItem>
<BreadcrumbsItem href="#1" onClick={() => {}}>
1. Level
</BreadcrumbsItem>
<BreadcrumbsItem onClick={() => {}}>2. Level</BreadcrumbsItem>
<BreadcrumbsItem href="#3">3. Level</BreadcrumbsItem>
<BreadcrumbsItem>4. Level</BreadcrumbsItem>
</Breadcrumbs>,
);

await expect(component).toHaveScreenshot();
});
});
109 changes: 109 additions & 0 deletions packages/orbit-components/src/Button/Button.ct-story.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import React from "react";

import { TYPE_OPTIONS, SIZE_OPTIONS } from "./consts";
import * as Icons from "../icons";

import Button from ".";

export default function ButtonVisualStory() {
return (
<div className="space-y-sm flex-col items-start">
<div className="gap-sm flex flex-wrap items-center">
{Object.values(TYPE_OPTIONS).map(type => (
<Button
iconLeft={<Icons.Airplane />}
iconRight={<Icons.ChevronDown />}
key={type}
type={type}
>
{type}
</Button>
))}
</div>

<div className="gap-sm flex flex-wrap items-center">
{Object.values(TYPE_OPTIONS).map(type => (
<Button
iconLeft={<Icons.Airplane />}
iconRight={<Icons.ChevronDown />}
key={type}
type={type}
loading
>
{type}
</Button>
))}
</div>

<div className="gap-sm flex flex-wrap items-center">
{Object.values(TYPE_OPTIONS).map(type => (
<Button
iconLeft={<Icons.Airplane />}
iconRight={<Icons.ChevronDown />}
key={type}
type={type}
disabled
>
{type}
</Button>
))}
</div>

<div className="gap-sm flex flex-wrap">
{Object.values(SIZE_OPTIONS).map(size => (
<Button
iconLeft={<Icons.Airplane />}
iconRight={<Icons.ChevronDown />}
key={size}
size={size}
>
{size}
</Button>
))}
</div>

<div className="gap-sm flex flex-wrap items-start">
{Object.values(SIZE_OPTIONS).map(size => (
<Button
iconLeft={<Icons.Airplane />}
iconRight={<Icons.ChevronDown />}
key={size}
size={size}
loading
>
{size}
</Button>
))}
</div>

<div className="gap-sm flex flex-wrap items-center">
<Button iconLeft={<Icons.Airplane />}>Button</Button>
<Button iconRight={<Icons.ChevronDown />}>Button</Button>
<Button iconLeft={<Icons.Airplane />} iconRight={<Icons.ChevronDown />}>
Button
</Button>
<Button iconLeft={<Icons.Airplane />} />
</div>

<div className="gap-sm flex flex-wrap items-center">
<Button circled iconLeft={<Icons.Airplane />}>
Button
</Button>
<Button circled iconLeft={<Icons.Airplane />} />
</div>

<Button fullWidth iconLeft={<Icons.Airplane />}>
Button
</Button>
<Button fullWidth iconRight={<Icons.ChevronDown />}>
Button
</Button>
<Button fullWidth iconLeft={<Icons.Airplane />} iconRight={<Icons.ChevronDown />}>
Button
</Button>
<Button fullWidth centered iconLeft={<Icons.Airplane />} iconRight={<Icons.ChevronDown />}>
Button
</Button>
</div>
);
}
12 changes: 12 additions & 0 deletions packages/orbit-components/src/Button/Button.ct.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import * as React from "react";
import { test, expect } from "@playwright/experimental-ct-react";

import ButtonStory from "./Button.ct-story";

test.describe("visual Button", () => {
test("Button default", async ({ mount }) => {
const component = await mount(<ButtonStory />);

await expect(component).toHaveScreenshot();
});
});
16 changes: 16 additions & 0 deletions packages/orbit-components/src/ButtonGroup/ButtonGroup.ct-story.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from "react";

import Airplane from "../icons/Airplane";
import ChevronDown from "../icons/ChevronDown";
import Button from "../Button";

import ButtonGroup from ".";

export default function ButtonGroupVisualStory() {
return (
<ButtonGroup>
<Button iconLeft={<Airplane />}>Button</Button>
<Button iconLeft={<ChevronDown />} title="Show more" />
</ButtonGroup>
);
}
12 changes: 12 additions & 0 deletions packages/orbit-components/src/ButtonGroup/ButtonGroup.ct.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import * as React from "react";
import { test, expect } from "@playwright/experimental-ct-react";

import ButtonGroupStory from "./ButtonGroup.ct-story";

test.describe("visual ButtonGroup", () => {
test("ButtonGroup", async ({ mount }) => {
const component = await mount(<ButtonGroupStory />);

await expect(component).toHaveScreenshot();
});
});
Loading
Loading