refactor(shared): simplify and reduce size of spinner

webern-unibas-ch · Jun 3, 2024 · 79b533c · 79b533c
1 parent f17d703
commit 79b533c
Show file tree

Hide file tree

Showing 6 changed files with 197 additions and 198 deletions.
diff --git a/src/app/shared/twelve-tone-spinner/twelve-tone-spinner.component.html b/src/app/shared/twelve-tone-spinner/twelve-tone-spinner.component.html
@@ -1,17 +1,17 @@
-<div class="twelveTone-spinner">
-    <div class="twelveTone-loadText twelveTone-child">
-        <p>{{ spinnerMessage }}</p>
+<div class="spinner">
+    <div class="spinner-load-text">
+        <p>{{ spinnerLoadText }}</p>
     </div>
-    <div class="twelveTone-note1 twelveTone-child"></div>
-    <div class="twelveTone-note2 twelveTone-child"></div>
-    <div class="twelveTone-note3 twelveTone-child"></div>
-    <div class="twelveTone-note4 twelveTone-child"></div>
-    <div class="twelveTone-note5 twelveTone-child"></div>
-    <div class="twelveTone-note6 twelveTone-child"></div>
-    <div class="twelveTone-note7 twelveTone-child"></div>
-    <div class="twelveTone-note8 twelveTone-child"></div>
-    <div class="twelveTone-note9 twelveTone-child"></div>
-    <div class="twelveTone-note10 twelveTone-child"></div>
-    <div class="twelveTone-note11 twelveTone-child"></div>
-    <div class="twelveTone-note12 twelveTone-child"></div>
+    <div class="spinner-note1"></div>
+    <div class="spinner-note2"></div>
+    <div class="spinner-note3"></div>
+    <div class="spinner-note4"></div>
+    <div class="spinner-note5"></div>
+    <div class="spinner-note6"></div>
+    <div class="spinner-note7"></div>
+    <div class="spinner-note8"></div>
+    <div class="spinner-note9"></div>
+    <div class="spinner-note10"></div>
+    <div class="spinner-note11"></div>
+    <div class="spinner-note12"></div>
 </div>
diff --git a/src/app/shared/twelve-tone-spinner/twelve-tone-spinner.component.scss b/src/app/shared/twelve-tone-spinner/twelve-tone-spinner.component.scss
@@ -1,4 +1,4 @@
-.twelveTone-spinner {
+.spinner {
     height: 140px;
     width: 140px;
     position: relative;
@@ -7,141 +7,66 @@
     left: 0;
     right: 0;
     margin: auto;
-}
-.twelveTone-spinner .twelveTone-child {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0;
-}
-.twelveTone-spinner .twelveTone-child:before {
-    content: '\2669';
-    margin: 0 auto;
-    display: block;
-    width: 15%;
-    height: 15%;
-    border-radius: 100%;
-    -webkit-animation: twelveTone-circleBounceDelay 1.2s infinite ease-in-out both;
-    animation: twelveTone-circleBounceDelay 1.2s infinite ease-in-out both;
-}
 
-.twelveTone-spinner .twelveTone-loadText > p {
-    /* border: 1px solid blue; */
-    margin-top: 30%;
-    margin-bottom: 30%;
-    text-align: center;
-}
-.twelveTone-spinner .twelveTone-note2 {
-    -webkit-transform: rotate(30deg);
-    -ms-transform: rotate(30deg);
-    transform: rotate(30deg);
-}
-.twelveTone-spinner .twelveTone-note3 {
-    -webkit-transform: rotate(60deg);
-    -ms-transform: rotate(60deg);
-    transform: rotate(60deg);
-}
-.twelveTone-spinner .twelveTone-note4 {
-    -webkit-transform: rotate(90deg);
-    -ms-transform: rotate(90deg);
-    transform: rotate(90deg);
-}
-.twelveTone-spinner .twelveTone-note5 {
-    -webkit-transform: rotate(120deg);
-    -ms-transform: rotate(120deg);
-    transform: rotate(120deg);
-}
-.twelveTone-spinner .twelveTone-note6 {
-    -webkit-transform: rotate(150deg);
-    -ms-transform: rotate(150deg);
-    transform: rotate(150deg);
-}
-.twelveTone-spinner .twelveTone-note7 {
-    -webkit-transform: rotate(180deg);
-    -ms-transform: rotate(180deg);
-    transform: rotate(180deg);
-}
-.twelveTone-spinner .twelveTone-note8 {
-    -webkit-transform: rotate(210deg);
-    -ms-transform: rotate(210deg);
-    transform: rotate(210deg);
-}
-.twelveTone-spinner .twelveTone-note9 {
-    -webkit-transform: rotate(240deg);
-    -ms-transform: rotate(240deg);
-    transform: rotate(240deg);
-}
-.twelveTone-spinner .twelveTone-note10 {
-    -webkit-transform: rotate(270deg);
-    -ms-transform: rotate(270deg);
-    transform: rotate(270deg);
-}
-.twelveTone-spinner .twelveTone-note11 {
-    -webkit-transform: rotate(300deg);
-    -ms-transform: rotate(300deg);
-    transform: rotate(300deg);
-}
-.twelveTone-spinner .twelveTone-note12 {
-    -webkit-transform: rotate(330deg);
-    -ms-transform: rotate(330deg);
-    transform: rotate(330deg);
-}
+    > div {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+    }
 
-.twelveTone-spinner .twelveTone-note2:before {
-    -webkit-animation-delay: -1.1s;
-    animation-delay: -1.1s;
-}
-.twelveTone-spinner .twelveTone-note3:before {
-    /* UNICODE SHARP SIGN, see https://www.unicode.org/Public/UCD/latest/charts/CodeCharts.pdf, p. 280*/
-    content: '\266F';
-    -webkit-animation-delay: -1s;
-    animation-delay: -1s;
-}
-.twelveTone-spinner .twelveTone-note4:before {
-    -webkit-animation-delay: -0.9s;
-    animation-delay: -0.9s;
-}
-.twelveTone-spinner .twelveTone-note5:before {
-    -webkit-animation-delay: -0.8s;
-    animation-delay: -0.8s;
-}
-.twelveTone-spinner .twelveTone-note6:before {
-    /* UNICODE FLAT SIGN, see https://www.unicode.org/Public/UCD/latest/charts/CodeCharts.pdf, p. 280*/
-    content: '\266D';
-    -webkit-animation-delay: -0.7s;
-    animation-delay: -0.7s;
-}
-.twelveTone-spinner .twelveTone-note7:before {
-    -webkit-animation-delay: -0.6s;
-    animation-delay: -0.6s;
-}
-.twelveTone-spinner .twelveTone-note8:before {
-    -webkit-animation-delay: -0.5s;
-    animation-delay: -0.5s;
-}
-.twelveTone-spinner .twelveTone-note9:before {
-    /* UNICODE SHARP SIGN, see https://www.unicode.org/Public/UCD/latest/charts/CodeCharts.pdf, p. 280*/
-    content: '\266F';
-    -webkit-animation-delay: -0.4s;
-    animation-delay: -0.4s;
-}
-.twelveTone-spinner .twelveTone-note10:before {
-    -webkit-animation-delay: -0.3s;
-    animation-delay: -0.3s;
+    > div:before {
+        content: '\2669';
+        margin: 0 auto;
+        display: block;
+        width: 15%;
+        height: 15%;
+        border-radius: 100%;
+        -webkit-animation: spinner-circleBounceDelay 1.2s infinite ease-in-out both;
+        animation: spinner-circleBounceDelay 1.2s infinite ease-in-out both;
+    }
+
+    > .spinner-note6:before,
+    > .spinner-note12:before {
+        /* UNICODE FLAT SIGN, see https://www.unicode.org/Public/UCD/latest/charts/CodeCharts.pdf, p. 280*/
+        content: '\266D';
+    }
+
+    > .spinner-note3:before,
+    > .spinner-note9:before {
+        /* UNICODE SHARP SIGN, see https://www.unicode.org/Public/UCD/latest/charts/CodeCharts.pdf, p. 280*/
+        content: '\266F';
+    }
+
+    > .spinner-load-text > p {
+        /* border: 1px solid blue; */
+        margin-top: 30%;
+        margin-bottom: 30%;
+        text-align: center;
+    }
 }
-.twelveTone-spinner .twelveTone-note11:before {
-    -webkit-animation-delay: -0.2s;
-    animation-delay: -0.2s;
+
+/* Calculate rotation */
+@for $i from 2 through 12 {
+    .spinner-note#{$i} {
+        $rotation: 30deg * ($i - 1);
+        -webkit-transform: rotate($rotation);
+        -ms-transform: rotate($rotation);
+        transform: rotate($rotation);
+    }
 }
-.twelveTone-spinner .twelveTone-note12:before {
-    /* UNICODE FLAT SIGN, see https://www.unicode.org/Public/UCD/latest/charts/CodeCharts.pdf, p. 280*/
-    content: '\266D';
-    -webkit-animation-delay: -0.1s;
-    animation-delay: -0.1s;
+
+/* Calculate delay */
+@for $i from 2 through 12 {
+    .spinner .spinner-note#{$i}:before {
+        $delay: -1.2 + ($i - 1) * 0.1;
+        -webkit-animation-delay: #{$delay}s;
+        animation-delay: #{$delay}s;
+    }
 }
 
-@-webkit-keyframes twelveTone-circleBounceDelay {
+@-webkit-keyframes spinner-circleBounceDelay {
     0%,
     80%,
     100% {
@@ -153,7 +78,7 @@
         transform: scale(1);
     }
 }
-@keyframes twelveTone-circleBounceDelay {
+@keyframes spinner-circleBounceDelay {
     0%,
     80%,
     100% {

diff --git a/src/app/shared/twelve-tone-spinner/twelve-tone-spinner.component.spec.ts b/src/app/shared/twelve-tone-spinner/twelve-tone-spinner.component.spec.ts
@@ -1,12 +1,17 @@
+import { DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { cleanStylesFromDOM } from '@testing/clean-up-helper';
+import { expectToBe, getAndExpectDebugElementByCss } from '@testing/expect-helper';
 
 import { TwelveToneSpinnerComponent } from './twelve-tone-spinner.component';
 
 describe('TwelveToneSpinnerComponent', () => {
     let component: TwelveToneSpinnerComponent;
     let fixture: ComponentFixture<TwelveToneSpinnerComponent>;
+    let compDe: DebugElement;
+
+    let expectedSpinnerLoadText: string;
 
     beforeEach(waitForAsync(() => {
         TestBed.configureTestingModule({
@@ -17,7 +22,10 @@ describe('TwelveToneSpinnerComponent', () => {
     beforeEach(() => {
         fixture = TestBed.createComponent(TwelveToneSpinnerComponent);
         component = fixture.componentInstance;
-        fixture.detectChanges();
+        compDe = fixture.debugElement;
+
+        // Test data
+        expectedSpinnerLoadText = 'loading';
     });
 
     afterAll(() => {
@@ -27,4 +35,72 @@ describe('TwelveToneSpinnerComponent', () => {
     it('... should create', () => {
         expect(component).toBeTruthy();
     });
+
+    describe('BEFORE initial data binding', () => {
+        it('... should have `spinnerLoadText`', () => {
+            expectToBe(component.spinnerLoadText, expectedSpinnerLoadText);
+        });
+
+        describe('VIEW', () => {
+            it('... should contain one div.spinner', () => {
+                getAndExpectDebugElementByCss(compDe, 'div.spinner', 1, 1);
+            });
+
+            it('... should contain one div.spinner-load-text in div.spinner', () => {
+                getAndExpectDebugElementByCss(compDe, 'div.spinner > div.spinner-load-text', 1, 1);
+            });
+
+            it(`... should not display load text yet`, () => {
+                const pDe = getAndExpectDebugElementByCss(compDe, 'div.spinner > div.spinner-load-text > p', 1, 1);
+                const pEl = pDe[0].nativeElement;
+
+                expectToBe(pEl.textContent, '');
+            });
+
+            for (let i = 1; i <= 12; i++) {
+                it(`... should contain one div.spinner-note${i} in div.spinner`, () => {
+                    getAndExpectDebugElementByCss(compDe, `div.spinner > div.spinner-note${i}`, 1, 1);
+                });
+            }
+
+            for (let i = 1; i <= 12; i++) {
+                it(`... should contain one div.spinner-note${i} with correct :before content in div.spinner`, () => {
+                    const noteDe = getAndExpectDebugElementByCss(compDe, `div.spinner > div.spinner-note${i}`, 1, 1);
+                    const noteEl = noteDe[0].nativeElement;
+
+                    const beforeContent = window.getComputedStyle(noteEl, ':before').getPropertyValue('content');
+
+                    // Replace is used to remove the quotes around the content string
+                    const actualContent = beforeContent.replace(/['"]+/g, '');
+
+                    let expectedContent: string;
+                    if (i === 6 || i === 12) {
+                        expectedContent = '\u266D'; // UNICODE FLAT SIGN
+                    } else if (i === 3 || i === 9) {
+                        expectedContent = '\u266F'; // UNICODE SHARP SIGN
+                    } else {
+                        expectedContent = '\u2669'; // UNICODE QUARTER NOTE
+                    }
+
+                    expectToBe(actualContent, expectedContent);
+                });
+            }
+        });
+    });
+
+    describe('AFTER initial data binding', () => {
+        beforeEach(() => {
+            // Trigger initial data binding
+            fixture.detectChanges();
+        });
+
+        describe('VIEW', () => {
+            it(`... should display load text`, () => {
+                const pDe = getAndExpectDebugElementByCss(compDe, 'div.spinner > div.spinner-load-text > p', 1, 1);
+                const pEl = pDe[0].nativeElement;
+
+                expectToBe(pEl.textContent, expectedSpinnerLoadText);
+            });
+        });
+    });
 });
diff --git a/src/app/shared/twelve-tone-spinner/twelve-tone-spinner.component.ts b/src/app/shared/twelve-tone-spinner/twelve-tone-spinner.component.ts
@@ -15,10 +15,10 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 })
 export class TwelveToneSpinnerComponent {
     /**
-     * Public variable: spinnerMessage.
+     * Public variable: spinnerLoadText.
      *
      * It contains the message to be displayed
      * while the spinner is active.
      */
-    spinnerMessage = 'loading';
+    spinnerLoadText = 'loading';
 }