All files / doc/assets LoginForm.stories-BtGZDOHT.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import{R as e}from"./iframe-Bn_dKj27.js";import{F as l,a as c}from"./FormField-BYt8PKU5.js";import{P as p}from"./index-CtfpA6-5.js";s.propTypes={action:p.string,onSubmit:p.func};function s({action:t="/api/login",onSubmit:a}){return e.createElement(l,{action:t,onSubmit:a},e.createElement(c,{name:"email",label:"email",type:"email"}),e.createElement(c,{name:"password",label:"password",type:"password"}),e.createElement(l.Submit,null))}s.__docgenInfo={description:"",methods:[],displayName:"LoginForm",props:{action:{defaultValue:{value:"'/api/login'",computed:!1},description:"",type:{name:"string"},required:!1},onSubmit:{description:"",type:{name:"func"},required:!1}}};const{expect:f,fn:S,userEvent:r}=__STORYBOOK_MODULE_TEST__,_={component:s,args:{action:"/api/login",onSubmit:S()}},n={render(t){const a=o=>{o.preventDefault(),t.onSubmit(o)};return e.createElement("form",{action:t.action,onSubmit:a,style:{display:"flex",flexDirection:"column"}},e.createElement("label",{htmlFor:"email"},"email"),e.createElement("input",{type:"email",id:"email",name:"email"}),e.createElement("label",{htmlFor:"password"},"password"),e.createElement("input",{type:"password",id:"password",name:"password"}),e.createElement("input",{type:"submit"}))},play:async({args:t,canvas:a,canvasElement:o})=>{const m=o.ownerDocument,E=await a.getByText("email");await r.click(E),await r.type(m.activeElement,"test@gmail.com");const v=await a.getByText("password");await r.click(v),await r.type(m.activeElement,"Password1234!{Enter}"),await f(t.onSubmit).toHaveBeenCalledOnce()}},i={...n,render(t){return e.createElement(s,{action:t.action,onSubmit:t.onSubmit})}};var d,u,w;n.parameters={...n.parameters,docs:{...(d=n.parameters)==null?void 0:d.docs,source:{originalSource:`{
  render(args) {
    const handleSubmit = event => {
      event.preventDefault();
      args.onSubmit(event);
    };
    return <form action={args.action} onSubmit={handleSubmit} style={{
      display: 'flex',
      flexDirection: 'column'
    }}>
        <label htmlFor="email">email</label>
        <input type="email" id="email" name="email" />
        <label htmlFor="password">password</label>
        <input type="password" id="password" name="password" />
        <input type="submit" />
      </form>;
  },
  play: async ({
    args,
    canvas,
    canvasElement
  }) => {
    const document = canvasElement.ownerDocument;
    const emailLabel = await canvas.getByText('email');
    await userEvent.click(emailLabel);
    await userEvent.type(document.activeElement, 'test@gmail.com');
    const passwordLabel = await canvas.getByText('password');
    await userEvent.click(passwordLabel);
    await userEvent.type(document.activeElement, 'Password1234!{Enter}');
    await expect(args.onSubmit).toHaveBeenCalledOnce();
  }
}`,...(w=(u=n.parameters)==null?void 0:u.docs)==null?void 0:w.source}}};var b,g,y;i.parameters={...i.parameters,docs:{...(b=i.parameters)==null?void 0:b.docs,source:{originalSource:`{
  ...ContrivedLoginForm,
  render(args) {
    return <LoginForm action={args.action} onSubmit={args.onSubmit} />;
  }
}`,...(y=(g=i.parameters)==null?void 0:g.docs)==null?void 0:y.source}}};const T=["ContrivedLoginForm","LoginFormInAction"];export{n as ContrivedLoginForm,i as LoginFormInAction,T as __namedExportsOrder,_ as default};