import { clickTarget , pressKey , startTimeline } from "@jspsych/test-utils" ; import sketchpad from "." ; jest . useFakeTimers ( ) ; describe ( "sketchpad" , ( ) => { test ( "basic load with defaults" , async ( ) => { const { displayElement , getHTML , expectFinished } = await startTimeline ( [ { type : sketchpad , } , ] ) ; const canvas = displayElement . querySelector ( "canvas" ) ; expect ( canvas ) . not . toBeNull ( ) ; expect ( displayElement . querySelector ( "#sketchpad-clear" ) ) . not . toBeNull ( ) ; expect ( displayElement . querySelector ( "#sketchpad-undo" ) ) . not . toBeNull ( ) ; expect ( displayElement . querySelector ( "#sketchpad-redo" ) ) . not . toBeNull ( ) ; clickTarget ( displayElement . querySelector ( "#sketchpad-end" ) ) ; await expectFinished ( ) ; } ) ; test ( "displays canvas with different dimensions" , async ( ) => { const { displayElement , getHTML , expectFinished } = await startTimeline ( [ { type : sketchpad , canvas_width : 800 , canvas_height : 300 , } , ] ) ; const canvas = displayElement . querySelector ( "canvas" ) ; expect ( canvas . getAttribute ( "width" ) ) . toBe ( "800" ) ; expect ( canvas . getAttribute ( "height" ) ) . toBe ( "300" ) ; clickTarget ( displayElement . querySelector ( "#sketchpad-end" ) ) ; await expectFinished ( ) ; } ) ; test ( "renders a circular canvas" , async ( ) => { const { displayElement , getHTML , expectFinished } = await startTimeline ( [ { type : sketchpad , canvas_diameter : 300 , canvas_shape : "circle" , } , ] ) ; const canvas = displayElement . querySelector ( "canvas" ) ; expect ( canvas . className ) . toContain ( "sketchpad-circle" ) ; expect ( canvas . getAttribute ( "width" ) ) . toBe ( "300" ) ; expect ( canvas . getAttribute ( "height" ) ) . toBe ( "300" ) ; clickTarget ( displayElement . querySelector ( "#sketchpad-end" ) ) ; await expectFinished ( ) ; } ) ; test ( "prompt shows abovecanvas" , async ( ) => { const { displayElement , getHTML , expectFinished } = await startTimeline ( [ { type : sketchpad , prompt : '<p id="prompt">Foo</p>' , prompt_location : "abovecanvas" , } , ] ) ; const display_content = Array . from ( displayElement . children , ( x ) => { return ( x as HTMLElement ) . id ; } ) ; expect ( display_content . indexOf ( "prompt" ) ) . toBeLessThan ( display_content . indexOf ( "sketchpad-canvas" ) ) ; clickTarget ( displayElement . querySelector ( "#sketchpad-end" ) ) ; await expectFinished ( ) ; } ) ; test ( "prompt shows belowcanvas" , async ( ) => { const { displayElement , getHTML , expectFinished } = await startTimeline ( [ { type : sketchpad , prompt : '<p id="prompt">Foo</p>' , prompt_location : "belowcanvas" , } , ] ) ; const display_content = Array . from ( displayElement . children , ( x ) => { return ( x as HTMLElement ) . id ; } ) ; expect ( display_content . indexOf ( "prompt" ) ) . toBeGreaterThan ( display_content . indexOf ( "sketchpad-canvas" ) ) ; expect ( display_content . indexOf ( "prompt" ) ) . toBeGreaterThan ( display_content . indexOf ( "sketchpad-controls" ) ) ; expect ( display_content . indexOf ( "prompt" ) ) . toBeLessThan ( display_content . indexOf ( "finish-btn" ) ) ; clickTarget ( displayElement . querySelector ( "#sketchpad-end" ) ) ; await expectFinished ( ) ; } ) ; test ( "prompt shows belowbutton" , async ( ) => { const { displayElement , getHTML , expectFinished } = await startTimeline ( [ { type : sketchpad , prompt : '<p id="prompt">Foo</p>' , prompt_location : "belowbutton" , } , ] ) ; const display_content = Array . from ( displayElement . children , ( x ) => { return ( x as HTMLElement ) . id ; } ) ; expect ( display_content . indexOf ( "prompt" ) ) . toBeGreaterThan ( display_content . indexOf ( "sketchpad-canvas" ) ) ; expect ( display_content . indexOf ( "prompt" ) ) . toBeGreaterThan ( display_content . indexOf ( "sketchpad-controls" ) ) ; expect ( display_content . indexOf ( "prompt" ) ) . toBeGreaterThan ( display_content . indexOf ( "finish-btn" ) ) ; clickTarget ( displayElement . querySelector ( "#sketchpad-end" ) ) ; await expectFinished ( ) ; } ) ; test ( "color palette generates correct buttons" , async ( ) => { const { displayElement , getHTML , expectFinished } = await startTimeline ( [ { type : sketchpad , stroke_color_palette : [ "#ff0000" , "green" , "#0000ff" ] , } , ] ) ; const buttons = displayElement . querySelectorAll ( "button.sketchpad-color-select" ) ; expect ( buttons . length ) . toBe ( 3 ) ; expect ( buttons [ 0 ] . getAttribute ( "data-color" ) ) . toBe ( "#ff0000" ) ; expect ( buttons [ 1 ] . getAttribute ( "data-color" ) ) . toBe ( "green" ) ; expect ( buttons [ 2 ] . getAttribute ( "data-color" ) ) . toBe ( "#0000ff" ) ; clickTarget ( displayElement . querySelector ( "#sketchpad-end" ) ) ; await expectFinished ( ) ; } ) ; test ( "redo_button_label changes text" , async ( ) => { const { displayElement , getHTML , expectFinished } = await startTimeline ( [ { type : sketchpad , redo_button_label : "foo" , } , ] ) ; const button = displayElement . querySelector ( "#sketchpad-redo" ) ; expect ( button . innerHTML ) . toBe ( "foo" ) ; clickTarget ( displayElement . querySelector ( "#sketchpad-end" ) ) ; await expectFinished ( ) ; } ) ; test ( "undo_button_label changes text" , async ( ) => { const { displayElement , getHTML , expectFinished } = await startTimeline ( [ { type : sketchpad , undo_button_label : "foo" , } , ] ) ; const button = displayElement . querySelector ( "#sketchpad-undo" ) ; expect ( button . innerHTML ) . toBe ( "foo" ) ; clickTarget ( displayElement . querySelector ( "#sketchpad-end" ) ) ; await expectFinished ( ) ; } ) ; test ( "clear_button_label changes text" , async ( ) => { const { displayElement , getHTML , expectFinished } = await startTimeline ( [ { type : sketchpad , clear_button_label : "foo" , } , ] ) ; const button = displayElement . querySelector ( "#sketchpad-clear" ) ; expect ( button . innerHTML ) . toBe ( "foo" ) ; clickTarget ( displayElement . querySelector ( "#sketchpad-end" ) ) ; await expectFinished ( ) ; } ) ; test ( "finished_button_label changes text" , async ( ) => { const { displayElement , getHTML , expectFinished } = await startTimeline ( [ { type : sketchpad , finished_button_label : "foo" , } , ] ) ; const button = displayElement . querySelector ( "#sketchpad-end" ) ; expect ( button . innerHTML ) . toBe ( "foo" ) ; clickTarget ( displayElement . querySelector ( "#sketchpad-end" ) ) ; await expectFinished ( ) ; } ) ; } ) ;