freeCodeCamp · a2937 · Nov 5, 2024 · Nov 5, 2024 · Nov 5, 2024
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -34,13 +34,13 @@ jobs:
         run: |
           echo "CYPRESS_RECORD_KEY=${{ secrets.CYPRESS_RECORD_KEY }}" >> $GITHUB_ENV
           echo "GITHUB_TOKEN=${{ secrets.GITHUB_TOKEN }}" >> $GITHUB_ENV
-          echo "CYPRESS_INSTALL_BINARY=6.0.0" >> $GITHUB_ENV
+          echo "CYPRESS_INSTALL_BINARY=13.14.2" >> $GITHUB_ENV
 
       - name: Checkout
         uses: actions/checkout@ee0669bd1cc54295c223e0bb666b733df41de1c5 # v2
 
       - name: Cypress run
-        uses: cypress-io/github-action@v2
+        uses: cypress-io/github-action@v4
         with:
           browser: ${{ matrix.browsers }}
           build: npm run build

diff --git a/.gitignore b/.gitignore
@@ -19,6 +19,7 @@
 
 # production
 /build
+/dist
 
 # misc
 .DS_Store

diff --git a/cypress-install.js b/cypress-install.js
@@ -1,12 +1,15 @@
-const util = require('cypress/lib/util');
-const execa = require('execa');
+import { spawn } from 'child_process';
 
-const pkg = util.pkgVersion();
+const child = spawn('npm', ['run', 'cypress:install'], {
+  stdio: 'inherit'
+});
 
-(async () => {
-  console.log('Installing Cypress ' + pkg);
-  await execa('npm', ['run', 'cypress:install'], {
-    env: { CYPRESS_INSTALL_BINARY: pkg }
-  });
-  console.log('Cypress installed');
-})();
+child.on('close', code => {
+  if (code) {
+    console.error('Cypress installation failed with code:', code);
+  }
+});
+
+child.on('error', error => {
+  console.error('Cypress installation error:', error);
+});
diff --git a/cypress.config.ts b/cypress.config.ts
@@ -0,0 +1,8 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3001',
+    retries: 4
+  }
+}) 
diff --git a/cypress.json b/cypress.json
diff --git a/cypress/integration/home.js → cypress/e2e/home.cy.ts b/cypress/integration/home.js → cypress/e2e/home.cy.ts
diff --git a/cypress/integration/play-button.js → cypress/e2e/play-button.cy.ts b/cypress/integration/play-button.js → cypress/e2e/play-button.cy.ts
@@ -1,9 +1,13 @@
 describe('Stop and play the music', () => {
-  beforeEach(() => {
-    cy.visit('http://localhost:3001');
-  });
+  it('Click play button', function () {
 
-  it('Click play button', () => {
+    // Endless test trying to load the Discord integration 
+    // https://stackoverflow.com/questions/64673128/cypress-iframe-function-works-on-chrome-but-not-firefox
+    if (Cypress.browser.name === 'firefox') {
+      this.skip();
+    }
+
+    cy.visit('http://localhost:3001');
     cy.get('audio')
       .invoke('attr', 'src')
       .should('contain', '.mp3')

diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js
diff --git a/cypress/support/commands.js → cypress/support/commands.ts b/cypress/support/commands.js → cypress/support/commands.ts
diff --git a/cypress/support/index.js → cypress/support/e2e.ts b/cypress/support/index.js → cypress/support/e2e.ts
diff --git a/cypress/tsconfig.json b/cypress/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "esnext",
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "jsx": "preserve",
+    "allowJs": false,
+    "noImplicitAny": true,
+    "moduleResolution": "node",
+    "isolatedModules": true,
+    "types": ["node","cypress"]
+  },
+  "include": [
+    "**/*.ts",
+  ],
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
+    <meta
+      name="viewport"
+      content="width=device-width, minimum-scale=1.0, maximum-scale=8.0"
+    />
+    <meta content="X5tHeKjV-jMLyp4VMoUhW9PAYaOjtPslV250" name="csrf-token" />
+    <link href="https://coderadio.freecodecamp.org" rel="canonical" />
+    <meta
+      content="Code Radio - 24/7 concentration music for developers"
+      property="og:title"
+    />
+    <meta content="freeCodeCamp.org" property="og:site_name" />
+    <meta content="on" name="twitter:widgets:csp" />
+    <meta content="d0bc047a482c03c24f1168004c2a216a" name="p:domain_verify" />
+    <meta content="https://coderadio.freecodecamp.org" property="og:url" />
+    <meta
+      content="Code Radio - 24/7 concentration music for developers"
+      property="og:description"
+    />
+    <meta
+      content="https://cdn.freecodecamp.org/coderadio/coderadio-meta-1920x1080.png"
+      property="og:image"
+    />
+    <meta content="article" property="og:type" />
+    <meta
+      content="https://www.facebook.com/freecodecamp"
+      property="article:publisher"
+    />
+    <meta content="Responsive" property="article:section" />
+    <meta content="Support" name="description" />
+    <meta content="@freecodecamp" name="twitter:creator" />
+    <meta content="https://coderadio.freecodecamp.org" name="twitter:url" />
+    <meta content="@freecodecamp" name="twitter:site" />
+    <meta content="summary_large_image" name="twitter:card" />
+    <meta
+      content="https://cdn.freecodecamp.org/coderadio/coderadio-meta-1920x1080.png"
+      name="twitter:image:src"
+    />
+    <meta content="Code Radio" name="twitter:title" />
+    <meta
+      content="24/7 concentration music for developers"
+      name="twitter:description"
+    />
+    <meta content="a40ee5d5dba3bb091ad783ebd2b1383f" name="p:domain_verify" />
+    <meta content="#FFFFFF" name="msapplication-TileColor" />
+    <meta
+      content="https://cdn.freecodecamp.org/universal/favicons/browserconfig.xml"
+      rel="msapplication-config"
+    />
+    <link
+      href="https://cdn.freecodecamp.org/universal/favicons/android-chrome-192x192.png"
+      rel="android-chrome"
+      sizes="192x192"
+    />
+    <link
+      href="https://cdn.freecodecamp.org/universal/favicons/android-chrome-384x384.png"
+      rel="android-chrome"
+      sizes="384x384"
+    />
+    <link
+      href="https://cdn.freecodecamp.org/universal/favicons/site.webmanifest"
+      rel="manifest"
+    />
+    <link
+      href="https://cdn.freecodecamp.org/universal/favicons/apple-touch-icon.png"
+      rel="apple-touch-icon"
+      sizes="180x180"
+    />
+    <link
+      href="https://cdn.freecodecamp.org/universal/favicons/favicon-16x16.png"
+      rel="favicon"
+      sizes="16x16"
+    />
+    <link
+      href="https://cdn.freecodecamp.org/universal/favicons/favicon-32x32.png"
+      rel="favicon"
+      sizes="32x32"
+    />
+    <link
+      href="https://cdn.freecodecamp.org/universal/favicons/favicon.ico"
+      rel="icon"
+    />
+    <title>freeCodeCamp.org Code Radio</title>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=UA-55446531-21"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+      gtag('config', 'UA-55446531-21');
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="https://cdn.jsdelivr.net/npm/@widgetbot/crate@3" async defer>
+     new Crate({
+        server: '692816967895220344', // freeCodeCamp.org Official ᕕ(⌐■_■)ᕗ ♪♬
+        channel: '1254842489362317322' // #code-radio
+    })
+    const button = document.querySelector('crate > div').shadowRoot.querySelector("button");
+    button.style.bottom = "90px";
+    const embed = document.querySelector('crate > div').shadowRoot.querySelector(".embed");
+    embed.style.bottom = "90px";
+    // we only need to adjust the height at the iframe's mobile breakpoint.
+    // This does break during resizing, but I think that's enough of an edge case.
+    if (window.innerWidth <= 500) {
+      embed.style.maxHeight = "calc(100% - 80px)"
+    }
+  </script>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,6 +19,7 @@ @@
     # production
     /build
+    /dist
     # misc
     .DS_Store
@@ Expand Down @@