From fc55654f7ac00978e5536313805ef7ca99a65e5f Mon Sep 17 00:00:00 2001
From: Edouard Bozon <bozonedouard@gmail.com>
Date: Fri, 3 May 2024 09:34:12 +0200
Subject: [PATCH] refactor: add footer component

---
 rspack.config.js              |  7 +------
 src/app/app.component.html    |  4 +---
 src/app/app.component.scss    |  8 --------
 src/app/app.component.spec.ts | 27 ---------------------------
 src/app/app.component.ts      |  3 ++-
 src/app/footer.component.scss |  8 ++++++++
 src/app/footer.component.ts   | 13 +++++++++++++
 7 files changed, 25 insertions(+), 45 deletions(-)
 delete mode 100644 src/app/app.component.spec.ts
 create mode 100644 src/app/footer.component.scss
 create mode 100644 src/app/footer.component.ts

diff --git a/rspack.config.js b/rspack.config.js
index 9d086db..f87063b 100644
--- a/rspack.config.js
+++ b/rspack.config.js
@@ -88,7 +88,7 @@ module.exports = composePlugins(withNx(), withWeb(), (baseConfig, ctx) => {
         },
         // Component styles
         {
-          test: /\.?(scss)$/,
+          test: /\.(sa|sc|c)ss$/,
           resourceQuery: /\?ngResource/,
           use: [
             {
@@ -102,11 +102,6 @@ module.exports = composePlugins(withNx(), withWeb(), (baseConfig, ctx) => {
             },
           ],
         },
-        {
-          test: /\.?(css)$/,
-          resourceQuery: /\?ngResource/,
-          use: [],
-        },
         {
           // Mark files inside `rxjs/add` as containing side effects.
           // If this is fixed upstream and the fixed version becomes the minimum
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 93c9fd9..09cecab 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -12,6 +12,4 @@ <h1>{{ title }}</h1>
 
 </main>
 
-<footer>
-  🧪 Experiment by <a href="https://twitter.com/edbzn">Edouard Bozon</a>
-</footer>
+<app-footer />
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 45ecfcb..518babf 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -22,14 +22,6 @@ img {
   margin: 0 8px;
 }
 
-footer {
-  margin-top: 2rem
-}
-
-a {
-  text-decoration: none;
-}
-
 section {
   display: flex;
   justify-content: center;
diff --git a/src/app/app.component.spec.ts b/src/app/app.component.spec.ts
deleted file mode 100644
index c195710..0000000
--- a/src/app/app.component.spec.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
-import { NxWelcomeComponent } from './nx-welcome.component';
-import { RouterTestingModule } from '@angular/router/testing';
-
-describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AppComponent, NxWelcomeComponent, RouterTestingModule],
-    }).compileComponents();
-  });
-
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain(
-      'Welcome ng-rspack'
-    );
-  });
-
-  it(`should have as title 'ng-rspack'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('ng-rspack');
-  });
-});
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index f67814b..5a8ff31 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { FooterComponent } from './footer.component';
 
 @Component({
   standalone: true,
-  imports: [RouterModule],
+  imports: [RouterModule, FooterComponent],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
diff --git a/src/app/footer.component.scss b/src/app/footer.component.scss
new file mode 100644
index 0000000..9f29a6f
--- /dev/null
+++ b/src/app/footer.component.scss
@@ -0,0 +1,8 @@
+:host {
+  display: block;
+  margin-top: 2rem
+}
+
+a {
+  text-decoration: none;
+}
diff --git a/src/app/footer.component.ts b/src/app/footer.component.ts
new file mode 100644
index 0000000..56cd404
--- /dev/null
+++ b/src/app/footer.component.ts
@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  standalone: true,
+  template: `
+    <footer>
+      🧪 Experiment by <a href="https://twitter.com/edbzn">Edouard Bozon</a>
+    </footer>
+  `,
+  styleUrl: './footer.component.scss',
+})
+export class FooterComponent {}