Skip to content

Commit ae60f30

Browse files
rebeccaalpertrebeccaalpert
committed
Address feedback
1 parent d1d283f commit ae60f30

File tree

7 files changed

+136
-109
lines changed

7 files changed

+136
-109
lines changed

‎src/components/AutoLinkHeader.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import { css } from '@patternfly/react-styles'
66
interface AutoLinkHeaderProps extends React.HTMLProps<HTMLDivElement> {
77
id?: string
88
headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
9-
children: React.ReactNode | string
10-
metaText?: React.ReactNode | string
9+
children: React.ReactNode
10+
metaText?: React.ReactNode
1111
className?: string
1212
}
1313

‎src/components/CSSTable.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const { cssPrefix } = Astro.props
1919
</AutoLinkHeader>
2020
</StackItem>
2121

22-
{cssPrefix?.map((prefix: string, index: number) => (
22+
{cssPrefix.map((prefix: string, index: number) => (
2323
<StackItem key={index}>
2424
<CSSTableComponent
2525
autoLinkHeader={cssPrefix.length > 1}

‎src/components/__tests__/CSSTable.test.tsx‎

Lines changed: 99 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { render, screen, fireEvent, waitFor } from '@testing-library/react'
1+
import { render, screen, waitFor } from '@testing-library/react'
22
import { CSSTable } from '../CSSTable'
3+
import userEvent from '@testing-library/user-event'
34

45
jest.mock('@patternfly/react-tokens/dist/esm/componentIndex', () => ({
56
test: {
@@ -24,114 +25,114 @@ jest.mock('@patternfly/react-tokens/dist/esm/componentIndex', () => ({
2425
'pf-v6-empty': {},
2526
}))
2627

27-
describe('<CSSTable />', () => {
28-
it('renders without crashing', () => {
29-
render(<CSSTable cssPrefix="pf-v6-test" />)
30-
expect(
31-
screen.getByRole('grid', {
32-
name: /CSS Variables prefixed with pf-v6-test/i,
33-
}),
34-
).toBeInTheDocument()
35-
})
28+
it('renders without crashing', () => {
29+
render(<CSSTable cssPrefix="pf-v6-test" />)
30+
expect(
31+
screen.getByRole('grid', {
32+
name: /CSS Variables prefixed with pf-v6-test/i,
33+
}),
34+
).toBeInTheDocument()
35+
})
3636

37-
it('renders the correct table headers when hideSelectorColumn is false (default)', () => {
38-
render(<CSSTable cssPrefix="pf-v6-test" />)
39-
expect(screen.getByText('Selector')).toBeInTheDocument()
40-
expect(screen.getByText('Variable')).toBeInTheDocument()
41-
expect(screen.getByText('Value')).toBeInTheDocument()
42-
})
37+
it('renders the correct table headers when hideSelectorColumn is false (default)', () => {
38+
render(<CSSTable cssPrefix="pf-v6-test" />)
39+
expect(screen.getByText('Selector')).toBeInTheDocument()
40+
expect(screen.getByText('Variable')).toBeInTheDocument()
41+
expect(screen.getByText('Value')).toBeInTheDocument()
42+
})
4343

44-
it('renders the correct table headers when hideSelectorColumn is true', () => {
45-
render(<CSSTable cssPrefix="pf-v6-test" hideSelectorColumn />)
46-
expect(screen.queryByText('Selector')).not.toBeInTheDocument()
47-
expect(screen.getByText('Variable')).toBeInTheDocument()
48-
expect(screen.getByText('Value')).toBeInTheDocument()
49-
})
44+
it('renders the correct table headers when hideSelectorColumn is true', () => {
45+
render(<CSSTable cssPrefix="pf-v6-test" hideSelectorColumn />)
46+
expect(screen.queryByText('Selector')).not.toBeInTheDocument()
47+
expect(screen.getByText('Variable')).toBeInTheDocument()
48+
expect(screen.getByText('Value')).toBeInTheDocument()
49+
})
5050

51-
it('renders the correct data rows', () => {
52-
render(<CSSTable cssPrefix="pf-v6-test" />)
53-
expect(
54-
screen.getByRole('row', {
55-
name: '.test-selector test-property test-value',
56-
}),
57-
).toBeInTheDocument()
58-
expect(
59-
screen.getByRole('row', {
60-
name: '.test-selector another-property (In light theme) #123456',
61-
}),
62-
).toBeInTheDocument()
63-
expect(
64-
screen.getByRole('row', {
65-
name: 'Details .another-selector list-property list-item-1',
66-
}),
67-
).toBeInTheDocument()
68-
})
51+
it('renders the correct data rows', () => {
52+
render(<CSSTable cssPrefix="pf-v6-test" />)
53+
expect(
54+
screen.getByRole('row', {
55+
name: '.test-selector test-property test-value',
56+
}),
57+
).toBeInTheDocument()
58+
expect(
59+
screen.getByRole('row', {
60+
name: '.test-selector another-property (In light theme) #123456',
61+
}),
62+
).toBeInTheDocument()
63+
expect(
64+
screen.getByRole('row', {
65+
name: 'Details .another-selector list-property list-item-1',
66+
}),
67+
).toBeInTheDocument()
68+
})
6969

70-
it('renders the "Prefixed with" header when autoLinkHeader is true', () => {
71-
render(<CSSTable cssPrefix="pf-v6-test" autoLinkHeader />)
72-
expect(
73-
screen.getByRole('heading', {
74-
name: /Prefixed with 'pf-v6-test'/i,
75-
level: 3,
76-
}),
77-
).toBeInTheDocument()
78-
})
70+
it('renders the "Prefixed with" header when autoLinkHeader is true', () => {
71+
render(<CSSTable cssPrefix="pf-v6-test" autoLinkHeader />)
72+
expect(
73+
screen.getByRole('heading', {
74+
name: /Prefixed with 'pf-v6-test'/i,
75+
level: 3,
76+
}),
77+
).toBeInTheDocument()
78+
})
7979

80-
it('does not render the "Prefixed with" header when autoLinkHeader is false (default)', () => {
81-
render(<CSSTable cssPrefix="pf-v6-test" />)
82-
expect(
83-
screen.queryByRole('heading', {
84-
name: /Prefixed with 'pf-v6-test'/i,
85-
level: 3,
86-
}),
87-
).not.toBeInTheDocument()
88-
})
80+
it('does not render the "Prefixed with" header when autoLinkHeader is false (default)', () => {
81+
render(<CSSTable cssPrefix="pf-v6-test" />)
82+
expect(
83+
screen.queryByRole('heading', {
84+
name: /Prefixed with 'pf-v6-test'/i,
85+
level: 3,
86+
}),
87+
).not.toBeInTheDocument()
88+
})
8989

90-
it('filters rows based on search input', async () => {
91-
render(<CSSTable cssPrefix="pf-v6-test" debounceLength={0} />)
92-
const searchInput = screen.getByPlaceholderText('Filter CSS Variables')
90+
it('filters rows based on search input', async () => {
91+
render(<CSSTable cssPrefix="pf-v6-test" debounceLength={0} />)
92+
const searchInput = screen.getByPlaceholderText('Filter CSS Variables')
9393

94-
expect(
95-
screen.getByRole('row', {
96-
name: '.test-selector test-property test-value',
97-
}),
98-
).toBeInTheDocument()
99-
expect(
100-
screen.getByRole('row', {
101-
name: 'Details .another-selector list-property list-item-1',
102-
}),
103-
).toBeInTheDocument()
104-
fireEvent.change(searchInput, { target: { value: 'test' } })
105-
await waitFor(() => {
106-
// row doesn't seem to work here for whatever reason
107-
expect(screen.getAllByText('.test-selector')).toHaveLength(2)
108-
expect(screen.getByText('test-property')).toBeInTheDocument()
109-
expect(screen.queryByText('.another-selector')).not.toBeInTheDocument()
110-
expect(screen.queryByText('list-property')).not.toBeInTheDocument()
111-
})
94+
expect(
95+
screen.getByRole('row', {
96+
name: '.test-selector test-property test-value',
97+
}),
98+
).toBeInTheDocument()
99+
expect(
100+
screen.getByRole('row', {
101+
name: 'Details .another-selector list-property list-item-1',
102+
}),
103+
).toBeInTheDocument()
112104

113-
fireEvent.change(searchInput, { target: { value: 'list' } })
114-
await waitFor(() => {
115-
expect(screen.queryByText('.test-selector')).not.toBeInTheDocument()
116-
expect(screen.queryByText('test-property')).not.toBeInTheDocument()
117-
expect(screen.getByText('.another-selector')).toBeInTheDocument()
118-
expect(screen.getAllByText('list-property')).toHaveLength(2)
119-
})
105+
await userEvent.type(searchInput, 'test')
106+
await waitFor(() => {
107+
// row doesn't seem to work here for whatever reason
108+
expect(screen.getAllByText('.test-selector')).toHaveLength(2)
109+
expect(screen.getByText('test-property')).toBeInTheDocument()
110+
expect(screen.queryByText('.another-selector')).not.toBeInTheDocument()
111+
expect(screen.queryByText('list-property')).not.toBeInTheDocument()
120112
})
121113

122-
it('handles the case where the cssPrefix does not exist in tokensModule', () => {
123-
render(<CSSTable cssPrefix="pf-v6-nonexistent" />)
124-
expect(screen.queryByRole('grid')).toBeInTheDocument() // Table should still render, but be empty
114+
await userEvent.clear(searchInput)
115+
await userEvent.type(searchInput, 'list')
116+
await waitFor(() => {
125117
expect(screen.queryByText('.test-selector')).not.toBeInTheDocument()
118+
expect(screen.queryByText('test-property')).not.toBeInTheDocument()
119+
expect(screen.getByText('.another-selector')).toBeInTheDocument()
120+
expect(screen.getAllByText('list-property')).toHaveLength(2)
126121
})
122+
})
127123

128-
it('renders correctly when hideSelectorColumn is true and there are rows', () => {
129-
render(<CSSTable cssPrefix="pf-v6-test" hideSelectorColumn />)
130-
expect(screen.queryByText('.test-selector')).not.toBeInTheDocument()
131-
expect(
132-
screen.getByRole('row', {
133-
name: 'test-property',
134-
}),
135-
).toBeInTheDocument()
136-
})
124+
it('handles the case where the cssPrefix does not exist in tokensModule', () => {
125+
render(<CSSTable cssPrefix="pf-v6-nonexistent" />)
126+
expect(screen.queryByRole('grid')).toBeInTheDocument() // Table should still render, but be empty
127+
expect(screen.queryByText('.test-selector')).not.toBeInTheDocument()
128+
})
129+
130+
it('renders correctly when hideSelectorColumn is true and there are rows', () => {
131+
render(<CSSTable cssPrefix="pf-v6-test" hideSelectorColumn />)
132+
expect(screen.queryByText('.test-selector')).not.toBeInTheDocument()
133+
expect(
134+
screen.getByRole('row', {
135+
name: 'test-property',
136+
}),
137+
).toBeInTheDocument()
137138
})

‎src/pages/[section]/[page]/[...tab].astro‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
---
22
import { getCollection, render } from 'astro:content'
3-
import {
4-
Title,
5-
PageSection,
6-
Content as PFContent,
7-
Stack,
8-
StackItem,
9-
} from '@patternfly/react-core'
3+
import { Title, PageSection, Stack, StackItem } from '@patternfly/react-core'
104
import MainLayout from '../../../layouts/Main.astro'
115
import { content } from '../../../content'
126
import { kebabCase } from 'change-case'

‎src/styles/global.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
box-shadow: var(--pf-t--global--box-shadow--sm);
99
}
1010

11+
.rotate-90-deg {
12+
transform: rotate(90deg);
13+
}
14+
1115
.ws-heading {
1216
position: relative;
1317
}

‎src/utils/__tests__/slugger.test.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { slugger } from '../slugger'
2+
3+
test('slugger', () => {
4+
expect(slugger("Prefixed with 'pf-v6-c-alert-group'")).toBe(
5+
'prefixed-with-pf-v6-c-alert-group',
6+
)
7+
expect(slugger(' has outer spaces ')).toBe('has-outer-spaces')
8+
expect(slugger('Multiple spaces')).toBe('multiple--spaces')
9+
expect(slugger('MiXeD CaSe')).toBe('mixed-case')
10+
expect(slugger('!@#$%^&*()')).toBe('')
11+
expect(slugger('with~tilda')).toBe('with~tilda')
12+
expect(slugger('with !@# special')).toBe('with--special')
13+
expect(slugger('page index')).toBe('page-')
14+
expect(slugger('index')).toBe('')
15+
expect(slugger('index page')).toBe('index-page')
16+
expect(slugger('')).toBe('')
17+
expect(slugger(null)).toBe('')
18+
expect(slugger(undefined)).toBe('')
19+
expect(slugger(0)).toBe('0')
20+
expect(slugger([])).toBe('')
21+
expect(slugger(true)).toBe('')
22+
expect(slugger(false)).toBe('')
23+
expect(slugger(<span>React component</span>)).toBe('')
24+
expect(slugger(<span></span>)).toBe('')
25+
expect(slugger([<span key="0">1</span>, <span key="1">2</span>])).toBe('')
26+
})

‎src/utils/slugger.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ import React from 'react'
22

33
// Should produce valid URLs and valid CSS ids
44
export const slugger = (children: React.ReactNode) => {
5-
const value = React.Children.toArray(children).join('')
5+
const value = React.Children.toArray(children)
6+
.filter((child) => typeof child === 'string' || typeof child === 'number')
7+
.join('')
68
return value
79
.toLowerCase()
810
.trim()

0 commit comments

Comments
 (0)