Add tests for PageLayout (#1867)

* Update jest test match regex

* Add PageLayout tests

* Update component checklist

* Ignore stories in test coverage report

* Increase code coverage

* Update snapshot test

* Update snapshots

Author: colebemis

docs/content/drafts/PageLayout.mdx

@@ -1,6 +1,6 @@
 ---
 title: PageLayout
-status: Draft
+status: Alpha
 # description: TODO
 source: https://github.com/primer/react/tree/main/src/PageLayout
 storybook: https://primer.style/react/storybook?path=/story/layout-pagelayout--playground
@@ -252,7 +252,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
     noUnnecessaryDeps: true,
     adaptsToThemes: true,
     adaptsToScreenSizes: true,
-    fullTestCoverage: false,
+    fullTestCoverage: true,
     usedInProduction: true,
     usageExamplesDocumented: true,
     hasStorybookStories: true,

jest.config.js

@@ -3,13 +3,13 @@ module.exports = {
   testEnvironment: 'jsdom',
   cacheDirectory: '.test',
   collectCoverage: true,
-  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/stories/**'],
+  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}', '!src/stories/**', '!**/*.stories.{js,jsx,ts,tsx}'],
   setupFilesAfterEnv: [
     '<rootDir>/src/utils/test-matchers.tsx',
     '<rootDir>/src/utils/test-deprecations.tsx',
     '<rootDir>/src/utils/test-helpers.tsx'
   ],
-  testMatch: ['<rootDir>/(src|codemods)/__tests__/**/*.test.[jt]s?(x)', '!**/*.types.test.[jt]s?(x)'],
+  testMatch: ['<rootDir>/(src|codemods)/**/*.test.[jt]s?(x)', '!**/*.types.test.[jt]s?(x)'],
   // @primer/behaviors is ESM, so needs to be transformed
   transformIgnorePatterns: ['node_modules/(?!@primer/behaviors)']
 }

src/PageLayout/PageLayout.test.tsx

@@ -0,0 +1,66 @@
+import {render} from '@testing-library/react'
+import React from 'react'
+import {ThemeProvider} from '..'
+import {PageLayout} from './PageLayout'
+
+describe('PageLayout', () => {
+  it('renders default layout', () => {
+    const {container} = render(
+      <ThemeProvider>
+        <PageLayout>
+          <PageLayout.Header>Header</PageLayout.Header>
+          <PageLayout.Content>Content</PageLayout.Content>
+          <PageLayout.Pane>Pane</PageLayout.Pane>
+          <PageLayout.Footer>Footer</PageLayout.Footer>
+        </PageLayout>
+      </ThemeProvider>
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders condensed layout', () => {
+    const {container} = render(
+      <ThemeProvider>
+        <PageLayout padding="condensed" rowGap="condensed" columnGap="condensed">
+          <PageLayout.Header>Header</PageLayout.Header>
+          <PageLayout.Content>Content</PageLayout.Content>
+          <PageLayout.Pane>Pane</PageLayout.Pane>
+          <PageLayout.Footer>Footer</PageLayout.Footer>
+        </PageLayout>
+      </ThemeProvider>
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders with dividers', () => {
+    const {container} = render(
+      <ThemeProvider>
+        <PageLayout>
+          <PageLayout.Header divider="line" dividerWhenNarrow="filled">
+            Header
+          </PageLayout.Header>
+          <PageLayout.Content>Content</PageLayout.Content>
+          <PageLayout.Pane position="start" divider="line" dividerWhenNarrow="filled">
+            Pane
+          </PageLayout.Pane>
+          <PageLayout.Footer dividerWhenNarrow="line">Footer</PageLayout.Footer>
+        </PageLayout>
+      </ThemeProvider>
+    )
+    expect(container).toMatchSnapshot()
+  })
+
+  it('renders pane in different position when narrow', () => {
+    const {container} = render(
+      <ThemeProvider>
+        <PageLayout>
+          <PageLayout.Header>Header</PageLayout.Header>
+          <PageLayout.Content>Content</PageLayout.Content>
+          <PageLayout.Pane positionWhenNarrow="start">Pane</PageLayout.Pane>
+          <PageLayout.Footer>Footer</PageLayout.Footer>
+        </PageLayout>
+      </ThemeProvider>
+    )
+    expect(container).toMatchSnapshot()
+  })
+})