Update Cypress tests to reference elements by name and role instead of data-testid

.changeset/strange-zoos-compare.md

@@ -0,0 +1,5 @@
+---
+'playroom': patch
+---
+
+Fix Playroom UI icon centering

.changeset/swift-fans-decide.md

@@ -0,0 +1,5 @@
+---
+'playroom': patch
+---
+
+Remove `data-testid` attributes from UI elements

cypress/e2e/editor.cy.js → cypress/e2e/editor.cy.ts

@@ -21,7 +21,7 @@ describe('Editor', () => {
   });
 
   it('autocompletes', () => {
-    typeCode('<F{enter} c{enter}={downarrow}{enter} />', { delay: 100 });
+    typeCode('<F{enter} c{enter}={downarrow}{enter} />', 100);
     assertFirstFrameContains('Foo');
     assertCodePaneContains('<Foo color="blue" />');
   });

cypress/e2e/keymaps.cy.js → cypress/e2e/keymaps.cy.ts

@@ -492,7 +492,7 @@ describe('Keymaps', () => {
     });
 
     it('should jump to line and column number correctly', () => {
-      jumpToLine('6:10');
+      jumpToLine(6, 10);
       typeCode('a');
 
       assertCodePaneContains(dedent`

cypress/e2e/snippets.cy.js → cypress/e2e/snippets.cy.ts

@@ -8,7 +8,7 @@ import {
   filterSnippets,
   toggleSnippets,
   assertSnippetCount,
-  assertSnippetsListIsVisible,
+  assertSnippetsSearchFieldIsVisible,
   mouseOverSnippet,
   loadPlayroom,
 } from '../support/utils';
@@ -23,7 +23,7 @@ describe('Snippets', () => {
   it('driven with mouse', () => {
     // Open and format for insertion point
     toggleSnippets();
-    assertSnippetsListIsVisible();
+    assertSnippetsSearchFieldIsVisible();
     assertCodePaneLineCount(8);
 
     // Browse snippetlist
@@ -69,12 +69,12 @@ describe('Snippets', () => {
   it('driven with keyboard', () => {
     // Open and format for insertion point
     typeCode(`${isMac() ? '{cmd}' : '{ctrl}'}k`);
-    assertSnippetsListIsVisible();
+    assertSnippetsSearchFieldIsVisible();
     assertCodePaneLineCount(8);
     filterSnippets('{esc}');
-    assertCodePaneLineCount(1, { wait: 500 });
+    assertCodePaneLineCount(1, true);
     typeCode(`${isMac() ? '{cmd}' : '{ctrl}'}k`);
-    assertSnippetsListIsVisible();
+    assertSnippetsSearchFieldIsVisible();
     assertCodePaneLineCount(8);
 
     // Browse snippetlist
@@ -89,7 +89,7 @@ describe('Snippets', () => {
     // Close without persisting
     filterSnippets('{esc}');
     assertCodePaneContains('<div>Initial <span>code</span></div>');
-    assertCodePaneLineCount(1, { wait: 500 });
+    assertCodePaneLineCount(1, true);
 
     // Re-open and persist
     typeCode(`${isMac() ? '{cmd}' : '{ctrl}'}k`);

cypress/e2e/toolbar.cy.js → cypress/e2e/toolbar.cy.ts

@@ -1,10 +1,10 @@
 import {
   assertFramesMatch,
-  selectWidthPreferenceByIndex,
   assertPreviewContains,
   typeCode,
   gotoPreview,
   loadPlayroom,
+  selectWidthPreference,
 } from '../support/utils';
 
 describe('Toolbar', () => {
@@ -13,11 +13,11 @@ describe('Toolbar', () => {
   });
 
   it('filter widths', () => {
-    const frames = ['320px', '375px', '768px', '1024px'];
+    const frames = [320, 375, 768, 1024];
     const widthIndexToSelect = 1;
 
     assertFramesMatch(frames);
-    selectWidthPreferenceByIndex(widthIndexToSelect);
+    selectWidthPreference(frames[widthIndexToSelect]);
     assertFramesMatch([frames[widthIndexToSelect]]);
   });
 
@@ -45,8 +45,9 @@ describe('Toolbar', () => {
           }
         });
       })
-      .get('[data-testid="copyToClipboard"]')
+      .findByRole('button', { name: /Copy Playroom link/i })
       .click();
+
     cy.then(() => expect(copySpy).to.have.been.called);
   });
 });

cypress/e2e/urlHandling.cy.js → cypress/e2e/urlHandling.cy.ts

@@ -20,7 +20,7 @@ describe('URL handling', () => {
         'http://localhost:9000/#?code=N4Ig7glgJgLgFgZxALgNoGYDsBWANJgNgA4BdAXyA'
       );
 
-      assertFramesMatch(['375px', '768px']);
+      assertFramesMatch([375, 768]);
     });
   });
 
@@ -40,10 +40,10 @@ describe('URL handling', () => {
       );
 
       assertFramesMatch([
-        'themeOne – 375px',
-        'themeTwo – 375px',
-        'themeOne – 768px',
-        'themeTwo – 768px',
+        ['themeOne', 375],
+        ['themeTwo', 375],
+        ['themeOne', 768],
+        ['themeTwo', 768],
       ]);
     });
   });

cypress/support/commands.js

@@ -1,3 +1,5 @@
+import '@testing-library/cypress/add-commands';
+
 Cypress.Commands.add(
   'getFromPreviewFrame',
   { prevSubject: 'element' },