RenewCMS/features/image_variants_editor_picker.feature

Feature: The editor's Variant select and the warning on blocks whose variant is gone

  As an owner or admin writing an article
  I want to choose a variant when I insert an image from the library, and be warned when a variant used by an image in my article was deleted or disabled
  So that the article asks the right size and I notice before readers get an error

  Background:
    Given the spec of record is docs/design/screens/image-variants.md section 6 and its states 6a to 6e, docs/design/screens/media-picker.md, the board docs/design/source/RenewCMS Screens Image variants.dc.html drawn by VariantsFrame.dc.html
    And this slice is SPA only: it uses GET /v1/image-variants (owner/admin, features/image-variants.feature) and the media library API unchanged, and builds on features/editor_media_picker.feature, which stays as it is except where this file says so
    And the Settings screens and the media page are not in this slice
    And the Variant select is a USelectMenu in the Library tab's selection panel, under the thumbnail row, before the "Alt text (optional)" field
    And the list of variants is requested with GET /v1/image-variants once per opening of the dialog, when the Library tab first shows an image selection, and only enabled variants are offered
    And a variant option reads "<Name> · <dimensions> · <format>" where the name is capitalised, the dimensions read "400×300", "800 × auto" or "auto × 2400" as in the Settings list, and the format reads WebP, JPEG, PNG or Original; the first option reads "Original · <width>×<height> · <JPEG|PNG|WEBP>" from the selected image
    And the options are Original first, then the enabled variants in the order the API returns them (name ascending)
    And the url line under the select shows what will be inserted, in mono 12 px muted: "/static/uploadedImages/<storedName>" for Original and "/static/uploadedImages/<storedName>?v=<name>" for a variant (the design's "/media/<file>" is replaced per the design's own implementation notes)
    And the select label reads "Variant" (medium weight), the control is 40 px high on desktop and 44 px high with 16 px text on mobile, and its open list has 36 px options on desktop and 44 px on mobile with a check on the selected one
    And the fixture is the library of features/editor_media_picker.feature (north-wall.jpg id 1 stored "1.jpg", 4032 x 3024 JPEG, 3.9 MB) and the variants thumb (cover 400 x 300 webp), card (inside 800 x auto webp), hero (cover 1200 x 630 webp), og (cover 1200 x 630 jpeg), square (cover 600 x 600 jpeg), all enabled, in name order card, hero, og, square, thumb, and "print" disabled
    And every new English string has a French entry in web/src/i18n/messages.ts, and no comment is added to any file

  Rule: The Variant select

    Scenario: Selecting an image shows the select with Original chosen
      Given the Library tab shows the fixture
      When the user selects "north-wall.jpg"
      Then GET /v1/image-variants is sent once
      And the panel shows the thumbnail row, then the label "Variant" over a select reading "Original · 4032×3024 · JPEG", then the url line "/static/uploadedImages/1.jpg", then the alt text field
      And "Insert image" is enabled

    Scenario: The open list offers Original and the enabled variants
      When the user opens the select
      Then the options read, in order:
        | Original · 4032×3024 · JPEG |
        | Card · 800 × auto · WebP    |
        | Hero · 1200×630 · WebP      |
        | Og · 1200×630 · JPEG        |
        | Square · 600×600 · JPEG     |
        | Thumb · 400×300 · WebP      |
      And "Print" is not offered
      And the select border is primary with a 1 px primary ring while it is open

    Scenario: Choosing a variant changes the url line
      When the user chooses "Hero · 1200×630 · WebP"
      Then the select reads that option and the url line reads "/static/uploadedImages/1.jpg?v=hero"

    Scenario: The choice is reset when another image is selected
      Given "north-wall.jpg" is selected with the variant "Hero"
      When the user selects "kitchen-after.webp"
      Then the select reads "Original · 2400×1600 · WEBP" and the url line has no "?v="

    Scenario: The variants list is not requested again within one opening
      Given the user selected one image and then another
      Then GET /v1/image-variants was sent once

    Scenario: No variants defined
      Given GET /v1/image-variants resolves {"items": []}
      When the user selects "north-wall.jpg"
      Then the select offers only "Original · 4032×3024 · JPEG"
      And the help line reads "No variants defined. Add one in Settings → Media → Variants." with an info icon, and "Settings → Media → Variants" links to /settings/media/variants
      And the url line is not shown

    Scenario: Only disabled variants count as none
      Given every variant is disabled
      Then the select offers only Original and the "No variants defined" help shows

    Scenario: An SVG offers only Original
      When the user selects "logo-renew.svg"
      Then the select offers only "Original · Vector · SVG" and no help line shows

    Scenario Outline: The variants list fails to load
      Given GET /v1/image-variants <failure>
      When the user selects "north-wall.jpg"
      Then the select offers only Original, no error alert shows, and "Insert image" is enabled

      Examples:
        | failure                      |
        | resolves with a 500 response |
        | resolves with a 403 response |
        | never reaches the server     |

    Scenario: Keyboard
      Given the select has focus
      Then Enter or Space opens it, the arrow keys move between options, Enter chooses, Escape closes it and returns focus to the select

  Rule: Inserting a variant

    Scenario Outline: The inserted url carries the variant
      Given "north-wall.jpg" is selected with the variant "<option>" and the alt text "A wall"
      When the user activates "Insert image"
      Then insertImage is called with "<src>", "A wall" and image id 1
      And the image is in the editor's content with data-image-id 1
      And SaveStatus reads "Unsaved changes", the toast "Image added" shows, the dialog closes and no POST, PATCH or DELETE has been sent

      Examples:
        | option   | src                                  |
        | Original | /static/uploadedImages/1.jpg         |
        | Hero     | /static/uploadedImages/1.jpg?v=hero  |
        | Thumb    | /static/uploadedImages/1.jpg?v=thumb |

    Scenario: The Upload tab is unchanged
      When the user inserts an image from the Upload tab
      Then the select is not shown and the inserted url has no "?v="

    Scenario: An image already in the article can be inserted again with another variant
      When the user selects "north-wall.jpg", which carries "In this article", chooses "Thumb" and activates "Insert image"
      Then a second image node with src ending "?v=thumb" and data-image-id 1 is inserted

    Scenario: The cache-busting parameter coexists with the variant
      Given the media revision is 3
      Then an image node whose src is "/static/uploadedImages/1.jpg?v=hero" is displayed as "/static/uploadedImages/1.jpg?v=hero&rev=3"

    Scenario: Leaving without inserting changes nothing
      Given a variant is chosen
      When the user cancels, closes or presses Escape
      Then the dialog closes, the editor's content and dirty state are unchanged and no toast shows

  Rule: A block whose variant was deleted or disabled

    Background:
      Given the article body holds an image node with src "/static/uploadedImages/1.jpg?v=hero" and data-image-id 1

    Scenario: A deleted variant
      Given GET /v1/image-variants resolves without "hero"
      When the editor opens the article
      Then the block keeps its src and its data-image-id
      And the block is a 1 px --ui-warning bordered box holding the image dimmed to 50 % with an image-off icon, then a warning alert
      And the alert has a triangle-alert icon, the title "Variant 'hero' no longer exists.", the text "This image returns an error on the public site." and a button "Pick another variant" with a layers icon
      And the block does not show "This image is no longer available"

    Scenario: A disabled variant
      Given GET /v1/image-variants resolves with "hero" disabled
      When the editor opens the article
      Then the same block shows the title "Variant 'hero' is disabled." and the same text and button

    Scenario: An enabled variant has no warning but a chip
      Given GET /v1/image-variants resolves with "hero" enabled (cover 1200 x 630)
      Then the block shows no warning
      And a chip "hero · 1200×630" sits 8 px from the top-left of the image, mono 12 px medium, 20 px high, on --ui-bg with a 1 px accented border

    Scenario: A disabled variant still shows its chip
      Given "hero" is disabled
      Then the chip "hero · 1200×630" shows on the dimmed image

    Scenario: A deleted variant shows no chip
      Given "hero" is deleted
      Then no chip shows on the block

    Scenario: A block without a variant is unchanged
      Given an image node with src "/static/uploadedImages/1.jpg"
      Then it shows no chip and no warning and behaves as before

    Scenario: The variants list is requested only when needed
      Given the article body holds no "?v=" in an image src
      When the editor opens the article
      Then GET /v1/image-variants is not sent

    Scenario: The list is requested once for all blocks
      Given the body holds two blocks with "?v=hero" and "?v=thumb"
      Then GET /v1/image-variants is sent once and each block is judged against it

    Scenario Outline: The variants list fails
      Given GET /v1/image-variants <failure>
      When the editor opens the article containing "?v=hero"
      Then no warning and no chip show and the editor stays usable

      Examples:
        | failure                      |
        | resolves with a 500 response |
        | resolves with a 403 response |
        | never reaches the server     |

    Scenario: Pick another variant opens the select on the block
      When the user activates "Pick another variant"
      Then the same Variant select opens anchored on the alert with Original and the enabled variants
      And Escape closes it and returns focus to the button

    Scenario Outline: Choosing an option rewrites the block
      Given the select is open on the block of image 1
      When the user chooses "<option>"
      Then the block's src becomes "<src>", its data-image-id and alt are unchanged
      And the warning disappears and the chip shows "<chip>" when a variant is chosen
      And SaveStatus reads "Unsaved changes" and no request other than the already made list request is sent

      Examples:
        | option   | src                                  | chip             |
        | Thumb    | /static/uploadedImages/1.jpg?v=thumb | thumb · 400×300  |
        | Original | /static/uploadedImages/1.jpg         | no chip          |

    Scenario: Only the clicked block is rewritten
      Given two blocks of image 1 both with "?v=hero"
      When the user rewrites the first one
      Then the second keeps "?v=hero" and its warning

    Scenario: The warning is not saved in the article
      When the article is saved
      Then the saved body contains the img element with its src and no warning markup

    Scenario: The warning is announced
      Then the alert has role="alert" semantics or an aria-live region so that a screen reader reads the title

    Scenario: Touch targets
      Given the viewport is below 640 px
      Then the "Pick another variant" button is at least 44 px high

  Rule: Accessibility, vocabulary and hygiene

    Scenario: Vocabulary
      Then the screens say "variant", never "thumbnail preset", "version" or "rendition"

    Scenario: French strings
      Given the locale is French
      Then every new string has a French entry and no English string appears