From f7c4df8d0445f8b34dcb88e6380fa5edca1d0b9e Mon Sep 17 00:00:00 2001
From: Mathias Jakobsen <mathias.jakobsen@overleaf.com>
Date: Thu, 13 Feb 2025 16:54:56 +0000
Subject: [PATCH] Merge pull request #23582 from
 overleaf/mj-material-icon-font-test

[web] Add cypress test for MaterialIcon variants

GitOrigin-RevId: 816ee12e8d50482c0b4fd05adc0511445d82ca8d
---
 .../components/shared/material-icon.spec.tsx  | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 services/web/test/frontend/components/shared/material-icon.spec.tsx

diff --git a/services/web/test/frontend/components/shared/material-icon.spec.tsx b/services/web/test/frontend/components/shared/material-icon.spec.tsx
new file mode 100644
index 0000000000..52a34a939a
--- /dev/null
+++ b/services/web/test/frontend/components/shared/material-icon.spec.tsx
@@ -0,0 +1,31 @@
+import MaterialIcon from '@/shared/components/material-icon'
+import unfilledIconTypes from '../../../../frontend/fonts/material-symbols/unfilled-symbols.mjs'
+import '../../helpers/bootstrap-3'
+
+const FONT_SIZE = 40
+
+describe('MaterialIcon', function () {
+  describe('Filled', function () {
+    it('contains symbols', function () {
+      cy.mount(<MaterialIcon type="home" style={{ fontSize: FONT_SIZE }} />)
+      cy.get('.material-symbols').as('icon')
+      cy.get('@icon')
+        .invoke('width')
+        .should('be.within', FONT_SIZE - 1, FONT_SIZE + 1)
+    })
+  })
+
+  describe('Unfilled', function () {
+    it('Contain all unfilled symbol', function () {
+      for (const type of unfilledIconTypes) {
+        cy.mount(
+          <MaterialIcon type={type} unfilled style={{ fontSize: FONT_SIZE }} />
+        )
+        cy.get('.material-symbols').as('icon')
+        cy.get('@icon')
+          .invoke('width')
+          .should('be.within', FONT_SIZE - 1, FONT_SIZE + 1)
+      }
+    })
+  })
+})