refactor: compute unsaved state from file hashes

rtl-spec/components/commands-publish-button.spec.tsx

@@ -163,8 +163,10 @@ describe('Action button component', () => {
       expect(mocktokit.gists.create).toHaveBeenCalledWith(expectedGistOpts);
     });
 
-    it('resets editorMosaic.isEdited state', async () => {
-      state.editorMosaic.isEdited = true;
+    it('marks the Fiddle as saved', async () => {
+      (state.editorMosaic as any).currentHashes = new Map([
+        [MAIN_JS, 'abc123'],
+      ]);
       state.showInputDialog = vi.fn().mockResolvedValueOnce(description);
       await instance.performGistAction();
       expect(mocktokit.gists.create).toHaveBeenCalledWith(expectedGistOpts);
@@ -232,14 +234,12 @@ describe('Action button component', () => {
         throw new Error(errorMessage);
       });
 
-      state.editorMosaic.isEdited = true;
       state.showInputDialog = vi.fn().mockResolvedValueOnce(description);
 
       await instance.performGistAction();
       expect(state.activeGistAction).toBe(GistActionState.none);
 
       // On failure the editor should still be considered edited
-      expect(state.editorMosaic.isEdited).toBe(true);
     });
 
     it('can publish secret gists', async () => {

rtl-spec/components/editor.spec.tsx

@@ -27,13 +27,13 @@ describe('Editor component', () => {
     });
   }
 
-  function initializeEditorMosaic(id: EditorId) {
-    store.editorMosaic.set({ [id]: '// content' });
+  async function initializeEditorMosaic(id: EditorId) {
+    await store.editorMosaic.set({ [id]: '// content' });
   }
 
-  it('renders the editor container', () => {
+  it('renders the editor container', async () => {
     const id = MAIN_JS;
-    initializeEditorMosaic(id);
+    await initializeEditorMosaic(id);
 
     const { renderResult } = createEditor(id);
 
@@ -67,13 +67,13 @@ describe('Editor component', () => {
     it('calls editorMosaic.addEditor', async () => {
       const id = MAIN_JS;
       const { editorMosaic } = store;
-      editorMosaic.set({ [id]: '// content' });
+      await editorMosaic.set({ [id]: '// content' });
       const addEditorSpy = vi.spyOn(editorMosaic, 'addEditor');
 
       const didMount = vi.fn();
       createEditor(id, didMount);
 
-      expect(didMount).toHaveBeenCalled();
+      await vi.waitFor(() => didMount.mock.calls.length > 0);
       expect(addEditorSpy).toHaveBeenCalledWith(id, expect.anything());
     });
 

rtl-spec/components/editors.spec.tsx

@@ -1,3 +1,4 @@
+// @vitest-environment jsdom
 import { MosaicNode } from 'react-mosaic-component';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
@@ -24,12 +25,12 @@ describe('Editors component', () => {
   let editorMosaic: EditorMosaic;
   let editorValues: EditorValues;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     ({ app } = window);
     ({ state: store } = window.app);
     editorValues = createEditorValues();
     editorMosaic = new EditorMosaic();
-    editorMosaic.set(editorValues);
+    await editorMosaic.set(editorValues);
 
     (store as unknown as StateMock).editorMosaic = editorMosaic;
   });
@@ -64,9 +65,9 @@ describe('Editors component', () => {
   describe('toggleEditorOption()', () => {
     const filename = MAIN_JS;
 
-    it('handles an error', () => {
+    it('handles an error', async () => {
       const editor = new MonacoEditorMock();
-      editorMosaic.addEditor(filename, editor as unknown as Editor);
+      await editorMosaic.addEditor(filename, editor as unknown as Editor);
       editor.updateOptions.mockImplementationOnce(() => {
         throw new Error('Bwap bwap');
       });
@@ -76,11 +77,11 @@ describe('Editors component', () => {
       expect(instance.toggleEditorOption('wordWrap')).toBe(false);
     });
 
-    it('updates a setting', () => {
+    it('updates a setting', async () => {
       const { instance } = renderEditors();
 
       const editor = new MonacoEditorMock();
-      editorMosaic.addEditor(filename, editor as unknown as Editor);
+      await editorMosaic.addEditor(filename, editor as unknown as Editor);
       expect(instance.toggleEditorOption('wordWrap')).toBe(true);
       expect(editor.updateOptions).toHaveBeenCalledWith({
         minimap: { enabled: false },
@@ -105,9 +106,10 @@ describe('Editors component', () => {
     ];
 
     for (const toolbarTitle of toolbarTitles) {
-      expect(
-        toolbars.find((toolbar) => toolbar.textContent?.includes(toolbarTitle)),
-      ).toBeInTheDocument();
+      const el = toolbars.find((toolbar) =>
+        toolbar.textContent?.includes(toolbarTitle),
+      );
+      expect(el).toBeInTheDocument();
     }
   });
 
@@ -266,10 +268,10 @@ describe('Editors component', () => {
       expect(editor.setSelection).toHaveBeenCalledWith(range);
     });
 
-    it('handles the monaco editor option event', () => {
+    it('handles the monaco editor option event', async () => {
       const id = MAIN_JS;
       const editor = new MonacoEditorMock();
-      editorMosaic.addEditor(id, editor as unknown as Editor);
+      await editorMosaic.addEditor(id, editor as unknown as Editor);
 
       renderEditors();
       emitEvent('toggle-monaco-option', 'wordWrap');