Repository: obsidian-tasks-group/obsidian-tasks
Pull request #2439 (2023-11-22 10:42:00)

refactor: improve rendering code quality
# Description

Done by pairing with @claremacrae .

## Motivation and Context

Simplify maintenance and readability.

## How has this been tested?

Existing tests.

## Types of changes

- [x] **Refactor** (prefix: `refactor` - non-breaking change which only improves the design or structure of existing code, and making no changes to its external behaviour)
- [x] **Tests** (prefix: `test` - additions and improvements to unit tests and the smoke tests)

## Checklist

- [x] My code follows the code style of this project and passes `yarn run lint`.
- [x] My change has adequate [Unit Test coverage](https://publish.obsidian.md/tasks-contributing/Testing/About+Testing).

## Terms

- [x] My contribution follow this project's [contributing guide](https://publish.obsidian.md/tasks-contributing)
- [x] I agree to follow this project's [Code of Conduct](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/CODE_OF_CONDUCT.md)



Patch:
diff --git a/src/InlineRenderer.ts b/src/InlineRenderer.ts
index 246e9c5c..75941898 100644
--- a/src/InlineRenderer.ts
+++ b/src/InlineRenderer.ts
@@ -88,7 +88,6 @@ export class InlineRenderer {
         }
 
         const taskLineRenderer = new TaskLineRenderer({
-            textRenderer: TaskLineRenderer.obsidianMarkdownRenderer,
             obsidianComponent: childComponent,
             parentUlElement: element,
             layoutOptions: new LayoutOptions(),
diff --git a/src/QueryRenderer.ts b/src/QueryRenderer.ts
index 13e26ed3..f8023a6b 100644
--- a/src/QueryRenderer.ts
+++ b/src/QueryRenderer.ts
@@ -219,7 +219,6 @@ class QueryRenderChild extends MarkdownRenderChild {
         if (groupingAttribute && groupingAttribute.length > 0) taskList.dataset.taskGroupBy = groupingAttribute;
 
         const taskLineRenderer = new TaskLineRenderer({
-            textRenderer: TaskLineRenderer.obsidianMarkdownRenderer,
             obsidianComponent: this,
             parentUlElement: taskList,
             layoutOptions: this.query.layoutOptions,
diff --git a/src/TaskFieldRenderer.ts b/src/TaskFieldRenderer.ts
index 88e3affa..1c8f7cf9 100644
--- a/src/TaskFieldRenderer.ts
+++ b/src/TaskFieldRenderer.ts
@@ -6,9 +6,7 @@ import type { TaskLayoutComponent } from './TaskLayout';
 export type AttributesDictionary = { [key: string]: string };
 
 export class FieldLayouts {
-    private details = FieldLayoutDetails;
-
-    constructor() {}
+    private readonly details = FieldLayoutDetails;
 
     /**
      * Searches for the component among the {@link FieldLayoutDetails} and gets its data attribute
@@ -26,14 +24,22 @@ export class FieldLayouts {
     public dataAttribute(component: TaskLayoutComponent, task: Task) {
         return this.details[component].dataAttribute(component, task);
     }
+
+    /**
+     * @returns the component's CSS class describing what this component is (priority, due date etc.).
+     * @param component of the task.
+     */
+    public className(component: TaskLayoutComponent) {
+        return this.details[component].className;
+    }
 }
 
 type AttributeValueCalculator = (component: TaskLayoutComponent, task: Task) => string;
 
 export class FieldLayoutDetail {
-    readonly className: string;
-    readonly attributeName: string;
-    readonly attributeValueCalculator: AttributeValueCalculator;
+    public readonly className: string;
+    private readonly attributeName: string;
+    private readonly attributeValueCalculator: AttributeValueCalculator;
 
     public static noAttributeName = '';
     public static noAttributeValueCalculator: AttributeValueCalculator = () => {
@@ -82,8 +88,8 @@ export class FieldLayoutDetail {
      * @param attributeName if the component needs data attribute (`data-key="value"`) this is the key.
      * Otherwise, set this to {@link FieldLayoutDetail.noAttributeName}.
      *
-     * @param attributeValueCalculator And this is the value.
-     * Set to {@link FieldLayoutDetail.noAttributeValueCalculator} if shall be empty.
+     * @param attributeValueCalculator And this is the value calculator.
+     * Set to {@link FieldLayoutDetail.noAttributeValueCalculator} if the component has no data attribute.
      *
      * There is a relation between {@link attributeName} and {@link attributeValueCalculator}.
      * For a component to have the data attribute, both need to be set to values other than
@@ -123,7 +129,7 @@ export class FieldLayoutDetail {
     }
 }
 
-export const FieldLayoutDetails: { [c in TaskLayoutComponent]: FieldLayoutDetail } = {
+const FieldLayoutDetails: { [c in TaskLayoutComponent]: FieldLayoutDetail } = {
     // NEW_TASK_FIELD_EDIT_REQUIRED
     createdDate: new FieldLayoutDetail('task-created', 'taskCreated', FieldLayoutDetail.dateAttributeCalculator),
     dueDate: new FieldLayoutDetail('task-due', 'taskDue', FieldLayoutDetail.dateAttributeCalculator),
diff --git a/src/TaskLineRenderer.ts b/src/TaskLineRenderer.ts
index cde5b9b8..cbf1bda8 100644
--- a/src/TaskLineRenderer.ts
+++ b/src/TaskLineRenderer.ts
@@ -5,7 +5,7 @@ import { TASK_FORMATS, getSettings } from './Config/Settings';
 import { replaceTaskWithTasks } from './File';
 import type { Task } from './Task';
 import * as taskModule from './Task';
-import { type AttributesDictionary, FieldLayoutDetails, FieldLayouts } from './TaskFieldRenderer';
+import { type AttributesDictionary, FieldLayouts } from './TaskFieldRenderer';
 import type { LayoutOptions, TaskLayoutComponent } from './TaskLayout';
 import { TaskLayout } from './TaskLayout';
 
@@ -22,12 +22,12 @@ export type TextRenderer = (
 ) => Promise<void>;
 
 export class TaskLineRenderer {
-    textRenderer: TextRenderer;
-    obsidianComponent: Component | null;
-    parentUlElement: HTMLElement;
-    layoutOptions: LayoutOptions;
+    private readonly textRenderer: TextRenderer;
+    private readonly obsidianComponent: Component | null;
+    private readonly parentUlElement: HTMLElement;
+    private readonly layoutOptions: LayoutOptions;
 
-    static async obsidianMarkdownRenderer(
+    private static async obsidianMarkdownRenderer(
         text: string,
         element: HTMLSpanElement,
         path: string,
@@ -40,23 +40,23 @@ export class TaskLineRenderer {
     /**
      * Builds a renderer for tasks with various options.
      *
-     * @param textRenderer The renderer to be used. For live/prod rendering use {@link TaskLineRenderer.obsidianMarkdownRenderer}.
+     * @param textRenderer The optional renderer to be used. Skip this parameter for Obsidian rendering.
      * For test purposes mock renderers shall be used.
      *
      * @param obsidianComponent One of the parameters needed by `MarkdownRenderer.renderMarkdown()` Obsidian API,
-     * that is called by {@link TaskLineRenderer.obsidianMarkdownRenderer}.
+     * that is called by the Obsidian renderer. Set this to null in test code.
      *
      * @param parentUlElement HTML element where the task shall be rendered.
      *
      * @param layoutOptions See {@link LayoutOptions}.
      */
     constructor({
-        textRenderer,
+        textRenderer = TaskLineRenderer.obsidianMarkdownRenderer,
         obsidianComponent,
         parentUlElement,
         layoutOptions,
     }: {
-        textRenderer: TextRenderer;
+        textRenderer?: TextRenderer;
         obsidianComponent: Component | null;
         parentUlElement: HTMLElement;
         layoutOptions: LayoutOptions;
@@ -167,11 +167,8 @@ export class TaskLineRenderer {
                     this.addInternalClasses(component, internalSpan);
 
                     // Add the component's CSS class describing what this component is (priority, due date etc.)
-                    const fieldLayoutDetails = FieldLayoutDetails[component];
-                    if (fieldLayoutDetails) {
-                        const componentClass = [fieldLayoutDetails.className];
-                        span.classList.add(...componentClass);
-                    }
+                    const componentClass = fieldLayouts.className(component);
+                    span.classList.add(...[componentClass]);
 
                     // Add the component's attribute ('priority-medium', 'due-past-1d' etc.)
                     const componentDataAttribute = fieldLayouts.dataAttribute(component, task);


Test patch:
diff --git a/tests/TaskFieldRenderer.test.ts b/tests/TaskFieldRenderer.test.ts
index 4ffdeb43..da36c42d 100644
--- a/tests/TaskFieldRenderer.test.ts
+++ b/tests/TaskFieldRenderer.test.ts
@@ -53,15 +53,6 @@ describe('Field Layout Detail tests', () => {
             return '';
         });
         expect(fieldLayoutDetail.className).toEqual('stuff');
-        expect(fieldLayoutDetail.attributeName).toEqual('taskAttribute');
-    });
-
-    it('should calculate data attribute value', () => {
-        const fieldLayoutDetail = new FieldLayoutDetail('foo', 'bar', () => {
-            return 'someValue';
-        });
-        const attributeValue = fieldLayoutDetail.attributeValueCalculator('createdDate', new TaskBuilder().build());
-        expect(attributeValue).toEqual('someValue');
     });
 
     it('should return a data attribute', () => {
diff --git a/tests/TaskLineRenderer.test.ts b/tests/TaskLineRenderer.test.ts
index c03137ca..3a862e28 100644
--- a/tests/TaskLineRenderer.test.ts
+++ b/tests/TaskLineRenderer.test.ts
@@ -8,7 +8,7 @@ import { resetSettings, updateSettings } from '../src/Config/Settings';
 import { DateParser } from '../src/Query/DateParser';
 import type { Task } from '../src/Task';
 import { TaskRegularExpressions } from '../src/Task';
-import { type AttributesDictionary, FieldLayoutDetails } from '../src/TaskFieldRenderer';
+import { type AttributesDictionary, FieldLayouts } from '../src/TaskFieldRenderer';
 import { LayoutOptions } from '../src/TaskLayout';
 import type { TextRenderer } from '../src/TaskLineRenderer';
 import { TaskLineRenderer } from '../src/TaskLineRenderer';
@@ -19,6 +19,8 @@ import { TaskBuilder } from './TestingTools/TaskBuilder';
 jest.mock('obsidian');
 window.moment = moment;
 
+const fieldLayouts = new FieldLayouts();
+
 /**
  * Creates a dummy 'parent element' to host a task render, renders a task inside it,
  * and returns it for inspection.
@@ -57,7 +59,7 @@ function getOtherLayoutComponents(parentElement: HTMLElement): string[] {
     const textSpan = getTextSpan(parentElement);
     const components: string[] = [];
     for (const childSpan of Array.from(textSpan.children)) {
-        if (childSpan.classList.contains(FieldLayoutDetails.description.className)) continue;
+        if (childSpan.classList.contains(fieldLayouts.className('description'))) continue;
         if (childSpan?.textContent) components.push(childSpan.textContent);
     }
     return components;
@@ -350,19 +352,19 @@ describe('task line rendering', () => {
         await testComponentClasses(
             '- [ ] Full task ⏫ 📅 2022-07-02 ⏳ 2022-07-03 🛫 2022-07-04 🔁 every day',
             {},
-            FieldLayoutDetails.priority.className,
+            fieldLayouts.className('priority'),
             { taskPriority: 'high' },
         );
         await testComponentClasses(
             '- [ ] Full task 🔼 📅 2022-07-02 ⏳ 2022-07-03 🛫 2022-07-04 🔁 every day',
             {},
-            FieldLayoutDetails.priority.className,
+            fieldLayouts.className('priority'),
             { taskPriority: 'medium' },
         );
         await testComponentClasses(
             '- [ ] Full task 🔽 📅 2022-07-02 ⏳ 2022-07-03 🛫 2022-07-04 🔁 every day',
             {},
-            FieldLayoutDetails.priority.className,
+            fieldLayouts.className('priority'),
             { taskPriority: 'low' },
         );
     });
@@ -371,174 +373,174 @@ describe('task line rendering', () => {
         await testComponentClasses(
             '- [ ] Full task ⏫ 📅 2022-07-02 ⏳ 2022-07-03 🛫 2022-07-04 🔁 every day',
             {},
-            FieldLayoutDetails.recurrenceRule.className,
+            fieldLayouts.className('recurrenceRule'),
             {},
         );
     });
 
     it('adds a correct "today" CSS class to dates', async () => {
         const today = DateParser.parseDate('today').format(TaskRegularExpressions.dateFormat);
-        await testComponentClasses(`- [ ] Full task ⏫ ➕ ${today}`, {}, FieldLayoutDetails.createdDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ ➕ ${today}`, {}, fieldLayouts.className('createdDate'), {
             taskCreated: 'today',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ 📅 ${today}`, {}, FieldLayoutDetails.dueDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ 📅 ${today}`, {}, fieldLayouts.className('dueDate'), {
             taskDue: 'today',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ ⏳ ${today}`, {}, FieldLayoutDetails.scheduledDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ ⏳ ${today}`, {}, fieldLayouts.className('scheduledDate'), {
             taskScheduled: 'today',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ 🛫 ${today}`, {}, FieldLayoutDetails.startDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ 🛫 ${today}`, {}, fieldLayouts.className('startDate'), {
             taskStart: 'today',
         });
-        await testComponentClasses(`- [x] Done task ✅ ${today}`, {}, FieldLayoutDetails.doneDate.className, {
+        await testComponentClasses(`- [x] Done task ✅ ${today}`, {}, fieldLayouts.className('doneDate'), {
             taskDone: 'today',
         });
     });
 
     it('adds a correct "future-1d" CSS class to dates', async () => {
         const future = DateParser.parseDate('tomorrow').format(TaskRegularExpressions.dateFormat);
-        await testComponentClasses(`- [ ] Full task ⏫ ➕ ${future}`, {}, FieldLayoutDetails.createdDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ ➕ ${future}`, {}, fieldLayouts.className('createdDate'), {
             taskCreated: 'future-1d',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ 📅 ${future}`, {}, FieldLayoutDetails.dueDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ 📅 ${future}`, {}, fieldLayouts.className('dueDate'), {
             taskDue: 'future-1d',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ ⏳ ${future}`, {}, FieldLayoutDetails.scheduledDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ ⏳ ${future}`, {}, fieldLayouts.className('scheduledDate'), {
             taskScheduled: 'future-1d',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ 🛫 ${future}`, {}, FieldLayoutDetails.startDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ 🛫 ${future}`, {}, fieldLayouts.className('startDate'), {
             taskStart: 'future-1d',
         });
-        await testComponentClasses(`- [x] Done task ✅ ${future}`, {}, FieldLayoutDetails.doneDate.className, {
+        await testComponentClasses(`- [x] Done task ✅ ${future}`, {}, fieldLayouts.className('doneDate'), {
             taskDone: 'future-1d',
         });
     });
 
     it('adds a correct "future-7d" CSS class to dates', async () => {
         const future = DateParser.parseDate('in 7 days').format(TaskRegularExpressions.dateFormat);
-        await testComponentClasses(`- [ ] Full task ⏫ ➕ ${future}`, {}, FieldLayoutDetails.createdDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ ➕ ${future}`, {}, fieldLayouts.className('createdDate'), {
             taskCreated: 'future-7d',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ 📅 ${future}`, {}, FieldLayoutDetails.dueDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ 📅 ${future}`, {}, fieldLayouts.className('dueDate'), {
             taskDue: 'future-7d',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ ⏳ ${future}`, {}, FieldLayoutDetails.scheduledDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ ⏳ ${future}`, {}, fieldLayouts.className('scheduledDate'), {
             taskScheduled: 'future-7d',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ 🛫 ${future}`, {}, FieldLayoutDetails.startDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ 🛫 ${future}`, {}, fieldLayouts.className('startDate'), {
             taskStart: 'future-7d',
         });
-        await testComponentClasses(`- [x] Done task ✅ ${future}`, {}, FieldLayoutDetails.doneDate.className, {
+        await testComponentClasses(`- [x] Done task ✅ ${future}`, {}, fieldLayouts.className('doneDate'), {
             taskDone: 'future-7d',
         });
     });
 
     it('adds a correct "past-1d" CSS class to dates', async () => {
         const past = DateParser.parseDate('yesterday').format(TaskRegularExpressions.dateFormat);
-        await testComponentClasses(`- [ ] Full task ⏫ ➕ ${past}`, {}, FieldLayoutDetails.createdDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ ➕ ${past}`, {}, fieldLayouts.className('createdDate'), {
             taskCreated: 'past-1d',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ 📅 ${past}`, {}, FieldLayoutDetails.dueDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ 📅 ${past}`, {}, fieldLayouts.className('dueDate'), {
             taskDue: 'past-1d',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ ⏳ ${past}`, {}, FieldLayoutDetails.scheduledDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ ⏳ ${past}`, {}, fieldLayouts.className('scheduledDate'), {
             taskScheduled: 'past-1d',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ 🛫 ${past}`, {}, FieldLayoutDetails.startDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ 🛫 ${past}`, {}, fieldLayouts.className('startDate'), {
             taskStart: 'past-1d',
         });
-        await testComponentClasses(`- [x] Done task ✅ ${past}`, {}, FieldLayoutDetails.doneDate.className, {
+        await testComponentClasses(`- [x] Done task ✅ ${past}`, {}, fieldLayouts.className('doneDate'), {
             taskDone: 'past-1d',
         });
     });
 
     it('adds a correct "past-7d" CSS class to dates', async () => {
         const past = DateParser.parseDate('7 days ago').format(TaskRegularExpressions.dateFormat);
-        await testComponentClasses(`- [ ] Full task ⏫ ➕ ${past}`, {}, FieldLayoutDetails.createdDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ ➕ ${past}`, {}, fieldLayouts.className('createdDate'), {
             taskCreated: 'past-7d',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ 📅 ${past}`, {}, FieldLayoutDetails.dueDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ 📅 ${past}`, {}, fieldLayouts.className('dueDate'), {
             taskDue: 'past-7d',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ ⏳ ${past}`, {}, FieldLayoutDetails.scheduledDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ ⏳ ${past}`, {}, fieldLayouts.className('scheduledDate'), {
             taskScheduled: 'past-7d',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ 🛫 ${past}`, {}, FieldLayoutDetails.startDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ 🛫 ${past}`, {}, fieldLayouts.className('startDate'), {
             taskStart: 'past-7d',
         });
-        await testComponentClasses(`- [x] Done task ✅ ${past}`, {}, FieldLayoutDetails.doneDate.className, {
+        await testComponentClasses(`- [x] Done task ✅ ${past}`, {}, fieldLayouts.className('doneDate'), {
             taskDone: 'past-7d',
         });
     });
 
     it('adds the classes "...future-far" and "...past-far" to dates that are further than 7 days', async () => {
         const future = DateParser.parseDate('in 8 days').format(TaskRegularExpressions.dateFormat);
-        await testComponentClasses(`- [ ] Full task ⏫ ➕ ${future}`, {}, FieldLayoutDetails.createdDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ ➕ ${future}`, {}, fieldLayouts.className('createdDate'), {
             taskCreated: 'future-far',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ 📅 ${future}`, {}, FieldLayoutDetails.dueDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ 📅 ${future}`, {}, fieldLayouts.className('dueDate'), {
             taskDue: 'future-far',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ ⏳ ${future}`, {}, FieldLayoutDetails.scheduledDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ ⏳ ${future}`, {}, fieldLayouts.className('scheduledDate'), {
             taskScheduled: 'future-far',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ 🛫 ${future}`, {}, FieldLayoutDetails.startDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ 🛫 ${future}`, {}, fieldLayouts.className('startDate'), {
             taskStart: 'future-far',
         });
-        await testComponentClasses(`- [x] Done task ✅ ${future}`, {}, FieldLayoutDetails.doneDate.className, {
+        await testComponentClasses(`- [x] Done task ✅ ${future}`, {}, fieldLayouts.className('doneDate'), {
             taskDone: 'future-far',
         });
         const past = DateParser.parseDate('8 days ago').format(TaskRegularExpressions.dateFormat);
-        await testComponentClasses(`- [ ] Full task ⏫ ➕ ${past}`, {}, FieldLayoutDetails.createdDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ ➕ ${past}`, {}, fieldLayouts.className('createdDate'), {
             taskCreated: 'past-far',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ 📅 ${past}`, {}, FieldLayoutDetails.dueDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ 📅 ${past}`, {}, fieldLayouts.className('dueDate'), {
             taskDue: 'past-far',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ ⏳ ${past}`, {}, FieldLayoutDetails.scheduledDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ ⏳ ${past}`, {}, fieldLayouts.className('scheduledDate'), {
             taskScheduled: 'past-far',
         });
-        await testComponentClasses(`- [ ] Full task ⏫ 🛫 ${past}`, {}, FieldLayoutDetails.startDate.className, {
+        await testComponentClasses(`- [ ] Full task ⏫ 🛫 ${past}`, {}, fieldLayouts.className('startDate'), {
             taskStart: 'past-far',
         });
-        await testComponentClasses(`- [x] Done task ✅ ${past}`, {}, FieldLayoutDetails.doneDate.className, {
+        await testComponentClasses(`- [x] Done task ✅ ${past}`, {}, fieldLayouts.className('doneDate'), {
             taskDone: 'past-far',
         });
     });
 
     it('does not add specific classes to invalid dates', async () => {
-        await testComponentClasses('- [ ] Full task ⏫ 📅 2023-02-29', {}, FieldLayoutDetails.dueDate.className, {});
+        await testComponentClasses('- [ ] Full task ⏫ 📅 2023-02-29', {}, fieldLayouts.className('dueDate'), {});
     });
 
     it('does not render hidden components but sets their specific classes to the upper li element', async () => {
         await testHiddenComponentClasses(
             '- [ ] Full task ⏫ 📅 2022-07-02 ⏳ 2022-07-03 🛫 2022-07-04 🔁 every day',
             { hidePriority: true },
-            FieldLayoutDetails.priority.className,
+            fieldLayouts.className('priority'),
             { taskPriority: 'high' },
         );
         await testHiddenComponentClasses(
             '- [ ] Full task ⏫ 📅 2022-07-02 ⏳ 2022-07-03 ➕ 2022-07-04 🔁 every day',
             { hideCreatedDate: true },
-            FieldLayoutDetails.createdDate.className,
+            fieldLayouts.className('createdDate'),
             { taskCreated: 'past-far' },
         );
         await testHiddenComponentClasses(
             '- [ ] Full task ⏫ 📅 2022-07-02 ⏳ 2022-07-03 🛫 2022-07-04 🔁 every day',
             { hideDueDate: true },
-            FieldLayoutDetails.dueDate.className,
+            fieldLayouts.className('dueDate'),
             { taskDue: 'past-far' },
         );
         await testHiddenComponentClasses(
             '- [ ] Full task ⏫ 📅 2022-07-02 ⏳ 2022-07-03 🛫 2022-07-04 🔁 every day',
             { hideScheduledDate: true },
-            FieldLayoutDetails.scheduledDate.className,
+            fieldLayouts.className('scheduledDate'),
             { taskScheduled: 'past-far' },
         );
         await testHiddenComponentClasses(
             '- [ ] Full task ⏫ 📅 2022-07-02 ⏳ 2022-07-03 🛫 2022-07-04 🔁 every day',
             { hideStartDate: true },
-            FieldLayoutDetails.startDate.className,
+            fieldLayouts.className('startDate'),
             { taskStart: 'past-far' },
         );
     });