<script lang="ts">
    export let name: string;
    export let actualValue: any;
    export let not: boolean = false;
    export let expectedValue: any;

    const success = not ?
        expectedValue !== actualValue :
        expectedValue === actualValue;
    const failure = !success;
</script>

<style lang="scss">
	tr {
		font-family: monospace;
        white-space: nowrap;

		td {
			padding: 8px;
		}

		border-left: 2px solid gray;

		&.success > :first-child {
			border-left: 8px solid green;
		}

		&.failure > :first-child {
			border-left: 8px solid red;
		}

        .not {
            color: gray;
        }
	}
</style>

<tr class:success class:failure>
    <td>{name}</td>
    <td>{#if not}<span class="not">!</span>{/if}{expectedValue}</td>
    <td>{actualValue}</td>
</tr>
