diff --git a/src/components/CardList.test.ts b/src/components/CardList.test.ts index e638af1f..dc958a63 100644 --- a/src/components/CardList.test.ts +++ b/src/components/CardList.test.ts @@ -1,5 +1,5 @@ import { experimental_AstroContainer as AstroContainer } from "astro/container" -import { expect, test, describe, beforeEach, vi } from "vitest" +import { expect, test, describe, beforeEach } from "vitest" import CardList from "./CardList.astro" describe("component UI display", () => { diff --git a/src/components/Footer.astro b/src/components/Footer.astro new file mode 100644 index 00000000..940a3d63 --- /dev/null +++ b/src/components/Footer.astro @@ -0,0 +1,31 @@ +--- + +--- + + diff --git a/src/components/Footer.test.ts b/src/components/Footer.test.ts new file mode 100644 index 00000000..06cd1b41 --- /dev/null +++ b/src/components/Footer.test.ts @@ -0,0 +1,31 @@ +import { experimental_AstroContainer as AstroContainer } from "astro/container" +import { expect, describe, beforeEach, test } from "vitest" +import Footer from "./Footer.astro" + +describe("Footer", () => { + let container: AstroContainer + + beforeEach(async () => { + // instantiate Astro container api + container = await AstroContainer.create() + }) + + test("component is displayed successfully", async () => { + // render component + const result = await container.renderToString(Footer) + + // Insert test assertion + expect(result).toContain("Backed by") + expect(result).toContain("Programming and Doodles") + expect(result).toContain("All rights reserved") + }) + + test("component display the correct DOM component", async () => { + // render component + const result = await container.renderToString(Footer) + + // insert test assertion] + expect(result).toContain('class="hero-section"') + expect(result).toContain('class="hero-paragraph"') + }) +}) \ No newline at end of file diff --git a/src/components/Head.astro b/src/components/Head.astro index ac5c7703..c323fd87 100644 --- a/src/components/Head.astro +++ b/src/components/Head.astro @@ -1,66 +1,76 @@ --- const { title = "Dev Encyclopedia", ...props } = Astro.props --- + - - - - - - - + + + + + + + - - + + - - - - - + + + + + diff --git a/src/components/Hero.astro b/src/components/Hero.astro index 37472ab5..518f9068 100644 --- a/src/components/Hero.astro +++ b/src/components/Hero.astro @@ -1,4 +1,6 @@ --- +import ModeToggleButton from "./ModeToggleButton.astro" + const { terms } = Astro.props const categories = new Set() @@ -11,32 +13,16 @@ let sortedCategories = Array.from(categories).sort((a, b) => a.localeCompare(b)) --- -
-
- Backed by - - - - Programming and Doodles™ - All rights reserved. +
+
+ Dev Encyclopedia; +
+
+ Find out what that Sr. Developer is talking about.
+ + +
@@ -72,29 +58,16 @@ let sortedCategories = Array.from(categories).sort((a, b) => a.localeCompare(b)) > Contribute - - - -
-
+
diff --git a/src/components/ModeToggleButton.astro b/src/components/ModeToggleButton.astro new file mode 100644 index 00000000..1292e9d9 --- /dev/null +++ b/src/components/ModeToggleButton.astro @@ -0,0 +1,7 @@ +--- + +--- + + diff --git a/src/components/ModeToggleButton.test.ts b/src/components/ModeToggleButton.test.ts new file mode 100644 index 00000000..6326a235 --- /dev/null +++ b/src/components/ModeToggleButton.test.ts @@ -0,0 +1,21 @@ +import { experimental_AstroContainer as AstroContainer } from "astro/container" +import { expect, test, describe, beforeEach } from "vitest" +import ModeToggleButton from "./ModeToggleButton.astro" + +describe("Mode toggle button", () => { + let container: AstroContainer + + beforeEach(async () => { + // instantiate astro container api + container = await AstroContainer.create() + }) + + test("component is rendered correctly", async () => { + // render component + const result = await container.renderToString(ModeToggleButton) + + // Insert test assertion + expect(result).toContain('class="button toggle-button"') + expect(result).toContain('class="fas fa-moon"') + }) +}) \ No newline at end of file diff --git a/src/pages/index.astro b/src/pages/index.astro index ec5f33da..f1efdca3 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -6,6 +6,7 @@ import Hero from "../components/Hero.astro" import CardList from "../components/CardList.astro" import Modal from "../components/Modal.astro" import Head from "../components/Head.astro" +import Footer from "../components/Footer.astro" import { getCollection } from "astro:content" @@ -40,9 +41,12 @@ const terms = await getCollection("terms") - - - +
+ + + +
+