refactor: frontend CI pipeline and tests for AuthorImage component

Author: andreishket

.github/workflows/frontend.yml

@@ -23,8 +23,11 @@ jobs:
           node-version: 18
           cache: "npm"
 
-      - name: Install dependencies
-        run: npm ci
+      - name: Clean node_modules and lockfile (workaround for Rollup native bindings)
+        run: rm -rf node_modules package-lock.json
+
+      - name: Reinstall fresh dependencies
+        run: npm install
 
       - name: Run tests
         run: npm run test

vis/test/component/authorimage.test.jsx

@@ -1,48 +1,34 @@
-import { expect, describe, it, vitest } from "vitest";
-
+import { render, screen } from "@testing-library/react";
+import { expect, describe, it } from "vitest";
 import React from "react";
-import { render } from "@testing-library/react";
 
 import AuthorImage from "../../js/templates/AuthorImage";
-import defaultImage from "../../images/author_default.png";
-
-describe("Author image component", () => {
-  it("renders", () => {
-    const result = render(
-      <AuthorImage url="http://pictures.org/link-to-author" />
-    );
 
-    expect(result.container.childNodes.length).toBe(1);
-  });
-
-  it("renders with correct link", () => {
-    const LINK = "https://custom-link.com/12345";
+describe("AuthorImage Component", () => {
+  it("renders with the provided URL", () => {
+    render(<AuthorImage url="https://example.com/12345" />);
 
-    const result = render(<AuthorImage url={LINK} />);
+    const imageLink = screen.getByRole("link", { name: /author image/i });
+    expect(imageLink).toHaveAttribute("href", "https://example.com/12345");
 
-    expect(
-      result.container.querySelector("#author_image_link").getAttribute("href")
-    ).toEqual(LINK);
-  });
-
-  it("renders with correct image", () => {
-    const LINK = "https://custom-link.com/12345";
-
-    const result = render(<AuthorImage url={LINK} />);
-
-    expect(
-      result.container.querySelector("#author_image").getAttribute("style")
-    ).toContain(`background-image: url(${LINK})`);
+    const imageDiv = screen.getByRole("img");
+    expect(imageDiv).toHaveStyle(
+      "background-image: url(https://example.com/12345)"
+    );
   });
 
-  it("renders with correct default image", () => {
-    const LINK = undefined;
-    const EXPECTED_LINK = defaultImage;
+  it("renders with the default image if no URL is provided", () => {
+    render(<AuthorImage />); // No URL passed
 
-    const result = render(<AuthorImage url={LINK} />);
+    const imageLink = screen.getByRole("link", { name: /author image/i });
+    expect(imageLink).toHaveAttribute(
+      "href",
+      expect.stringContaining("author_default.png")
+    );
 
-    expect(
-      result.container.querySelector("#author_image").getAttribute("style")
-    ).toContain(`background-image: url(${EXPECTED_LINK})`);
+    const imageDiv = screen.getByRole("img");
+    expect(imageDiv).toHaveStyle(
+      'background-image: url("/vis/images/author_default.png")'
+    ); // Adjust the path if needed
   });
 });

vis/test/snapshot/authorimage.test.jsx

@@ -1,27 +1,32 @@
-import { render, screen } from '@testing-library/react';
-import { expect, describe, it } from 'vitest';
-import React from 'react';
+// vis/test/component/authorimage.test.jsx
+import { render, screen } from "@testing-library/react";
+import { expect, describe, it } from "vitest";
+import React from "react";
+import AuthorImage from "../../js/templates/AuthorImage";
 
-import AuthorImage from '../../js/templates/AuthorImage';
-
-describe('AuthorImage Component', () => {
-  it('renders with the provided URL', () => {
+describe("AuthorImage Component", () => {
+  it("renders with the provided URL", () => {
     render(<AuthorImage url="https://example.com/12345" />);
-    
-    const imageLink = screen.getByRole('link', { name: /author image/i });
-    expect(imageLink).toHaveAttribute('href', 'https://example.com/12345');
-    
-    const imageDiv = screen.getByRole('img');
-    expect(imageDiv).toHaveStyle('background-image: url(https://example.com/12345)');
+
+    const imageLink = screen.getByRole("link", { name: /author image/i });
+    expect(imageLink).toHaveAttribute("href", "https://example.com/12345");
+
+    const imageDiv = screen.getByRole("img");
+    expect(imageDiv).toHaveStyle(
+      'background-image: url("https://example.com/12345")'
+    );
   });
 
-  it('renders with the default image if no URL is provided', () => {
-    render(<AuthorImage />); // No URL passed
+  it("renders with the default image if no URL is provided", () => {
+    render(<AuthorImage />);
 
-    const imageLink = screen.getByRole('link', { name: /author image/i });
-    expect(imageLink).toHaveAttribute('href', expect.stringContaining('author_default.png'));
+    const imageLink = screen.getByRole("link", { name: /author image/i });
+    expect(imageLink).toHaveAttribute("href");
+    expect(imageLink.getAttribute("href")).toContain("author_default.png");
 
-    const imageDiv = screen.getByRole('img');
-    expect(imageDiv).toHaveStyle('background-image: url(/vis/images/author_default.png)'); // Adjust the path if needed
+    const imageDiv = screen.getByRole("img");
+    expect(imageDiv).toHaveStyle(
+      'background-image: url("/vis/images/author_default.png")'
+    );
   });
-});
+});

webpack.config.js

@@ -1,5 +1,4 @@
 const path = require("path");
-
 const { ProvidePlugin } = require("webpack");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");