Improve documentation

lint/src/rules/html/themed-component-usages.ts

@@ -93,6 +93,7 @@ export const tests = {
   plugin: info.name,
   valid: [
     {
+      name: 'use no-prefix selectors in HTML templates',
       code: `
 <ds-test-themeable/>
 <ds-test-themeable></ds-test-themeable>
@@ -100,6 +101,7 @@ export const tests = {
         `,
     },
     {
+      name: 'use no-prefix selectors in TypeScript templates',
       code: `
 @Component({
   template: '<ds-test-themeable></ds-test-themeable>'
@@ -109,6 +111,7 @@ class Test {
         `,
     },
     {
+      name: 'use no-prefix selectors in TypeScript test templates',
       filename: fixture('src/test.spec.ts'),
       code: `
 @Component({
@@ -119,6 +122,7 @@ class Test {
         `,
     },
     {
+      name: 'base selectors are also allowed in TypeScript test templates',
       filename: fixture('src/test.spec.ts'),
       code: `
 @Component({
@@ -131,6 +135,7 @@ class Test {
   ],
   invalid: [
     {
+      name: 'themed override selectors are not allowed in HTML templates',
       code: `
 <ds-themed-test-themeable/>
 <ds-themed-test-themeable></ds-themed-test-themeable>
@@ -154,6 +159,7 @@ class Test {
         `,
     },
     {
+      name: 'base selectors are not allowed in HTML templates',
       code: `
 <ds-base-test-themeable/>
 <ds-base-test-themeable></ds-base-test-themeable>

lint/src/rules/ts/themed-component-classes.ts

@@ -45,7 +45,7 @@ export const info = {
     messages: {
       [Message.NOT_STANDALONE]: 'Themeable components must be standalone',
       [Message.NOT_STANDALONE_IMPORTS_BASE]: 'Themeable component wrapper classes must be standalone and import the base class',
-      [Message.WRAPPER_IMPORTS_BASE]: 'Themed component wrapper classes must import the base class',
+      [Message.WRAPPER_IMPORTS_BASE]: 'Themed component wrapper classes must only import the base class',
     },
   },
   defaultOptions: [],

lint/src/rules/ts/themed-component-selectors.ts

@@ -48,8 +48,8 @@ Unit tests are exempt from this rule, because they may redefine components using
     schema: [],
     fixable: 'code',
     messages: {
-      [Message.BASE]: 'Unthemed version of themeable components should have a selector starting with \'ds-base-\'',
+      [Message.BASE]: 'Unthemed version of themeable component should have a selector starting with \'ds-base-\'',
-      [Message.WRAPPER]: 'Themed component wrapper of themeable components shouldn\'t have a selector starting with \'ds-themed-\'',
+      [Message.WRAPPER]: 'Themed component wrapper of themeable component shouldn\'t have a selector starting with \'ds-themed-\'',
       [Message.THEMED]: 'Theme override of themeable component should have a selector starting with \'ds-themed-\'',
     },
   },

lint/src/rules/ts/themed-component-usages.ts

@@ -242,7 +242,7 @@ export class Something {
       filename: fixture('src/app/test/test.component.spec.ts'),
       code: `
 By.css('ds-themeable');
-By.Css('#test > ds-themeable > #nest');
+By.css('#test > ds-themeable > #nest');
         `,
     },
     {
@@ -250,7 +250,7 @@ By.Css('#test > ds-themeable > #nest');
       filename: fixture('src/app/test/test.component.cy.ts'),
       code: `
 By.css('ds-themeable');
-By.Css('#test > ds-themeable > #nest');
+By.css('#test > ds-themeable > #nest');
         `,
     },
   ],

lint/src/util/templates/index.ejs

@@ -1,5 +1,5 @@
 [DSpace ESLint plugins](../../../lint/README.md) > <%= plugin.language %> rules
-
+_______
 <% rules.forEach(rule => { %>
-- [`<%= plugin.name %>/<%= rule.name %>`](./rules/<%= rule.name %>.md)<% if (rule.meta?.docs?.description) {%>: <%= rule.meta.docs.description.split('\n')[0] %><% }%>
+- [`<%= plugin.name %>/<%= rule.name %>`](./rules/<%= rule.name %>.md)<% if (rule.meta?.docs?.description) {%>: <%= rule.meta.docs.description.split('\n')[0].trim() -%><% }-%>
 <% }) %>

lint/src/util/templates/rule.ejs

@@ -12,25 +12,37 @@ _______
 <% if (tests.valid) {%>
 #### Valid code
     <% tests.valid.forEach(test => { %>
+##### <%= test.name !== undefined ? test.name : 'UNNAMED' %>
         <% if (test.filename) { %>
 Filename: `<%- test.filename %>`
         <% } %>
-```
+```<%- plugin.language.toLowerCase() %>
 <%- test.code.trim() %>
 ```
     <% }) %>
 <% } %>
 
 <% if (tests.invalid) {%>
-#### Invalid code
+#### Invalid code <%= rule.meta.fixable ? ' & automatic fixes' : '' %>
     <% tests.invalid.forEach(test => { %>
-
+##### <%= test.name !== undefined ? test.name : 'UNNAMED' %>
         <% if (test.filename) { %>
 Filename: `<%- test.filename %>`
         <% } %>
-```
+```<%- plugin.language.toLowerCase() %>
 <%- test.code.trim() %>
 ```
-
+Will produce the following error(s):
+```
+<% for (const error of test.errors) { -%>
+<%- rule.meta.messages[error.messageId] %>
+<% } -%>
+```
+        <% if (test.output) { %>
+Result of `yarn lint --fix`:
+```<%- plugin.language.toLowerCase() %>
+<%- test.output.trim() %>
+```
+        <% } %>
     <% }) %>
 <% } %>