Skip to content

Commit 81c7d89

Browse files
shervinchenshervinchen
committed
test(Layout): add basic unit tests
1 parent c921972 commit 81c7d89

File tree

7 files changed

+110
-5
lines changed

7 files changed

+110
-5
lines changed

‎packages/Layout/Content.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Content: FC<PropsWithChildren<ContentProps>> = ({
1010
const classes = classNames('raw-layout-content', className);
1111

1212
return (
13-
<main className={classes} {...restProps}>
13+
<main data-testid="layoutContent" className={classes} {...restProps}>
1414
{children}
1515
<style jsx>{`
1616
.raw-layout-content {

‎packages/Layout/Footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Footer: FC<PropsWithChildren<FooterProps>> = ({
1010
const classes = classNames('raw-layout-footer', className);
1111

1212
return (
13-
<footer className={classes} {...restProps}>
13+
<footer data-testid="layoutFooter" className={classes} {...restProps}>
1414
{children}
1515
<style jsx>{`
1616
.raw-layout-footer {

‎packages/Layout/Header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Header: FC<PropsWithChildren<HeaderProps>> = ({
1010
const classes = classNames('raw-layout-header', className);
1111

1212
return (
13-
<header className={classes} {...restProps}>
13+
<header data-testid="layoutHeader" className={classes} {...restProps}>
1414
{children}
1515
<style jsx>{`
1616
.raw-layout-header {

‎packages/Layout/Layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const Layout: FC<PropsWithChildren<LayoutProps>> = ({
1919
);
2020

2121
return (
22-
<div className={classes} {...restProps}>
22+
<div data-testid="layout" className={classes} {...restProps}>
2323
{children}
2424
<style jsx>{`
2525
.raw-layout {

‎packages/Layout/Sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const Sidebar: FC<PropsWithChildren<SidebarProps>> = ({
1010
const classes = classNames('raw-layout-sidebar', className);
1111

1212
return (
13-
<aside className={classes} {...restProps}>
13+
<aside data-testid="layoutSidebar" className={classes} {...restProps}>
1414
{children}
1515
<style jsx>{`
1616
.raw-layout-sidebar {

‎packages/Layout/__tests__/Layout.test.tsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import Layout from '..';
4+
5+
describe('Layout', () => {
6+
test('should match the snapshot', () => {
7+
const { asFragment } = render(
8+
<Layout>
9+
<Layout.Header>Header</Layout.Header>
10+
<Layout>
11+
<Layout.Sidebar>Sidebar</Layout.Sidebar>
12+
<Layout.Content>Content</Layout.Content>
13+
</Layout>
14+
<Layout.Footer>Footer</Layout.Footer>
15+
</Layout>
16+
);
17+
expect(asFragment()).toMatchSnapshot();
18+
});
19+
20+
test('should support custom class name', () => {
21+
render(
22+
<Layout className="custom-layout">
23+
<Layout.Header className="custom-layout-header">Header</Layout.Header>
24+
<Layout>
25+
<Layout.Sidebar className="custom-layout-sidebar">
26+
Sidebar
27+
</Layout.Sidebar>
28+
<Layout.Content className="custom-layout-content">
29+
Content
30+
</Layout.Content>
31+
</Layout>
32+
<Layout.Footer className="custom-layout-footer">Footer</Layout.Footer>
33+
</Layout>
34+
);
35+
expect(screen.getAllByTestId('layout')[0]).toHaveClass('custom-layout');
36+
expect(screen.getByTestId('layoutHeader')).toHaveClass(
37+
'custom-layout-header'
38+
);
39+
expect(screen.getByTestId('layoutSidebar')).toHaveClass(
40+
'custom-layout-sidebar'
41+
);
42+
expect(screen.getByTestId('layoutContent')).toHaveClass(
43+
'custom-layout-content'
44+
);
45+
expect(screen.getByTestId('layoutFooter')).toHaveClass(
46+
'custom-layout-footer'
47+
);
48+
});
49+
50+
test('should detect the sidebar as children', () => {
51+
render(
52+
<Layout>
53+
<Layout.Header>Header</Layout.Header>
54+
<Layout>
55+
<Layout.Sidebar>Sidebar</Layout.Sidebar>
56+
<Layout.Content>Content</Layout.Content>
57+
</Layout>
58+
<Layout.Footer>Footer</Layout.Footer>
59+
</Layout>
60+
);
61+
expect(screen.getAllByTestId('layout')[1]).toHaveClass(
62+
'raw-layout-has-sidebar'
63+
);
64+
});
65+
});

‎packages/Layout/__tests__/__snapshots__/Layout.test.tsx.snap‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Layout should match the snapshot 1`] = `
4+
<DocumentFragment>
5+
<div
6+
class="jsx-813210850 raw-layout"
7+
data-testid="layout"
8+
>
9+
<header
10+
class="jsx-4037815597 raw-layout-header"
11+
data-testid="layoutHeader"
12+
>
13+
Header
14+
</header>
15+
<div
16+
class="jsx-813210850 raw-layout raw-layout-has-sidebar"
17+
data-testid="layout"
18+
>
19+
<aside
20+
class="jsx-2255274172 raw-layout-sidebar"
21+
data-testid="layoutSidebar"
22+
>
23+
Sidebar
24+
</aside>
25+
<main
26+
class="jsx-1245817261 raw-layout-content"
27+
data-testid="layoutContent"
28+
>
29+
Content
30+
</main>
31+
</div>
32+
<footer
33+
class="jsx-2757715662 raw-layout-footer"
34+
data-testid="layoutFooter"
35+
>
36+
Footer
37+
</footer>
38+
</div>
39+
</DocumentFragment>
40+
`;

0 commit comments

Comments
 (0)