Update styles.tsx unit tests to pass type of argument

[talha131]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Not relevant

Current Behavior

Not relevant

Steps to Reproduce (for bugs)

Not relevant

Context

I am using material-ui@next with Typescript. Unfortunately, the project has sparse information on usage with Typescript especially with withStyles. Though #8598 promises a guide on Typescript, meanwhile I have been using styles typescript unit tests to learn withStyles usage.

Taking cue from the example 2 in unit test I coded a component this way,

const TopBarComponent: React.SFC<Props & WithStyles<ComponentClassNames>> = ({
  title,
  leftButton,
  uiStore,
  classes
}) => (
    <AppBar position="static">
      <Toolbar>
        <IconButton color="contrast">
          <HomeIcon />
        </IconButton>
        <Typography type="title" color="inherit" className={classes!.flex}>
          {title}
        </Typography>
        <Button color="contrast" onClick={uiStore.topBarLeftButtonClicked}>
          {getButtonLabel(leftButton)}
        </Button>
      </Toolbar>
    </AppBar>
  );

const TopBar = withStyles(styles)(TopBarComponent); // (A)

which gave me this error

error TS2322: Type '{ title: "Page not found"; leftButton: ButtonAction.SignIn; uiStore: UIStore; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<Props & WithStyles<"flex"> & StyledCompo...'.
  Type '{ title: "Page not found"; leftButton: ButtonAction.SignIn; uiStore: UIStore; }' is not assignable to type 'Readonly<Props & WithStyles<"flex"> & StyledComponentProps<string>>'.
    Property 'classes' is missing in type '{ title: "Page not found"; leftButton: ButtonAction.SignIn; uiStore: UIStore; }'.

After wasting a lot of time, these posts by @pelotom provided the hint,

1. Typescript Question about WithStyles on beta16 #8635 (comment)
2. Typescript type error in component returned by withStyles() #8447 (comment)

I changed my line (A) to

const TopBar = withStyles(styles)<Props>(TopBarComponent);

This fixed the TS error.

Now, I don't have enough experience in Typescript to understand why unit tests does not need to pass props type. But could you please update the unit tests now and keep it updated in the future such that it shows how to handle all sorts of usage. I mean, if unit tests had the example this way

// Example 2
const Component: React.SFC<
  ComponentProps & WithStyles<ComponentClassNames>
> = ({ classes, text }) => <div className={classes.root}>{text}</div>;

const StyledExampleTwo = withStyles(styles)<ComponentProps>(Component);  // ---> This line
<StyledExampleTwo text="I am styled!" />;

It would have explained the usage more comprehensively.

Bottom line is, while the Typescript guide is underway, please use unit tests to provide thorough usage examples

Also, can anyone explain why does the unit test work without passing prop type ComponentProps, and my component fails to compile unless I pass the prop type Props?

Your Environment

Tech	Version
Material-UI	v1.0.0-beta.16
React	Not relevant
browser	Not relevant
etc	Not relevant

[pelotom]

Could you post a complete self-contained example where styles, Props and ComponentClassNames are all defined? It's a lot of work and error-prone to try to reconstruct your problem otherwise.

Also, can anyone explain why does the unit test work without passing prop type ComponentProps, and my component fails to compile unless I pass the prop type Props?

The tsconfig.json used by the unit tests is not using all the strictness settings it could be yet, which might account for that. Also, what version of TypeScript are you using?

[oliviertassinari]

Closing as we don't have enough information to help.

[oliviertassinari]

@pelotom Thanks for all your TypeScript support, it's really appreciated!