100 lines
2.5 KiB
JavaScript
100 lines
2.5 KiB
JavaScript
import { afterEach } from 'vitest';
|
|
import '@testing-library/jest-dom/vitest';
|
|
// import 'whatwg-fetch';
|
|
|
|
// Setup mock for localStorage
|
|
const localStorageMock = (() => {
|
|
let store = {};
|
|
return {
|
|
getItem(key) {
|
|
return store[key] || null;
|
|
},
|
|
setItem(key, value) {
|
|
store[key] = String(value);
|
|
},
|
|
removeItem(key) {
|
|
delete store[key];
|
|
},
|
|
clear() {
|
|
store = {};
|
|
},
|
|
length: 0,
|
|
key() { return null; }
|
|
};
|
|
})();
|
|
|
|
// Mock the DOM environment
|
|
global.document.body.innerHTML = `
|
|
<div class="app-container">
|
|
<aside class="sidebar">
|
|
<div class="module-list"></div>
|
|
</aside>
|
|
<main class="content">
|
|
<div class="lesson-container">
|
|
<h2 id="lesson-title"></h2>
|
|
<div id="lesson-description"></div>
|
|
<div class="task-container">
|
|
<h3>Your Task</h3>
|
|
<div id="task-instruction"></div>
|
|
</div>
|
|
<div class="preview-container">
|
|
<h3>Preview</h3>
|
|
<div id="preview-area"></div>
|
|
</div>
|
|
<div class="editor-container">
|
|
<h3>CSS Editor</h3>
|
|
<div class="editor-content">
|
|
<div id="editor-prefix"></div>
|
|
<textarea id="code-input"></textarea>
|
|
<div id="editor-suffix"></div>
|
|
</div>
|
|
<div class="editor-controls">
|
|
<button id="reset-btn">Reset</button>
|
|
<button id="run-btn">Run</button>
|
|
</div>
|
|
</div>
|
|
<div class="navigation">
|
|
<button id="prev-btn">Previous</button>
|
|
<span id="level-indicator"></span>
|
|
<button id="next-btn">Next</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<div id="modal-container" class="hidden">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<h2 id="modal-title"></h2>
|
|
<button id="modal-close">×</button>
|
|
</div>
|
|
<div id="modal-content"></div>
|
|
</div>
|
|
</div>
|
|
<button id="module-selector-btn">Progress</button>
|
|
<button id="help-btn">Help</button>
|
|
</div>
|
|
`;
|
|
|
|
// Setup browser mocks
|
|
global.localStorage = localStorageMock;
|
|
window.localStorage = localStorageMock;
|
|
|
|
// For iframe support in jsdom
|
|
if (!window.document.createRange) {
|
|
window.document.createRange = () => ({
|
|
setStart: () => {},
|
|
setEnd: () => {},
|
|
commonAncestorContainer: {
|
|
nodeName: 'BODY',
|
|
ownerDocument: document,
|
|
},
|
|
});
|
|
}
|
|
|
|
// Add fetch mock
|
|
global.fetch = vi.fn();
|
|
|
|
// Clean up after each test
|
|
afterEach(() => {
|
|
localStorage.clear();
|
|
fetch.mockReset();
|
|
}); |