Skip to content

Commit 199d426

Browse files
lamATnginxlamATnginx
committed
Cards: Add tests
1 parent 01e57ef commit 199d426

File tree

6 files changed

+144
-41
lines changed

6 files changed

+144
-41
lines changed

‎assets/css/v2/style.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1483,6 +1483,11 @@ h6:has(a):hover {
14831483
flex-direction: column;
14841484
gap: 0.5rem;
14851485
margin-bottom: 1rem;
1486+
order: 2;
1487+
1488+
&.featured-card {
1489+
order: 1;
1490+
}
14861491

14871492
.card-header {
14881493
display: flex;

‎exampleSite/content/test-product/cards/permitted.md‎

Lines changed: 61 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,18 @@ The structure of a card looks like the following:
1616
```
1717

1818
and will render as the following:
19-
{{<card-layout >}}
20-
{{<card-section>}}
21-
{{<card title="SOME_TITLE">}}
22-
SOME CONTENT
23-
{{</card >}}
24-
{{</card-section>}}
25-
{{</card-layout >}}
19+
<div data-testid="cards-test__basic">
20+
{{<card-layout >}}
21+
{{<card-section>}}
22+
{{<card title="SOME_TITLE">}}
23+
SOME CONTENT
24+
{{</card >}}
25+
{{</card-section>}}
26+
{{</card-layout >}}
27+
</div>
2628

2729
### Params
28-
To support customization, there are also some params you can add to the shortcode `<card>` such as `title`, `titleUrl`, `icon`, `brandIcon`, `isFeatured`, `isFullSize`.
30+
To support customization, there are also some params you can add to the shortcode `<card>` such as `title`, `titleUrl`, `icon`, `brandIcon`, `isFeaturedCard`, `isFullSize`.
2931

3032
* `title` - Title of the card.
3133
<br>
@@ -36,8 +38,8 @@ To support customization, there are also some params you can add to the shortcod
3638
* `brandIcon` - Custom icon using image from `nginx-hugo-theme/static/images/icons`.
3739
* Usage: `<card brandIcon="NGINX-App-Protect-WAF-product-icon"...>`
3840
<br>
39-
* `isFeatured` - Boolean indicating whether or not the card should be the first one and full size. By default, false.
40-
* Usage: `<card isFeatured="true"...>`
41+
* `isFeaturedCard` - Boolean indicating whether or not the card should be the first one and full size. By default, false.
42+
* Usage: `<card isFeaturedCard="true"...>`
4143
<br>
4244
* `isFullSize` - Boolean indicating whether or not the card should be full size. By default, cards are half sized.
4345
* Usage: `<card isFullSize="true"...>`
@@ -64,30 +66,55 @@ As you can see from the above example in 'General usage', it renders as a plain
6466
</card-layout >
6567
```
6668
and will render as the following:
67-
{{<card-layout >}}
68-
{{<card-section showAsCards="true">}}
69-
{{<card title="SOME_TITLE">}}
70-
SOME CONTENT
71-
{{</card >}}
72-
{{</card-section>}}
73-
{{</card-layout >}}
69+
<div data-testid="cards-test__showAsCards">
70+
{{<card-layout >}}
71+
{{<card-section showAsCards="true">}}
72+
{{<card title="SOME_TITLE">}}
73+
SOME CONTENT
74+
{{</card >}}
75+
{{</card-section>}}
76+
{{</card-layout >}}
77+
</div>
7478

75-
## Featured Cards
79+
## Featured Section
7680
Denoted by the param `isFeaturedSection` in the shortcode `<card-layout>`, this block of cards can contain only up to three cards.
7781

78-
{{<card-layout >}}
79-
{{<card-section showAsCards="true" isFeaturedSection="true">}}
80-
{{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
81-
All shortcodes in one page.
82-
{{</card >}}
83-
{{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
84-
Examples for call-out shortcode
85-
{{</card >}}
86-
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
87-
Examples for codeblock shortcode
88-
{{</card >}}
89-
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
90-
Examples for codeblock shortcode
91-
{{</card >}}
92-
{{</card-section>}}
93-
{{</card-layout >}}
82+
<div data-testid="cards-test__featuredSection">
83+
{{<card-layout >}}
84+
{{<card-section showAsCards="true" isFeaturedSection="true">}}
85+
{{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
86+
All shortcodes in one page.
87+
{{</card >}}
88+
{{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
89+
Examples for call-out shortcode
90+
{{</card >}}
91+
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
92+
Examples for codeblock shortcode
93+
{{</card >}}
94+
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
95+
Examples for codeblock shortcode
96+
{{</card >}}
97+
{{</card-section>}}
98+
{{</card-layout >}}
99+
</div>
100+
101+
## Featured Card
102+
Denoted by the param `isFeaturedCard` in the shortcode `<card>`, this will push the card up to very top of the section and make it full length.
103+
<div data-testid="cards-test__featuredCard">
104+
{{<card-layout >}}
105+
{{<card-section showAsCards="true">}}
106+
{{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
107+
All shortcodes in one page.
108+
{{</card >}}
109+
{{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
110+
Examples for call-out shortcode
111+
{{</card >}}
112+
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code" isFeaturedCard="true">}}
113+
Examples for codeblock shortcode
114+
{{</card >}}
115+
{{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
116+
Examples for codeblock shortcode
117+
{{</card >}}
118+
{{</card-section>}}
119+
{{</card-layout >}}
120+
</div>

‎layouts/shortcodes/card-layout.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11
<!-- Render the main content first with modifications, then render the custom content -->
2-
<div class="card-layout">{{- .Inner | markdownify -}}</div>
2+
<div class="card-layout" data-testid="card-layout">{{- .Inner | markdownify -}}</div>

‎layouts/shortcodes/card-section.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@
2222

2323
{{- /* Validate that the parent is card-layout */ -}}
2424
{{ if eq .Parent.Name "card-layout"}}
25-
<div class="card-section {{if eq $isFeaturedSection "true"}}featured-section{{ end }}">
25+
<div class="card-section {{if eq $isFeaturedSection "true"}}featured-section{{ end }}" data-testid="{{if eq $isFeaturedSection "true"}}card-section__featured-section{{else}}card-section{{ end }}">
2626
{{- if $title -}}
2727
<strong class="card-section-title">{{- $title -}}</strong>
28-
<div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }}{{ end }}">{{- .Inner -}}</div>
28+
<div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }}{{ end }}" data-testid="{{ if eq $showAsCards "true" }}card-section-content__card-grid{{else}}card-section-content{{ end }}">{{- .Inner -}}</div>
2929
{{ else }}
30-
<div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }}{{ end }}">{{ .Inner }}</div>
30+
<div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }}{{ end }}" data-testid="{{ if eq $showAsCards "true" }}card-section-content__card-grid{{else}}card-section-content{{ end }}">{{ .Inner }}</div>
3131
{{ end }}
3232
</div>
3333
{{ else }}

‎layouts/shortcodes/card.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,12 @@
22
{{- $titleUrl := .Get "titleUrl" | default "/" -}}
33
{{- $icon := .Get "icon" | default "book-open" -}}
44
{{- $brandIcon := .Get "brandIcon" -}}
5-
{{- $isFeaturedParam := .Get "isFeatured" | default "false" }}
5+
{{- $isFeaturedParam := .Get "isFeaturedCard" | default "false" }}
66
{{- $isFullSizeParam := .Get "isFullSize" | default "false" -}}
77

88
{{- /* Validate the parameter strictly */ -}}
99
{{- if not (in (slice "true" "false") $isFeaturedParam) -}}
10-
{{- warnf "The '<card>' Shortcode parameter 'isFeatured' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFeaturedParam -}}
10+
{{- warnf "The '<card>' Shortcode parameter 'isFeaturedCard' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFeaturedParam -}}
1111
{{- end -}}
1212
{{- $isFeatured := cond (eq $isFeaturedParam "true") "true" "false" -}}
1313

@@ -26,7 +26,7 @@
2626

2727
{{- /* Validate that the parent is card-section and under 3 cards */ -}}
2828
{{- if (eq .Parent.Name "card-section") -}}
29-
<div class="card{{ if eq $isFeatured "true" }} featured-card{{ end }}" data-grid="{{ $dataGrid }}">
29+
<div class="card{{ if eq $isFeatured "true" }} featured-card{{ end }}" data-grid="{{ $dataGrid }}" data-testid="{{ if eq $isFeatured "true" }}card__featured-card{{else}}card{{ end }}">
3030
{{- if $title -}}
3131
<div class="card-header">
3232
{{- if $brandIcon -}}

‎tests/src/cards.spec.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import { expect, test } from '@playwright/test';
2+
3+
test.describe('Testing for cards shortcode', () => {
4+
test.beforeEach(async ({ page }) => {
5+
const cardsUrl = 'test-product/cards/permitted';
6+
await page.goto(`/${cardsUrl}`);
7+
});
8+
9+
test('should test basic section', async ({ page }) => {
10+
const section = await page.locator('data-testid=cards-test__basic');
11+
const basicCode = await section.locator('data-testid=card-section-content');
12+
const showAsCardCode = await section.locator(
13+
'data-testid=card-section-content__card-grid'
14+
);
15+
16+
expect(await basicCode.count()).toBeTruthy();
17+
expect(await showAsCardCode.count()).toBe(0);
18+
});
19+
20+
test('should test showAsCard section', async ({ page }) => {
21+
const section = await page.locator('data-testid=cards-test__showAsCards');
22+
const showAsCardCode = await section.locator(
23+
'data-testid=card-section-content__card-grid'
24+
);
25+
26+
expect(await showAsCardCode.count()).toBeTruthy();
27+
});
28+
29+
test('should test featured section', async ({ page }) => {
30+
const section = await page.locator(
31+
'data-testid=cards-test__featuredSection'
32+
);
33+
const featuredSection = await section.locator(
34+
'data-testid=card-section__featured-section'
35+
);
36+
const cards = await (
37+
await featuredSection.locator('data-testid=card')
38+
).all();
39+
40+
// Test featured section exists AND there are less than or equal to 3 cards.
41+
expect(await featuredSection.count()).toBeTruthy();
42+
const visibleCards = [];
43+
for (const card of cards) {
44+
if (await card.isVisible()) {
45+
visibleCards.push(card);
46+
}
47+
}
48+
expect(visibleCards.length).toBeLessThanOrEqual(3);
49+
});
50+
51+
test('should test featured card', async ({ page }) => {
52+
const section = await page.locator('data-testid=cards-test__featuredCard');
53+
const featuredCard = await section.locator(
54+
'data-testid=card__featured-card'
55+
);
56+
const cards = await (await section.locator('data-testid=card')).all();
57+
const featuredCardOrder = await featuredCard.evaluate((el) => {
58+
return window.getComputedStyle(el).getPropertyValue('order');
59+
});
60+
61+
// Test featured card exist AND is the first one in the order
62+
expect(await featuredCard.count()).toBeTruthy();
63+
expect(featuredCardOrder).toBe('1');
64+
for (const card of cards) {
65+
const order = await card.evaluate((el) => {
66+
return window.getComputedStyle(el).getPropertyValue('order');
67+
});
68+
expect(order).toBe('2');
69+
}
70+
});
71+
});

0 commit comments

Comments
 (0)