Fixed layer karma tests (#12243)

* Fixed layer karma tests

* Fixed another test that referenced the layer panel

* Fixed unrelated but annoying flaky test

Author: Morten Barklund

packages/story-editor/src/components/canvas/karma/selection.karma.js

@@ -121,7 +121,7 @@ describe('CUJ: Creator can Transform an Element: Selection integration', () => {
     await fixture.events.click(layerPanel.togglePanel);
     const paragraphLayer = layerPanel.getLayerByInnerText('Fill in some text');
     await fixture.events.hover(paragraphLayer);
-    const lockButton = within(paragraphLayer).getByLabelText('Lock/Unlock');
+    const lockButton = within(paragraphLayer).getByLabelText(/Lock/);
     await fixture.events.click(lockButton);
 
     // Try to click on the text element

packages/story-editor/src/components/floatingMenu/karma/video.karma.js

@@ -55,6 +55,9 @@ describe('Video Design Menu: Keyboard Navigation', () => {
       20
     );
 
+    // Escape out of the canvas elements focus trap
+    await fixture.events.keyboard.press('esc');
+
     await tabToCanvasFocusContainer(focusContainer, fixture);
     await fixture.events.keyboard.press('Enter');
     await fixture.events.keyboard.press('Tab');

packages/story-editor/src/components/panels/layer/karma/layer.karma.js

@@ -110,7 +110,7 @@ describe('Layer Panel', () => {
     expect(layerPanel.layers.length).toBe(3);
     const elementALayer = layerPanel.getLayerByInnerText('Title 1');
     await fixture.events.hover(elementALayer);
-    const deleteElementAButton = within(elementALayer).getByLabelText('Delete');
+    const deleteElementAButton = within(elementALayer).getByLabelText(/Delete/);
     await fixture.events.click(deleteElementAButton);
 
     expect(layerPanel.layers.length).toBe(2);
@@ -196,7 +196,7 @@ describe('Layer Panel', () => {
     const elementALayer = layerPanel.getLayerByInnerText('Title 1');
     await fixture.events.hover(elementALayer);
     const duplicateElementAButton =
-      within(elementALayer).getByLabelText('Duplicate');
+      within(elementALayer).getByLabelText(/Duplicate/);
     await fixture.events.click(duplicateElementAButton);
 
     expect(layerPanel.layers.length).toBe(4);
@@ -221,7 +221,7 @@ describe('Layer Panel', () => {
 
     // Hover layer, enable lock, and hover somewhere else
     await fixture.events.hover(elementALayer);
-    const lockButton = within(elementALayer).getByLabelText('Lock/Unlock');
+    const lockButton = within(elementALayer).getByLabelText(/Lock/);
     await fixture.events.click(lockButton);
     await fixture.events.hover(elementBLayer);
 
@@ -236,7 +236,7 @@ describe('Layer Panel', () => {
 
     // Hover layer, disable lock, and hover somewhere else
     await fixture.events.hover(elementALayer);
-    const unlockButton = within(elementALayer).getByLabelText('Lock/Unlock');
+    const unlockButton = within(elementALayer).getByLabelText(/Unlock/);
     await fixture.events.click(unlockButton);
     await fixture.events.hover(elementBLayer);