Merge pull request #3000 from oaknational/feat/CUR-1058-screenshot-un…

…it-modals-in-curric Screenshots of unit modals added to curric automate script
oaknational · Nov 20, 2024 · 6d0575f · 6d0575f
2 parents 58d4540 + 9d977ff
commit 6d0575f
Show file tree

Hide file tree

Showing 8 changed files with 670 additions and 390 deletions.
diff --git a/scripts/dev/curriculum/README.md b/scripts/dev/curriculum/README.md
@@ -9,7 +9,8 @@ All the scripts are contained in a single CLI app, you can pass `--help` to the
 # automate <command>
 # 
 # Commands:
-#   automate screenshot                       screenshot the visualiser
+#   automate fixtures                         generates fixtures from graphql
+#   automate screenshot <label>               screenshot the visualiser
 #   automate compare <basepath> <targetpath>  compare two sets of screenshots
 # 
 # Options:
@@ -18,39 +19,7 @@ All the scripts are contained in a single CLI app, you can pass `--help` to the
 ```
 
 ### `screenshot` & `compare`
-Generate some screenshots of your local environment
-
-> [!NOTE]  
-> You might want to use labels instead, see section below  
-
-```bash
-./scripts/dev/curriculum/automate screenshot 
-# ...
-```
-
-Generate some screenshots of the production environment
-
-```bash
-./scripts/dev/curriculum/automate screenshot --basepath https://www.thenational.academy/
-# ...
-```
-
-Compare both envs
-
-```bash
-./scripts/dev/curriculum/automate compare ./scripts/dev/curriculum/output/screenshots/www-thenational-academy ./scripts/dev/curriculum/output/screenshots/localhost-3000
-# ...
-```
-
-Should open a browser with the following showing the two envs
-
-![Screenshot of automate compare output](empty.png)
-
-
-#### Using labels
-Rather than having the `screenshot` command picking names you can a labels  
-
-Take snapshot with label `:before`
+Generate some screenshots of your local environment, take snapshot with label `:before`
 
 ```bash
 ./scripts/dev/curriculum/automate screenshot :before
@@ -77,6 +46,15 @@ Compate the versions
 # ...
 ```
 
+#### Using `--basepath`
+Generate some screenshots of the production environment
+
+```bash
+./scripts/dev/curriculum/automate screenshot :foo --basepath https://www.thenational.academy/
+# ...
+```
+
+
 
 ### `fixtures`
 Generates fixtures for curriculum squads tests

diff --git a/scripts/dev/curriculum/_commands/__snapshots__/helpers.test.ts.snap b/scripts/dev/curriculum/_commands/__snapshots__/helpers.test.ts.snap
@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`wrapHtmlLayout wraps content with layout 1`] = `
+"
+      <html>
+        <body>
+          <style>
+              html {
+                box-sizing: border-box;
+                font-family: sans-serif;
+                font-size: 14px;
+              }
+              html, body {
+                margin: 0;
+                padding: 0;
+              }
+              *, *:before, *:after {
+                box-sizing: inherit;
+              }
+              .column-header{
+                background: #eeeeee;
+                padding: 8px;
+                position: sticky;
+                top: 8px;
+                z-index: 9999;
+                border-radius: 5px;
+              }
+              .nav-item{
+                margin:8px 0;
+                display:flex;
+                align-items: center;
+              }
+              .nav-item a {
+                text-wrap: nowrap;
+                color:#333;
+              }
+              .nav-item a:hover{
+                color: #777;
+              }
+              .pill{
+                background:#333;
+                color:#fff;
+                padding:2px 4px;
+                border-radius:3px;
+              }
+              .image-holder{
+                position: relative;
+                overflow: hidden;
+              }
+              .diff-image{
+                position: absolute;
+                top: 0;
+                left: 0;
+                bottom: 0;
+                right: 0;
+                mix-blend-mode: difference;
+              }
+              .image-holder img{
+                width: 100%;
+              }
+          </style>
+          <div style="display: flex;">
+            <p>Hello world</p>
+          </div>
+        </body>
+      </html>
+    "
+`;