From 0818e94f340f071c49dd0f0ad0f3bc376e2b69e8 Mon Sep 17 00:00:00 2001
From: rmccar <42928680+rmccar@users.noreply.github.com>
Date: Thu, 26 Sep 2024 10:55:15 +0100
Subject: [PATCH 1/3] Format tests (#3365)

---
 src/tests/helpers/cheerio.spec.js   |  12 +-
 src/tests/helpers/puppeteer.spec.js | 118 +++++++++---------
 src/tests/helpers/rendering.js      |  30 ++---
 src/tests/helpers/rendering.spec.js | 187 ++++++++++++++--------------
 4 files changed, 174 insertions(+), 173 deletions(-)

diff --git a/src/tests/helpers/cheerio.spec.js b/src/tests/helpers/cheerio.spec.js
index f0d591fdb9..e22de1942b 100644
--- a/src/tests/helpers/cheerio.spec.js
+++ b/src/tests/helpers/cheerio.spec.js
@@ -3,12 +3,12 @@ import * as cheerio from 'cheerio';
 import * as helper from '../../tests/helpers/cheerio';
 
 const EXAMPLE_HTML = `
-  <div>
-    <div id="a">First</div>
-    <div id="b" class="second">Second</div>
-    <div id="c" class="third">Third</div>
-  </div>
-`;
+        <div>
+            <div id="a">First</div>
+            <div id="b" class="second">Second</div>
+            <div id="c" class="third">Third</div>
+        </div>
+    `;
 
 describe('mapAll(cheerioNodes, selector)', () => {
     it('gets mapped values`', () => {
diff --git a/src/tests/helpers/puppeteer.spec.js b/src/tests/helpers/puppeteer.spec.js
index fa1693a673..e7ab51cd9a 100644
--- a/src/tests/helpers/puppeteer.spec.js
+++ b/src/tests/helpers/puppeteer.spec.js
@@ -46,28 +46,28 @@ describe('PuppeteerEndpointFaker', () => {
     });
 
     const TEST_HTML_REQUEST_DATA_FROM_ENDPOINT = `
-    <div id="output"></div>
-    <script>
-      fetch('/test/fake/api/json/abc')
-        .then(async (response) => {
-          const data = await response.json();
-          const el = document.getElementById('output');
-          el.innerHTML = response.status + ':' + data.value;
-          el.classList.add('test');
-        });
-    </script>
-  `;
+        <div id="output"></div>
+        <script>
+            fetch('/test/fake/api/json/abc')
+                .then(async (response) => {
+                    const data = await response.json();
+                    const el = document.getElementById('output');
+                    el.innerHTML = response.status + ':' + data.value;
+                    el.classList.add('test');
+                });
+        </script>
+    `;
 
     describe('get requestHistory()', () => {
         it('has faked requests in history', async () => {
             await setTestPage(
                 '/test',
                 `
-          <script>
-            fetch('/test/fake/api/text?abc=123');
-            fetch('/test/fake/api/json?abc=456');
-          </script>
-        `,
+                    <script>
+                        fetch('/test/fake/api/text?abc=123');
+                        fetch('/test/fake/api/json?abc=456');
+                    </script>
+                `,
             );
 
             const paths = apiFaker.requestHistory.map((entry) => entry.path);
@@ -78,13 +78,13 @@ describe('PuppeteerEndpointFaker', () => {
             await setTestPage(
                 '/test',
                 `
-          <script>
-            fetch('/test/fake/api/text?abc=123');
-            fetch('/test/fake/api/text?abc=789');
-            fetch('/test/fake/api/other');
-            fetch('/test/fake/api/json?abc=456');
-          </script>
-        `,
+                    <script>
+                        fetch('/test/fake/api/text?abc=123');
+                        fetch('/test/fake/api/text?abc=789');
+                        fetch('/test/fake/api/other');
+                        fetch('/test/fake/api/json?abc=456');
+                    </script>
+                `,
             );
 
             const paths = apiFaker.requestHistory.map((entry) => entry.path);
@@ -95,12 +95,12 @@ describe('PuppeteerEndpointFaker', () => {
             await setTestPage(
                 '/test',
                 `
-          <script>
-            fetch('/test/fake/api/text?abc=123');
-            fetch('/test');
-            fetch('/test/fake/api/json?abc=456');
-          </script>
-        `,
+                    <script>
+                        fetch('/test/fake/api/text?abc=123');
+                        fetch('/test');
+                        fetch('/test/fake/api/json?abc=456');
+                    </script>
+                `,
             );
 
             const paths = apiFaker.requestHistory.map((entry) => entry.path);
@@ -111,10 +111,10 @@ describe('PuppeteerEndpointFaker', () => {
             await setTestPage(
                 '/test',
                 `
-          <script>
-            fetch('/test/fake/api/text?abc=123');
-          </script>
-        `,
+                    <script>
+                        fetch('/test/fake/api/text?abc=123');
+                    </script>
+                `,
             );
 
             const entry = apiFaker.requestHistory.find((entry) => entry.path === '/text?abc=123');
@@ -125,14 +125,14 @@ describe('PuppeteerEndpointFaker', () => {
             await setTestPage(
                 '/test',
                 `
-          <script>
-            fetch('/test/fake/api/text?abc=123', {
-              headers: {
-                'foo': '123',
-              }
-            });
-          </script>
-        `,
+                    <script>
+                        fetch('/test/fake/api/text?abc=123', {
+                            headers: {
+                                'foo': '123',
+                            }
+                        });
+                    </script>
+                `,
             );
 
             const entry = apiFaker.requestHistory.find((entry) => entry.path === '/text?abc=123');
@@ -145,13 +145,13 @@ describe('PuppeteerEndpointFaker', () => {
             await setTestPage(
                 '/test',
                 `
-          <script>
-            fetch('/test/fake/api/text?abc=123');
-            fetch('/test/fake/api/text?abc=789');
-            fetch('/test/fake/api/other');
-            fetch('/test/fake/api/json?abc=456');
-          </script>
-        `,
+                    <script>
+                        fetch('/test/fake/api/text?abc=123');
+                        fetch('/test/fake/api/text?abc=789');
+                        fetch('/test/fake/api/other');
+                        fetch('/test/fake/api/json?abc=456');
+                    </script>
+                `,
             );
 
             expect(apiFaker.requestedPaths).toEqual(['/text?abc=123', '/text?abc=789', '/other', '/json?abc=456']);
@@ -171,11 +171,11 @@ describe('PuppeteerEndpointFaker', () => {
             await setTestPage(
                 '/test',
                 `
-          <script>
-            fetch('/test/fake/api/text?abc=123');
-            fetch('/test/fake/api/json?abc=456');
-          </script>
-        `,
+                    <script>
+                        fetch('/test/fake/api/text?abc=123');
+                        fetch('/test/fake/api/json?abc=456');
+                    </script>
+                `,
             );
             await apiFaker.reset();
 
@@ -299,12 +299,12 @@ describe('PuppeteerEndpointFaker', () => {
             await setTestPage(
                 '/test',
                 `
-          <script>
-            fetch('/test/fake/api/text?abc=123');
-            fetch('/test/fake/api/json?abc=456');
-            fetch('/test/fake/api/json?abc=456');
-          </script>
-        `,
+                    <script>
+                        fetch('/test/fake/api/text?abc=123');
+                        fetch('/test/fake/api/json?abc=456');
+                        fetch('/test/fake/api/json?abc=456');
+                    </script>
+                `,
             );
 
             expect(apiFaker.getRequestCount('/text?abc=123')).toBe(1);
diff --git a/src/tests/helpers/rendering.js b/src/tests/helpers/rendering.js
index aa239923d4..4bacb9e408 100644
--- a/src/tests/helpers/rendering.js
+++ b/src/tests/helpers/rendering.js
@@ -44,20 +44,20 @@ export function renderComponent(componentName, params = {}, children = null, fak
     if (!!children) {
         return renderTemplate(
             `
-      {% from "${info.templateName}" import ${info.macroName} %}
-      {%- call ${info.macroName}(${JSON.stringify(params, null, 2)}) -%}
-        ${Array.isArray(children) ? children.join('') : children}
-      {%- endcall -%}
-    `,
+                {% from "${info.templateName}" import ${info.macroName} %}
+                {%- call ${info.macroName}(${JSON.stringify(params, null, 2)}) -%}
+                    ${Array.isArray(children) ? children.join('') : children}
+                {%- endcall -%}
+            `,
             fakerContext,
             isDesignSystemExample,
         );
     } else {
         return renderTemplate(
             `
-      {% from "${info.templateName}" import ${info.macroName} %}
-      {{- ${info.macroName}(${JSON.stringify(params, null, 2)}) -}}
-    `,
+                {% from "${info.templateName}" import ${info.macroName} %}
+                {{- ${info.macroName}(${JSON.stringify(params, null, 2)}) -}}
+            `,
             fakerContext,
             isDesignSystemExample,
         );
@@ -66,9 +66,9 @@ export function renderComponent(componentName, params = {}, children = null, fak
 
 export function renderBaseTemplate(config) {
     const compositedTemplate = `
-    {% extends 'layout/_template.njk' %}
-    ${config}
-  `;
+        {% extends 'layout/_template.njk' %}
+        ${config}
+    `;
 
     return renderTemplate(compositedTemplate);
 }
@@ -172,10 +172,10 @@ export async function setTestPage(path, template, blockName = 'body') {
     verifyConsoleSubscription(page);
 
     const compositedTemplate = `
-    {% block ${blockName} %}
-      ${template}
-    {% endblock %}
-  `;
+        {% block ${blockName} %}
+            ${template}
+        {% endblock %}
+    `;
 
     const html = renderBaseTemplate(compositedTemplate);
 
diff --git a/src/tests/helpers/rendering.spec.js b/src/tests/helpers/rendering.spec.js
index a5b5d3e75a..2412f420ea 100644
--- a/src/tests/helpers/rendering.spec.js
+++ b/src/tests/helpers/rendering.spec.js
@@ -37,24 +37,24 @@ describe('getMacroName(componentName)', () => {
 describe('renderTemplate(template)', () => {
     it('renders the provided template', () => {
         const result = helper.renderTemplate(`
-      {%- for value in [1, 2, 3] -%}
-        {{ value }}
-      {%- endfor -%}
-    `);
+            {%- for value in [1, 2, 3] -%}
+                {{ value }}
+            {%- endfor -%}
+        `);
 
         expect(result).toBe(`123`);
     });
 
     it('imports a component macro when rendering the provided template', () => {
         const result = helper.renderTemplate(`
-      {% from "components/button/_macro.njk" import onsButton %}
+            {% from "components/button/_macro.njk" import onsButton %}
 
-      {{
-        onsButton({
-          text: 'Click me!'
-        })
-      }}
-    `);
+            {{
+                onsButton({
+                    text: 'Click me!'
+                })
+            }}
+        `);
 
         expect(result).toContain('Click me!');
     });
@@ -89,21 +89,21 @@ describe('templateFaker()', () => {
         faker.setFake(
             'button',
             `
-      {% macro onsButton(params) %}
-        FAKE BUTTON
-      {% endmacro %}
-    `,
+                {% macro onsButton(params) %}
+                    FAKE BUTTON
+                {% endmacro %}
+            `,
         );
 
         const result = faker.renderTemplate(`
-      {% from "components/button/_macro.njk" import onsButton %}
+            {% from "components/button/_macro.njk" import onsButton %}
 
-      {{
-        onsButton({
-          text: 'Click me!'
-        })
-      }}
-    `);
+            {{
+                onsButton({
+                    text: 'Click me!'
+                })
+            }}
+        `);
 
         expect(result.trim()).toBe('FAKE BUTTON');
     });
@@ -113,10 +113,10 @@ describe('templateFaker()', () => {
         faker.setFake(
             'button',
             `
-      {% macro onsButton(params) %}
-        FAKE BUTTON
-      {% endmacro %}
-    `,
+                {% macro onsButton(params) %}
+                    FAKE BUTTON
+                {% endmacro %}
+            `,
         );
 
         const result = faker.renderComponent('button', {
@@ -131,18 +131,19 @@ describe('templateFaker()', () => {
         faker.setFake(
             'checkboxes/checkbox',
             `
-      {% macro onsCheckbox(params) %}
-        FAKE CHECKBOX
-      {% endmacro %}
-    `,
+                {% macro onsCheckbox(params) %}
+                    FAKE CHECKBOX
+                {% endmacro %}
+            `,
         );
 
         const result = faker.renderTemplate(`
-      {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
-      {{
-        onsCheckbox({ id: 'test' })
-      }}
-    `);
+            {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
+
+            {{
+                onsCheckbox({ id: 'test' })
+            }}
+        `);
 
         expect(result.trim()).toBe('FAKE CHECKBOX');
     });
@@ -155,14 +156,14 @@ describe('templateFaker()', () => {
         /*const buttonSpy =*/ faker.spy('button', options);
 
         const result = faker.renderTemplate(`
-      {% from "components/button/_macro.njk" import onsButton %}
+            {% from "components/button/_macro.njk" import onsButton %}
 
-      {{
-        onsButton({
-          text: 'Test Button A'
-        })
-      }}
-    `);
+            {{
+                onsButton({
+                    text: 'Test Button A'
+                })
+            }}
+        `);
 
         expect(result).toContain('Test Button A');
     });
@@ -172,14 +173,14 @@ describe('templateFaker()', () => {
         /*const buttonSpy =*/ faker.spy('button', { suppressOutput: true });
 
         const result = faker.renderTemplate(`
-      {% from "components/button/_macro.njk" import onsButton %}
+            {% from "components/button/_macro.njk" import onsButton %}
 
-      {{
-        onsButton({
-          text: 'Test Button A'
-        })
-      }}
-    `);
+            {{
+                onsButton({
+                    text: 'Test Button A'
+                })
+            }}
+        `);
 
         expect(result).not.toContain('Test Button A');
     });
@@ -192,19 +193,19 @@ describe('templateFaker()', () => {
         const buttonSpy = faker.spy('button', options);
 
         faker.renderTemplate(`
-      {% from "components/button/_macro.njk" import onsButton %}
-
-      {{
-        onsButton({
-          text: 'Test Button A'
-        })
-      }}
-      {{
-        onsButton({
-          text: 'Test Button B'
-        })
-      }}
-    `);
+            {% from "components/button/_macro.njk" import onsButton %}
+
+            {{
+                onsButton({
+                    text: 'Test Button A'
+                })
+            }}
+            {{
+                onsButton({
+                    text: 'Test Button B'
+                })
+            }}
+        `);
 
         expect(buttonSpy.occurrences[0].text).toBe('Test Button A');
         expect(buttonSpy.occurrences[1].text).toBe('Test Button B');
@@ -219,37 +220,37 @@ describe('templateFaker()', () => {
         const panelSpy = faker.spy('panel');
 
         faker.renderTemplate(`
-      {% from "components/button/_macro.njk" import onsButton %}
-      {% from "components/panel/_macro.njk" import onsPanel %}
-
-      {% set foo %}
-        {{
-          onsButton({
-            text: 'Test Button A'
-          })
-        }}
-      {% endset %}
-
-      {{
-        onsButton({
-            text: 'Test Button B'
-        })
-      }}
-
-      {{
-        onsPanel({
-            body: 'Test Panel'
-        })
-      }}
-
-      {% set bar %}
-        {{
-          onsButton({
-            text: 'Test Button C'
-          })
-        }}
-      {% endset %}
-    `);
+            {% from "components/button/_macro.njk" import onsButton %}
+            {% from "components/panel/_macro.njk" import onsPanel %}
+
+            {% set foo %}
+                {{
+                    onsButton({
+                        text: 'Test Button A'
+                    })
+                }}
+            {% endset %}
+
+            {{
+                onsButton({
+                    text: 'Test Button B'
+                })
+            }}
+
+            {{
+                onsPanel({
+                    body: 'Test Panel'
+                })
+            }}
+
+            {% set bar %}
+                {{
+                    onsButton({
+                        text: 'Test Button C'
+                    })
+                }}
+            {% endset %}
+        `);
 
         expect(buttonSpy.occurrences[0]).toBeUndefined();
         expect(buttonSpy.occurrences[1].text).toBe('Test Button B');

From 759272a442562b3f5b5976778c6973e3338112b3 Mon Sep 17 00:00:00 2001
From: Precious Onyenaucheya
 <86783201+precious-onyenaucheya-ons@users.noreply.github.com>
Date: Fri, 27 Sep 2024 10:27:47 +0100
Subject: [PATCH 2/3] update example (#3370)

Co-authored-by: Alessio Venturini <112873190+alessioventuriniAND@users.noreply.github.com>
---
 src/components/text-indent/example-text-indent.njk | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/text-indent/example-text-indent.njk b/src/components/text-indent/example-text-indent.njk
index 23ce6cfa46..fff746b2b7 100644
--- a/src/components/text-indent/example-text-indent.njk
+++ b/src/components/text-indent/example-text-indent.njk
@@ -1,6 +1,6 @@
 {% from "components/text-indent/_macro.njk" import onsTextIndent %}
 {{-
     onsTextIndent({
-        text: '<p>Telephone: 0800 141 2021<br>Monday to Friday, 8 am to 7pm<br>Saturday, 8am to 4pm</p>'
+        "text": '<p>Telephone: 0800 141 2021<br>Monday to Friday, 8 am to 7pm<br>Saturday, 8am to 4pm</p>'
     })
 -}}

From 0b669c7131b2df1f5fad148c1896370b717e20b4 Mon Sep 17 00:00:00 2001
From: rmccar <42928680+rmccar@users.noreply.github.com>
Date: Fri, 27 Sep 2024 11:30:55 +0100
Subject: [PATCH 3/3] Remove button variant class when no variant set (#3372)

---
 src/components/button/_macro.njk | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/button/_macro.njk b/src/components/button/_macro.njk
index ba06e0abfc..0b48a1f0ae 100644
--- a/src/components/button/_macro.njk
+++ b/src/components/button/_macro.njk
@@ -72,7 +72,7 @@
     {% else %}
         type="{{ buttonType }}"
     {% endif %}
-    class="ons-btn{{ ' ' + params.classes if params.classes else '' }}{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-btn--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-btn--{{ params.variants }}{% endif %}{{ ' ons-btn--link ons-js-submit-btn' if params.url }}{{ variantClasses }}"
+    class="ons-btn{{ ' ' + params.classes if params.classes else '' }}{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-btn--{{ variant }}{% endfor %}{% elif params.variants %}{{ ' ' }}ons-btn--{{ params.variants }}{% endif %}{{ ' ons-btn--link ons-js-submit-btn' if params.url }}{{ variantClasses }}"
     {% if params.id %}id="{{ params.id }}"{% endif %}
     {% if params.value and tag != "a" %}value="{{ params.value }}"{% endif %}
     {% if params.name and tag != "a" %}name="{{ params.name }}"{% endif %}