fix: Special chars Documentation

cypress/e2e/image_tests.cy.js

@@ -0,0 +1,136 @@
+describe("Documentation Page Images", () => {
+  const pages = [
+    { url: "/docs", name: "Install and Quick start" },
+    { url: "/docs/doc-table-instance-creation", name: "Create Table Instance" },
+    { url: "/docs/doc-adding-rows", name: "Adding Rows" },
+    { url: "/docs/doc-row-divider", name: "Row Dividers" },
+    { url: "/docs/doc-add-columns", name: "Adding Columns" },
+    { url: "/docs/doc-color", name: "Coloring" },
+    { url: "/docs/doc-sort-filter", name: "Sort and Filter" },
+    { url: "/docs/doc-alignment", name: "Alignment" },
+    { url: "/docs/doc-enable-disable-col", name: "Enable and Disable Columns" },
+    { url: "/docs/doc-computed-function", name: "Calculated Columns" },
+    { url: "/docs/doc-title", name: "Table Title" },
+    { url: "/docs/doc-column-title", name: "Column Title" },
+    { url: "/docs/doc-limit-line-width", name: "Limit Column Width" },
+    { url: "/docs/doc-border-design", name: "Border Design" },
+    { url: "/docs/doc-emojis-special-chars", name: "Special Chars and emojis" },
+    { url: "/docs/doc-render-console", name: "Render Console Output" },
+    { url: "/docs/doc-typescript", name: "Typescript" },
+    { url: "/docs/doc-cli-install-quick-start", name: "CLI Quick Start" }
+  ];
+
+  beforeEach(() => {
+    // Increase the default timeout since we're dealing with image loading
+    Cypress.config('defaultCommandTimeout', 10000);
+
+    // Intercept image requests to verify they succeed
+    cy.intercept('GET', '/img/**/*').as('imageRequest');
+  });
+
+  pages.forEach(page => {
+    it(`should load all images properly on ${page.name} page`, () => {
+      let imageRequestCount = 0;
+
+      // Count image requests
+      cy.intercept('GET', '/img/**/*', (req) => {
+        imageRequestCount++;
+        req.continue();
+      }).as('imageRequestCounter');
+
+      // Visit the page and wait for it to load
+      cy.visit(`http://localhost:3000${page.url}`, {
+        timeout: 10000,
+        retryOnStatusCodeFailure: true
+      });
+
+      // Wait for main content to be visible
+      cy.get('main', { timeout: 10000 }).should('be.visible');
+
+      // First wait for all images to be present in the DOM
+      cy.get('img', { timeout: 10000 }).should('exist');
+
+      // Get all images and verify their loading
+      cy.get('img').then($images => {
+        // Verify each image
+        cy.wrap($images).each(($img, index) => {
+          // Create a unique alias for this image
+          const imgId = `img-${index}`;
+          cy.wrap($img).as(imgId);
+
+          // Wait for the image to be loaded
+          cy.get(`@${imgId}`).should(($img) => {
+            expect($img[0].complete).to.be.true;
+            expect($img[0].naturalWidth).to.be.greaterThan(0);
+            expect($img[0].naturalHeight).to.be.greaterThan(0);
+          });
+
+          // Verify src attribute
+          cy.get(`@${imgId}`)
+            .should('have.attr', 'src')
+            .and('not.be.empty');
+        });
+      });
+
+      // Verify all image requests were successful
+      cy.get('@imageRequestCounter.all').then((interceptions) => {
+        if (interceptions.length > 0) {
+          interceptions.forEach((interception) => {
+            if (interception.response) {
+              expect([200, 304]).to.include(interception.response.statusCode);
+            } else {
+              // If there's no response, the image might be cached or loaded from a different source
+              // We've already verified the image is loaded properly above
+              cy.log(`No response for image request: ${interception.request.url}`);
+            }
+          });
+        }
+      });
+    });
+  });
+
+  it('should have proper alt text for all images', () => {
+    cy.visit(`http://localhost:3000/docs`, {
+      timeout: 10000,
+      retryOnStatusCodeFailure: true
+    });
+
+    cy.get('main', { timeout: 10000 }).should('be.visible');
+
+    cy.get('img').each(($img, index) => {
+      const imgId = `img-alt-${index}`;
+      cy.wrap($img).as(imgId);
+
+      cy.get(`@${imgId}`)
+        .should('have.attr', 'alt')
+        .and('not.be.empty');
+    });
+  });
+
+  it('should load images with correct dimensions', () => {
+    cy.visit(`http://localhost:3000/docs`, {
+      timeout: 10000,
+      retryOnStatusCodeFailure: true
+    });
+
+    cy.get('main', { timeout: 10000 }).should('be.visible');
+
+    cy.get('img').each(($img, index) => {
+      const imgId = `img-dim-${index}`;
+      cy.wrap($img).as(imgId);
+
+      cy.get(`@${imgId}`).then(($img) => {
+        const naturalWidth = $img[0].naturalWidth;
+        const naturalHeight = $img[0].naturalHeight;
+
+        // Images should have reasonable dimensions
+        expect(naturalWidth).to.be.within(50, 2000);
+        expect(naturalHeight).to.be.within(50, 2000);
+
+        // Aspect ratio should be reasonable
+        const aspectRatio = naturalWidth / naturalHeight;
+        expect(aspectRatio).to.be.within(0.1, 10);
+      });
+    });
+  });
+}); 

cypress/e2e/link_tests.cy.js

@@ -89,6 +89,19 @@ describe("Link Tests", () => {
         // Verify page content is loaded
         cy.get("main").should("exist");
         cy.get("main").should("be.visible");
+
+        // Additional checks for Special Chars and emojis page
+        if (link.text === "Special Chars and emojis") {
+          // Verify both sections are present
+          cy.contains("Special chars").should("be.visible");
+          cy.contains("Newlines in cells").should("be.visible");
+
+          // Verify code examples
+          cy.get('pre[class*="language-"]').should('have.length.at.least', 2);
+
+          // Verify screenshots
+          cy.get('img[alt="Screenshot"]').should('have.length.at.least', 2);
+        }
       });
     });
   });

cypress/e2e/page_tests.cy.js

@@ -93,6 +93,25 @@ describe("Testing Each Documentation Page", () => {
   it("Special Chars and emojis page contains correct headlines", () => {
     cy.contains("Special Chars and emojis").click();
     cy.contains("Special chars");
+
+    // Test newlines section
+    cy.contains("Newlines in cells");
+
+    // Test code examples
+    cy.contains("Multiline Text Examples");
+    cy.contains("Product description with features");
+    cy.contains("Technical specifications");
+    cy.contains("Product warning");
+
+    // Test example content
+    cy.contains("Laptop");
+    cy.contains("Smartphone");
+    cy.contains("Headphones");
+    cy.contains("Camera");
+    cy.contains("Battery Pack");
+
+    // Verify screenshot presence
+    cy.get('img[alt="Screenshot"]').should('have.length.at.least', 2);
   });
 
   it("Render Console Output page contains correct headlines", () => {

cypress/e2e/url_tests.cy.js

@@ -87,9 +87,31 @@ describe("Testing Each Documentation Page", () => {
     cy.contains("You can configure the border of the table by passing style in Table constructor");
   });
 
-  it("Special Chars and emojis page contains correct headlines", () => {
+  it("Special Chars and emojis page contains correct headlines and examples", () => {
     cy.visit("http://localhost:3000/docs/doc-emojis-special-chars");
+
+    // Test main sections
     cy.contains("Special chars");
+    cy.contains("Newlines in cells");
+
+    // Test code blocks
+    cy.get('pre[class*="language-"]').should('have.length.at.least', 2);
+
+    // Test content structure
+    cy.contains("Multiline Text Examples");
+
+    // Test example categories
+    cy.contains("Simple multiline");
+    cy.contains("Product description with features");
+    cy.contains("Long text wrapping");
+    cy.contains("Technical specifications");
+    cy.contains("Product warning");
+
+    // Test feature list
+    cy.contains("Display multi-line text in a structured way");
+    cy.contains("Show formatted content with line breaks");
+    cy.contains("Present hierarchical or grouped information");
+    cy.contains("Format long text content to fit within column width constraints");
   });
 
   it("Render Console Output page contains correct headlines", () => {

docs/doc-emojis-special-chars.md

@@ -30,3 +30,65 @@ bundle.printTable();
 ```
 
 <img alt="Screenshot" src={useBaseUrl('img/examples/doc-emojis-special-chars/screenshot.png')}/>
+
+## Newlines in cells
+
+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.
+
+```javascript
+const p = new Table({
+  title: 'Multiline Text Examples',
+  columns: [
+    { name: 'col1', title: 'Product', alignment: 'left',  },
+    { name: 'col2', title: 'Description', alignment: 'left', minLen: 30 },
+    { name: 'col3', title: 'Price', alignment: 'right' }
+  ]
+});
+
+// Simple multiline
+p.addRow({ 
+  col1: 'Laptop',
+  col2: 'Line 1\nLine 2',  // Basic multiline
+  col3: '$999.99'
+});
+
+// Product description with features
+p.addRow({ 
+  col1: 'Smartphone',
+  col2: '- 6.7" Display\n- 256GB Storage\n- 5G Ready',  // Bullet points
+  col3: '$799.99'
+});
+
+// Long text wrapping
+p.addRow({ 
+  col1: 'Headphones',
+  col2: 'Wireless noise cancelling\nBluetooth 5.0\n40h battery life',
+  col3: '$249.99'
+});
+
+// Technical specifications
+p.addRow({ 
+  col1: 'Camera',
+  col2: 'Resolution: 48MP\nZoom: 10x Optical\nISO: 100-6400',
+  col3: '$1,299.99'
+});
+
+// Product warning
+p.addRow({ 
+  col1: 'Battery Pack',
+  col2: 'WARNING:\nDo not expose to heat\nKeep away from water',
+  col3: '$79.99'
+});
+
+p.printTable();
+```
+
+This will produce a table with multiline content in various formats:
+
+<img alt="Screenshot" src={useBaseUrl('img/examples/doc-emojis-special-chars/screenshot-newlines-2.png')}/>
+
+You can use this feature to:
+- Display multi-line text in a structured way
+- Show formatted content with line breaks
+- Present hierarchical or grouped information
+- Format long text content to fit within column width constraints