Skip to content

Commit 7fd7a19

Browse files
ayoniousayonious
authored
fix: Special chars Documentation (#112)
1 parent 9a4ba3c commit 7fd7a19

File tree

6 files changed

+253
-1
lines changed

6 files changed

+253
-1
lines changed

‎cypress/e2e/image_tests.cy.js‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
describe("Documentation Page Images", () => {
2+
const pages = [
3+
{ url: "/docs", name: "Install and Quick start" },
4+
{ url: "/docs/doc-table-instance-creation", name: "Create Table Instance" },
5+
{ url: "/docs/doc-adding-rows", name: "Adding Rows" },
6+
{ url: "/docs/doc-row-divider", name: "Row Dividers" },
7+
{ url: "/docs/doc-add-columns", name: "Adding Columns" },
8+
{ url: "/docs/doc-color", name: "Coloring" },
9+
{ url: "/docs/doc-sort-filter", name: "Sort and Filter" },
10+
{ url: "/docs/doc-alignment", name: "Alignment" },
11+
{ url: "/docs/doc-enable-disable-col", name: "Enable and Disable Columns" },
12+
{ url: "/docs/doc-computed-function", name: "Calculated Columns" },
13+
{ url: "/docs/doc-title", name: "Table Title" },
14+
{ url: "/docs/doc-column-title", name: "Column Title" },
15+
{ url: "/docs/doc-limit-line-width", name: "Limit Column Width" },
16+
{ url: "/docs/doc-border-design", name: "Border Design" },
17+
{ url: "/docs/doc-emojis-special-chars", name: "Special Chars and emojis" },
18+
{ url: "/docs/doc-render-console", name: "Render Console Output" },
19+
{ url: "/docs/doc-typescript", name: "Typescript" },
20+
{ url: "/docs/doc-cli-install-quick-start", name: "CLI Quick Start" }
21+
];
22+
23+
beforeEach(() => {
24+
// Increase the default timeout since we're dealing with image loading
25+
Cypress.config('defaultCommandTimeout', 10000);
26+
27+
// Intercept image requests to verify they succeed
28+
cy.intercept('GET', '/img/**/*').as('imageRequest');
29+
});
30+
31+
pages.forEach(page => {
32+
it(`should load all images properly on ${page.name} page`, () => {
33+
let imageRequestCount = 0;
34+
35+
// Count image requests
36+
cy.intercept('GET', '/img/**/*', (req) => {
37+
imageRequestCount++;
38+
req.continue();
39+
}).as('imageRequestCounter');
40+
41+
// Visit the page and wait for it to load
42+
cy.visit(`http://localhost:3000${page.url}`, {
43+
timeout: 10000,
44+
retryOnStatusCodeFailure: true
45+
});
46+
47+
// Wait for main content to be visible
48+
cy.get('main', { timeout: 10000 }).should('be.visible');
49+
50+
// First wait for all images to be present in the DOM
51+
cy.get('img', { timeout: 10000 }).should('exist');
52+
53+
// Get all images and verify their loading
54+
cy.get('img').then($images => {
55+
// Verify each image
56+
cy.wrap($images).each(($img, index) => {
57+
// Create a unique alias for this image
58+
const imgId = `img-${index}`;
59+
cy.wrap($img).as(imgId);
60+
61+
// Wait for the image to be loaded
62+
cy.get(`@${imgId}`).should(($img) => {
63+
expect($img[0].complete).to.be.true;
64+
expect($img[0].naturalWidth).to.be.greaterThan(0);
65+
expect($img[0].naturalHeight).to.be.greaterThan(0);
66+
});
67+
68+
// Verify src attribute
69+
cy.get(`@${imgId}`)
70+
.should('have.attr', 'src')
71+
.and('not.be.empty');
72+
});
73+
});
74+
75+
// Verify all image requests were successful
76+
cy.get('@imageRequestCounter.all').then((interceptions) => {
77+
if (interceptions.length > 0) {
78+
interceptions.forEach((interception) => {
79+
if (interception.response) {
80+
expect([200, 304]).to.include(interception.response.statusCode);
81+
} else {
82+
// If there's no response, the image might be cached or loaded from a different source
83+
// We've already verified the image is loaded properly above
84+
cy.log(`No response for image request: ${interception.request.url}`);
85+
}
86+
});
87+
}
88+
});
89+
});
90+
});
91+
92+
it('should have proper alt text for all images', () => {
93+
cy.visit(`http://localhost:3000/docs`, {
94+
timeout: 10000,
95+
retryOnStatusCodeFailure: true
96+
});
97+
98+
cy.get('main', { timeout: 10000 }).should('be.visible');
99+
100+
cy.get('img').each(($img, index) => {
101+
const imgId = `img-alt-${index}`;
102+
cy.wrap($img).as(imgId);
103+
104+
cy.get(`@${imgId}`)
105+
.should('have.attr', 'alt')
106+
.and('not.be.empty');
107+
});
108+
});
109+
110+
it('should load images with correct dimensions', () => {
111+
cy.visit(`http://localhost:3000/docs`, {
112+
timeout: 10000,
113+
retryOnStatusCodeFailure: true
114+
});
115+
116+
cy.get('main', { timeout: 10000 }).should('be.visible');
117+
118+
cy.get('img').each(($img, index) => {
119+
const imgId = `img-dim-${index}`;
120+
cy.wrap($img).as(imgId);
121+
122+
cy.get(`@${imgId}`).then(($img) => {
123+
const naturalWidth = $img[0].naturalWidth;
124+
const naturalHeight = $img[0].naturalHeight;
125+
126+
// Images should have reasonable dimensions
127+
expect(naturalWidth).to.be.within(50, 2000);
128+
expect(naturalHeight).to.be.within(50, 2000);
129+
130+
// Aspect ratio should be reasonable
131+
const aspectRatio = naturalWidth / naturalHeight;
132+
expect(aspectRatio).to.be.within(0.1, 10);
133+
});
134+
});
135+
});
136+
});

‎cypress/e2e/link_tests.cy.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,19 @@ describe("Link Tests", () => {
8989
// Verify page content is loaded
9090
cy.get("main").should("exist");
9191
cy.get("main").should("be.visible");
92+
93+
// Additional checks for Special Chars and emojis page
94+
if (link.text === "Special Chars and emojis") {
95+
// Verify both sections are present
96+
cy.contains("Special chars").should("be.visible");
97+
cy.contains("Newlines in cells").should("be.visible");
98+
99+
// Verify code examples
100+
cy.get('pre[class*="language-"]').should('have.length.at.least', 2);
101+
102+
// Verify screenshots
103+
cy.get('img[alt="Screenshot"]').should('have.length.at.least', 2);
104+
}
92105
});
93106
});
94107
});

‎cypress/e2e/page_tests.cy.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,25 @@ describe("Testing Each Documentation Page", () => {
9393
it("Special Chars and emojis page contains correct headlines", () => {
9494
cy.contains("Special Chars and emojis").click();
9595
cy.contains("Special chars");
96+
97+
// Test newlines section
98+
cy.contains("Newlines in cells");
99+
100+
// Test code examples
101+
cy.contains("Multiline Text Examples");
102+
cy.contains("Product description with features");
103+
cy.contains("Technical specifications");
104+
cy.contains("Product warning");
105+
106+
// Test example content
107+
cy.contains("Laptop");
108+
cy.contains("Smartphone");
109+
cy.contains("Headphones");
110+
cy.contains("Camera");
111+
cy.contains("Battery Pack");
112+
113+
// Verify screenshot presence
114+
cy.get('img[alt="Screenshot"]').should('have.length.at.least', 2);
96115
});
97116

98117
it("Render Console Output page contains correct headlines", () => {

‎cypress/e2e/url_tests.cy.js‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,9 +87,31 @@ describe("Testing Each Documentation Page", () => {
8787
cy.contains("You can configure the border of the table by passing style in Table constructor");
8888
});
8989

90-
it("Special Chars and emojis page contains correct headlines", () => {
90+
it("Special Chars and emojis page contains correct headlines and examples", () => {
9191
cy.visit("http://localhost:3000/docs/doc-emojis-special-chars");
92+
93+
// Test main sections
9294
cy.contains("Special chars");
95+
cy.contains("Newlines in cells");
96+
97+
// Test code blocks
98+
cy.get('pre[class*="language-"]').should('have.length.at.least', 2);
99+
100+
// Test content structure
101+
cy.contains("Multiline Text Examples");
102+
103+
// Test example categories
104+
cy.contains("Simple multiline");
105+
cy.contains("Product description with features");
106+
cy.contains("Long text wrapping");
107+
cy.contains("Technical specifications");
108+
cy.contains("Product warning");
109+
110+
// Test feature list
111+
cy.contains("Display multi-line text in a structured way");
112+
cy.contains("Show formatted content with line breaks");
113+
cy.contains("Present hierarchical or grouped information");
114+
cy.contains("Format long text content to fit within column width constraints");
93115
});
94116

95117
it("Render Console Output page contains correct headlines", () => {

‎docs/doc-emojis-special-chars.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,3 +30,65 @@ bundle.printTable();
3030
```
3131

3232
<img alt="Screenshot" src={useBaseUrl('img/examples/doc-emojis-special-chars/screenshot.png')}/>
33+
34+
## Newlines in cells
35+
36+
The library properly handles newline characters (`\n`) in table cells. When a cell contains newlines, the content will be displayed on multiple lines while maintaining the table structure.
37+
38+
```javascript
39+
const p = new Table({
40+
title: 'Multiline Text Examples',
41+
columns: [
42+
{ name: 'col1', title: 'Product', alignment: 'left', },
43+
{ name: 'col2', title: 'Description', alignment: 'left', minLen: 30 },
44+
{ name: 'col3', title: 'Price', alignment: 'right' }
45+
]
46+
});
47+
48+
// Simple multiline
49+
p.addRow({
50+
col1: 'Laptop',
51+
col2: 'Line 1\nLine 2', // Basic multiline
52+
col3: '$999.99'
53+
});
54+
55+
// Product description with features
56+
p.addRow({
57+
col1: 'Smartphone',
58+
col2: '- 6.7" Display\n- 256GB Storage\n- 5G Ready', // Bullet points
59+
col3: '$799.99'
60+
});
61+
62+
// Long text wrapping
63+
p.addRow({
64+
col1: 'Headphones',
65+
col2: 'Wireless noise cancelling\nBluetooth 5.0\n40h battery life',
66+
col3: '$249.99'
67+
});
68+
69+
// Technical specifications
70+
p.addRow({
71+
col1: 'Camera',
72+
col2: 'Resolution: 48MP\nZoom: 10x Optical\nISO: 100-6400',
73+
col3: '$1,299.99'
74+
});
75+
76+
// Product warning
77+
p.addRow({
78+
col1: 'Battery Pack',
79+
col2: 'WARNING:\nDo not expose to heat\nKeep away from water',
80+
col3: '$79.99'
81+
});
82+
83+
p.printTable();
84+
```
85+
86+
This will produce a table with multiline content in various formats:
87+
88+
<img alt="Screenshot" src={useBaseUrl('img/examples/doc-emojis-special-chars/screenshot-newlines-2.png')}/>
89+
90+
You can use this feature to:
91+
- Display multi-line text in a structured way
92+
- Show formatted content with line breaks
93+
- Present hierarchical or grouped information
94+
- Format long text content to fit within column width constraints

‎static/img/examples/doc-emojis-special-chars/screenshot-newlines-2.png‎

158 KB
Loading

0 commit comments

Comments
 (0)