test(e2e): wait for theme-directives.html

The `theme-directives.html` test currently sometimes takes a screenshot
before all of the Mermaid diagrams have completed rendering.

We can use the `urlSnapshopTest()` helper function, which waits until
a `.rendered` property exists on the page.

Co-authored-by: Sidharth Vinod <sidharthv96@gmail.com>

cypress/integration/rendering/conf-and-directives.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util.ts';
+import { imgSnapshotTest, urlSnapshotTest } from '../../helpers/util.ts';
 
 describe('Configuration and directives - nodes should be light blue', () => {
   it('No config - use default', () => {
@@ -206,8 +206,7 @@ graph TD
   describe('when rendering several diagrams', () => {
     it('diagrams should not taint later diagrams', () => {
       const url = 'http://localhost:9000/theme-directives.html';
-      cy.visit(url);
-      cy.matchImageSnapshot('conf-and-directives.spec-when-rendering-several-diagrams-diagram-1');
+      urlSnapshotTest(url, {});
     });
   });
 });

cypress/platform/theme-directives.html

@@ -121,7 +121,14 @@ <h1>Nothing set, should be Default</h1>
         fontFamily: '"arial", sans-serif',
         curve: 'cardinal',
         securityLevel: 'strict',
+        startOnLoad: false,
       });
+
+      await mermaid.run();
+
+      if (window.Cypress) {
+        window.rendered = true;
+      }
     </script>
   </body>
 </html>