Skip to content

Commit

Permalink
feat: use vite testing
Browse files Browse the repository at this point in the history
  • Loading branch information
a2937 committed Nov 5, 2024
1 parent 67be98e commit 6b9b277
Show file tree
Hide file tree
Showing 40 changed files with 731 additions and 263 deletions.
4 changes: 2 additions & 2 deletions .github/workflows/ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@

# production
/build
/dist

# misc
.DS_Store
Expand Down
23 changes: 13 additions & 10 deletions cypress-install.js
Original file line number Diff line number Diff line change
@@ -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);
});
8 changes: 8 additions & 0 deletions cypress.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
const { defineConfig } = require('cypress');

module.exports = defineConfig({
e2e: {
baseUrl: 'http://localhost:3001',
retries: 4
}
})
3 changes: 0 additions & 3 deletions cypress.json

This file was deleted.

File renamed without changes.
Original file line number Diff line number Diff line change
@@ -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')
Expand Down
22 changes: 0 additions & 22 deletions cypress/plugins/index.js

This file was deleted.

File renamed without changes.
File renamed without changes.
17 changes: 17 additions & 0 deletions cypress/tsconfig.json
Original file line number Diff line number Diff line change
@@ -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",
],
}
120 changes: 120 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -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>
38 changes: 26 additions & 12 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"name": "coderadio",
"version": "0.1.0",
"private": true,
"type": "module",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "6.6.0",
"@fortawesome/free-solid-svg-icons": "6.6.0",
Expand All @@ -11,16 +12,15 @@
"react": "18.3.1",
"react-device-detect": "2.2.3",
"react-dom": "18.3.1",
"react-page-visibility": "7.0.0",
"react-scripts": "5.0.1",
"store": "2.0.12"
"react-page-visibility": "7.0.0"
},
"scripts": {
"start": "PORT=3001 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --watchAll=false",
"test:watch": "react-scripts test",
"eject": "react-scripts eject",
"start": "vite",
"build": "vite build",
"test": "vitest",
"test:watch": "vitest --watch",
"test:coverage": "vitest --coverage .",
"test:debug": "vitest --inspect-brk --runInBand --no-cache",
"precypress": "node cypress-install.js",
"cypress": "cypress",
"cypress:open": "npm run cypress open",
Expand All @@ -42,15 +42,29 @@
]
},
"devDependencies": {
"@testing-library/jest-dom": "6.6.2",
"@testing-library/jest-dom": "6.5.0",
"@testing-library/react": "16.0.1",
"cypress": "13.15.1",
"@types/jest": "29.5.13",
"@types/node": "22.5.4",
"@types/react": "18.3.5",
"@types/react-dom": "18.3.0",
"@vitejs/plugin-react": "4.3.1",
"cypress": "13.14.2",
"eslint-config-prettier": "9.1.0",
"eslint-plugin-prettier": "5.2.1",
"execa": "9.5.1",
"eventsource": "2.0.2",
"eventsourcemock": "2.0.0",
"happy-dom": "15.7.4",
"husky": "9.1.6",
"jest": "29.7.0",
"jest-environment-jsdom": "29.7.0",
"lint-staged": "15.2.10",
"prettier": "3.3.3"
"prettier": "3.3.3",
"ts-jest": "29.2.5",
"typescript": "5.6.2",
"vite": "5.4.4",
"vite-tsconfig-paths": "5.0.1",
"vitest": "2.1.0"
},
"lint-staged": {
"*.js": "npm run lint:fix"
Expand Down
2 changes: 1 addition & 1 deletion sample.env
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
# Sentry DSN - a public id that identifies your app to Sentry
REACT_APP_SENTRY_DSN=<DSN-from-sentry-project-settings>
VITE_SENTRY_DSN=<DSN-from-sentry-project-settings>
15 changes: 15 additions & 0 deletions src/assets/icons/pause.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from 'react';

function Pause(): JSX.Element {

return (<svg viewBox='0 0 640 640' fill='currentColor'>
<title>Pause Button</title>
<path d='M0 0L235.67 0L235.67 640L0 640L0 0Z' />
<path d='M404.33 0L640 0L640 640L404.33 640L404.33 0Z' />
</svg>
);
}


Pause.displayName = 'Caret';
export default Pause;
14 changes: 14 additions & 0 deletions src/assets/icons/play.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from 'react';

function Play(): JSX.Element {

return (
<svg viewBox='0 0 640 640' fill='#fff'>
<title>Play Button</title>
<path d='M0 0L649.1 320L0 640L0 0Z' />
</svg>
);
}

Play.displayName = 'Play';
export default Play;
5 changes: 0 additions & 5 deletions src/assets/pause.svg

This file was deleted.

4 changes: 0 additions & 4 deletions src/assets/play.svg

This file was deleted.

6 changes: 3 additions & 3 deletions src/components/App.test.js → src/components/App.test.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { createRoot } from 'react-dom/client';

it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
const root = createRoot(div!);
root.render(<App />);
});
Loading

0 comments on commit 6b9b277

Please sign in to comment.