Skip to content

Commit

Permalink
test(timeline): new tests for show-secondry-ruler, hide-j-day, ruler-…
Browse files Browse the repository at this point in the history 
…position
  • Loading branch information
@micahjones13
micahjones13 committed Feb 13, 2025
1 parent 22effb2 commit be04099
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 30 deletions.
2 changes: 1 addition & 1 deletion packages/web-components/src/components/rux-timeline/rux-timeline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export class RuxTimeline {
/**
* Controls the position of the ruler. Either top, bottom or both.
*/
@Prop({ attribute: 'ruler-position' }) rulerPosition:
@Prop({ attribute: 'ruler-position', reflect: true }) rulerPosition:
| 'top'
| 'bottom'
| 'both' = 'both'
Expand Down
104 changes: 79 additions & 25 deletions packages/web-components/src/components/rux-timeline/test/timeline.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ test.describe('Timeline DST', () => {
</rux-timeline>
`
await page.setContent(template)
const rulerEl = await page.locator('rux-ruler')
const rulerEl = await page.locator('rux-ruler').first()

const days = await rulerEl.evaluate((el) => {
const rulerSpans = el.shadowRoot?.querySelectorAll('span')
Expand All @@ -26,7 +26,12 @@ test.describe('Timeline DST', () => {
return []
}
})
expect(days).toEqual(['03/11', '03/12', '03/13', '03/14'])
expect(days).toEqual([
'11 Mar/070',
'12 Mar/071',
'13 Mar/072',
'14 Mar/073',
])
})
test('it should handle DST end in UTC', async ({ page }) => {
const template = `
Expand All @@ -42,7 +47,7 @@ test.describe('Timeline DST', () => {
</rux-timeline>
`
await page.setContent(template)
const rulerEl = await page.locator('rux-ruler')
const rulerEl = await page.locator('rux-ruler').first()

const days = await rulerEl.evaluate((el) => {
const rulerSpans = el.shadowRoot?.querySelectorAll('span')
Expand All @@ -52,7 +57,12 @@ test.describe('Timeline DST', () => {
return []
}
})
expect(days).toEqual(['11/04', '11/05', '11/06', '11/07'])
expect(days).toEqual([
'04 Nov/308',
'05 Nov/309',
'06 Nov/310',
'07 Nov/311',
])
})
})

Expand All @@ -71,7 +81,7 @@ test.describe('Timeline Interval Year', () => {
</rux-timeline>
`
await page.setContent(template)
const rulerEl = await page.locator('rux-ruler')
const rulerEl = await page.locator('rux-ruler').first()

const days = await rulerEl.evaluate((el) => {
const rulerSpans = el.shadowRoot?.querySelectorAll('span')
Expand All @@ -82,11 +92,11 @@ test.describe('Timeline Interval Year', () => {
}
})
expect(days).toEqual([
'12/01/23',
'01/01/24',
'02/01',
'03/01',
'04/01',
'December',
'January',
'February',
'March',
'April',
])
})
})
Expand All @@ -106,7 +116,7 @@ test.describe('Timeline Interval Week', () => {
</rux-timeline>
`
await page.setContent(template)
const rulerEl = await page.locator('rux-ruler')
const rulerEl = await page.locator('rux-ruler').first()

const days = await rulerEl.evaluate((el) => {
const rulerSpans = el.shadowRoot?.querySelectorAll('span')
Expand Down Expand Up @@ -141,7 +151,7 @@ test.describe('Timeline Interval Week', () => {
</rux-timeline>
`
await page.setContent(template)
const rulerEl = await page.locator('rux-ruler')
const rulerEl = await page.locator('rux-ruler').first()

const days = await rulerEl.evaluate((el) => {
const rulerSpans = el.shadowRoot?.querySelectorAll('span')
Expand Down Expand Up @@ -369,13 +379,10 @@ test.describe('Timeline', () => {
})
})
test.describe('Timeline Ruler Position', () => {
test('ruler-position top renders ruler in correct place', async ({
page,
}) => {
test('ruler-position is set to both by default', async ({ page }) => {
const content = `
<div style="width: 950px; margin: auto">
<rux-timeline has-played-indicator="false" timezone="America/New_York" start="2021-02-01T00:00:00Z"
end="2021-02-03T00:00:00Z" interval="hour" zoom="2" ruler-position="top">
<rux-timeline timezone="America/New_York" start="2021-02-01T00:00:00Z"
end="2021-02-03T00:00:00Z" interval="hour" zoom="2">
<rux-track slot="ruler">
<rux-ruler></rux-ruler>
</rux-track>
Expand All @@ -386,16 +393,15 @@ test.describe('Timeline Ruler Position', () => {
</rux-time-region>
</rux-track>
</rux-timeline>
</div>
`
`
await page.setContent(content)

const timeline = page.locator('rux-timeline')
await expect(timeline).toHaveAttribute('ruler-position', 'top')
const classDiv = timeline.locator('rux-ruler-top')
await expect(classDiv).toBeTruthy()
await expect(timeline).toHaveAttribute('ruler-position', 'both')
const rulers = await page.locator('rux-ruler').all()
//expect rulers to have exactly 2 rux-ruler elements
expect(rulers.length).toBe(2)
})
test('ruler-position can be programatically changed', async ({ page }) => {
test('ruler-position can be programmatically changed', async ({ page }) => {
const content = `
<div style="width: 950px; margin: auto">
<rux-timeline has-played-indicator="false" timezone="America/New_York" start="2021-02-01T00:00:00Z"
Expand Down Expand Up @@ -438,6 +444,54 @@ test.describe('Timeline Ruler Position', () => {
await expect(timeline).toHaveAttribute('ruler-position', 'bottom')
})
})
test.describe('show-secondary-ruler prop', () => {
test('if show-secondary-ruler is true, then it should show the secondary ruler', async ({
page,
}) => {
const content = `
<div style="width: 950px; margin: auto">
<rux-timeline show-secondary-ruler timezone="America/New_York" start="2021-02-01T00:00:00Z"
end="2021-02-03T00:00:00Z" interval="hour" zoom="2">
<rux-track slot="ruler">
<rux-ruler></rux-ruler>
</rux-track>
</rux-timeline>
</div>
`
await page.setContent(content)
const ruler = page.locator('rux-ruler')
const secondaryRuler = ruler.locator('.ruler-new-day-display').first() //if the first one is visible, then the secondary ruler is visible
await expect(secondaryRuler).toBeVisible()
})
})

test.describe('hide-j-day prop', () => {
test('if hide-j-day is true, then it should not show the j-day', async ({
page,
}) => {
const content = `
<div style="width: 950px; margin: auto">
<rux-timeline hide-j-day timezone="America/New_York" start="2021-02-01T00:00:00Z"
end="2021-02-03T00:00:00Z" interval="hour" zoom="2" show-secondary-ruler>
<rux-track>
<div slot="label">Region 1</div>
<rux-time-region start="2021-02-01T01:00:00Z" end="2021-02-01T04:00:00Z" status="serious">
Event 1.2
</rux-time-region>
</rux-track>
<rux-track slot="ruler">
<rux-ruler></rux-ruler>
</rux-track>
</rux-timeline>
</div>
`
await page.setContent(content)
const ruler = page.locator('rux-ruler')
const secondaryRuler = ruler.locator('.ruler-new-day-display').first()
//check to see if secondary ruler has the j-day as part of it's text content. The J-Day has a leading '/', so we're checking if that's present or not.
await expect(secondaryRuler).not.toHaveText(/\/\//)
})
})

// Should throw an error when trying to set the playhead position to a date that is not within the timeline range.

Expand Down
2 changes: 0 additions & 2 deletions packages/web-components/src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,8 +150,6 @@
<rux-ruler></rux-ruler>
</rux-track>
</rux-timeline>

<div style="height: 1000px; width: 1000px"></div>
</main>
</rux-classification-marking>
<script>
Expand Down
9 changes: 7 additions & 2 deletions packages/web-components/src/stories/timeline.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export const StyledDiv = styled.div`
}
.custom-code code {
color: var(--color-text-inverse);
font-weight: 300;
}
`

Expand Down Expand Up @@ -135,7 +136,6 @@ Tracks are responsible for displaying content in horizontal lanes across the Tim
They can include **Time Regions** or the **Ruler** component.
They are composed of a label section and a time region section.

<Controls />

### Setting the Label

Expand Down Expand Up @@ -167,7 +167,6 @@ the component will throw an error and not render.

If a Time Region's start and end date falls outside of the range of the Timeline, a Time Region will be display visually as a Partial Time Region.

<Controls />

## Ruler

Expand Down Expand Up @@ -247,6 +246,12 @@ You can enable a secondary ruler to show the start of each interval. Showing the

<Canvas of={TimelineStories.ShowSecondaryRuler} />

## With Grid

You can enable a grid to show the start of each interval. To do this, add the `show-grid` prop on the timeline.

<Canvas of={TimelineStories.ShowGrid} />

## Cherry Picking

If you're already utilizing a build system that supports tree shaking and want to only import this individual component:
Expand Down

0 comments on commit be04099

Please sign in to comment.