test: [M3-5858] - Cypress component tests

package.json

@@ -39,6 +39,7 @@
     "cy:e2e": "yarn workspace linode-manager cy:e2e",
     "cy:ci": "yarn cy:e2e",
     "cy:debug": "yarn workspace linode-manager cy:debug",
+    "cy:component": "yarn workspace linode-manager cy:component",
     "cy:rec-snap": "yarn workspace linode-manager cy:rec-snap",
     "changeset": "node scripts/changelog/changeset.mjs",
     "generate-changelogs": "node scripts/changelog/generate-changelogs.mjs",

packages/manager/cypress.config.ts

@@ -14,6 +14,7 @@ import { fetchAccount } from './cypress/support/plugins/fetch-account';
 import { fetchLinodeRegions } from './cypress/support/plugins/fetch-linode-regions';
 import { splitCypressRun } from './cypress/support/plugins/split-run';
 import { enableJunitReport } from './cypress/support/plugins/junit-report';
+import cypressViteConfig from './cypress/vite.config';
 
 /**
  * Exports a Cypress configuration object.
@@ -43,6 +44,20 @@ export default defineConfig({
   retries: process.env['CI'] ? 2 : 0,
 
   experimentalMemoryManagement: true,
+
+  component: {
+    devServer: {
+      framework: 'react',
+      bundler: 'vite',
+      viteConfig: cypressViteConfig,
+    },
+    indexHtmlFile: './cypress/support/component/index.html',
+    supportFile: './cypress/support/component/setup.tsx',
+    specPattern: './cypress/component/**/*.spec.tsx',
+    viewportWidth: 500,
+    viewportHeight: 500,
+  },
+
   e2e: {
     experimentalRunAllSpecs: true,
 

packages/manager/cypress/component/poc/beta-chip.spec.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { BetaChip } from 'src/components/BetaChip/BetaChip';
+import { describeComponent } from 'support/util/components';
+import { checkComponentA11y } from 'support/util/accessibility';
+
+describeComponent('BetaChip', (theme) => {
+  it('renders "BETA" text indicator with primary color', () => {
+    cy.mountWithTheme(<BetaChip color="primary" />, theme);
+    cy.findByText('beta').should('be.visible');
+  });
+
+  it('renders "BETA" text indicator with default color', () => {
+    cy.mountWithTheme(<BetaChip color="default" />, theme);
+    cy.findByText('beta').should('be.visible');
+  });
+
+  it('passes aXe check with primary color', () => {
+    cy.mountWithTheme(<BetaChip color="primary" />, theme);
+    checkComponentA11y();
+  });
+
+  it('passes aXe check with default color', () => {
+    cy.mountWithTheme(<BetaChip color="default" />, theme);
+    checkComponentA11y();
+  });
+});