Take snapshots of form previews (#3203)

Co-authored-by: camertron <[email protected]>

lib/primer/static.rb

@@ -15,6 +15,7 @@ module Static
       audited_at: "audited_at.json",
       arguments: "arguments.json",
       previews: "previews.json",
+      form_previews: "form_previews.json",
       info_arch: "info_arch.json"
     }.freeze
 
@@ -50,6 +51,13 @@ def self.generate_previews
       Static::GeneratePreviews.call
     end
 
+    # Returns an array of hashes, one per example form, that contains some metadata and
+    # an array of all the form's previews. The preview data contains the Lookbook URL
+    # to each preview and its name.
+    def self.generate_form_previews
+      Static::GenerateFormPreviews.call
+    end
+
     # Returns an array of hashes, one per Primer component, that contains all the data needed
     # for the new primer.style docsite.
     def self.generate_info_arch

lib/primer/static/generate_form_previews.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+# :nocov:
+
+require "json"
+
+module Primer
+  module Static
+    # :nodoc:
+    module GenerateFormPreviews
+      class << self
+        def call
+          Lookbook.previews.filter_map do |preview|
+            next unless preview.preview_class == Primer::FormsPreview
+
+            {
+              name: preview.name,
+              lookup_path: preview.lookup_path,
+              examples: preview.scenarios.flat_map do |parent_scenario|
+                scenarios = parent_scenario.type == :scenario_group ? parent_scenario.scenarios : [parent_scenario]
+
+                scenarios.map do |scenario|
+                  snapshot_tag = scenario.tags.find { |tag| tag.tag_name == "snapshot" }
+                  snapshot = if snapshot_tag.nil?
+                               "false"
+                             elsif snapshot_tag.text.blank?
+                               "true"
+                             else
+                               snapshot_tag.text
+                             end
+                  {
+                    preview_path: scenario.lookup_path,
+                    name: scenario.name,
+                    snapshot: snapshot
+                  }
+                end
+              end
+            }
+          end
+        end
+      end
+    end
+  end
+end

lib/tasks/static.rake

@@ -1,7 +1,15 @@
 # frozen_string_literal: true
 
 namespace :static do
-  task dump: [:dump_statuses, :dump_constants, :dump_audited_at, :dump_previews, :dump_arguments, :dump_info_arch]
+  task dump: %i(
+    dump_statuses
+    dump_constants
+    dump_audited_at
+    dump_previews
+    dump_form_previews
+    dump_arguments
+    dump_info_arch
+  )
 
   task dump_statuses: :init_pvc do
     Primer::Static.dump(:statuses)
@@ -19,6 +27,10 @@ namespace :static do
     Primer::Static.dump(:previews)
   end
 
+  task dump_form_previews: :init_pvc do
+    Primer::Static.dump(:form_previews)
+  end
+
   task dump_arguments: ["docs:build_yard_registry", :init_pvc] do
     Primer::Static.dump(:arguments)
   end

previews/primer/forms_preview.rb

@@ -3,48 +3,69 @@
 module Primer
   # :nodoc:
   class FormsPreview < ViewComponent::Preview
+    # @snapshot
     def single_text_field_form; end
 
+    # @snapshot
     def multi_text_field_form; end
 
+    # @snapshot
     def text_field_and_checkbox_form; end
 
+    # @snapshot
     def horizontal_form; end
 
+    # @snapshot
     def composed_form; end
 
+    # @snapshot
     def submit_button_form; end
 
+    # @snapshot
     def radio_button_group_form; end
 
+    # @snapshot
     def check_box_group_form; end
 
+    # @snapshot
     def array_check_box_group_form; end
 
+    # @snapshot
     def select_form; end
 
+    # @snapshot
     def action_menu_form(route_format: :html)
       render_with_template(locals: { route_format: route_format })
     end
 
+    # @snapshot
     def radio_button_with_nested_form; end
 
+    # @snapshot
     def check_box_with_nested_form; end
 
+    # @snapshot
     def caption_template_form; end
 
+    # @snapshot
     def after_content_form; end
 
+    # @snapshot
     def invalid_form; end
 
+    # @snapshot
     def multi_input_form; end
 
+    # @snapshot
     def name_with_question_mark_form; end
 
+    # @snapshot
     def immediate_validation_form; end
 
+    # @snapshot
     def example_toggle_switch_form; end
 
+    # @snapshot
     def auto_complete_form; end
   end
 end

static/form_previews.json

@@ -0,0 +1,113 @@
+[
+  {
+    "name": "forms",
+    "lookup_path": "primer/forms",
+    "examples": [
+      {
+        "preview_path": "primer/forms/single_text_field_form",
+        "name": "single_text_field_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/multi_text_field_form",
+        "name": "multi_text_field_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/text_field_and_checkbox_form",
+        "name": "text_field_and_checkbox_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/horizontal_form",
+        "name": "horizontal_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/composed_form",
+        "name": "composed_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/submit_button_form",
+        "name": "submit_button_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/radio_button_group_form",
+        "name": "radio_button_group_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/check_box_group_form",
+        "name": "check_box_group_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/array_check_box_group_form",
+        "name": "array_check_box_group_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/select_form",
+        "name": "select_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/action_menu_form",
+        "name": "action_menu_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/radio_button_with_nested_form",
+        "name": "radio_button_with_nested_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/check_box_with_nested_form",
+        "name": "check_box_with_nested_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/caption_template_form",
+        "name": "caption_template_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/after_content_form",
+        "name": "after_content_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/invalid_form",
+        "name": "invalid_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/multi_input_form",
+        "name": "multi_input_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/name_with_question_mark_form",
+        "name": "name_with_question_mark_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/immediate_validation_form",
+        "name": "immediate_validation_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/example_toggle_switch_form",
+        "name": "example_toggle_switch_form",
+        "snapshot": "true"
+      },
+      {
+        "preview_path": "primer/forms/auto_complete_form",
+        "name": "auto_complete_form",
+        "snapshot": "true"
+      }
+    ]
+  }
+]

test/playwright/helpers.ts

@@ -2,7 +2,7 @@
 import fs from 'fs'
 import path from 'path'
 
-export interface ComponentPreviews {
+export interface ComponentPreview {
   name: string
   lookup_path: string
   examples: Array<{
@@ -13,9 +13,29 @@ export interface ComponentPreviews {
   }>
 }
 
-export function getPreviewURLs(): ComponentPreviews[] {
+export interface FormPreview {
+  name: string
+  lookup_path: string
+  examples: Array<{
+    name: string
+    snapshot: string
+    preview_path: string
+  }>
+}
+
+export function getPreviewURLs(): ComponentPreview[] {
   const jsonString = fs.readFileSync(path.join(__dirname, '../../static/previews.json'), {encoding: 'utf8', flag: 'r'})
 
   // read file contents
   return JSON.parse(jsonString)
 }
+
+export function getFormPreviewURLs(): FormPreview[] {
+  const jsonString = fs.readFileSync(path.join(__dirname, '../../static/form_previews.json'), {
+    encoding: 'utf8',
+    flag: 'r',
+  })
+
+  // read file contents
+  return JSON.parse(jsonString)
+}

test/playwright/snapshots.test.ts

@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import {test, expect} from '@playwright/test'
-import {getPreviewURLs} from './helpers'
-import type {ComponentPreviews} from './helpers'
+import {getPreviewURLs, getFormPreviewURLs} from './helpers'
+import type {ComponentPreview, FormPreview} from './helpers'
 
-const previewsJson: ComponentPreviews[] = getPreviewURLs()
+const previewsJson: ComponentPreview[] = getPreviewURLs()
+const formPreviewsJson: FormPreview[] = getFormPreviewURLs()
 
 test.beforeEach(async ({page}, testInfo) => {
   testInfo.snapshotSuffix = ''
@@ -14,6 +15,11 @@ test('Preview Json exists', () => {
   expect(previewsJson.length).toBeGreaterThan(0)
 })
 
+test('Form Preview Json exists', () => {
+  expect(formPreviewsJson).toBeDefined()
+  expect(formPreviewsJson.length).toBeGreaterThan(0)
+})
+
 const themes = [
   'light',
   'light_colorblind',
@@ -25,7 +31,7 @@ const themes = [
 ]
 
 test.describe('generate snapshots', () => {
-  for (const preview of previewsJson) {
+  for (const preview of [...previewsJson, ...formPreviewsJson] as Array<ComponentPreview | FormPreview>) {
     for (const example of preview.examples) {
       if (example.snapshot !== 'false') {
         if (example.snapshot === 'interactive') {