Add custom e2e highlight tests

Author: sylhare

cypress/e2e/simple-jekyll-search.cy.ts

@@ -60,4 +60,45 @@ describe('Simple Jekyll Search', () => {
         .should('exist');
     });
   });
+
+  describe('Highlighting Middleware', () => {
+    it('should highlight search terms in results', () => {
+      cy.get('#search-input')
+        .type('Lorem');
+
+      cy.get('#results-container')
+        .should('be.visible');
+
+      cy.get('#results-container .search-desc .search-highlight')
+        .should('exist')
+        .should('have.css', 'background-color', 'rgb(255, 255, 0)');
+
+      cy.get('#results-container .search-desc .search-highlight')
+        .first()
+        .should('contain', 'Lorem');
+    });
+
+    it('should highlight multiple occurrences', () => {
+      cy.get('#search-input')
+        .type('test');
+
+      cy.get('#results-container')
+        .should('be.visible');
+
+      cy.get('#results-container .search-desc .search-highlight')
+        .should('have.length.at.least', 1);
+    });
+
+    it('should escape HTML in search results', () => {
+      cy.get('#search-input')
+        .type('sed');
+
+      cy.get('#results-container')
+        .should('be.visible');
+
+      cy.get('#results-container .search-desc')
+        .should('exist')
+        .and('not.contain', '<script>');
+    });
+  });
 });

docs/_includes/search.html

@@ -7,11 +7,17 @@
   <script src="{{ '/assets/js/simple-jekyll-search.min.js' | relative_url }}"></script>
 
   <script>
+    var highlightMiddleware = window.createHighlightTemplateMiddleware({
+      className: 'search-highlight',
+      maxLength: 200
+    });
+
     window.simpleJekyllSearch = new SimpleJekyllSearch({
       searchInput: document.getElementById('search-input'),
       resultsContainer: document.getElementById('results-container'),
       json: '{{ "/assets/data/search.json" | relative_url }}',
-      searchResultTemplate: '<li><a href="{url}?query={query}" title="{desc}">{title}</a></li>',
+      searchResultTemplate: '<li><a href="{url}?query={query}">{title}</a><p class="search-desc">{content}</p></li>',
+      templateMiddleware: highlightMiddleware,
       noResultsText: 'No results found',
       limit: 10,
       strategy: 'wildcard',

docs/_sass/_custom.scss

@@ -62,4 +62,16 @@ $on-laptop:        800px;
 
 .info-text {
   margin-top: 20px;
+}
+
+.search-highlight {
+  background-color: #ffff00;
+  font-weight: bold;
+  padding: 0 2px;
+}
+
+.search-desc {
+  font-size: 0.9em;
+  color: $grey-color-dark;
+  margin: 0.3em 0;
 }